* refactoring server for screens & page layout restructure * Disable API calls, UI placeholders. * buildPropsHierarchy is gone & screen has url * Recent changes. * router * router * updated git-ignore to reinclude server/utilities/builder * modified cli - budi new create new file structure * Fix uuid import. * prettier fixes * prettier fixes * prettier fixes * page/screen restructure.. broken tests * all tests passing at last * screen routing tests * Working screen editor and preview. * Render page previews to the screen. * Key input lists to ensure new array references when updating styles. * Ensure the iframe html and body fills the container. * Save screens via the API. * Get all save APIs almost working. * Write pages.json to disk. * Use correct API endpoint for saving styles. * Differentiate between saving properties of screens and pages. * Add required fields to default pages layouts. * Add _css default property to newly created screens. * Add default code property. * page layout / screens - app output Co-authored-by: pngwn <pnda007@gmail.com>
137 lines
3.7 KiB
JavaScript
137 lines
3.7 KiB
JavaScript
import { load, makePage, makeScreen, walkComponentTree } from "./testAppDef"
|
|
import { isScreenSlot } from "../src/render/builtinComponents"
|
|
|
|
describe("screenRouting", () => {
|
|
it("should load correct screen, for initial URL", async () => {
|
|
const { page, screens } = pageWith3Screens()
|
|
const { dom } = await load(page, screens, "/screen2")
|
|
|
|
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(1)
|
|
expect(screenRoot.children[0].children[0].innerText).toBe("screen 2")
|
|
})
|
|
|
|
it("should be able to route to the correct screen", async () => {
|
|
const { page, screens } = pageWith3Screens()
|
|
const { dom, app } = await load(page, screens, "/screen2")
|
|
|
|
app.routeTo()("/screen3")
|
|
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(1)
|
|
expect(screenRoot.children[0].children[0].innerText).toBe("screen 3")
|
|
})
|
|
|
|
it("should destroy and unsubscribe all components on a screen whe screen is changed", async () => {
|
|
const { page, screens } = pageWith3Screens()
|
|
const { app } = await load(page, screens, "/screen2")
|
|
|
|
const nodes = createTrackerNodes(app)
|
|
|
|
app.routeTo()("/screen3")
|
|
|
|
expect(nodes.length > 0).toBe(true)
|
|
expect(
|
|
nodes.some(n => n.isDestroyed === false && isUnderScreenSlot(n.node))
|
|
).toBe(false)
|
|
expect(
|
|
nodes.some(n => n.isUnsubscribed === false && isUnderScreenSlot(n.node))
|
|
).toBe(false)
|
|
})
|
|
|
|
it("should not destroy and unsubscribe page and screenslot components when screen is changed", async () => {
|
|
const { page, screens } = pageWith3Screens()
|
|
const { app } = await load(page, screens, "/screen2")
|
|
|
|
const nodes = createTrackerNodes(app)
|
|
|
|
app.routeTo()("/screen3")
|
|
|
|
expect(nodes.length > 0).toBe(true)
|
|
expect(
|
|
nodes.some(n => n.isDestroyed === true && !isUnderScreenSlot(n.node))
|
|
).toBe(false)
|
|
})
|
|
})
|
|
|
|
const createTrackerNodes = app => {
|
|
const nodes = []
|
|
walkComponentTree(app.rootNode(), n => {
|
|
if (!n.component) return
|
|
const tracker = { node: n, isDestroyed: false, isUnsubscribed: false }
|
|
const _destroy = n.component.$destroy
|
|
n.component.$destroy = () => {
|
|
_destroy()
|
|
tracker.isDestroyed = true
|
|
}
|
|
const _unsubscribe = n.unsubscribe
|
|
if (!_unsubscribe) {
|
|
tracker.isUnsubscribed = undefined
|
|
} else {
|
|
n.unsubscribe = () => {
|
|
_unsubscribe()
|
|
tracker.isUnsubscribed = true
|
|
}
|
|
}
|
|
nodes.push(tracker)
|
|
})
|
|
return nodes
|
|
}
|
|
|
|
const isUnderScreenSlot = node =>
|
|
node.parentNode &&
|
|
(isScreenSlot(node.parentNode.props._component) ||
|
|
isUnderScreenSlot(node.parentNode))
|
|
|
|
const pageWith3Screens = () => ({
|
|
page: makePage({
|
|
_component: "testlib/div",
|
|
_children: [
|
|
{
|
|
_component: "##builtin/screenslot",
|
|
text: "header one",
|
|
},
|
|
],
|
|
}),
|
|
screens: [
|
|
makeScreen("/", {
|
|
_component: "testlib/div",
|
|
className: "screen-class",
|
|
_children: [
|
|
{
|
|
_component: "testlib/h1",
|
|
text: "screen 1",
|
|
},
|
|
],
|
|
}),
|
|
makeScreen("/screen2", {
|
|
_component: "testlib/div",
|
|
className: "screen-class",
|
|
_children: [
|
|
{
|
|
_component: "testlib/h1",
|
|
text: "screen 2",
|
|
},
|
|
],
|
|
}),
|
|
makeScreen("/screen3", {
|
|
_component: "testlib/div",
|
|
className: "screen-class",
|
|
_children: [
|
|
{
|
|
_component: "testlib/h1",
|
|
text: "screen 3",
|
|
},
|
|
],
|
|
}),
|
|
],
|
|
})
|