chore(wdio): port key-reorder test suite to wdio

stenciljs · Mar 15, 2024 · 346aa51 · 346aa51
1 parent ab97fdf
commit 346aa51
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 96 deletions.
diff --git a/test/karma/test-app/components.d.ts b/test/karma/test-app/components.d.ts
@@ -90,11 +90,6 @@ export namespace Components {
     }
     interface IonParent {
     }
-    interface KeyReorder {
-        "num"?: number;
-    }
-    interface KeyReorderRoot {
-    }
     interface LifecycleAsyncA {
     }
     interface LifecycleAsyncB {
@@ -633,18 +628,6 @@ declare global {
         prototype: HTMLIonParentElement;
         new (): HTMLIonParentElement;
     };
-    interface HTMLKeyReorderElement extends Components.KeyReorder, HTMLStencilElement {
-    }
-    var HTMLKeyReorderElement: {
-        prototype: HTMLKeyReorderElement;
-        new (): HTMLKeyReorderElement;
-    };
-    interface HTMLKeyReorderRootElement extends Components.KeyReorderRoot, HTMLStencilElement {
-    }
-    var HTMLKeyReorderRootElement: {
-        prototype: HTMLKeyReorderRootElement;
-        new (): HTMLKeyReorderRootElement;
-    };
     interface HTMLLifecycleAsyncAElement extends Components.LifecycleAsyncA, HTMLStencilElement {
     }
     var HTMLLifecycleAsyncAElement: {
@@ -1325,8 +1308,6 @@ declare global {
         "ion-child": HTMLIonChildElement;
         "ion-host": HTMLIonHostElement;
         "ion-parent": HTMLIonParentElement;
-        "key-reorder": HTMLKeyReorderElement;
-        "key-reorder-root": HTMLKeyReorderRootElement;
         "lifecycle-async-a": HTMLLifecycleAsyncAElement;
         "lifecycle-async-b": HTMLLifecycleAsyncBElement;
         "lifecycle-async-c": HTMLLifecycleAsyncCElement;
@@ -1512,11 +1493,6 @@ declare namespace LocalJSX {
     }
     interface IonParent {
     }
-    interface KeyReorder {
-        "num"?: number;
-    }
-    interface KeyReorderRoot {
-    }
     interface LifecycleAsyncA {
     }
     interface LifecycleAsyncB {
@@ -1801,8 +1777,6 @@ declare namespace LocalJSX {
         "ion-child": IonChild;
         "ion-host": IonHost;
         "ion-parent": IonParent;
-        "key-reorder": KeyReorder;
-        "key-reorder-root": KeyReorderRoot;
         "lifecycle-async-a": LifecycleAsyncA;
         "lifecycle-async-b": LifecycleAsyncB;
         "lifecycle-async-c": LifecycleAsyncC;
@@ -1945,8 +1919,6 @@ declare module "@stencil/core" {
             "ion-child": LocalJSX.IonChild & JSXBase.HTMLAttributes<HTMLIonChildElement>;
             "ion-host": LocalJSX.IonHost & JSXBase.HTMLAttributes<HTMLIonHostElement>;
             "ion-parent": LocalJSX.IonParent & JSXBase.HTMLAttributes<HTMLIonParentElement>;
-            "key-reorder": LocalJSX.KeyReorder & JSXBase.HTMLAttributes<HTMLKeyReorderElement>;
-            "key-reorder-root": LocalJSX.KeyReorderRoot & JSXBase.HTMLAttributes<HTMLKeyReorderRootElement>;
             "lifecycle-async-a": LocalJSX.LifecycleAsyncA & JSXBase.HTMLAttributes<HTMLLifecycleAsyncAElement>;
             "lifecycle-async-b": LocalJSX.LifecycleAsyncB & JSXBase.HTMLAttributes<HTMLLifecycleAsyncBElement>;
             "lifecycle-async-c": LocalJSX.LifecycleAsyncC & JSXBase.HTMLAttributes<HTMLLifecycleAsyncCElement>;

diff --git a/test/karma/test-app/key-reorder/cmp.tsx b/test/karma/test-app/key-reorder/cmp.tsx
diff --git a/test/karma/test-app/key-reorder/index.html b/test/karma/test-app/key-reorder/index.html
diff --git a/test/karma/test-app/key-reorder/karma.spec.ts b/test/karma/test-app/key-reorder/karma.spec.ts
diff --git a/test/wdio/key-reorder/cmp.test.tsx b/test/wdio/key-reorder/cmp.test.tsx
@@ -0,0 +1,47 @@
+import { h, Fragment } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+describe('key-reorder', function () {
+  beforeEach(() => {
+    render({
+      template: () => <key-reorder></key-reorder>,
+    });
+  });
+
+  it('uses same nodes after reorder', async () => {
+    const root = $('key-reorder');
+    await root.waitForExist();
+    let item0 = document.body.querySelector('#item-0') as any;
+    let item1 = document.body.querySelector('#item-1') as any;
+    let item2 = document.body.querySelector('#item-2') as any;
+    let item3 = document.body.querySelector('#item-3') as any;
+    let item4 = document.body.querySelector('#item-4') as any;
+
+    expect(item0.previousElementSibling).toBe(null);
+    expect(item1.previousElementSibling).toBe(item0);
+    expect(item2.previousElementSibling).toBe(item1);
+    expect(item3.previousElementSibling).toBe(item2);
+    expect(item4.previousElementSibling).toBe(item3);
+
+    item0.__orgItem = 0;
+    item1.__orgItem = 1;
+    item2.__orgItem = 2;
+    item3.__orgItem = 3;
+    item4.__orgItem = 4;
+
+    const button = root.$('button');
+    await button.click();
+
+    item0 = document.body.querySelector('#item-0') as any;
+    item1 = document.body.querySelector('#item-1') as any;
+    item2 = document.body.querySelector('#item-2') as any;
+    item3 = document.body.querySelector('#item-3') as any;
+    item4 = document.body.querySelector('#item-4') as any;
+
+    expect(item0.previousElementSibling).toBe(item1);
+    expect(item1.previousElementSibling).toBe(item2);
+    expect(item2.previousElementSibling).toBe(item3);
+    expect(item3.previousElementSibling).toBe(item4);
+    expect(item4.previousElementSibling).toBe(null);
+  });
+});
diff --git a/test/karma/test-app/key-reorder/cmp-root.tsx → test/wdio/key-reorder/cmp.tsx b/test/karma/test-app/key-reorder/cmp-root.tsx → test/wdio/key-reorder/cmp.tsx
@@ -1,9 +1,9 @@
 import { Component, State, h } from '@stencil/core';
 
 @Component({
-  tag: 'key-reorder-root',
+  tag: 'key-reorder',
 })
-export class KeyReorderRoot {
+export class KeyReorder {
   @State() isReversed = false;
 
   testClick() {