budibase/packages/client/tests/bindingDom.spec.js

107 lines
2.9 KiB
JavaScript

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")
})
})