diff --git a/tests/reactivity.test.ts b/tests/reactivity.test.ts index f822762b..756f0de5 100644 --- a/tests/reactivity.test.ts +++ b/tests/reactivity.test.ts @@ -6,7 +6,8 @@ import { makeTestFixture, nextMicroTick, nextTick, - snapshotEverything + snapshotEverything, + useLogLifecycle, } from "./helpers"; function createReactive(value: any, observer: any = () => {}) { @@ -1119,104 +1120,178 @@ describe("Reactivity: useState", () => { test("two components can subscribe to same context", async () => { const testContext = createReactive({ value: 123 }); - const steps: string[] = []; class Child extends Component { static template = xml``; contextObj = useState(testContext); setup() { - onWillRender(() => { - steps.push("child"); - }); + useLogLifecycle(); } } class Parent extends Component { static template = xml`
`; static components = { Child }; setup() { - onWillRender(() => { - steps.push("parent"); - }); + useLogLifecycle(); } } await mount(Parent, fixture); - expect(steps).toEqual(["parent", "child", "child"]); + expect([ + "Parent:setup", + "Parent:willStart", + "Parent:willRender", + "Child:setup", + "Child:willStart", + "Child:setup", + "Child:willStart", + "Parent:rendered", + "Child:willRender", + "Child:rendered", + "Child:willRender", + "Child:rendered", + "Child:mounted", + "Child:mounted", + "Parent:mounted", + ]).toBeLogged(); + expect(fixture.innerHTML).toBe("
123123
"); testContext.value = 321; await nextTick(); - expect(steps).toEqual(["parent", "child", "child", "child", "child"]); + expect([ + "Child:willRender", + "Child:rendered", + "Child:willRender", + "Child:rendered", + "Child:willPatch", + "Child:patched", + "Child:willPatch", + "Child:patched", + ]).toBeLogged(); expect(fixture.innerHTML).toBe("
321321
"); }); test("two components are updated in parallel", async () => { const testContext = createReactive({ value: 123 }); - const steps: string[] = []; class Child extends Component { static template = xml``; contextObj = useState(testContext); setup() { - onWillRender(async () => { - steps.push("render"); - }); + useLogLifecycle(); } } class Parent extends Component { static template = xml`
`; static components = { Child }; + setup() { + useLogLifecycle(); + } } + await mount(Parent, fixture); - expect(steps).toEqual(["render", "render"]); + expect([ + "Parent:setup", + "Parent:willStart", + "Parent:willRender", + "Child:setup", + "Child:willStart", + "Child:setup", + "Child:willStart", + "Parent:rendered", + "Child:willRender", + "Child:rendered", + "Child:willRender", + "Child:rendered", + "Child:mounted", + "Child:mounted", + "Parent:mounted", + ]).toBeLogged(); + expect(fixture.innerHTML).toBe("
123123
"); testContext.value = 321; await nextMicroTick(); await nextMicroTick(); - expect(steps).toEqual(["render", "render", "render", "render"]); + expect([ + "Child:willRender", + "Child:rendered", + "Child:willRender", + "Child:rendered", + ]).toBeLogged(); expect(fixture.innerHTML).toBe("
123123
"); + await nextTick(); + expect(["Child:willPatch", "Child:patched", "Child:willPatch", "Child:patched"]).toBeLogged(); expect(fixture.innerHTML).toBe("
321321
"); }); test("two independent components on different levels are updated in parallel", async () => { const testContext = createReactive({ value: 123 }); - const steps: string[] = []; class Child extends Component { static template = xml``; static components = {}; contextObj = useState(testContext); setup() { - onWillRender(() => { - steps.push("render"); - }); + useLogLifecycle(); } } class Parent extends Component { static template = xml`
`; static components = { Child }; + setup() { + useLogLifecycle(); + } } class GrandFather extends Component { static template = xml`
`; static components = { Child, Parent }; + setup() { + useLogLifecycle(); + } } await mount(GrandFather, fixture); - expect(fixture.innerHTML).toBe("
123
123
"); - expect(steps).toEqual(["render", "render"]); + expect([ + "GrandFather:setup", + "GrandFather:willStart", + "GrandFather:willRender", + "Child:setup", + "Child:willStart", + "Parent:setup", + "Parent:willStart", + "GrandFather:rendered", + "Child:willRender", + "Child:rendered", + "Parent:willRender", + "Child:setup", + "Child:willStart", + "Parent:rendered", + "Child:willRender", + "Child:rendered", + "Child:mounted", + "Parent:mounted", + "Child:mounted", + "GrandFather:mounted", + ]).toBeLogged(); testContext.value = 321; - await nextMicroTick(); await nextMicroTick(); - expect(steps).toEqual(["render", "render", "render", "render"]); expect(fixture.innerHTML).toBe("
123
123
"); + expect([ + "Child:willRender", + "Child:rendered", + "Child:willRender", + "Child:rendered", + ]).toBeLogged(); await nextTick(); expect(fixture.innerHTML).toBe("
321
321
"); + expect(["Child:willPatch", "Child:patched", "Child:willPatch", "Child:patched"]).toBeLogged(); }); test("one components can subscribe twice to same context", async () => { @@ -1374,15 +1449,12 @@ describe("Reactivity: useState", () => { test("destroyed component is inactive", async () => { const testContext = createReactive({ a: 123 }); - const steps: string[] = []; class Child extends Component { static template = xml``; contextObj = useState(testContext); setup() { - onWillRender(() => { - steps.push("child"); - }); + useLogLifecycle(); } } class Parent extends Component { @@ -1390,27 +1462,43 @@ describe("Reactivity: useState", () => { static components = { Child }; state = useState({ flag: true }); setup() { - onWillRender(() => { - steps.push("parent"); - }); + useLogLifecycle(); } } const parent = await mount(Parent, fixture); expect(fixture.innerHTML).toBe("
123
"); - expect(steps).toEqual(["parent", "child"]); + expect([ + "Parent:setup", + "Parent:willStart", + "Parent:willRender", + "Child:setup", + "Child:willStart", + "Parent:rendered", + "Child:willRender", + "Child:rendered", + "Child:mounted", + "Parent:mounted", + ]).toBeLogged(); testContext.a = 321; await nextTick(); - expect(steps).toEqual(["parent", "child", "child"]); + expect(["Child:willRender", "Child:rendered", "Child:willPatch", "Child:patched"]).toBeLogged(); parent.state.flag = false; await nextTick(); expect(fixture.innerHTML).toBe("
"); - expect(steps).toEqual(["parent", "child", "child", "parent"]); + expect([ + "Parent:willRender", + "Parent:rendered", + "Parent:willPatch", + "Child:willUnmount", + "Child:destroyed", + "Parent:patched", + ]).toBeLogged(); testContext.a = 456; await nextTick(); - expect(steps).toEqual(["parent", "child", "child", "parent"]); + expect([]).toBeLogged(); }); test("destroyed component before being mounted is inactive", async () => {