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

This commit fixes an issue w/ our Puppeteer testing implementation where the `find()` method would throw an error if the query had no matching elements.

Fixes: #5639

STENCIL-1256

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;

test/end-to-end/src/components.d.ts

@@ -36,6 +36,8 @@ export namespace Components {
     }
     interface ElementCmp {
     }
+    interface EmptyCmp {
+    }
     interface EnvData {
     }
     interface EventCmp {
@@ -187,6 +189,12 @@ declare global {
         prototype: HTMLElementCmpElement;
         new (): HTMLElementCmpElement;
     };
+    interface HTMLEmptyCmpElement extends Components.EmptyCmp, HTMLStencilElement {
+    }
+    var HTMLEmptyCmpElement: {
+        prototype: HTMLEmptyCmpElement;
+        new (): HTMLEmptyCmpElement;
+    };
     interface HTMLEnvDataElement extends Components.EnvData, HTMLStencilElement {
     }
     var HTMLEnvDataElement: {
@@ -284,6 +292,7 @@ declare global {
         "dom-interaction": HTMLDomInteractionElement;
         "dom-visible": HTMLDomVisibleElement;
         "element-cmp": HTMLElementCmpElement;
+        "empty-cmp": HTMLEmptyCmpElement;
         "env-data": HTMLEnvDataElement;
         "event-cmp": HTMLEventCmpElement;
         "import-assets": HTMLImportAssetsElement;
@@ -328,6 +337,8 @@ declare namespace LocalJSX {
     }
     interface ElementCmp {
     }
+    interface EmptyCmp {
+    }
     interface EnvData {
     }
     interface EventCmp {
@@ -376,6 +387,7 @@ declare namespace LocalJSX {
         "dom-interaction": DomInteraction;
         "dom-visible": DomVisible;
         "element-cmp": ElementCmp;
+        "empty-cmp": EmptyCmp;
         "env-data": EnvData;
         "event-cmp": EventCmp;
         "import-assets": ImportAssets;
@@ -408,6 +420,7 @@ declare module "@stencil/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>;
             "env-data": LocalJSX.EnvData & JSXBase.HTMLAttributes<HTMLEnvDataElement>;
             "event-cmp": LocalJSX.EventCmp & JSXBase.HTMLAttributes<HTMLEventCmpElement>;
             "import-assets": LocalJSX.ImportAssets & JSXBase.HTMLAttributes<HTMLImportAssetsElement>;

test/end-to-end/src/non-existent-element/empty-cmp.tsx

@@ -0,0 +1,11 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'empty-cmp',
+  shadow: true,
+})
+export class EmptyComponent {
+  render() {
+    return <Host>I have no children!</Host>;
+  }
+}

test/end-to-end/src/non-existent-element/non-existent-element.e2e.ts

@@ -0,0 +1,27 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('Querying non-existent element(s)', () => {
+  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).toBe([]);
+  });
+});