fix(mock-doc): implement getElementById() in document fragment (#2032)

fixes #2030
ionic-team · Nov 22, 2019 · 35021d8 · 35021d8
1 parent 65aeb8c
commit 35021d8
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 47 deletions.
diff --git a/src/mock-doc/document-fragment.ts b/src/mock-doc/document-fragment.ts
@@ -1,6 +1,6 @@
 import { MockHTMLElement } from './node';
 import { NODE_NAMES, NODE_TYPES } from './constants';
-
+import { getElementById } from './document';
 
 export class MockDocumentFragment extends MockHTMLElement {
 
@@ -10,6 +10,10 @@ export class MockDocumentFragment extends MockHTMLElement {
     this.nodeType = NODE_TYPES.DOCUMENT_FRAGMENT_NODE;
   }
 
+  getElementById(id: string) {
+    return getElementById(this, id);
+  }
+
   cloneNode(deep?: boolean) {
     const cloned = new MockDocumentFragment(null);
 

diff --git a/src/mock-doc/document.ts b/src/mock-doc/document.ts
@@ -213,23 +213,8 @@ export class MockDocument extends MockHTMLElement {
     return getElementById(this, id);
   }
 
-  getElementsByClassName(classNames: string) {
-    const foundElms: MockElement[] = [];
-    const classes = classNames.trim().split(' ').filter(c => c.length > 0);
-    getElementsByClassName(this, classes, foundElms);
-    return foundElms;
-  }
-
-  getElementsByTagName(tagName: string) {
-    const foundElms: MockElement[] = [];
-    getElementsByTagName(this, tagName.toLowerCase(), foundElms);
-    return foundElms;
-  }
-
   getElementsByName(elmName: string) {
-    const foundElms: MockElement[] = [];
-    getElementsByName(this, elmName.toLowerCase(), foundElms);
-    return foundElms;
+    return getElementsByName(this, elmName.toLowerCase());
   }
 
   get title() {
@@ -305,7 +290,7 @@ const DOC_KEY_KEEPERS = new Set([
   '_shadowRoot'
 ]);
 
-function getElementById(elm: MockElement, id: string): MockElement {
+export function getElementById(elm: MockElement, id: string): MockElement {
   const children = elm.children;
   for (let i = 0, ii = children.length; i < ii; i++) {
     const childElm = children[i];
@@ -320,34 +305,7 @@ function getElementById(elm: MockElement, id: string): MockElement {
   return null;
 }
 
-
-function getElementsByClassName(elm: MockElement, classNames: string[], foundElms: MockElement[]) {
-  const children = elm.children;
-  for (let i = 0, ii = children.length; i < ii; i++) {
-    const childElm = children[i];
-    for (let j = 0, jj = classNames.length; j < jj; j++) {
-      if (childElm.classList.contains(classNames[j])) {
-        foundElms.push(childElm);
-      }
-    }
-    getElementsByClassName(childElm, classNames, foundElms);
-  }
-}
-
-
-function getElementsByTagName(elm: MockElement, tagName: string, foundElms: MockElement[]) {
-  const children = elm.children;
-  for (let i = 0, ii = children.length; i < ii; i++) {
-    const childElm = children[i];
-    if (childElm.nodeName.toLowerCase() === tagName) {
-      foundElms.push(childElm);
-    }
-    getElementsByTagName(childElm, tagName, foundElms);
-  }
-}
-
-
-function getElementsByName(elm: MockElement, elmName: string, foundElms: MockElement[]) {
+function getElementsByName(elm: MockElement, elmName: string, foundElms: MockElement[] = []) {
   const children = elm.children;
   for (let i = 0, ii = children.length; i < ii; i++) {
     const childElm = children[i];
@@ -356,6 +314,7 @@ function getElementsByName(elm: MockElement, elmName: string, foundElms: MockEle
     }
     getElementsByName(childElm, elmName, foundElms);
   }
+  return foundElms;
 }
 
 

diff --git a/src/mock-doc/node.ts b/src/mock-doc/node.ts
@@ -436,6 +436,15 @@ export class MockElement extends MockNode {
     return null;
   }
 
+  getElementsByClassName(classNames: string) {
+    const classes = classNames.trim().split(' ').filter(c => c.length > 0);
+    return getElementsByClassName(this, classes);
+  }
+
+  getElementsByTagName(tagName: string) {
+    return getElementsByTagName(this, tagName.toLowerCase());
+  }
+
   querySelector(selector: string) {
     return selectOne(selector, this);
   }
@@ -662,6 +671,34 @@ export class MockElement extends MockNode {
 
 }
 
+
+function getElementsByClassName(elm: MockElement, classNames: string[], foundElms: MockElement[] = []) {
+  const children = elm.children;
+  for (let i = 0, ii = children.length; i < ii; i++) {
+    const childElm = children[i];
+    for (let j = 0, jj = classNames.length; j < jj; j++) {
+      if (childElm.classList.contains(classNames[j])) {
+        foundElms.push(childElm);
+      }
+    }
+    getElementsByClassName(childElm, classNames, foundElms);
+  }
+  return foundElms;
+}
+
+
+function getElementsByTagName(elm: MockElement, tagName: string, foundElms: MockElement[] = []) {
+  const children = elm.children;
+  for (let i = 0, ii = children.length; i < ii; i++) {
+    const childElm = children[i];
+    if (childElm.nodeName.toLowerCase() === tagName) {
+      foundElms.push(childElm);
+    }
+    getElementsByTagName(childElm, tagName, foundElms);
+  }
+  return foundElms;
+}
+
 export function resetElement(elm: MockElement) {
   resetEventListeners(elm);
   delete elm.__attributeMap;

diff --git a/src/mock-doc/parse-util.ts b/src/mock-doc/parse-util.ts
@@ -4,6 +4,7 @@ import { MockElement, MockNode, MockTextNode } from './node';
 import { MockTemplateElement } from './element';
 import { NODE_NAMES, NODE_TYPES } from './constants';
 import { Attribute, ParserOptions, TreeAdapter, parse, parseFragment } from 'parse5';
+import { MockDocumentFragment } from './document-fragment';
 
 
 const docParser = new WeakMap<any, any>();
@@ -83,7 +84,7 @@ function getParser(ownerDocument: MockDocument) {
       parentNode.insertBefore(newNode, referenceNode);
     },
 
-    setTemplateContent(templateElement: MockTemplateElement, contentElement: MockElement) {
+    setTemplateContent(templateElement: MockTemplateElement, contentElement: MockDocumentFragment) {
       templateElement.content = contentElement;
     },
 

diff --git a/src/mock-doc/test/document-fragment.spec.ts b/src/mock-doc/test/document-fragment.spec.ts
@@ -7,6 +7,16 @@ describe('documentFragment', () => {
     doc = new MockDocument();
   });
 
+  it('getElementById()', () => {
+    const frag = doc.createDocumentFragment();
+    const div = doc.createElement('div');
+    div.id = 'my-div';
+    frag.append(div);
+
+    expect(frag.getElementById('unknown')).toBeNull();
+    expect(frag.getElementById('my-div')).toBe(div);
+  });
+
   it('move children when appended', () => {
     const frag = new MockDocumentFragment(doc);
     const div = doc.createElement('div');