chore(test): migrate external-imports

Also a `await $('#item-4').waitForExist();` in `test/wdio/key-reorder/cmp.test.tsx`, which was contributed in #5472, as the test seemed to be flaky on my machine. The waitForExist help to remove this flakiness.

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

@@ -51,12 +51,6 @@ export namespace Components {
     }
     interface EventListenerCapture {
     }
-    interface ExternalImportA {
-    }
-    interface ExternalImportB {
-    }
-    interface ExternalImportC {
-    }
     interface FactoryJsx {
     }
     interface HostAttrOverride {
@@ -454,24 +448,6 @@ declare global {
         prototype: HTMLEventListenerCaptureElement;
         new (): HTMLEventListenerCaptureElement;
     };
-    interface HTMLExternalImportAElement extends Components.ExternalImportA, HTMLStencilElement {
-    }
-    var HTMLExternalImportAElement: {
-        prototype: HTMLExternalImportAElement;
-        new (): HTMLExternalImportAElement;
-    };
-    interface HTMLExternalImportBElement extends Components.ExternalImportB, HTMLStencilElement {
-    }
-    var HTMLExternalImportBElement: {
-        prototype: HTMLExternalImportBElement;
-        new (): HTMLExternalImportBElement;
-    };
-    interface HTMLExternalImportCElement extends Components.ExternalImportC, HTMLStencilElement {
-    }
-    var HTMLExternalImportCElement: {
-        prototype: HTMLExternalImportCElement;
-        new (): HTMLExternalImportCElement;
-    };
     interface HTMLFactoryJsxElement extends Components.FactoryJsx, HTMLStencilElement {
     }
     var HTMLFactoryJsxElement: {
@@ -1121,9 +1097,6 @@ declare global {
         "esm-import": HTMLEsmImportElement;
         "event-custom-type": HTMLEventCustomTypeElement;
         "event-listener-capture": HTMLEventListenerCaptureElement;
-        "external-import-a": HTMLExternalImportAElement;
-        "external-import-b": HTMLExternalImportBElement;
-        "external-import-c": HTMLExternalImportCElement;
         "factory-jsx": HTMLFactoryJsxElement;
         "host-attr-override": HTMLHostAttrOverrideElement;
         "import-aliasing": HTMLImportAliasingElement;
@@ -1269,12 +1242,6 @@ declare namespace LocalJSX {
     }
     interface EventListenerCapture {
     }
-    interface ExternalImportA {
-    }
-    interface ExternalImportB {
-    }
-    interface ExternalImportC {
-    }
     interface FactoryJsx {
     }
     interface HostAttrOverride {
@@ -1538,9 +1505,6 @@ declare namespace LocalJSX {
         "esm-import": EsmImport;
         "event-custom-type": EventCustomType;
         "event-listener-capture": EventListenerCapture;
-        "external-import-a": ExternalImportA;
-        "external-import-b": ExternalImportB;
-        "external-import-c": ExternalImportC;
         "factory-jsx": FactoryJsx;
         "host-attr-override": HostAttrOverride;
         "import-aliasing": ImportAliasing;
@@ -1665,9 +1629,6 @@ declare module "@stencil/core" {
             "esm-import": LocalJSX.EsmImport & JSXBase.HTMLAttributes<HTMLEsmImportElement>;
             "event-custom-type": LocalJSX.EventCustomType & JSXBase.HTMLAttributes<HTMLEventCustomTypeElement>;
             "event-listener-capture": LocalJSX.EventListenerCapture & JSXBase.HTMLAttributes<HTMLEventListenerCaptureElement>;
-            "external-import-a": LocalJSX.ExternalImportA & JSXBase.HTMLAttributes<HTMLExternalImportAElement>;
-            "external-import-b": LocalJSX.ExternalImportB & JSXBase.HTMLAttributes<HTMLExternalImportBElement>;
-            "external-import-c": LocalJSX.ExternalImportC & JSXBase.HTMLAttributes<HTMLExternalImportCElement>;
             "factory-jsx": LocalJSX.FactoryJsx & JSXBase.HTMLAttributes<HTMLFactoryJsxElement>;
             "host-attr-override": LocalJSX.HostAttrOverride & JSXBase.HTMLAttributes<HTMLHostAttrOverrideElement>;
             "import-aliasing": LocalJSX.ImportAliasing & JSXBase.HTMLAttributes<HTMLImportAliasingElement>;

test/karma/test-app/external-imports/cmp-a.tsx → test/wdio/external-imports/cmp-a.tsx

@@ -1,5 +1,6 @@
 import { Component, h } from '@stencil/core';
-import { store } from './external-store';
+
+import { store } from './external-store.js';
 
 @Component({
   tag: 'external-import-a',

test/karma/test-app/external-imports/cmp-b.tsx → test/wdio/external-imports/cmp-b.tsx

@@ -1,5 +1,6 @@
 import { Component, h } from '@stencil/core';
-import { store } from './external-store';
+
+import { store } from './external-store.js';
 
 @Component({
   tag: 'external-import-b',

test/karma/test-app/external-imports/cmp-c.tsx → test/wdio/external-imports/cmp-c.tsx

@@ -1,5 +1,6 @@
 import { Component, h } from '@stencil/core';
-import { data } from './external-data';
+
+import { data } from './external-data.js';
 
 @Component({
   tag: 'external-import-c',

test/wdio/external-imports/cmp.test.tsx

@@ -0,0 +1,26 @@
+import { Fragment, h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+describe('external-imports', () => {
+  beforeEach(async () => {
+    render({
+      template: () => (
+        <>
+          <external-import-a></external-import-a>
+          <external-import-b></external-import-b>
+          <external-import-c></external-import-c>
+        </>
+      )
+    })
+  });
+  it('render all components without errors', async () => {
+    let elm = $('external-import-a');
+    await expect(elm).toHaveText('Marty McFly');
+
+    const elm2 = $('external-import-b');
+    await expect(elm2).toHaveText('Marty McFly');
+
+    const elm3 = $('external-import-c');
+    await expect(elm3).toHaveText('Marty McFly');
+  });
+});

test/karma/test-app/external-imports/external-store.ts → test/wdio/external-imports/external-store.ts

@@ -1,4 +1,4 @@
-import { data } from './external-data';
+import { data } from './external-data.js';
 
 export function store() {
   return {

test/wdio/key-reorder/cmp.test.tsx

@@ -1,4 +1,4 @@
-import { h, Fragment } from '@stencil/core';
+import { h } from '@stencil/core';
 import { render } from '@wdio/browser-runner/stencil';
 
 describe('key-reorder', function () {
@@ -31,6 +31,7 @@ describe('key-reorder', function () {
 
     const button = root.$('button');
     await button.click();
+    await $('#item-4').waitForExist();
 
     item0 = document.body.querySelector('#item-0') as any;
     item1 = document.body.querySelector('#item-1') as any;