From 994aed6f5d516256c8c40182082f6b3e3ff5920c Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 24 Jan 2020 13:18:31 +0000 Subject: [PATCH] added DOM tests for client library --- packages/client/package.json | 1 + packages/client/src/createApp.js | 8 +- packages/client/src/index.js | 9 +- packages/client/tests/bindingDom.spec.js | 121 ++++++++++++++++++++ packages/client/tests/initialiseApp.spec.js | 73 ++++++++++++ packages/client/tests/testAppDef.js | 91 +++++++++++++++ 6 files changed, 299 insertions(+), 4 deletions(-) create mode 100644 packages/client/tests/bindingDom.spec.js create mode 100644 packages/client/tests/initialiseApp.spec.js create mode 100644 packages/client/tests/testAppDef.js diff --git a/packages/client/package.json b/packages/client/package.json index d6fe6b38d9..5cdc860416 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -48,6 +48,7 @@ "babel-jest": "^24.8.0", "fs-extra": "^8.1.0", "jest": "^24.8.0", + "jsdom": "^16.0.1", "rollup": "^1.12.0", "rollup-plugin-commonjs": "^10.0.0", "rollup-plugin-node-builtins": "^2.1.2", diff --git a/packages/client/src/createApp.js b/packages/client/src/createApp.js index df0b7b0d14..f279cda5ae 100644 --- a/packages/client/src/createApp.js +++ b/packages/client/src/createApp.js @@ -19,6 +19,12 @@ export const createApp = (componentLibraries, appDefinition, user) => { const childComponents = []; + if(hydrate) { + while (htmlElement.firstChild) { + htmlElement.removeChild(htmlElement.firstChild); + } + } + for(let childProps of childrenProps) { const {componentName, libName} = splitName(childProps._component); @@ -37,7 +43,7 @@ export const createApp = (componentLibraries, appDefinition, user) => { const component = new (componentLibraries[libName][componentName])({ target: htmlElement, props: componentProps, - hydrate, + hydrate:false, anchor }); diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 4121cbe192..f7003b816b 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -1,7 +1,7 @@ import { createApp } from "./createApp"; import { trimSlash } from "./common/trimSlash"; -export const loadBudibase = async (componentLibraries, props) => { +export const loadBudibase = async ({componentLibraries, props, window, localStorage}) => { const appDefinition = window["##BUDIBASE_APPDEFINITION##"]; @@ -36,8 +36,11 @@ export const loadBudibase = async (componentLibraries, props) => { const _app = createApp(componentLibraries, appDefinition, user); _app.hydrateChildren( [props], - document.body); + window.document.body); + return _app; }; -window.loadBudibase = loadBudibase; \ No newline at end of file +if(window) { + window.loadBudibase = loadBudibase; +} \ No newline at end of file diff --git a/packages/client/tests/bindingDom.spec.js b/packages/client/tests/bindingDom.spec.js new file mode 100644 index 0000000000..dd606c9477 --- /dev/null +++ b/packages/client/tests/bindingDom.spec.js @@ -0,0 +1,121 @@ +import { load } from "./testAppDef"; + +describe("initialiseApp", () => { + + it("should populate root element prop from store value", async () => { + + const {dom} = await load({ + _component: "testlib/div", + className: { + "##bbstate": "divClassName", + "##bbsource": "store", + "##bbstatefallback":"default" + } + }); + + const rootDiv = dom.window.document.body.children[0]; + expect(rootDiv.className).toBe("default"); + + }); + + it("should update root element from store", async () => { + + const {dom, app} = await load({ + _component: "testlib/div", + className: { + "##bbstate": "divClassName", + "##bbsource": "store", + "##bbstatefallback":"default" + } + }); + + app.store.update(s => { + s.divClassName = "newvalue"; + return s; + }); + + const rootDiv = dom.window.document.body.children[0]; + expect(rootDiv.className).toBe("newvalue"); + + }); + + + it("should populate child component with store value", async () => { + const {dom} = await load({ + _component: "testlib/div", + _children: [ + { + _component: "testlib/h1", + text: { + "##bbstate": "headerOneText", + "##bbsource": "store", + "##bbstatefallback":"header one" + } + }, + { + _component: "testlib/h1", + text: { + "##bbstate": "headerTwoText", + "##bbsource": "store", + "##bbstatefallback":"header two" + } + } + ] + }); + + const rootDiv = dom.window.document.body.children[0]; + + expect(rootDiv.children.length).toBe(2); + expect(rootDiv.children[0].tagName).toBe("H1"); + expect(rootDiv.children[0].innerText).toBe("header one"); + expect(rootDiv.children[1].tagName).toBe("H1"); + expect(rootDiv.children[1].innerText).toBe("header two"); + + }); + + + it("should populate child component with store value", async () => { + const {dom, app} = await load({ + _component: "testlib/div", + _children: [ + { + _component: "testlib/h1", + text: { + "##bbstate": "headerOneText", + "##bbsource": "store", + "##bbstatefallback":"header one" + } + }, + { + _component: "testlib/h1", + text: { + "##bbstate": "headerTwoText", + "##bbsource": "store", + "##bbstatefallback":"header two" + } + } + ] + }); + + app.store.update(s => { + s.headerOneText = "header 1 - new val"; + s.headerTwoText = "header 2 - new val"; + return s; + }); + + const rootDiv = dom.window.document.body.children[0]; + + expect(rootDiv.children.length).toBe(2); + expect(rootDiv.children[0].tagName).toBe("H1"); + expect(rootDiv.children[0].innerText).toBe("header 1 - new val"); + expect(rootDiv.children[1].tagName).toBe("H1"); + expect(rootDiv.children[1].innerText).toBe("header 2 - new val"); + + }); + + +}); + + + + diff --git a/packages/client/tests/initialiseApp.spec.js b/packages/client/tests/initialiseApp.spec.js new file mode 100644 index 0000000000..6b58189524 --- /dev/null +++ b/packages/client/tests/initialiseApp.spec.js @@ -0,0 +1,73 @@ +import { load } from "./testAppDef"; + +describe("initialiseApp", () => { + + it("should populate simple div with initial props", async () => { + + const {dom} = await load({ + _component: "testlib/div", + className: "my-test-class" + }); + + expect(dom.window.document.body.children.length).toBe(1); + const child = dom.window.document.body.children[0]; + expect(child.className).toBe("my-test-class"); + + }); + + it("should populate child component with props", async () => { + const {dom} = await load({ + _component: "testlib/div", + _children: [ + { + _component: "testlib/h1", + text: "header one" + }, + { + _component: "testlib/h1", + text: "header two" + } + ] + }); + + const rootDiv = dom.window.document.body.children[0]; + + expect(rootDiv.children.length).toBe(2); + expect(rootDiv.children[0].tagName).toBe("H1"); + expect(rootDiv.children[0].innerText).toBe("header one"); + expect(rootDiv.children[1].tagName).toBe("H1"); + expect(rootDiv.children[1].innerText).toBe("header two"); + + }); + + it("should append children when told to do so", async () => { + const {dom} = await load({ + _component: "testlib/div", + _children: [ + { + _component: "testlib/h1", + text: "header one" + }, + { + _component: "testlib/h1", + text: "header two" + } + ], + append: true + }); + + const rootDiv = dom.window.document.body.children[0]; + + expect(rootDiv.children.length).toBe(3); + expect(rootDiv.children[0].tagName).toBe("DIV"); + expect(rootDiv.children[0].className).toBe("default-child"); + expect(rootDiv.children[1].tagName).toBe("H1"); + expect(rootDiv.children[1].innerText).toBe("header one"); + expect(rootDiv.children[2].tagName).toBe("H1"); + expect(rootDiv.children[2].innerText).toBe("header two"); + }); + +}); + + + diff --git a/packages/client/tests/testAppDef.js b/packages/client/tests/testAppDef.js new file mode 100644 index 0000000000..0a08978784 --- /dev/null +++ b/packages/client/tests/testAppDef.js @@ -0,0 +1,91 @@ +import { JSDOM } from "jsdom"; +import { loadBudibase } from "../src/index"; + +export const load = async (props) => { + const dom = new JSDOM(``); + setAppDef(dom.window, props); + const app = await loadBudibase({ + componentLibraries: allLibs(dom.window), + window: dom.window, + localStorage: createLocalStorage(), + props + }); + return {dom, app}; +} + +const setAppDef = (window, props) => { + window["##BUDIBASE_APPDEFINITION##"] = ({ + componentLibraries: [], + props, + hierarchy: {}, + appRootPath: "" + }); +} + +const allLibs = (window) => ({ + testlib: maketestlib(window) +}); + +const createLocalStorage = () => { + const data = {}; + return ({ + getItem: key => data[key], + setItem: (key, value) => data[key] = value + }); +} + +const maketestlib = (window) => ({ + div: function(opts) { + + const node = window.document.createElement("DIV"); + const defaultChild = window.document.createElement("DIV"); + defaultChild.className = "default-child"; + node.appendChild(defaultChild); + + let currentProps = {...opts.props}; + let childNodes = []; + + const set = (props) => { + currentProps = Object.assign(currentProps, props); + node.className = currentProps.className || ""; + if(currentProps._children && currentProps._children.length > 0) { + if(currentProps.append) { + for(let c of childNodes) { + node.removeChild(c); + } + const components = currentProps._bb.appendChildren(currentProps._children, node); + childNodes = components.map(c => c._element); + } else { + currentProps._bb.hydrateChildren(currentProps._children, node); + } + } + } + + this.$set = set; + this._element = node; + set(opts.props); + opts.target.appendChild(node); + }, + + h1: function(opts) { + + const node = window.document.createElement("H1"); + + let currentProps = {...opts.props}; + + const set = (props) => { + currentProps = Object.assign(currentProps, props); + if(currentProps.text) { + node.innerText = currentProps.text; + } + } + + this.$set = set; + this._element = node; + set(opts.props); + opts.target.appendChild(node); + } +}); + + +