forked from tsai/budibase
10 changed files with 33 additions and 486 deletions
@ -1,3 +1,3 @@ |
|||||
<script> |
<script> |
||||
store.setCurrentPage($params.page) |
store.setCurrentPage($params.page) |
||||
</script> |
</script> |
||||
|
|||||
@ -1,363 +0,0 @@ |
|||||
import { load, makePage, makeScreen } from "./testAppDef" |
|
||||
import { EVENT_TYPE_MEMBER_NAME } from "../src/state/eventHandlers" |
|
||||
|
|
||||
describe("initialiseApp (binding)", () => { |
|
||||
it("should populate root element prop from store value", async () => { |
|
||||
const { dom } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
className: { |
|
||||
"##bbstate": "divClassName", |
|
||||
"##bbsource": "state", |
|
||||
"##bbstatefallback": "default", |
|
||||
}, |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
const rootDiv = dom.window.document.body.children[0] |
|
||||
expect(rootDiv.className.includes("default")).toBe(true) |
|
||||
}) |
|
||||
|
|
||||
it("should update root element from store", async () => { |
|
||||
const { dom, app } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
className: { |
|
||||
"##bbstate": "divClassName", |
|
||||
"##bbsource": "state", |
|
||||
"##bbstatefallback": "default", |
|
||||
}, |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
app.pageStore().update(s => { |
|
||||
s.divClassName = "newvalue" |
|
||||
return s |
|
||||
}) |
|
||||
|
|
||||
const rootDiv = dom.window.document.body.children[0] |
|
||||
expect(rootDiv.className.includes("newvalue")).toBe(true) |
|
||||
}) |
|
||||
|
|
||||
it("should update root element from store, using binding expression", async () => { |
|
||||
const { dom, app } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
className: "state.divClassName", |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
app.pageStore().update(s => { |
|
||||
s.divClassName = "newvalue" |
|
||||
return s |
|
||||
}) |
|
||||
|
|
||||
const rootDiv = dom.window.document.body.children[0] |
|
||||
expect(rootDiv.className.includes("newvalue")).toBe(true) |
|
||||
}) |
|
||||
|
|
||||
it("should populate child component with store value", async () => { |
|
||||
const { dom } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
_children: [ |
|
||||
{ |
|
||||
_component: "testlib/h1", |
|
||||
text: { |
|
||||
"##bbstate": "headerOneText", |
|
||||
"##bbsource": "state", |
|
||||
"##bbstatefallback": "header one", |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
_component: "testlib/h1", |
|
||||
text: { |
|
||||
"##bbstate": "headerTwoText", |
|
||||
"##bbsource": "state", |
|
||||
"##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( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
_children: [ |
|
||||
{ |
|
||||
_component: "testlib/h1", |
|
||||
text: { |
|
||||
"##bbstate": "headerOneText", |
|
||||
"##bbsource": "state", |
|
||||
"##bbstatefallback": "header one", |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
_component: "testlib/h1", |
|
||||
text: { |
|
||||
"##bbstate": "headerTwoText", |
|
||||
"##bbsource": "state", |
|
||||
"##bbstatefallback": "header two", |
|
||||
}, |
|
||||
}, |
|
||||
], |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
app.pageStore().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") |
|
||||
}) |
|
||||
|
|
||||
it("should populate screen child with store value", async () => { |
|
||||
const { dom, app } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
_children: [ |
|
||||
{ |
|
||||
_component: "##builtin/screenslot", |
|
||||
text: "header one", |
|
||||
}, |
|
||||
], |
|
||||
}), |
|
||||
[ |
|
||||
makeScreen("/", { |
|
||||
_component: "testlib/div", |
|
||||
className: "screen-class", |
|
||||
_children: [ |
|
||||
{ |
|
||||
_component: "testlib/h1", |
|
||||
text: { |
|
||||
"##bbstate": "headerOneText", |
|
||||
"##bbsource": "state", |
|
||||
"##bbstatefallback": "header one", |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
_component: "testlib/h1", |
|
||||
text: { |
|
||||
"##bbstate": "headerTwoText", |
|
||||
"##bbsource": "state", |
|
||||
"##bbstatefallback": "header two", |
|
||||
}, |
|
||||
}, |
|
||||
], |
|
||||
}), |
|
||||
] |
|
||||
) |
|
||||
|
|
||||
app.screenStore().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(1) |
|
||||
|
|
||||
const screenRoot = rootDiv.children[0] |
|
||||
|
|
||||
expect(screenRoot.children.length).toBe(1) |
|
||||
expect(screenRoot.children[0].children.length).toBe(2) |
|
||||
expect(screenRoot.children[0].children[0].innerText).toBe( |
|
||||
"header 1 - new val" |
|
||||
) |
|
||||
expect(screenRoot.children[0].children[1].innerText).toBe( |
|
||||
"header 2 - new val" |
|
||||
) |
|
||||
}) |
|
||||
|
|
||||
it("should fire events", async () => { |
|
||||
const { dom, app } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/button", |
|
||||
onClick: [ |
|
||||
event("Set State", { |
|
||||
path: "address", |
|
||||
value: "123 Main Street", |
|
||||
}), |
|
||||
], |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
const button = dom.window.document.body.children[0] |
|
||||
expect(button.tagName).toBe("BUTTON") |
|
||||
|
|
||||
let storeAddress |
|
||||
app.pageStore().subscribe(s => { |
|
||||
storeAddress = s.address |
|
||||
}) |
|
||||
button.dispatchEvent(new dom.window.Event("click")) |
|
||||
expect(storeAddress).toBe("123 Main Street") |
|
||||
}) |
|
||||
|
|
||||
it("should alter event parameters based on store values", async () => { |
|
||||
const { dom, app } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/button", |
|
||||
onClick: [ |
|
||||
event("Set State", { |
|
||||
path: "address", |
|
||||
value: { |
|
||||
"##bbstate": "sourceaddress", |
|
||||
"##bbsource": "state", |
|
||||
"##bbstatefallback": "fallback address", |
|
||||
}, |
|
||||
}), |
|
||||
], |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
const button = dom.window.document.body.children[0] |
|
||||
expect(button.tagName).toBe("BUTTON") |
|
||||
|
|
||||
let storeAddress |
|
||||
app.pageStore().subscribe(s => { |
|
||||
storeAddress = s.address |
|
||||
}) |
|
||||
|
|
||||
button.dispatchEvent(new dom.window.Event("click")) |
|
||||
expect(storeAddress).toBe("fallback address") |
|
||||
|
|
||||
app.pageStore().update(s => { |
|
||||
s.sourceaddress = "new address" |
|
||||
return s |
|
||||
}) |
|
||||
|
|
||||
button.dispatchEvent(new dom.window.Event("click")) |
|
||||
expect(storeAddress).toBe("new address") |
|
||||
}) |
|
||||
|
|
||||
it("should take event parameters from context values", async () => { |
|
||||
const { dom, app } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/button", |
|
||||
_id: "with_context", |
|
||||
onClick: [ |
|
||||
event("Set State", { |
|
||||
path: "address", |
|
||||
value: { |
|
||||
"##bbstate": "testKey", |
|
||||
"##bbsource": "context", |
|
||||
"##bbstatefallback": "fallback address", |
|
||||
}, |
|
||||
}), |
|
||||
], |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
const button = dom.window.document.body.children[0] |
|
||||
expect(button.tagName).toBe("BUTTON") |
|
||||
|
|
||||
let storeAddress |
|
||||
app.pageStore().subscribe(s => { |
|
||||
storeAddress = s.address |
|
||||
}) |
|
||||
|
|
||||
button.dispatchEvent(new dom.window.Event("click")) |
|
||||
expect(storeAddress).toBe("test value") |
|
||||
}) |
|
||||
}) |
|
||||
|
|
||||
it("should rerender components when their code is bound to the store ", async () => { |
|
||||
const { dom, app } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
_children: [ |
|
||||
{ |
|
||||
_component: "testlib/div", |
|
||||
_id: "n_clones_based_on_store", |
|
||||
className: "child_div", |
|
||||
}, |
|
||||
], |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
const rootDiv = dom.window.document.body.children[0] |
|
||||
expect(rootDiv.tagName).toBe("DIV") |
|
||||
expect(rootDiv.children.length).toBe(0) |
|
||||
|
|
||||
app.pageStore().update(s => { |
|
||||
s.componentCount = 3 |
|
||||
return s |
|
||||
}) |
|
||||
|
|
||||
expect(rootDiv.children.length).toBe(3) |
|
||||
expect(rootDiv.children[0].className.includes("child_div")).toBe(true) |
|
||||
|
|
||||
app.pageStore().update(s => { |
|
||||
s.componentCount = 5 |
|
||||
return s |
|
||||
}) |
|
||||
|
|
||||
expect(rootDiv.children.length).toBe(5) |
|
||||
expect(rootDiv.children[0].className.includes("child_div")).toBe(true) |
|
||||
|
|
||||
app.pageStore().update(s => { |
|
||||
s.componentCount = 0 |
|
||||
return s |
|
||||
}) |
|
||||
|
|
||||
expect(rootDiv.children.length).toBe(0) |
|
||||
}) |
|
||||
|
|
||||
it("should be able to read value from context, passed fromm parent, through code", async () => { |
|
||||
const { dom, app } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
_children: [ |
|
||||
{ |
|
||||
_component: "testlib/div", |
|
||||
_id: "n_clones_based_on_store", |
|
||||
className: { |
|
||||
"##bbstate": "index", |
|
||||
"##bbsource": "context", |
|
||||
"##bbstatefallback": "nothing", |
|
||||
}, |
|
||||
}, |
|
||||
], |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
const rootDiv = dom.window.document.body.children[0] |
|
||||
expect(rootDiv.tagName).toBe("DIV") |
|
||||
expect(rootDiv.children.length).toBe(0) |
|
||||
|
|
||||
app.pageStore().update(s => { |
|
||||
s.componentCount = 3 |
|
||||
return s |
|
||||
}) |
|
||||
|
|
||||
expect(rootDiv.children.length).toBe(3) |
|
||||
expect(rootDiv.children[0].className.includes("index_0")).toBe(true) |
|
||||
expect(rootDiv.children[1].className.includes("index_1")).toBe(true) |
|
||||
expect(rootDiv.children[2].className.includes("index_2")).toBe(true) |
|
||||
}) |
|
||||
|
|
||||
const event = (handlerType, parameters) => { |
|
||||
const e = {} |
|
||||
e[EVENT_TYPE_MEMBER_NAME] = handlerType |
|
||||
e.parameters = parameters |
|
||||
return e |
|
||||
} |
|
||||
@ -1,74 +0,0 @@ |
|||||
import { load, makePage } from "./testAppDef" |
|
||||
|
|
||||
describe("controlFlow", () => { |
|
||||
it("should display simple div, with always true render function", async () => { |
|
||||
const { dom } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
className: "my-test-class", |
|
||||
_id: "always_render", |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
expect(dom.window.document.body.children.length).toBe(1) |
|
||||
const child = dom.window.document.body.children[0] |
|
||||
expect(child.className.includes("my-test-class")).toBeTruthy() |
|
||||
}) |
|
||||
|
|
||||
it("should not display div, with always false render function", async () => { |
|
||||
const { dom } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
className: "my-test-class", |
|
||||
_id: "never_render", |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
expect(dom.window.document.body.children.length).toBe(0) |
|
||||
}) |
|
||||
|
|
||||
it("should display 3 divs in a looped render function", async () => { |
|
||||
const { dom } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
className: "my-test-class", |
|
||||
_id: "three_clones", |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
expect(dom.window.document.body.children.length).toBe(3) |
|
||||
|
|
||||
const child0 = dom.window.document.body.children[0] |
|
||||
expect(child0.className.includes("my-test-class")).toBeTruthy() |
|
||||
|
|
||||
const child1 = dom.window.document.body.children[1] |
|
||||
expect(child1.className.includes("my-test-class")).toBeTruthy() |
|
||||
|
|
||||
const child2 = dom.window.document.body.children[2] |
|
||||
expect(child2.className.includes("my-test-class")).toBeTruthy() |
|
||||
}) |
|
||||
|
|
||||
it("should display 3 div, in a looped render, as children", async () => { |
|
||||
const { dom } = await load( |
|
||||
makePage({ |
|
||||
_component: "testlib/div", |
|
||||
_children: [ |
|
||||
{ |
|
||||
_component: "testlib/div", |
|
||||
className: "my-test-class", |
|
||||
_id: "three_clones", |
|
||||
}, |
|
||||
], |
|
||||
}) |
|
||||
) |
|
||||
|
|
||||
expect(dom.window.document.body.children.length).toBe(1) |
|
||||
|
|
||||
const rootDiv = dom.window.document.body.children[0] |
|
||||
expect(rootDiv.children.length).toBe(3) |
|
||||
|
|
||||
expect(rootDiv.children[0].className.includes("my-test-class")).toBeTruthy() |
|
||||
expect(rootDiv.children[1].className.includes("my-test-class")).toBeTruthy() |
|
||||
expect(rootDiv.children[2].className.includes("my-test-class")).toBeTruthy() |
|
||||
}) |
|
||||
}) |
|
||||
Loading…
Reference in new issue