Skip to content

Commit 9c8790d

Browse files
test(vdom): adding tests for insertVdomAnnotations (#4867)
* test(vdom): adding tests for insertVdomAnnotations * more docs on PlatformRuntime * PR comments * fix prettier * make cspell happy * update snapshots
1 parent 13ec78e commit 9c8790d

File tree

5 files changed

+136
-4
lines changed

5 files changed

+136
-4
lines changed

src/declarations/stencil-private.ts

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1570,18 +1570,36 @@ export interface HostRef {
15701570
}
15711571

15721572
export interface PlatformRuntime {
1573+
/**
1574+
* This number is used to hold a series of bitflags for various features we
1575+
* support within the runtime. The flags which this value is intended to store are
1576+
* documented in the {@link PLATFORM_FLAGS} enum.
1577+
*/
15731578
$flags$: number;
1579+
/**
1580+
* Holds a map of nodes to be hydrated.
1581+
*/
15741582
$orgLocNodes$?: Map<string, RenderNode>;
1583+
/**
1584+
* Holds the resource url for given platform environment.
1585+
*/
15751586
$resourcesUrl$: string;
15761587
/**
15771588
* The nonce value to be applied to all script/style tags at runtime.
15781589
* If `null`, the nonce attribute will not be applied.
15791590
*/
15801591
$nonce$?: string | null;
1592+
/**
1593+
* A utility function that executes a given function and returns the result.
1594+
* @param c The callback function to execute
1595+
*/
15811596
jmp: (c: Function) => any;
1597+
/**
1598+
* A wrapper for {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame `requestAnimationFrame`}
1599+
*/
15821600
raf: (c: FrameRequestCallback) => number;
15831601
/**
1584-
* A wrapper for AddEventListener
1602+
* A wrapper for {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener `addEventListener`}
15851603
*/
15861604
ael: (
15871605
el: EventTarget,
@@ -1590,14 +1608,17 @@ export interface PlatformRuntime {
15901608
options: boolean | AddEventListenerOptions,
15911609
) => void;
15921610
/**
1593-
* A wrapper for `RemoveEventListener`
1611+
* A wrapper for {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener `removeEventListener`}
15941612
*/
15951613
rel: (
15961614
el: EventTarget,
15971615
eventName: string,
15981616
listener: EventListenerOrEventListenerObject,
15991617
options: boolean | AddEventListenerOptions,
16001618
) => void;
1619+
/**
1620+
* A wrapper for creating a {@link https://developer.mozilla.org/docs/Web/API/CustomEvent `CustomEvent`}
1621+
*/
16011622
ce: (eventName: string, opts?: any) => CustomEvent;
16021623
}
16031624

src/runtime/client-hydrate.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ const clientHydrate = (
254254
}
255255
};
256256

257-
export const initializeDocumentHydrate = (node: d.RenderNode, orgLocNodes: Map<string, any>) => {
257+
export const initializeDocumentHydrate = (node: d.RenderNode, orgLocNodes: d.PlatformRuntime['$orgLocNodes$']) => {
258258
if (node.nodeType === NODE_TYPE.ElementNode) {
259259
let i = 0;
260260
for (; i < node.childNodes.length; i++) {
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`vdom-annotations should add annotations when component-a-test and component-b-test is given as static component 1`] = `"<section> <component-a-test><!---->o.0.1<div> <!--t.0.1-->slotContent</div></component-a-test> <component-b-test><!---->o.0.2<div> <!--t.0.2-->slotContent</div></component-b-test> </section>"`;
4+
5+
exports[`vdom-annotations should add annotations when component-a-test is given as static component 1`] = `"<section> <component-a-test><!---->o.0.1<div> <!--t.0.1-->slotContent</div></component-a-test> <component-b-test s-id=\\"1\\"><!--r.1-->o.0.2<div c-id=\\"1.0.0.0\\"><!--t.1.1.1.0--> <!--t.0.2-->slotContent</div></component-b-test> </section>"`;
6+
7+
exports[`vdom-annotations should add annotations when no static component is given 1`] = `"<section> <component-a-test s-id=\\"1\\"><!--r.1-->o.0.1<div c-id=\\"1.0.0.0\\"><!--t.1.1.1.0--> <!--t.0.1-->slotContent</div></component-a-test> <component-b-test s-id=\\"2\\"><!--r.2-->o.0.2<div c-id=\\"2.0.0.0\\"><!--t.2.1.1.0--> <!--t.0.2-->slotContent</div></component-b-test> </section>"`;
Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { Component, h } from '@stencil/core';
2+
import { newSpecPage } from '@stencil/core/testing';
3+
4+
import { insertVdomAnnotations } from '../vdom-annotations';
5+
6+
describe('vdom-annotations', () => {
7+
let root: HTMLElement;
8+
9+
beforeEach(async () => {
10+
@Component({ tag: 'component-a-test', scoped: true })
11+
class ComponentA {
12+
render() {
13+
return (
14+
<div>
15+
<slot></slot>
16+
</div>
17+
);
18+
}
19+
}
20+
21+
@Component({ tag: 'component-b-test', scoped: true })
22+
class ComponentB {
23+
render() {
24+
return (
25+
<div>
26+
<slot></slot>
27+
</div>
28+
);
29+
}
30+
}
31+
32+
const { root: rootElm } = await newSpecPage({
33+
components: [ComponentA, ComponentB],
34+
html: `<section>
35+
<component-a-test>slotContent</component-a-test>
36+
<component-b-test>slotContent</component-b-test>
37+
</section>`,
38+
});
39+
root = rootElm;
40+
});
41+
42+
it('should add annotations when no static component is given', () => {
43+
insertVdomAnnotations(root.ownerDocument, []);
44+
/**
45+
<section>
46+
<component-a-test s-id="1">
47+
<!--r.1-->o.0.1
48+
<div c-id="1.0.0.0">
49+
<!--t.1.1.1.0--> <!--t.0.1-->slotContent
50+
</div>
51+
</component-a-test>
52+
<component-b-test s-id="2">
53+
<!--r.2-->o.0.2
54+
<div c-id="2.0.0.0">
55+
<!--t.2.1.1.0--> <!--t.0.2-->slotContent
56+
</div>
57+
</component-b-test>
58+
</section>
59+
*/
60+
expect(root.ownerDocument.body.innerHTML).toMatchSnapshot();
61+
});
62+
63+
it('should add annotations when component-a-test is given as static component', () => {
64+
insertVdomAnnotations(root.ownerDocument, ['component-a-test']);
65+
/**
66+
<section>
67+
<component-a-test>
68+
<!---->o.0.1
69+
<div>
70+
<!--t.0.1-->slotContent
71+
</div>
72+
</component-a-test>
73+
<component-b-test s-id="1">
74+
<!--r.1-->o.0.2
75+
<div c-id="1.0.0.0">
76+
<!--t.1.1.1.0--> <!--t.0.2-->slotContent
77+
</div>
78+
</component-b-test>
79+
</section>
80+
*/
81+
expect(root.ownerDocument.body.innerHTML).toMatchSnapshot();
82+
});
83+
84+
it('should add annotations when component-a-test and component-b-test is given as static component', () => {
85+
insertVdomAnnotations(root.ownerDocument, ['component-a-test', 'component-b-test']);
86+
/**
87+
<section>
88+
<component-a-test>
89+
<!---->o.0.1
90+
<div>
91+
<!--t.0.1-->slotContent
92+
</div>
93+
</component-a-test>
94+
<component-b-test>
95+
<!---->o.0.2
96+
<div>
97+
<!--t.0.2-->slotContent
98+
</div>
99+
</component-b-test>
100+
</section>
101+
*/
102+
expect(root.ownerDocument.body.innerHTML).toMatchSnapshot();
103+
});
104+
});

types/merge-source-map.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ declare module 'merge-source-map' {
1717
*/
1818
function merge(
1919
oldMap: import('../src/declarations').SourceMap,
20-
newMap: import('../src/declarations').SourceMap
20+
newMap: import('../src/declarations').SourceMap,
2121
): import('../src/declarations').SourceMap | undefined;
2222

2323
/**

0 commit comments

Comments
 (0)