fix(testing): initialise mock-doc childNodes with get / set. Allows patching during tests (#6564)

* fix(testing): initialise mock-doc `childNodes` with get / set. Allows patching during tests

* chore: node / element now return mock counterparts

Author: johnjenkins

src/mock-doc/document.ts

@@ -294,6 +294,7 @@ const DOC_KEY_KEEPERS = new Set([
   'ownerDocument',
   'parentNode',
   'childNodes',
+  '_childNodes',
   '_shadowRoot',
 ]);
 

src/mock-doc/node.ts

@@ -22,15 +22,21 @@ export class MockNode {
   nodeType: number;
   ownerDocument: any;
   parentNode: MockNode | null;
-  childNodes: MockNode[];
+  private _childNodes: MockNode[] = [];
 
   constructor(ownerDocument: any, nodeType: number, nodeName: string | null, nodeValue: string | null) {
     this.ownerDocument = ownerDocument;
     this.nodeType = nodeType;
     this.nodeName = nodeName;
     this._nodeValue = nodeValue;
     this.parentNode = null;
-    this.childNodes = [];
+  }
+
+  get childNodes(): MockNode[] {
+    return this._childNodes;
+  }
+  set childNodes(value: MockNode[]) {
+    this._childNodes = value;
   }
 
   appendChild(newNode: MockNode) {

src/mock-doc/window.ts

@@ -224,16 +224,7 @@ export class MockWindow {
   }
 
   get Element() {
-    if (this.__elementCstr == null) {
-      const ownerDocument = this.document;
-      this.__elementCstr = class extends MockElement {
-        constructor() {
-          super(ownerDocument, '');
-          throw new Error('Illegal constructor: cannot construct Element');
-        }
-      };
-    }
-    return this.__elementCstr;
+    return MockElement;
   }
 
   fetch(input: any, init?: any): any {
@@ -362,16 +353,7 @@ export class MockWindow {
   }
 
   get Node() {
-    if (this.__nodeCstr == null) {
-      const ownerDocument = this.document;
-      this.__nodeCstr = class extends MockNode {
-        constructor() {
-          super(ownerDocument, 0, 'test', '');
-          throw new Error('Illegal constructor: cannot construct Node');
-        }
-      };
-    }
-    return this.__nodeCstr;
+    return MockNode;
   }
 
   get NodeList() {

src/runtime/test/hydrate-slotted-content-order.spec.tsx

@@ -336,8 +336,8 @@ describe("hydrated components' slotted node order", () => {
       hydrateClientSide: true,
     });
 
-    // patches this element in the same way we patch all elements in the browser
-    patchPseudoShadowDom(clientHydrated.root);
+    // patches this element's prototype in the same way we patch all elements in the browser
+    patchPseudoShadowDom(Object.getPrototypeOf(clientHydrated.root));
 
     expect(clientHydrated.root.outerHTML).toEqualHtml(`
       <cmp-a class="hydrated sc-cmp-a-h">
@@ -429,8 +429,8 @@ describe("hydrated components' slotted node order", () => {
       hydrateClientSide: true,
     });
 
-    // patches this element in the same way we patch all elements in the browser
-    patchPseudoShadowDom(clientHydrated.root);
+    // patches this element's prototype in the same way we patch all elements in the browser
+    patchPseudoShadowDom(Object.getPrototypeOf(clientHydrated.root));
 
     const childNodes = clientHydrated.root.childNodes;
 
@@ -523,12 +523,12 @@ describe("hydrated components' slotted node order", () => {
       hydrateClientSide: true,
     });
 
-    // patches this element in the same way we patch all elements in the browser
-    patchPseudoShadowDom(clientHydrated.root);
+    // patches this element's prototype in the same way we patch all elements in the browser
+    patchPseudoShadowDom(Object.getPrototypeOf(clientHydrated.root));
 
     const childNodes = clientHydrated.root.childNodes;
 
-    patchPseudoShadowDom(childNodes[4]);
+    patchPseudoShadowDom(Object.getPrototypeOf(childNodes[4]));
 
     expect(nodeOrEle(childNodes[0])).toBe(`<p>slotted item 1a</p>`);
     expect(nodeOrEle(childNodes[1])).toBe(` a comment `);