Modify selector to handle child combinators when unit testing

src/mock-doc/selector.ts

@@ -15,7 +15,7 @@ export function closest(selector: string, elm: MockElement) {
 
 export function matches(selector: string, elm: MockElement) {
   const selectors = parse(selector);
-  return matchesSelectors(selectors, elm);
+  return matchesSelectors(selectors, elm) !== null;
 }
 
 
@@ -28,9 +28,11 @@ export function selectOne(selector: string, elm: MockElement) {
 function selectOneRecursion(selectors: Selector[][], elm: MockElement): MockElement {
   const children = elm.children;
   for (let i = 0, ii = children.length; i < ii; i++) {
-    if (matchesSelectors(selectors, children[i]) === true) {
-      return children[i];
+    const selectedElm = matchesSelectors(selectors, children[i]);
+    if (selectedElm) {
+      return selectedElm;
     }
+
     const childMatch = selectOneRecursion(selectors, children[i]);
     if (childMatch != null) {
       return childMatch;
@@ -50,34 +52,43 @@ export function selectAll(selector: string, elm: MockElement) {
 function selectAllRecursion(selectors: Selector[][], elm: MockElement, found: MockElement[]) {
   const children = elm.children;
   for (let i = 0, ii = children.length; i < ii; i++) {
-    if (matchesSelectors(selectors, children[i]) === true) {
+    const selectedElm = matchesSelectors(selectors, children[i]);
+    if (selectedElm) {
       found.push(children[i]);
     }
     selectAllRecursion(selectors, children[i], found);
   }
 }
 
 
-function matchesSelectors(selectors: Selector[][], elm: MockElement) {
+function matchesSelectors(selectors: Selector[][], elm: MockElement): MockElement {
   for (let i = 0, ii = selectors.length; i < ii; i++) {
-    if (matchesEverySelector(selectors[i], elm) === true) {
-      return true;
+    const selectedElm = matchesEverySelector(selectors[i], elm);
+    if (selectedElm) {
+      return selectedElm;
     }
   }
-  return false;
+  return null;
 }
 
 
-function matchesEverySelector(selectorData: Selector[], elm: MockElement) {
+function matchesEverySelector(selectorData: Selector[], elm: MockElement): MockElement {
+  let currElm = elm;
   for (let i = 0, ii = selectorData.length; i < ii; i++) {
-    if (matchesSelector(selectorData[i], elm) === false) {
-      return false;
+    if (isCssCombinator(selectorData[i])) { 
+      const childSelectors = selectorData.slice(i+1);
+      if (childSelectors.length == 0) {
+        return null;
+      }
+      return matchChildElements(childSelectors, elm.children);
+    }
+    else if (matchesSelector(selectorData[i], currElm) === false) {
+      return null;
     }
   }
-  return true;
+  return currElm;
 }
 
-
 function matchesSelector(selectorData: Selector, elm: MockElement) {
   switch (selectorData.type) {
     case 'tag':
@@ -94,11 +105,27 @@ function matchesSelector(selectorData: Selector, elm: MockElement) {
         return elm.getAttribute(selectorData.name) === selectorData.value;
       }
       return false;
+  }
+
+  return false;
+}
 
-    case 'child':
-      // TODO
-      return true;
+function isCssCombinator(selectorData: Selector) {
+  if (selectorData.type === 'child') {
+    return true;
   }
 
+  // TODO: handle other combinators
   return false;
 }
+
+function matchChildElements(selectorData: Selector[], children: MockElement[]) {
+  for (const child of children) {
+    const s = matchesEverySelector(selectorData, child);
+    if (s) {
+      return s;
+    }
+  }
+  return null;
+
+}

src/mock-doc/test/selector.spec.ts

@@ -131,4 +131,72 @@ describe('selector', () => {
     expect(nav.outerHTML).toBe('<nav>2</nav>');
   });
 
+  it('finds child', () => {
+    const doc = new MockDocument(`
+      <div>
+        <span></span>
+      </div>
+    `);
+
+    const span = doc.querySelector('div > span');
+    expect(span.outerHTML).toBe('<span></span>');
+  });
+
+  it('finds child if multiple children', () => {
+    const doc = new MockDocument(`
+      <div>
+        <a></a>
+        <span></span>
+      </div>
+    `);
+
+    const span = doc.querySelector('div > span');
+    expect(span.outerHTML).toBe('<span></span>');
+  });
+
+  it('finds child if multiple selectors', () => {
+    const doc = new MockDocument(`
+      <div>
+        <a></a>
+        <span>
+          <div></div>
+          <div class="inner"></div>
+        </span>
+      </div>
+    `);
+
+    const span = doc.querySelector('div > span > .inner');
+    expect(span.outerHTML).toBe('<div class="inner"></div>');
+  });
+
+  it('not find child if does not exist', () => {
+    const doc = new MockDocument(`
+      <div>
+        <a></a>
+        <span>
+          <div></div>
+          <div class="inner"></div>
+        </span>
+      </div>
+    `);
+
+    const span = doc.querySelector('div > span > .none');
+    expect(span).toBeFalsy();
+  });
+
+  it('not find child if no tag specified after combinator', () => {
+    const doc = new MockDocument(`
+      <div>
+        <a></a>
+        <span>
+          <div></div>
+          <div class="inner"></div>
+        </span>
+      </div>
+    `);
+
+    const span = doc.querySelector('div > span > ');
+    expect(span).toBeFalsy();
+  });
+
 });