chore: toMatchDOM fix and refactor (#7427)

Author: Varixo

packages/docs/src/routes/api/qwik-testing/api.json

@@ -223,7 +223,7 @@
         }
       ],
       "kind": "Function",
-      "content": "```typescript\nexport declare function vnode_fromJSX(jsx: JSXOutput): {\n    vParent: _ElementVNode;\n    vNode: _VNode | null;\n    document: _QDocument;\n};\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n{ vParent: \\_ElementVNode; vNode: \\_VNode \\| null; document: \\_QDocument; }",
+      "content": "```typescript\nexport declare function vnode_fromJSX(jsx: JSXOutput): {\n    vParent: _ElementVNode;\n    vNode: _VNode | null;\n    document: _QDocument;\n    container: ClientContainer;\n};\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n{ vParent: \\_ElementVNode; vNode: \\_VNode \\| null; document: \\_QDocument; container: ClientContainer; }",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/vdom-diff.unit-util.ts",
       "mdFile": "core.vnode_fromjsx.md"
     },

packages/docs/src/routes/api/qwik-testing/index.md

@@ -577,6 +577,7 @@ export declare function vnode_fromJSX(jsx: JSXOutput): {
   vParent: _ElementVNode;
   vNode: _VNode | null;
   document: _QDocument;
+  container: ClientContainer;
 };
 ```
 
@@ -607,7 +608,7 @@ JSXOutput
 </tbody></table>
 **Returns:**
 
-{ vParent: \_ElementVNode; vNode: \_VNode \| null; document: \_QDocument; }
+{ vParent: \_ElementVNode; vNode: \_VNode \| null; document: \_QDocument; container: ClientContainer; }
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/vdom-diff.unit-util.ts)
 

packages/qwik/src/core/client/process-vnode-data.unit.tsx

@@ -5,6 +5,8 @@ import { VNodeDataSeparator } from '../shared/vnode-data-types';
 import { getDomContainer } from './dom-container';
 import { processVNodeData } from './process-vnode-data';
 import type { ClientContainer } from './types';
+import { QContainerValue } from '../shared/types';
+import { QContainerAttr } from '../shared/utils/markers';
 
 describe('processVnodeData', () => {
   it('should parse simple case', () => {
@@ -177,8 +179,8 @@ describe('processVnodeData', () => {
   });
 });
 
-const qContainerPaused = { 'q:container': 'resumed' };
-const qContainerHtml = { 'q:container': 'html' };
+const qContainerPaused = { [QContainerAttr]: QContainerValue.RESUMED };
+const qContainerHtml = { [QContainerAttr]: QContainerValue.HTML };
 function process(html: string): ClientContainer[] {
   html = html.trim();
   html = html.replace(/\n\s*/g, '');

packages/qwik/src/core/client/vnode-diff.unit.tsx

@@ -1,4 +1,4 @@
-import { _jsxSorted } from '@qwik.dev/core';
+import { Fragment, _jsxSorted } from '@qwik.dev/core';
 import { vnode_fromJSX } from '@qwik.dev/core/testing';
 import { afterEach, describe, expect, it } from 'vitest';
 import { vnode_applyJournal, vnode_getFirstChild, vnode_getNode, type VNodeJournal } from './vnode';
@@ -477,6 +477,20 @@ describe('vNode-diff', () => {
   });
   describe.todo('fragments', () => {});
   describe('attributes', () => {
+    describe('const props', () => {
+      it('should set attributes', async () => {
+        const { vParent, container } = vnode_fromJSX(<Fragment></Fragment>);
+        const test = _jsxSorted('span', {}, { class: 'abcd', id: 'b' }, null, 0, null);
+        vnode_diff(container, test, vParent, null);
+        vnode_applyJournal(container.$journal$);
+        const firstChild = vnode_getFirstChild(vParent);
+        const firstChildNode = vnode_getNode(firstChild) as Element;
+        await expect(firstChildNode).toMatchDOM(test);
+      });
+
+      // todo: add more tests for const props
+    });
+
     describe('var props', () => {
       it('should set attributes', () => {
         const { vParent, document } = vnode_fromJSX(_jsxSorted('span', {}, null, [], 0, null));

packages/qwik/src/core/client/vnode.ts

@@ -914,6 +914,7 @@ export const vnode_applyJournal = (journal: VNodeJournal) => {
           (element as any).value = String(value);
         } else if (key === dangerouslySetInnerHTML) {
           (element as any).innerHTML = value!;
+          element.setAttribute(QContainerAttr, QContainerValue.HTML);
         } else {
           if (value == null || value === false) {
             element.removeAttribute(key);

packages/qwik/src/core/tests/attributes.spec.tsx

@@ -16,6 +16,8 @@ import {
   $,
   Slot,
 } from '@qwik.dev/core';
+import { QContainerAttr } from '../shared/utils/markers';
+import { QContainerValue } from '../shared/types';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -193,9 +195,12 @@ describe.each([
       });
       const { document } = await render(<Cmp />, { debug });
 
+      const qContainerAttr =
+        render === ssrRenderToDom ? { [QContainerAttr]: QContainerValue.TEXT } : {};
+
       await expect(document.querySelector('div')).toMatchDOM(
         <div>
-          <textarea>123</textarea>
+          <textarea {...qContainerAttr}>123</textarea>
           <input value="123" />
         </div>
       );
@@ -207,7 +212,7 @@ describe.each([
 
       await expect(document.querySelector('div')).toMatchDOM(
         <div>
-          <textarea>abcd</textarea>
+          <textarea {...qContainerAttr}>abcd</textarea>
           <input value="abcd" />
         </div>
       );

packages/qwik/src/core/tests/component.spec.tsx

@@ -27,6 +27,8 @@ import { delay } from '../shared/utils/promises';
 import { QError } from '../shared/error/error';
 import { ErrorProvider } from '../../testing/rendering.unit-util';
 import * as qError from '../shared/error/error';
+import { QContainerValue } from '../shared/types';
+import { QContainerAttr } from '../shared/utils/markers';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -360,24 +362,27 @@ describe.each([
       );
     });
     const { document } = await render(<Cmp />, { debug });
+    const qContainerAttr = { [QContainerAttr]: QContainerValue.HTML };
     await expect(document.querySelector('#first')).toMatchDOM(
-      <span id="first">vanilla HTML here</span>
+      <span id="first" {...qContainerAttr}>
+        vanilla HTML here
+      </span>
     );
     await expect(document.querySelector('#second')).toMatchDOM(
-      <span id="second" class="after">
+      <span id="second" class="after" {...qContainerAttr}>
         <h1>I'm an h1!</h1>
       </span>
     );
     await expect(document.querySelector('#third')).toMatchDOM(
-      <span id="third" class="after">
+      <span id="third" class="after" {...qContainerAttr}>
         <h2>
           <span>I'm a signal value!</span>
         </h2>
       </span>
     );
     await trigger(document.body, 'button', 'click');
     await expect(document.querySelector('#third')).toMatchDOM(
-      <span id="third" class="after">
+      <span id="third" class="after" {...qContainerAttr}>
         <h2>
           <span>I'm a updated signal value!</span>
         </h2>
@@ -419,46 +424,51 @@ describe.each([
       );
     });
     const { document } = await render(<Parent />, { debug });
+    const qContainerAttr = { [QContainerAttr]: QContainerValue.HTML };
     await expect(document.querySelector('#first')).toMatchDOM(
-      <span id="first">vanilla HTML here</span>
+      <span id="first" {...qContainerAttr}>
+        vanilla HTML here
+      </span>
     );
     await expect(document.querySelector('#second')).toMatchDOM(
-      <span id="second" class="after">
+      <span id="second" class="after" {...qContainerAttr}>
         <h1>I'm an h1!</h1>
       </span>
     );
     await expect(document.querySelector('#third')).toMatchDOM(
-      <span id="third" class="after">
+      <span id="third" class="after" {...qContainerAttr}>
         <h2>
           <span>I'm a signal value!</span>
         </h2>
       </span>
     );
     await expect(document.querySelector('#fourth')).toMatchDOM(
-      <span id="fourth" class="after">
+      <span id="fourth" class="after" {...qContainerAttr}>
         <h3>Test content</h3>
       </span>
     );
 
     await trigger(document.body, 'button', 'click');
 
     await expect(document.querySelector('#first')).toMatchDOM(
-      <span id="first">vanilla HTML here</span>
+      <span id="first" {...qContainerAttr}>
+        vanilla HTML here
+      </span>
     );
     await expect(document.querySelector('#second')).toMatchDOM(
-      <span id="second" class="after">
+      <span id="second" class="after" {...qContainerAttr}>
         <h1>I'm an h1!</h1>
       </span>
     );
     await expect(document.querySelector('#third')).toMatchDOM(
-      <span id="third" class="after">
+      <span id="third" class="after" {...qContainerAttr}>
         <h2>
           <span>I'm a updated signal value!</span>
         </h2>
       </span>
     );
     await expect(document.querySelector('#fourth')).toMatchDOM(
-      <span id="fourth" class="after">
+      <span id="fourth" class="after" {...qContainerAttr}>
         <h3>Test content</h3>
       </span>
     );
@@ -476,9 +486,15 @@ describe.each([
     });
 
     const { document } = await render(<Cmp />, { debug });
-    await expect(document.querySelector('textarea')).toMatchDOM(<textarea>value 123</textarea>);
+    const qContainerAttr =
+      render === ssrRenderToDom ? { [QContainerAttr]: QContainerValue.TEXT } : {};
+    await expect(document.querySelector('textarea')).toMatchDOM(
+      <textarea {...qContainerAttr}>value 123</textarea>
+    );
     await trigger(document.body, 'button', 'click');
-    await expect(document.querySelector('textarea')).toMatchDOM(<textarea>value 123!</textarea>);
+    await expect(document.querySelector('textarea')).toMatchDOM(
+      <textarea {...qContainerAttr}>value 123!</textarea>
+    );
   });
 
   it('should render textarea without error', async () => {
@@ -497,7 +513,11 @@ describe.each([
     });
 
     const { document } = await render(<Cmp />, { debug });
-    await expect(document.querySelector('textarea')).toMatchDOM(<textarea></textarea>);
+    const qContainerAttr =
+      render === ssrRenderToDom ? { [QContainerAttr]: QContainerValue.TEXT } : {};
+    await expect(document.querySelector('textarea')).toMatchDOM(
+      <textarea {...qContainerAttr}></textarea>
+    );
   });
 
   it('should not render textarea value for non-text value', async () => {
@@ -1992,14 +2012,15 @@ describe.each([
         );
       });
       const { document, container } = await render(<Issue3643 />, { debug });
+      const qContainerAttr = { [QContainerAttr]: QContainerValue.HTML };
       await expect(document.querySelector('main')).toMatchDOM(
         <main>
           <button>Toggle</button>
           <div>
-            <div>Hello</div>
+            <div {...qContainerAttr}>Hello</div>
           </div>
           <div>
-            <div>Hello</div>
+            <div {...qContainerAttr}>Hello</div>
           </div>
         </main>
       );
@@ -2022,10 +2043,10 @@ describe.each([
         <main>
           <button>Toggle</button>
           <div>
-            <div>Hello</div>
+            <div {...qContainerAttr}>Hello</div>
           </div>
           <div>
-            <div>Hello</div>
+            <div {...qContainerAttr}>Hello</div>
           </div>
         </main>
       );
@@ -2048,10 +2069,10 @@ describe.each([
         <main>
           <button>Toggle</button>
           <div>
-            <div>Hello</div>
+            <div {...qContainerAttr}>Hello</div>
           </div>
           <div>
-            <div>Hello</div>
+            <div {...qContainerAttr}>Hello</div>
           </div>
         </main>
       );

packages/qwik/src/core/tests/projection.spec.tsx

@@ -22,7 +22,8 @@ import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 import { cleanupAttrs } from 'packages/qwik/src/testing/element-fixture';
 import { beforeEach, describe, expect, it } from 'vitest';
 import { vnode_getNextSibling, vnode_getProp, vnode_locate } from '../client/vnode';
-import { HTML_NS, SVG_NS } from '../shared/utils/markers';
+import { HTML_NS, QContainerAttr, SVG_NS } from '../shared/utils/markers';
+import { QContainerValue } from '../shared/types';
 
 const DEBUG = false;
 
@@ -1557,13 +1558,14 @@ describe.each([
         );
       });
       const { document } = await render(<Parent />, { debug: DEBUG });
+      const qContainerAttr = { [QContainerAttr]: QContainerValue.HTML };
       await expect(document.querySelector('#first')).toMatchDOM(
-        <div id="first" q:slot="content-1">
+        <div id="first" q:slot="content-1" {...qContainerAttr}>
           <strong>A variable here!</strong>
         </div>
       );
       await expect(document.querySelector('#second')).toMatchDOM(
-        <div q:slot="content-2" id="second" class="after">
+        <div q:slot="content-2" id="second" class="after" {...qContainerAttr}>
           <span>here my raw HTML</span>
         </div>
       );
@@ -1587,7 +1589,9 @@ describe.each([
       const { document, vNode } = await render(<Cmp>{content}</Cmp>, { debug: DEBUG });
       if (render == ssrRenderToDom) {
         await expect(document.querySelector('q\\:template')).toMatchDOM(
-          <q:template key={undefined}>{content}</q:template>
+          <q:template key={undefined} style="display: none">
+            {content}
+          </q:template>
         );
       }
       expect(vNode).toMatchVDOM(
@@ -1675,15 +1679,17 @@ describe.each([
       const { document } = await render(<Parent />, { debug: DEBUG });
       if (render == ssrRenderToDom) {
         await expect(document.querySelector('q\\:template')).toMatchDOM(
-          <q:template key={undefined}>{content}</q:template>
+          <q:template key={undefined} style="display: none">
+            {content}
+          </q:template>
         );
       }
 
       await trigger(document.body, '#reload', 'click');
       await trigger(document.body, '#slot', 'click');
       if (render == ssrRenderToDom) {
         await expect(document.querySelector('q\\:template')).toMatchDOM(
-          <q:template key={undefined}></q:template>
+          <q:template key={undefined} style="display: none"></q:template>
         );
       }
     });
@@ -1731,7 +1737,9 @@ describe.each([
       const { document } = await render(<Parent />, { debug: DEBUG });
       if (render == ssrRenderToDom) {
         await expect(document.querySelector('q\\:template')).toMatchDOM(
-          <q:template key={undefined}>{content}</q:template>
+          <q:template key={undefined} style="display: none">
+            {content}
+          </q:template>
         );
       }
       await trigger(document.body, '#reload', 'click');

packages/qwik/src/core/tests/render-namespace.spec.tsx

@@ -8,7 +8,8 @@ import {
   Fragment as Signal,
   type JSXOutput,
 } from '@qwik.dev/core';
-import { HTML_NS, MATH_NS, SVG_NS } from '../shared/utils/markers';
+import { HTML_NS, MATH_NS, QContainerAttr, SVG_NS } from '../shared/utils/markers';
+import { QContainerValue } from '../shared/types';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -38,7 +39,7 @@ describe.each([
       );
       await expect(container.document.querySelector('svg')).toMatchDOM(
         <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" key="ka">
-          <fegaussianblur></fegaussianblur>
+          <feGaussianBlur></feGaussianBlur>
           <circle cx="50" cy="50" r="50"></circle>
         </svg>
       );
@@ -338,14 +339,14 @@ describe.each([
         );
       });
       const { vNode, document } = await render(<SvgComp />, { debug });
+      const qContainerAttr = { [QContainerAttr]: QContainerValue.HTML };
       expect(vNode).toMatchVDOM(
         <Component>
-          {/* @ts-ignore-next-line */}
-          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" q:container="html"></svg>
+          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" {...qContainerAttr}></svg>
         </Component>
       );
       await expect(document.querySelector('svg')).toMatchDOM(
-        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" {...qContainerAttr}>
           <circle cx="50" cy="50" r="50" />
           <path d="M10 10" />
           <path d="M20 20" />