feat: modify deepQuerySelectorAll behavior, add getAllElementsAndShad…

…owRoots. (#36)

* feat: introduce getAllElementsAndShadowRoots, make deepQuerySelector behave closer to spec

* tests

* fix: deep query selectors actually work

* chore: prettier

__tests__/deep-query-selectors.test.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import { Duplicates, TripleShadowRoots } from "../components";
+import { deepQuerySelector, deepQuerySelectorAll } from "../src/index";
+
+describe("deepQuerySelector()", () => {
+  test("Should find and return the first button.", () => {
+    const { container, baseElement } = render(<Duplicates />);
+
+    const btn = document
+      .querySelector("duplicate-buttons")
+      ?.shadowRoot?.querySelector("button");
+    const secondButton = document
+      .querySelector("duplicate-buttons")
+      ?.shadowRoot?.querySelectorAll("button")[1];
+
+    expect(deepQuerySelector(container, "button")).toBeInstanceOf(
+      HTMLButtonElement
+    );
+    expect(deepQuerySelector(container, "button")).toBe(btn);
+    expect(deepQuerySelector(container, "button")).not.toBe(secondButton);
+
+    expect(deepQuerySelector(baseElement, "button")).toBeInstanceOf(
+      HTMLButtonElement
+    );
+    expect(deepQuerySelector(baseElement, "button")).toBe(btn);
+    expect(deepQuerySelector(baseElement, "button")).not.toBe(secondButton);
+  });
+
+  test("Should find and return the 3rd level button element", () => {
+    const { container, baseElement } = render(<TripleShadowRoots />);
+    let el = deepQuerySelector(container, "button");
+    expect(el).toBeInstanceOf(HTMLButtonElement);
+    el = deepQuerySelector(baseElement, "button");
+    expect(el).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  test("Should not find and 3rd level button element when shallow is true", () => {
+    const { container, baseElement } = render(<TripleShadowRoots />);
+    let el = deepQuerySelector(container, "button", { shallow: true });
+    expect(el).not.toBeInstanceOf(HTMLButtonElement);
+    el = deepQuerySelector(baseElement, "button", { shallow: true });
+    expect(el).not.toBeInstanceOf(HTMLButtonElement);
+  });
+});
+
+describe("deepQuerySelectorAll()", () => {
+  test("Should find and return both buttons", () => {
+    const { container, baseElement } = render(<Duplicates />);
+    let btns = deepQuerySelectorAll(container, "button");
+
+    expect(btns).toHaveLength(2);
+    btns.forEach((btn) => expect(btn).toBeInstanceOf(HTMLButtonElement));
+
+    btns = deepQuerySelectorAll(baseElement, "button");
+    expect(btns).toHaveLength(2);
+    btns.forEach((btn) => expect(btn).toBeInstanceOf(HTMLButtonElement));
+  });
+});

components.tsx

@@ -131,7 +131,8 @@ class TripleShadowRootsElement extends HTMLElement {
 		if (this.isConnected === false) return ""
 
     this.shadowRoot.innerHTML = `
-			<nested-shadow-roots></nested-shadow-roots>
+			<nested-shadow-roots>
+			</nested-shadow-roots>
 		`;
 	}
 }

src/deep-query-selectors.ts

@@ -2,32 +2,70 @@ import { Container, ShadowOptions } from "./types";
 
 export function deepQuerySelector(
   container: Container,
-  selectors: string,
-  options: ShadowOptions = { shallow: false },
-  elements: (Element | ShadowRoot)[] = []
-) {
-  const els = deepQuerySelectorAll(container, selectors, options, elements);
+  selector: string,
+  options: ShadowOptions = { shallow: false }
+): Element | null {
+  const els = deepQuerySelectorAll(container, selector, options);
 
   if (Array.isArray(els) && els.length > 0) {
-    return els[0];
+    return els[0] as Element | null;
   }
 
   return null;
 }
 
-export function deepQuerySelectorAll(
+/**
+ * `deepQuerySelector` behaves like a normal querySelector except it will recurse into the container ShadowRoot
+ * and shadowRoot of children. It will not return shadow roots.
+ *
+ * @example
+ *   // <my-element>
+ *   //   #shadowRoot <slot name="blah"></slot>
+ *   //   <div></div>
+ *   // </my-element>
+ *   deepQuerySelectorAll(myElement, "*") // => [slot, div]
+ *   deepQuerySelectorAll(myElement, "slot[name='blah']") // => [slot]
+ */
+export function deepQuerySelectorAll<T extends HTMLElement>(
+  container: Container,
+  selector: string,
+  options: ShadowOptions = { shallow: false }
+): T[] {
+  const elements = getAllElementsAndShadowRoots(container, options);
+
+  const queriedElements = elements
+    .map((el) => Array.from(el.querySelectorAll<T>(selector)))
+    .flat(Infinity) as T[];
+  return [...new Set(queriedElements)];
+}
+
+// This could probably get really slow and memory intensive in large DOMs,
+// maybe an infinite generator in the future?
+export function getAllElementsAndShadowRoots(
+  container: Container,
+  options: ShadowOptions = { shallow: false }
+) {
+  const selector = "*";
+  return recurse(container, selector, options);
+}
+
+function recurse(
   container: Container,
-  selectors: string,
+  selector: string,
   options: ShadowOptions = { shallow: false },
-  elements: (Element | ShadowRoot)[] = []
+  elementsToProcess: (Element | ShadowRoot | Document)[] = [],
+  elements: (Element | ShadowRoot | Document)[] = []
 ) {
   // if "document" is passed in, it will also pick up "<html>" causing the query to run twice.
   if (container instanceof Document) {
     container = document.documentElement;
   }
 
-  // Make sure we're checking the container element!
-  elements.push(container);
+  // I haven't figured this one out, but for some reason when using the buildQueries
+  // from DOM-testing-library, not reassigning here causes an infinite loop.
+  // I've even tried calling "elementsToProcess.includes / .find" with no luck.
+  elementsToProcess = [container];
+  elements.push(container); // Make sure we're checking the container element!
 
   // Accounts for if the container houses a textNode
   if (
@@ -38,27 +76,31 @@ export function deepQuerySelectorAll(
     elements.push(container.shadowRoot);
   }
 
-  container.querySelectorAll(selectors).forEach((el: Element | HTMLElement) => {
-    if (el.shadowRoot == null || el.shadowRoot.mode === "closed") {
-      elements.push(el);
-      return;
-    }
+  elementsToProcess.forEach((containerElement) => {
+    containerElement
+      .querySelectorAll(selector)
+      .forEach((el: Element | HTMLElement) => {
+        if (el.shadowRoot == null || el.shadowRoot.mode === "closed") {
+          elements.push(el);
+          return;
+        }
 
-    // comment this to not add shadowRoots.
-    // This is here because queryByRole() requires the parent element which in some cases is the shadow root.
-    elements.push(el.shadowRoot);
+        // This is here because queryByRole() requires the parent element which in some cases is the shadow root.
+        elements.push(el.shadowRoot);
 
-    if (options.shallow === true) {
-      el.shadowRoot
-        .querySelectorAll(selectors)
-        .forEach((el) => elements.push(el));
-      return;
-    }
+        if (options.shallow === true) {
+          el.shadowRoot.querySelectorAll(selector).forEach((el) => {
+            elements.push(el);
+          });
+          return;
+        }
 
-    el.shadowRoot
-      .querySelectorAll(selectors)
-      .forEach((el) => elements.push(el));
-    deepQuerySelectorAll(el.shadowRoot, selectors, options, elements);
+        el.shadowRoot.querySelectorAll(selector).forEach((el) => {
+          elements.push(el);
+          elementsToProcess.push(el);
+        });
+        recurse(el.shadowRoot, selector, options, elementsToProcess, elements);
+      });
   });
 
   // We can sometimes hit duplicate nodes this way, lets stop that.

src/index.ts

@@ -24,6 +24,7 @@ export * from "./shadow-queries";
 export {
   deepQuerySelector,
   deepQuerySelectorAll,
+  getAllElementsAndShadowRoots,
 } from "./deep-query-selectors";
 
 export {

src/shadow-queries.ts

@@ -12,7 +12,7 @@ import {
   queryAllByTestId,
 } from "@testing-library/dom";
 
-import { deepQuerySelectorAll } from "./deep-query-selectors";
+import { getAllElementsAndShadowRoots } from "./deep-query-selectors";
 import {
   ScreenShadowMatcherParams,
   ScreenShadowRoleMatcherParams,
@@ -22,8 +22,6 @@ import {
   ShadowSelectorMatcherParams,
 } from "./types";
 
-const scopeQuery = "*";
-
 function toShadowQueries<T extends Function[]>(queries: T): T {
   return queries.map((query): Function => {
     return (...args: any[]): unknown => {
@@ -49,7 +47,7 @@ function queryAllByShadowRole<T extends HTMLElement = HTMLElement>(
 
   return [
     ...new Set(
-      deepQuerySelectorAll(container, scopeQuery, options)
+      getAllElementsAndShadowRoots(container, options)
         .map((el) => queryAllByRole(el as HTMLElement, role, options))
         .flat(Infinity)
     ),
@@ -89,7 +87,7 @@ function queryAllByShadowLabelText<T extends HTMLElement = HTMLElement>(
 
   return [
     ...new Set(
-      deepQuerySelectorAll(container, scopeQuery, options)
+      getAllElementsAndShadowRoots(container, options)
         .map((el) => queryAllByLabelText(el as HTMLElement, id, options))
         .flat(Infinity)
     ),
@@ -129,7 +127,7 @@ function queryAllByShadowPlaceholderText<T extends HTMLElement = HTMLElement>(
 
   return [
     ...new Set(
-      deepQuerySelectorAll(container, scopeQuery, options)
+      getAllElementsAndShadowRoots(container, options)
         .map((el) => queryAllByPlaceholderText(el as HTMLElement, id, options))
         .flat(Infinity)
     ),
@@ -169,7 +167,7 @@ function queryAllByShadowText<T extends HTMLElement = HTMLElement>(
 
   return [
     ...new Set(
-      deepQuerySelectorAll(container, scopeQuery, options)
+      getAllElementsAndShadowRoots(container, options)
         .map((el) => queryAllByText(el as HTMLElement, id, options))
         .flat(Infinity)
     ),
@@ -209,7 +207,7 @@ function queryAllByShadowDisplayValue<T extends HTMLElement = HTMLElement>(
 
   return [
     ...new Set(
-      deepQuerySelectorAll(container, scopeQuery, options)
+      getAllElementsAndShadowRoots(container, options)
         .map((el) => queryAllByDisplayValue(el as HTMLElement, id, options))
         .flat(Infinity)
     ),
@@ -249,7 +247,7 @@ function queryAllByShadowAltText<T extends HTMLElement = HTMLElement>(
 
   return [
     ...new Set(
-      deepQuerySelectorAll(container, scopeQuery, options)
+      getAllElementsAndShadowRoots(container, options)
         .map((el) => queryAllByAltText(el as HTMLElement, id, options))
         .flat(Infinity)
     ),
@@ -289,7 +287,7 @@ function queryAllByShadowTitle<T extends HTMLElement = HTMLElement>(
 
   return [
     ...new Set(
-      deepQuerySelectorAll(container, scopeQuery, options)
+      getAllElementsAndShadowRoots(container, options)
         .map((el) => queryAllByTitle(el as HTMLElement, id, options))
         .flat(Infinity)
     ),
@@ -329,7 +327,7 @@ function queryAllByShadowTestId<T extends HTMLElement = HTMLElement>(
 
   return [
     ...new Set(
-      deepQuerySelectorAll(container, scopeQuery, options)
+      getAllElementsAndShadowRoots(container, options)
         .map((el) => queryAllByTestId(el as HTMLElement, id, options))
         .flat(Infinity)
     ),