chore(wdio): port lifecycle-basic test suite to wdio (#5478)

test/karma/test-app/components.d.ts

@@ -101,14 +101,6 @@ export namespace Components {
     interface LifecycleAsyncC {
         "value": string;
     }
-    interface LifecycleBasicA {
-    }
-    interface LifecycleBasicB {
-        "value": string;
-    }
-    interface LifecycleBasicC {
-        "value": string;
-    }
     interface LifecycleNestedA {
     }
     interface LifecycleNestedB {
@@ -356,14 +348,6 @@ export interface LifecycleAsyncCCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLifecycleAsyncCElement;
 }
-export interface LifecycleBasicBCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLLifecycleBasicBElement;
-}
-export interface LifecycleBasicCCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLLifecycleBasicCElement;
-}
 declare global {
     interface HTMLBadSharedJsxElement extends Components.BadSharedJsx, HTMLStencilElement {
     }
@@ -679,48 +663,6 @@ declare global {
         prototype: HTMLLifecycleAsyncCElement;
         new (): HTMLLifecycleAsyncCElement;
     };
-    interface HTMLLifecycleBasicAElement extends Components.LifecycleBasicA, HTMLStencilElement {
-    }
-    var HTMLLifecycleBasicAElement: {
-        prototype: HTMLLifecycleBasicAElement;
-        new (): HTMLLifecycleBasicAElement;
-    };
-    interface HTMLLifecycleBasicBElementEventMap {
-        "lifecycleLoad": any;
-        "lifecycleUpdate": any;
-    }
-    interface HTMLLifecycleBasicBElement extends Components.LifecycleBasicB, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLLifecycleBasicBElementEventMap>(type: K, listener: (this: HTMLLifecycleBasicBElement, ev: LifecycleBasicBCustomEvent<HTMLLifecycleBasicBElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLLifecycleBasicBElementEventMap>(type: K, listener: (this: HTMLLifecycleBasicBElement, ev: LifecycleBasicBCustomEvent<HTMLLifecycleBasicBElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLLifecycleBasicBElement: {
-        prototype: HTMLLifecycleBasicBElement;
-        new (): HTMLLifecycleBasicBElement;
-    };
-    interface HTMLLifecycleBasicCElementEventMap {
-        "lifecycleLoad": any;
-        "lifecycleUpdate": any;
-    }
-    interface HTMLLifecycleBasicCElement extends Components.LifecycleBasicC, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLLifecycleBasicCElementEventMap>(type: K, listener: (this: HTMLLifecycleBasicCElement, ev: LifecycleBasicCCustomEvent<HTMLLifecycleBasicCElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLLifecycleBasicCElementEventMap>(type: K, listener: (this: HTMLLifecycleBasicCElement, ev: LifecycleBasicCCustomEvent<HTMLLifecycleBasicCElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLLifecycleBasicCElement: {
-        prototype: HTMLLifecycleBasicCElement;
-        new (): HTMLLifecycleBasicCElement;
-    };
     interface HTMLLifecycleNestedAElement extends Components.LifecycleNestedA, HTMLStencilElement {
     }
     var HTMLLifecycleNestedAElement: {
@@ -1321,9 +1263,6 @@ declare global {
         "lifecycle-async-a": HTMLLifecycleAsyncAElement;
         "lifecycle-async-b": HTMLLifecycleAsyncBElement;
         "lifecycle-async-c": HTMLLifecycleAsyncCElement;
-        "lifecycle-basic-a": HTMLLifecycleBasicAElement;
-        "lifecycle-basic-b": HTMLLifecycleBasicBElement;
-        "lifecycle-basic-c": HTMLLifecycleBasicCElement;
         "lifecycle-nested-a": HTMLLifecycleNestedAElement;
         "lifecycle-nested-b": HTMLLifecycleNestedBElement;
         "lifecycle-nested-c": HTMLLifecycleNestedCElement;
@@ -1518,18 +1457,6 @@ declare namespace LocalJSX {
         "onLifecycleUpdate"?: (event: LifecycleAsyncCCustomEvent<any>) => void;
         "value"?: string;
     }
-    interface LifecycleBasicA {
-    }
-    interface LifecycleBasicB {
-        "onLifecycleLoad"?: (event: LifecycleBasicBCustomEvent<any>) => void;
-        "onLifecycleUpdate"?: (event: LifecycleBasicBCustomEvent<any>) => void;
-        "value"?: string;
-    }
-    interface LifecycleBasicC {
-        "onLifecycleLoad"?: (event: LifecycleBasicCCustomEvent<any>) => void;
-        "onLifecycleUpdate"?: (event: LifecycleBasicCCustomEvent<any>) => void;
-        "value"?: string;
-    }
     interface LifecycleNestedA {
     }
     interface LifecycleNestedB {
@@ -1794,9 +1721,6 @@ declare namespace LocalJSX {
         "lifecycle-async-a": LifecycleAsyncA;
         "lifecycle-async-b": LifecycleAsyncB;
         "lifecycle-async-c": LifecycleAsyncC;
-        "lifecycle-basic-a": LifecycleBasicA;
-        "lifecycle-basic-b": LifecycleBasicB;
-        "lifecycle-basic-c": LifecycleBasicC;
         "lifecycle-nested-a": LifecycleNestedA;
         "lifecycle-nested-b": LifecycleNestedB;
         "lifecycle-nested-c": LifecycleNestedC;
@@ -1937,9 +1861,6 @@ declare module "@stencil/core" {
             "lifecycle-async-a": LocalJSX.LifecycleAsyncA & JSXBase.HTMLAttributes<HTMLLifecycleAsyncAElement>;
             "lifecycle-async-b": LocalJSX.LifecycleAsyncB & JSXBase.HTMLAttributes<HTMLLifecycleAsyncBElement>;
             "lifecycle-async-c": LocalJSX.LifecycleAsyncC & JSXBase.HTMLAttributes<HTMLLifecycleAsyncCElement>;
-            "lifecycle-basic-a": LocalJSX.LifecycleBasicA & JSXBase.HTMLAttributes<HTMLLifecycleBasicAElement>;
-            "lifecycle-basic-b": LocalJSX.LifecycleBasicB & JSXBase.HTMLAttributes<HTMLLifecycleBasicBElement>;
-            "lifecycle-basic-c": LocalJSX.LifecycleBasicC & JSXBase.HTMLAttributes<HTMLLifecycleBasicCElement>;
             "lifecycle-nested-a": LocalJSX.LifecycleNestedA & JSXBase.HTMLAttributes<HTMLLifecycleNestedAElement>;
             "lifecycle-nested-b": LocalJSX.LifecycleNestedB & JSXBase.HTMLAttributes<HTMLLifecycleNestedBElement>;
             "lifecycle-nested-c": LocalJSX.LifecycleNestedC & JSXBase.HTMLAttributes<HTMLLifecycleNestedCElement>;

test/wdio/lifecycle-basic/cmp-a.test.tsx

@@ -0,0 +1,52 @@
+import { h, Fragment } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+describe('lifecycle-basic', function () {
+  beforeEach(() => {
+    render({
+      template: () => <lifecycle-basic-a></lifecycle-basic-a>,
+    });
+  });
+
+  it('fire load methods in order', async () => {
+    await $('lifecycle-basic-a').waitForExist();
+
+    await browser.pause(200);
+
+    let loads = await $('.lifecycle-loads-a').$$('li');
+    await expect(loads.length).toBe(6);
+
+    await expect(loads[0]).toHaveText('componentWillLoad-a');
+    await expect(loads[1]).toHaveText('componentWillLoad-b');
+    await expect(loads[2]).toHaveText('componentWillLoad-c');
+    await expect(loads[3]).toHaveText('componentDidLoad-c');
+    await expect(loads[4]).toHaveText('componentDidLoad-b');
+    await expect(loads[5]).toHaveText('componentDidLoad-a');
+
+    let updates = await $('.lifecycle-updates-a').$$('li');
+    await expect(updates).not.toBeExisting();
+
+    const button = $('button');
+    await button.click();
+
+    loads = await $('.lifecycle-loads-a').$$('li');
+    await expect(loads.length).toBe(6);
+
+    await expect(loads[0]).toHaveText('componentWillLoad-a');
+    await expect(loads[1]).toHaveText('componentWillLoad-b');
+    await expect(loads[2]).toHaveText('componentWillLoad-c');
+    await expect(loads[3]).toHaveText('componentDidLoad-c');
+    await expect(loads[4]).toHaveText('componentDidLoad-b');
+    await expect(loads[5]).toHaveText('componentDidLoad-a');
+
+    updates = await $('.lifecycle-updates-a').$$('li');
+    await expect(updates.length).toBe(6);
+
+    await expect(updates[0]).toHaveText('componentWillUpdate-a');
+    await expect(updates[1]).toHaveText('componentWillUpdate-b');
+    await expect(updates[2]).toHaveText('componentWillUpdate-c');
+    await expect(updates[3]).toHaveText('componentDidUpdate-c');
+    await expect(updates[4]).toHaveText('componentDidUpdate-b');
+    await expect(updates[5]).toHaveText('componentDidUpdate-a');
+  });
+});