fix(testing): prevent find from throwing error when query has no match

rindojs · Apr 23, 2024 · dba99f1 · dba99f1
1 parent 2ae86ad
commit dba99f1
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 0 deletions.
diff --git a/src/testing/puppeteer/puppeteer-element.ts b/src/testing/puppeteer/puppeteer-element.ts
@@ -549,6 +549,11 @@ export async function find(page: pd.E2EPageInternal, rootHandle: puppeteer.Eleme
 
   if (typeof selector === 'string' && selector.includes('>>>')) {
     const handle = await page.$(selector);
+
+    if (!handle) {
+      return null;
+    }
+
     const elm = new E2EElement(page, handle);
     await elm.e2eSync();
     return elm;

diff --git a/test/end-to-end/src/components.d.ts b/test/end-to-end/src/components.d.ts
@@ -36,6 +36,10 @@ export namespace Components {
     }
     interface ElementCmp {
     }
+    interface EmptyCmp {
+    }
+    interface EmptyCmpShadow {
+    }
     interface EnvData {
     }
     interface EventCmp {
@@ -187,6 +191,18 @@ declare global {
         prototype: HTMLElementCmpElement;
         new (): HTMLElementCmpElement;
     };
+    interface HTMLEmptyCmpElement extends Components.EmptyCmp, HTMLRindoElement {
+    }
+    var HTMLEmptyCmpElement: {
+        prototype: HTMLEmptyCmpElement;
+        new (): HTMLEmptyCmpElement;
+    };
+    interface HTMLEmptyCmpShadowElement extends Components.EmptyCmpShadow, HTMLRindoElement {
+    }
+    var HTMLEmptyCmpShadowElement: {
+        prototype: HTMLEmptyCmpShadowElement;
+        new (): HTMLEmptyCmpShadowElement;
+    };
     interface HTMLEnvDataElement extends Components.EnvData, HTMLRindoElement {
     }
     var HTMLEnvDataElement: {
@@ -284,6 +300,8 @@ declare global {
         "dom-interaction": HTMLDomInteractionElement;
         "dom-visible": HTMLDomVisibleElement;
         "element-cmp": HTMLElementCmpElement;
+        "empty-cmp": HTMLEmptyCmpElement;
+        "empty-cmp-shadow": HTMLEmptyCmpShadowElement;
         "env-data": HTMLEnvDataElement;
         "event-cmp": HTMLEventCmpElement;
         "import-assets": HTMLImportAssetsElement;
@@ -328,6 +346,10 @@ declare namespace LocalJSX {
     }
     interface ElementCmp {
     }
+    interface EmptyCmp {
+    }
+    interface EmptyCmpShadow {
+    }
     interface EnvData {
     }
     interface EventCmp {
@@ -376,6 +398,8 @@ declare namespace LocalJSX {
         "dom-interaction": DomInteraction;
         "dom-visible": DomVisible;
         "element-cmp": ElementCmp;
+        "empty-cmp": EmptyCmp;
+        "empty-cmp-shadow": EmptyCmpShadow;
         "env-data": EnvData;
         "event-cmp": EventCmp;
         "import-assets": ImportAssets;
@@ -408,6 +432,8 @@ declare module "@rindo/core" {
             "dom-interaction": LocalJSX.DomInteraction & JSXBase.HTMLAttributes<HTMLDomInteractionElement>;
             "dom-visible": LocalJSX.DomVisible & JSXBase.HTMLAttributes<HTMLDomVisibleElement>;
             "element-cmp": LocalJSX.ElementCmp & JSXBase.HTMLAttributes<HTMLElementCmpElement>;
+            "empty-cmp": LocalJSX.EmptyCmp & JSXBase.HTMLAttributes<HTMLEmptyCmpElement>;
+            "empty-cmp-shadow": LocalJSX.EmptyCmpShadow & JSXBase.HTMLAttributes<HTMLEmptyCmpShadowElement>;
             "env-data": LocalJSX.EnvData & JSXBase.HTMLAttributes<HTMLEnvDataElement>;
             "event-cmp": LocalJSX.EventCmp & JSXBase.HTMLAttributes<HTMLEventCmpElement>;
             "import-assets": LocalJSX.ImportAssets & JSXBase.HTMLAttributes<HTMLImportAssetsElement>;

diff --git a/test/end-to-end/src/non-existent-element/empty-cmp-shadow.tsx b/test/end-to-end/src/non-existent-element/empty-cmp-shadow.tsx
@@ -0,0 +1,11 @@
+import { Component, h, Host } from '@rindo/core';
+
+@Component({
+  tag: 'empty-cmp-shadow',
+  shadow: true,
+})
+export class EmptyComponentShadow {
+  render() {
+    return <Host>I have no children!</Host>;
+  }
+}
diff --git a/test/end-to-end/src/non-existent-element/empty-cmp.tsx b/test/end-to-end/src/non-existent-element/empty-cmp.tsx
@@ -0,0 +1,12 @@
+import { Component, h, Host } from '@rindo/core';
+
+@Component({
+  tag: 'empty-cmp',
+  shadow: false,
+  scoped: false,
+})
+export class EmptyComponent {
+  render() {
+    return <Host>I have no children!</Host>;
+  }
+}
diff --git a/test/end-to-end/src/non-existent-element/non-existent-element.e2e.ts b/test/end-to-end/src/non-existent-element/non-existent-element.e2e.ts
@@ -0,0 +1,55 @@
+import { newE2EPage } from '@rindo/core/testing';
+
+describe('Querying non-existent element(s)', () => {
+  describe('Shadow DOM', () => {
+    it('returns `null` if the element does not exist', async () => {
+      // create a new puppeteer page
+      const page = await newE2EPage({
+        html: `
+          <empty-cmp-shadow></empty-cmp-shadow>
+        `,
+      });
+
+      const elm = await page.find('empty-cmp-shadow >>> .non-existent');
+      expect(elm).toBeNull();
+    });
+
+    it('returns an empty array if no elements match the selector', async () => {
+      // create a new puppeteer page
+      const page = await newE2EPage({
+        html: `
+          <empty-cmp-shadow></empty-cmp-shadow>
+        `,
+      });
+
+      const elm = await page.findAll('empty-cmp-shadow >>> .non-existent');
+      expect(elm).toEqual([]);
+    });
+  });
+
+  describe('Light DOM', () => {
+    it('returns `null` if the element does not exist', async () => {
+      // create a new puppeteer page
+      const page = await newE2EPage({
+        html: `
+          <empty-cmp></empty-cmp>
+        `,
+      });
+
+      const elm = await page.find('empty-cmp >>> .non-existent');
+      expect(elm).toBeNull();
+    });
+
+    it('returns an empty array if no elements match the selector', async () => {
+      // create a new puppeteer page
+      const page = await newE2EPage({
+        html: `
+          <empty-cmp></empty-cmp>
+        `,
+      });
+
+      const elm = await page.findAll('empty-cmp >>> .non-existent');
+      expect(elm).toEqual([]);
+    });
+  });
+});
diff --git a/test/end-to-end/src/non-existent-element/readme.md b/test/end-to-end/src/non-existent-element/readme.md
@@ -0,0 +1,10 @@
+# empty-cmp
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [RindoJS](https://rindojs.web.app/)*