diff --git a/tests/components/__snapshots__/concurrency.test.ts.snap b/tests/components/__snapshots__/concurrency.test.ts.snap index 664866c0..fc3697b7 100644 --- a/tests/components/__snapshots__/concurrency.test.ts.snap +++ b/tests/components/__snapshots__/concurrency.test.ts.snap @@ -800,6 +800,64 @@ exports[`concurrent renderings scenario 15 3`] = ` }" `; +exports[`concurrent renderings scenario 16 1`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers; + + return function template(ctx, node, key = \\"\\") { + return text(\`D\`); + } +}" +`; + +exports[`concurrent renderings scenario 16 2`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers; + + return function template(ctx, node, key = \\"\\") { + let b2,b3,b4,b5,b6,b7,b8; + b2 = text(ctx['props'].fromA); + b3 = text(\`:\`); + b4 = text(ctx['props'].fromB); + b5 = text(\`:\`); + b6 = text(ctx['state'].fromC); + b7 = text(\`: \`); + if (ctx['state'].fromC===13) { + b8 = component(\`D\`, {}, key + \`__1\`, node, ctx); + } + return multi([b2, b3, b4, b5, b6, b7, b8]); + } +}" +`; + +exports[`concurrent renderings scenario 16 3`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers; + + return function template(ctx, node, key = \\"\\") { + return component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx); + } +}" +`; + +exports[`concurrent renderings scenario 16 4`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers; + + return function template(ctx, node, key = \\"\\") { + return component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx); + } +}" +`; + exports[`creating two async components, scenario 1 1`] = ` "function anonymous(bdom, helpers ) { diff --git a/tests/components/concurrency.test.ts b/tests/components/concurrency.test.ts index 780a374a..b01b4818 100644 --- a/tests/components/concurrency.test.ts +++ b/tests/components/concurrency.test.ts @@ -2142,11 +2142,11 @@ test("concurrent renderings scenario 15", async () => { ]).toBeLogged(); }); -test.skip("concurrent renderings scenario 16", async () => { +test("concurrent renderings scenario 16", async () => { let b: B | undefined = undefined; let c: C | undefined = undefined; class D extends Component { - static template = xml``; + static template = xml`D`; setup() { useLogLifecycle(); @@ -2158,12 +2158,8 @@ test.skip("concurrent renderings scenario 16", async () => { } class C extends Component { static template = xml` -

- - - - -

`; + ::: + `; static components = { D }; state = { fromC: 3 }; // not reactive setup() { @@ -2172,7 +2168,7 @@ test.skip("concurrent renderings scenario 16", async () => { } } class B extends Component { - static template = xml`

`; + static template = xml``; static components = { C }; setup() { useLogLifecycle(); @@ -2181,16 +2177,16 @@ test.skip("concurrent renderings scenario 16", async () => { state = { fromB: 2 }; } class A extends Component { - static template = xml`

`; + static template = xml``; static components = { B }; - state = { fromA: 1 }; + state = useState({ fromA: 1 }); setup() { useLogLifecycle(); } } const a = await mount(A, fixture); - expect(fixture.innerHTML).toBe("

123

"); + expect(fixture.innerHTML).toBe("1:2:3: "); expect([ "A:setup", "A:willStart", @@ -2217,43 +2213,49 @@ test.skip("concurrent renderings scenario 16", async () => { await nextMicroTick(); await nextMicroTick(); await nextMicroTick(); - expect(fixture.innerHTML).toBe("

123

"); - - // trigger a re-rendering from C, which will remap its new fiber - c!.state.fromC += 10; - c!.render(); - const prom = c!.render(); - // trigger a re-rendering from B, which will remap its new fiber as well - b!.state.fromB += 10; - b!.render(); - - await nextTick(); - // at this point, C rendering is still pending, and nothing should have been - // updated yet. - expect(fixture.innerHTML).toBe("

123

"); - await prom; - expect(fixture.innerHTML).toBe( - "

111213

    DDD

" - ); + await nextMicroTick(); + expect(fixture.innerHTML).toBe("1:2:3: "); expect([ "A:willRender", "B:willUpdateProps", "A:rendered", "B:willRender", - "B:rendered", "C:willUpdateProps", + "B:rendered", "C:willRender", "C:rendered", + ]).toBeLogged(); + + // trigger a re-rendering from C, which will remap its new fiber + c!.state.fromC += 10; + c!.render(); + await nextMicroTick(); + // trigger a re-rendering from B, which will remap its new fiber as well + b!.state.fromB += 10; + b!.render(); + await nextTick(); + expect([ + "C:willRender", "D:setup", "D:willStart", - "B:willRender", - "B:rendered", - "C:willUpdateProps", - "C:willRender", "C:rendered", + "B:willRender", + "C:willUpdateProps", + "B:rendered", + "C:willRender", "D:willDestroy", "D:setup", "D:willStart", + "C:rendered", + ]).toBeLogged(); + + // at this point, C rendering is still pending, and nothing should have been + // updated yet. + expect(fixture.innerHTML).toBe("1:2:3: "); + await nextTick(); + await nextTick(); + expect(fixture.innerHTML).toBe("11:12:13: D"); + expect([ "D:willRender", "D:rendered", "A:willPatch",