Skip to content

Commit a8f0942

Browse files
VarixoVarixo
authored
chore: toMatchDOM fix and refactor (#7427)
1 parent 6dd8a97 commit a8f0942

14 files changed

+222
-207
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@
223223
}
224224
],
225225
"kind": "Function",
226-
"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; }",
226+
"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; }",
227227
"editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/vdom-diff.unit-util.ts",
228228
"mdFile": "core.vnode_fromjsx.md"
229229
},

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -577,6 +577,7 @@ export declare function vnode_fromJSX(jsx: JSXOutput): {
577577
vParent: _ElementVNode;
578578
vNode: _VNode | null;
579579
document: _QDocument;
580+
container: ClientContainer;
580581
};
581582
```
582583

@@ -607,7 +608,7 @@ JSXOutput
607608
</tbody></table>
608609
**Returns:**
609610

610-
{ vParent: \_ElementVNode; vNode: \_VNode \| null; document: \_QDocument; }
611+
{ vParent: \_ElementVNode; vNode: \_VNode \| null; document: \_QDocument; container: ClientContainer; }
611612

612613
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/vdom-diff.unit-util.ts)
613614

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { VNodeDataSeparator } from '../shared/vnode-data-types';
55
import { getDomContainer } from './dom-container';
66
import { processVNodeData } from './process-vnode-data';
77
import type { ClientContainer } from './types';
8+
import { QContainerValue } from '../shared/types';
9+
import { QContainerAttr } from '../shared/utils/markers';
810

911
describe('processVnodeData', () => {
1012
it('should parse simple case', () => {
@@ -177,8 +179,8 @@ describe('processVnodeData', () => {
177179
});
178180
});
179181

180-
const qContainerPaused = { 'q:container': 'resumed' };
181-
const qContainerHtml = { 'q:container': 'html' };
182+
const qContainerPaused = { [QContainerAttr]: QContainerValue.RESUMED };
183+
const qContainerHtml = { [QContainerAttr]: QContainerValue.HTML };
182184
function process(html: string): ClientContainer[] {
183185
html = html.trim();
184186
html = html.replace(/\n\s*/g, '');

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { _jsxSorted } from '@qwik.dev/core';
1+
import { Fragment, _jsxSorted } from '@qwik.dev/core';
22
import { vnode_fromJSX } from '@qwik.dev/core/testing';
33
import { afterEach, describe, expect, it } from 'vitest';
44
import { vnode_applyJournal, vnode_getFirstChild, vnode_getNode, type VNodeJournal } from './vnode';
@@ -477,6 +477,20 @@ describe('vNode-diff', () => {
477477
});
478478
describe.todo('fragments', () => {});
479479
describe('attributes', () => {
480+
describe('const props', () => {
481+
it('should set attributes', async () => {
482+
const { vParent, container } = vnode_fromJSX(<Fragment></Fragment>);
483+
const test = _jsxSorted('span', {}, { class: 'abcd', id: 'b' }, null, 0, null);
484+
vnode_diff(container, test, vParent, null);
485+
vnode_applyJournal(container.$journal$);
486+
const firstChild = vnode_getFirstChild(vParent);
487+
const firstChildNode = vnode_getNode(firstChild) as Element;
488+
await expect(firstChildNode).toMatchDOM(test);
489+
});
490+
491+
// todo: add more tests for const props
492+
});
493+
480494
describe('var props', () => {
481495
it('should set attributes', () => {
482496
const { vParent, document } = vnode_fromJSX(_jsxSorted('span', {}, null, [], 0, null));

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -914,6 +914,7 @@ export const vnode_applyJournal = (journal: VNodeJournal) => {
914914
(element as any).value = String(value);
915915
} else if (key === dangerouslySetInnerHTML) {
916916
(element as any).innerHTML = value!;
917+
element.setAttribute(QContainerAttr, QContainerValue.HTML);
917918
} else {
918919
if (value == null || value === false) {
919920
element.removeAttribute(key);

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import {
1616
$,
1717
Slot,
1818
} from '@qwik.dev/core';
19+
import { QContainerAttr } from '../shared/utils/markers';
20+
import { QContainerValue } from '../shared/types';
1921

2022
const debug = false; //true;
2123
Error.stackTraceLimit = 100;
@@ -193,9 +195,12 @@ describe.each([
193195
});
194196
const { document } = await render(<Cmp />, { debug });
195197

198+
const qContainerAttr =
199+
render === ssrRenderToDom ? { [QContainerAttr]: QContainerValue.TEXT } : {};
200+
196201
await expect(document.querySelector('div')).toMatchDOM(
197202
<div>
198-
<textarea>123</textarea>
203+
<textarea {...qContainerAttr}>123</textarea>
199204
<input value="123" />
200205
</div>
201206
);
@@ -207,7 +212,7 @@ describe.each([
207212

208213
await expect(document.querySelector('div')).toMatchDOM(
209214
<div>
210-
<textarea>abcd</textarea>
215+
<textarea {...qContainerAttr}>abcd</textarea>
211216
<input value="abcd" />
212217
</div>
213218
);

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

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import { delay } from '../shared/utils/promises';
2727
import { QError } from '../shared/error/error';
2828
import { ErrorProvider } from '../../testing/rendering.unit-util';
2929
import * as qError from '../shared/error/error';
30+
import { QContainerValue } from '../shared/types';
31+
import { QContainerAttr } from '../shared/utils/markers';
3032

3133
const debug = false; //true;
3234
Error.stackTraceLimit = 100;
@@ -360,24 +362,27 @@ describe.each([
360362
);
361363
});
362364
const { document } = await render(<Cmp />, { debug });
365+
const qContainerAttr = { [QContainerAttr]: QContainerValue.HTML };
363366
await expect(document.querySelector('#first')).toMatchDOM(
364-
<span id="first">vanilla HTML here</span>
367+
<span id="first" {...qContainerAttr}>
368+
vanilla HTML here
369+
</span>
365370
);
366371
await expect(document.querySelector('#second')).toMatchDOM(
367-
<span id="second" class="after">
372+
<span id="second" class="after" {...qContainerAttr}>
368373
<h1>I'm an h1!</h1>
369374
</span>
370375
);
371376
await expect(document.querySelector('#third')).toMatchDOM(
372-
<span id="third" class="after">
377+
<span id="third" class="after" {...qContainerAttr}>
373378
<h2>
374379
<span>I'm a signal value!</span>
375380
</h2>
376381
</span>
377382
);
378383
await trigger(document.body, 'button', 'click');
379384
await expect(document.querySelector('#third')).toMatchDOM(
380-
<span id="third" class="after">
385+
<span id="third" class="after" {...qContainerAttr}>
381386
<h2>
382387
<span>I'm a updated signal value!</span>
383388
</h2>
@@ -419,46 +424,51 @@ describe.each([
419424
);
420425
});
421426
const { document } = await render(<Parent />, { debug });
427+
const qContainerAttr = { [QContainerAttr]: QContainerValue.HTML };
422428
await expect(document.querySelector('#first')).toMatchDOM(
423-
<span id="first">vanilla HTML here</span>
429+
<span id="first" {...qContainerAttr}>
430+
vanilla HTML here
431+
</span>
424432
);
425433
await expect(document.querySelector('#second')).toMatchDOM(
426-
<span id="second" class="after">
434+
<span id="second" class="after" {...qContainerAttr}>
427435
<h1>I'm an h1!</h1>
428436
</span>
429437
);
430438
await expect(document.querySelector('#third')).toMatchDOM(
431-
<span id="third" class="after">
439+
<span id="third" class="after" {...qContainerAttr}>
432440
<h2>
433441
<span>I'm a signal value!</span>
434442
</h2>
435443
</span>
436444
);
437445
await expect(document.querySelector('#fourth')).toMatchDOM(
438-
<span id="fourth" class="after">
446+
<span id="fourth" class="after" {...qContainerAttr}>
439447
<h3>Test content</h3>
440448
</span>
441449
);
442450

443451
await trigger(document.body, 'button', 'click');
444452

445453
await expect(document.querySelector('#first')).toMatchDOM(
446-
<span id="first">vanilla HTML here</span>
454+
<span id="first" {...qContainerAttr}>
455+
vanilla HTML here
456+
</span>
447457
);
448458
await expect(document.querySelector('#second')).toMatchDOM(
449-
<span id="second" class="after">
459+
<span id="second" class="after" {...qContainerAttr}>
450460
<h1>I'm an h1!</h1>
451461
</span>
452462
);
453463
await expect(document.querySelector('#third')).toMatchDOM(
454-
<span id="third" class="after">
464+
<span id="third" class="after" {...qContainerAttr}>
455465
<h2>
456466
<span>I'm a updated signal value!</span>
457467
</h2>
458468
</span>
459469
);
460470
await expect(document.querySelector('#fourth')).toMatchDOM(
461-
<span id="fourth" class="after">
471+
<span id="fourth" class="after" {...qContainerAttr}>
462472
<h3>Test content</h3>
463473
</span>
464474
);
@@ -476,9 +486,15 @@ describe.each([
476486
});
477487

478488
const { document } = await render(<Cmp />, { debug });
479-
await expect(document.querySelector('textarea')).toMatchDOM(<textarea>value 123</textarea>);
489+
const qContainerAttr =
490+
render === ssrRenderToDom ? { [QContainerAttr]: QContainerValue.TEXT } : {};
491+
await expect(document.querySelector('textarea')).toMatchDOM(
492+
<textarea {...qContainerAttr}>value 123</textarea>
493+
);
480494
await trigger(document.body, 'button', 'click');
481-
await expect(document.querySelector('textarea')).toMatchDOM(<textarea>value 123!</textarea>);
495+
await expect(document.querySelector('textarea')).toMatchDOM(
496+
<textarea {...qContainerAttr}>value 123!</textarea>
497+
);
482498
});
483499

484500
it('should render textarea without error', async () => {
@@ -497,7 +513,11 @@ describe.each([
497513
});
498514

499515
const { document } = await render(<Cmp />, { debug });
500-
await expect(document.querySelector('textarea')).toMatchDOM(<textarea></textarea>);
516+
const qContainerAttr =
517+
render === ssrRenderToDom ? { [QContainerAttr]: QContainerValue.TEXT } : {};
518+
await expect(document.querySelector('textarea')).toMatchDOM(
519+
<textarea {...qContainerAttr}></textarea>
520+
);
501521
});
502522

503523
it('should not render textarea value for non-text value', async () => {
@@ -1992,14 +2012,15 @@ describe.each([
19922012
);
19932013
});
19942014
const { document, container } = await render(<Issue3643 />, { debug });
2015+
const qContainerAttr = { [QContainerAttr]: QContainerValue.HTML };
19952016
await expect(document.querySelector('main')).toMatchDOM(
19962017
<main>
19972018
<button>Toggle</button>
19982019
<div>
1999-
<div>Hello</div>
2020+
<div {...qContainerAttr}>Hello</div>
20002021
</div>
20012022
<div>
2002-
<div>Hello</div>
2023+
<div {...qContainerAttr}>Hello</div>
20032024
</div>
20042025
</main>
20052026
);
@@ -2022,10 +2043,10 @@ describe.each([
20222043
<main>
20232044
<button>Toggle</button>
20242045
<div>
2025-
<div>Hello</div>
2046+
<div {...qContainerAttr}>Hello</div>
20262047
</div>
20272048
<div>
2028-
<div>Hello</div>
2049+
<div {...qContainerAttr}>Hello</div>
20292050
</div>
20302051
</main>
20312052
);
@@ -2048,10 +2069,10 @@ describe.each([
20482069
<main>
20492070
<button>Toggle</button>
20502071
<div>
2051-
<div>Hello</div>
2072+
<div {...qContainerAttr}>Hello</div>
20522073
</div>
20532074
<div>
2054-
<div>Hello</div>
2075+
<div {...qContainerAttr}>Hello</div>
20552076
</div>
20562077
</main>
20572078
);

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
2222
import { cleanupAttrs } from 'packages/qwik/src/testing/element-fixture';
2323
import { beforeEach, describe, expect, it } from 'vitest';
2424
import { vnode_getNextSibling, vnode_getProp, vnode_locate } from '../client/vnode';
25-
import { HTML_NS, SVG_NS } from '../shared/utils/markers';
25+
import { HTML_NS, QContainerAttr, SVG_NS } from '../shared/utils/markers';
26+
import { QContainerValue } from '../shared/types';
2627

2728
const DEBUG = false;
2829

@@ -1557,13 +1558,14 @@ describe.each([
15571558
);
15581559
});
15591560
const { document } = await render(<Parent />, { debug: DEBUG });
1561+
const qContainerAttr = { [QContainerAttr]: QContainerValue.HTML };
15601562
await expect(document.querySelector('#first')).toMatchDOM(
1561-
<div id="first" q:slot="content-1">
1563+
<div id="first" q:slot="content-1" {...qContainerAttr}>
15621564
<strong>A variable here!</strong>
15631565
</div>
15641566
);
15651567
await expect(document.querySelector('#second')).toMatchDOM(
1566-
<div q:slot="content-2" id="second" class="after">
1568+
<div q:slot="content-2" id="second" class="after" {...qContainerAttr}>
15671569
<span>here my raw HTML</span>
15681570
</div>
15691571
);
@@ -1587,7 +1589,9 @@ describe.each([
15871589
const { document, vNode } = await render(<Cmp>{content}</Cmp>, { debug: DEBUG });
15881590
if (render == ssrRenderToDom) {
15891591
await expect(document.querySelector('q\\:template')).toMatchDOM(
1590-
<q:template key={undefined}>{content}</q:template>
1592+
<q:template key={undefined} style="display: none">
1593+
{content}
1594+
</q:template>
15911595
);
15921596
}
15931597
expect(vNode).toMatchVDOM(
@@ -1675,15 +1679,17 @@ describe.each([
16751679
const { document } = await render(<Parent />, { debug: DEBUG });
16761680
if (render == ssrRenderToDom) {
16771681
await expect(document.querySelector('q\\:template')).toMatchDOM(
1678-
<q:template key={undefined}>{content}</q:template>
1682+
<q:template key={undefined} style="display: none">
1683+
{content}
1684+
</q:template>
16791685
);
16801686
}
16811687

16821688
await trigger(document.body, '#reload', 'click');
16831689
await trigger(document.body, '#slot', 'click');
16841690
if (render == ssrRenderToDom) {
16851691
await expect(document.querySelector('q\\:template')).toMatchDOM(
1686-
<q:template key={undefined}></q:template>
1692+
<q:template key={undefined} style="display: none"></q:template>
16871693
);
16881694
}
16891695
});
@@ -1731,7 +1737,9 @@ describe.each([
17311737
const { document } = await render(<Parent />, { debug: DEBUG });
17321738
if (render == ssrRenderToDom) {
17331739
await expect(document.querySelector('q\\:template')).toMatchDOM(
1734-
<q:template key={undefined}>{content}</q:template>
1740+
<q:template key={undefined} style="display: none">
1741+
{content}
1742+
</q:template>
17351743
);
17361744
}
17371745
await trigger(document.body, '#reload', 'click');

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
Fragment as Signal,
99
type JSXOutput,
1010
} from '@qwik.dev/core';
11-
import { HTML_NS, MATH_NS, SVG_NS } from '../shared/utils/markers';
11+
import { HTML_NS, MATH_NS, QContainerAttr, SVG_NS } from '../shared/utils/markers';
12+
import { QContainerValue } from '../shared/types';
1213

1314
const debug = false; //true;
1415
Error.stackTraceLimit = 100;
@@ -38,7 +39,7 @@ describe.each([
3839
);
3940
await expect(container.document.querySelector('svg')).toMatchDOM(
4041
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" key="ka">
41-
<fegaussianblur></fegaussianblur>
42+
<feGaussianBlur></feGaussianBlur>
4243
<circle cx="50" cy="50" r="50"></circle>
4344
</svg>
4445
);
@@ -338,14 +339,14 @@ describe.each([
338339
);
339340
});
340341
const { vNode, document } = await render(<SvgComp />, { debug });
342+
const qContainerAttr = { [QContainerAttr]: QContainerValue.HTML };
341343
expect(vNode).toMatchVDOM(
342344
<Component>
343-
{/* @ts-ignore-next-line */}
344-
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" q:container="html"></svg>
345+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" {...qContainerAttr}></svg>
345346
</Component>
346347
);
347348
await expect(document.querySelector('svg')).toMatchDOM(
348-
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
349+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" {...qContainerAttr}>
349350
<circle cx="50" cy="50" r="50" />
350351
<path d="M10 10" />
351352
<path d="M20 20" />

0 commit comments

Comments
 (0)