From a8c0ec8c5dd1bc10ff048532bb555fb832de503e Mon Sep 17 00:00:00 2001 From: Wout Mertens Date: Fri, 11 Oct 2024 15:08:07 +0200 Subject: [PATCH] wip --- .../qwik/src/core/tests/projection.spec.tsx | 13 ++++---- .../qwik/src/testing/vdom-diff.unit-util.ts | 31 ++++++++++++++----- 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/packages/qwik/src/core/tests/projection.spec.tsx b/packages/qwik/src/core/tests/projection.spec.tsx index 0e2eac742c6..445ee2b1b9f 100644 --- a/packages/qwik/src/core/tests/projection.spec.tsx +++ b/packages/qwik/src/core/tests/projection.spec.tsx @@ -24,7 +24,7 @@ import { HTML_NS, SVG_NS } from '../shared/utils/markers'; import { cleanupAttrs } from 'packages/qwik/src/testing/element-fixture'; import { DomFragment } from '../../testing/rendering.unit-util'; -const DEBUG = false; +const DEBUG = !false; /** * Below are helper components that are constant. They have to be in the top level scope so that the @@ -43,6 +43,8 @@ describe.each([ { render: ssrRenderToDom }, // { render: domRender }, // ])('$render.name: projection', ({ render }) => { + const isSsr = render === ssrRenderToDom; + it('should render basic projection', async () => { const Child = component$(() => { return ( @@ -72,7 +74,7 @@ describe.each([ render ); }); - it('should render unused projection into template', async () => { + it.only('should render unused projection into template', async () => { const Child = component$(() => { return no-projection; }); @@ -87,12 +89,9 @@ describe.each([ ); - if (render === ssrRenderToDom) { + if (isSsr) { expect(vnode_getNextSibling(vNode!)).toMatchVDOM( - - parent-content - render-content - + parent-contentrender-content ); } }); diff --git a/packages/qwik/src/testing/vdom-diff.unit-util.ts b/packages/qwik/src/testing/vdom-diff.unit-util.ts index 13044c3282b..c71f27e8211 100644 --- a/packages/qwik/src/testing/vdom-diff.unit-util.ts +++ b/packages/qwik/src/testing/vdom-diff.unit-util.ts @@ -85,6 +85,7 @@ function diffJsxVNode( if (expectedChildren.length === 1) { return diffJsxVNode(received, expectedChildren[0], path, isSsr); } else { + // We're skipping non-serialized vnodes, so they should have only one child console.error('Expected fragment to have only one child', received, expected); } } @@ -153,13 +154,29 @@ function diffJsxVNode( diffs.push(...diffJsxVNode(receivedChild, expectedChild, path, isSsr)); } } else { - diffs.push( - `${path.join(' > ')} expecting ${expectedChildren.length} children but was ${ - receivedChildren.length - }` - ); - diffs.push('EXPECTED', jsxToHTML(expected, ' ')); - diffs.push('RECEIVED:', vnodeToHTML(received, ' ')); + // special case: adjacent text nodes that are merged during SSR + if (isSsr && receivedChildren.length === 1 && vnode_isTextVNode(received)) { + // If the expected children are text nodes, we can compare them directly + const expectedText = expectedChildren + .map((child) => + typeof child === 'string' ? child : typeof child === 'object' ? child.children : '' + ) + .join(''); + const receivedText = vnode_getText(received as _TextVNode); + if (expectedText !== receivedText) { + diffs.push(path.join(' > ')); + diffs.push('EXPECTED', JSON.stringify(expectedText)); + diffs.push('RECEIVED:', JSON.stringify(receivedText)); + } + } else { + diffs.push( + `${path.join(' > ')} expecting ${expectedChildren.length} children but was ${ + receivedChildren.length + }` + ); + diffs.push('EXPECTED', jsxToHTML(expected, ' ')); + diffs.push('RECEIVED:', vnodeToHTML(received, ' ')); + } } path.pop(); }