add e2e tests

src/testing/puppeteer/puppeteer-element.ts

@@ -615,11 +615,7 @@ async function findWithCssSelector(
  * @param selector the selector to query
  * @returns the element handle
  */
-async function shadowQuerySelector (
-  page: pd.E2EPageInternal,
-  rootHandle: puppeteer.ElementHandle,
-  selector: string,
-) {
+async function shadowQuerySelector(page: pd.E2EPageInternal, rootHandle: puppeteer.ElementHandle, selector: string) {
   const shadowHandle = await page.evaluateHandle(
     (elm: Element, shadowSelector: string) => {
       if (!elm.shadowRoot) {

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

@@ -22,6 +22,12 @@ export namespace Components {
         "cars": CarData[];
         "selected": CarData;
     }
+    interface CmpA {
+    }
+    interface CmpB {
+    }
+    interface CmpC {
+    }
     interface DomApi {
     }
     interface DomInteraction {
@@ -139,6 +145,24 @@ declare global {
         prototype: HTMLCarListElement;
         new (): HTMLCarListElement;
     };
+    interface HTMLCmpAElement extends Components.CmpA, HTMLStencilElement {
+    }
+    var HTMLCmpAElement: {
+        prototype: HTMLCmpAElement;
+        new (): HTMLCmpAElement;
+    };
+    interface HTMLCmpBElement extends Components.CmpB, HTMLStencilElement {
+    }
+    var HTMLCmpBElement: {
+        prototype: HTMLCmpBElement;
+        new (): HTMLCmpBElement;
+    };
+    interface HTMLCmpCElement extends Components.CmpC, HTMLStencilElement {
+    }
+    var HTMLCmpCElement: {
+        prototype: HTMLCmpCElement;
+        new (): HTMLCmpCElement;
+    };
     interface HTMLDomApiElement extends Components.DomApi, HTMLStencilElement {
     }
     var HTMLDomApiElement: {
@@ -253,6 +277,9 @@ declare global {
         "build-data": HTMLBuildDataElement;
         "car-detail": HTMLCarDetailElement;
         "car-list": HTMLCarListElement;
+        "cmp-a": HTMLCmpAElement;
+        "cmp-b": HTMLCmpBElement;
+        "cmp-c": HTMLCmpCElement;
         "dom-api": HTMLDomApiElement;
         "dom-interaction": HTMLDomInteractionElement;
         "dom-visible": HTMLDomVisibleElement;
@@ -287,6 +314,12 @@ declare namespace LocalJSX {
         "onCarSelected"?: (event: CarListCustomEvent<CarData>) => void;
         "selected"?: CarData;
     }
+    interface CmpA {
+    }
+    interface CmpB {
+    }
+    interface CmpC {
+    }
     interface DomApi {
     }
     interface DomInteraction {
@@ -336,6 +369,9 @@ declare namespace LocalJSX {
         "build-data": BuildData;
         "car-detail": CarDetail;
         "car-list": CarList;
+        "cmp-a": CmpA;
+        "cmp-b": CmpB;
+        "cmp-c": CmpC;
         "dom-api": DomApi;
         "dom-interaction": DomInteraction;
         "dom-visible": DomVisible;
@@ -365,6 +401,9 @@ declare module "@stencil/core" {
              * Component that helps display a list of cars
              */
             "car-list": LocalJSX.CarList & JSXBase.HTMLAttributes<HTMLCarListElement>;
+            "cmp-a": LocalJSX.CmpA & JSXBase.HTMLAttributes<HTMLCmpAElement>;
+            "cmp-b": LocalJSX.CmpB & JSXBase.HTMLAttributes<HTMLCmpBElement>;
+            "cmp-c": LocalJSX.CmpC & JSXBase.HTMLAttributes<HTMLCmpCElement>;
             "dom-api": LocalJSX.DomApi & JSXBase.HTMLAttributes<HTMLDomApiElement>;
             "dom-interaction": LocalJSX.DomInteraction & JSXBase.HTMLAttributes<HTMLDomInteractionElement>;
             "dom-visible": LocalJSX.DomVisible & JSXBase.HTMLAttributes<HTMLDomVisibleElement>;

test/end-to-end/src/deep-selector/cmpA.tsx

@@ -0,0 +1,18 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'cmp-a',
+  shadow: true,
+})
+export class ComponentA {
+  render() {
+    return (
+      <div>
+        <section>
+          <span>I am in component A</span>
+        </section>
+        <cmp-b></cmp-b>
+      </div>
+    );
+  }
+}

test/end-to-end/src/deep-selector/cmpB.tsx

@@ -0,0 +1,18 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'cmp-b',
+  shadow: true,
+})
+export class ComponentB {
+  render() {
+    return (
+      <div>
+        <section>
+          <span>I am in component B</span>
+        </section>
+        <cmp-c></cmp-c>
+      </div>
+    );
+  }
+}

test/end-to-end/src/deep-selector/cmpC.tsx

@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'cmp-c',
+  shadow: true,
+})
+export class ComponentC {
+  render() {
+    return (
+      <div>
+        <span>I am in component C</span>
+      </div>
+    );
+  }
+}

test/end-to-end/src/deep-selector/deep-selector.e2e.ts

@@ -0,0 +1,23 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('goto root url', () => {
+  it('have custom hydrate flags and css', async () => {
+    // create a new puppeteer page
+    const page = await newE2EPage({
+      html: `
+        <cmp-a></cmp-a>
+      `,
+    });
+
+    const spanCmpA = await page.$('cmp-a >>> span');
+    expect(await spanCmpA.evaluate((el) => el.textContent)).toBe('I am in component A');
+    const spanCmpB = await page.$('cmp-a >>> cmp-b >>> span');
+    expect(await spanCmpB.evaluate((el) => el.textContent)).toBe('I am in component B');
+    const spanCmpC = await page.$('cmp-a >>> cmp-b >>> cmp-c >>> span');
+    expect(await spanCmpC.evaluate((el) => el.textContent)).toBe('I am in component C');
+
+    // we skip through the shadow dom
+    const spanCmp = await page.$('cmp-a >>> cmp-c >>> span');
+    expect(await spanCmp.evaluate((el) => el.textContent)).toBe('I am in component C');
+  });
+});

test/end-to-end/src/deep-selector/readme.md

@@ -0,0 +1,23 @@
+# cmp-c
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Dependencies
+
+### Used by
+
+ - [cmp-b](.)
+
+### Graph
+```mermaid
+graph TD;
+  cmp-b --> cmp-c
+  style cmp-c fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

test/wdio/reflect-nan-attribute-hyphen/reflect-nan-attribute-hyphen.tsx

@@ -9,8 +9,7 @@ export class ReflectNanAttributeHyphen {
   // for this test, it's necessary that 'reflect' is true, the class member is camel-cased, and is of type 'number'
   @Prop({ reflect: true }) valNum: number;
 
-  // counter to proxy the number of times a render has occurred, since we don't have access to those dev tools during
-  // karma tests
+  // counter to proxy the number of times a render has occurred
   renderCount = 0;
 
   render() {

test/wdio/reflect-nan-attribute-with-child/child-reflect-nan-attribute.tsx

@@ -9,8 +9,7 @@ export class ChildReflectNanAttribute {
   // for this test, it's necessary that 'reflect' is true, the class member is not camel-cased, and is of type 'number'
   @Prop({ reflect: true }) val: number;
 
-  // counter to proxy the number of times a render has occurred, since we don't have access to those dev tools during
-  // karma tests
+  // counter to proxy the number of times a render has occurred
   renderCount = 0;
 
   render() {

test/wdio/reflect-nan-attribute-with-child/parent-reflect-nan-attribute.tsx

@@ -6,8 +6,7 @@ import { Component, h } from '@stencil/core';
   shadow: true,
 })
 export class ParentReflectNanAttribute {
-  // counter to proxy the number of times a render has occurred, since we don't have access to those dev tools during
-  // karma tests
+  // counter to proxy the number of times a render has occurred
   renderCount = 0;
 
   render() {

test/wdio/reflect-nan-attribute/reflect-nan-attribute.tsx

@@ -9,8 +9,7 @@ export class ReflectNanAttribute {
   // for this test, it's necessary that 'reflect' is true, the class member is not camel-cased, and is of type 'number'
   @Prop({ reflect: true }) val: number;
 
-  // counter to proxy the number of times a render has occurred, since we don't have access to those dev tools during
-  // karma tests
+  // counter to proxy the number of times a render has occurred
   renderCount = 0;
 
   render() {

test/wdio/reflect-single-render/child-with-reflection.tsx

@@ -6,8 +6,7 @@ import { Component, h, Prop } from '@stencil/core';
   shadow: true,
 })
 export class ChildWithReflection {
-  // counter to proxy the number of times a render has occurred, since we don't have access to those dev tools during
-  // karma tests
+  // counter to proxy the number of times a render has occurred
   renderCount = 0;
 
   // to properly replicate the issue:

test/wdio/reflect-single-render/parent-with-reflect-child.tsx

@@ -6,8 +6,7 @@ import { Component, h } from '@stencil/core';
   shadow: true,
 })
 export class MyComponent {
-  // counter to proxy the number of times a render has occurred, since we don't have access to those dev tools during
-  // karma tests
+  // counter to proxy the number of times a render has occurred
   renderCount = 0;
 
   render() {