add unit test

Author: christian-bromann

src/runtime/initialize-component.ts

@@ -98,7 +98,6 @@ export const initializeComponent = async (
        * ```html
        * <script type="module">
        *   import { MyComponent } from 'my-stencil-component-library';
-       *   console.log(1, MyComponent, customElements);
        *   customElements.define('my-other-component', MyComponent);
        * </script>
        * ```

test/wdio/setup.ts

@@ -12,7 +12,8 @@ declare global {
 const testRequiresManualSetup =
   window.__wdioSpec__.includes('custom-elements-output-tag-class-different') ||
   window.__wdioSpec__.includes('custom-elements-delegates-focus') ||
-  window.__wdioSpec__.includes('custom-elements-output');
+  window.__wdioSpec__.includes('custom-elements-output') ||
+  window.__wdioSpec__.endsWith('custom-tag-name.test.tsx');
 
 /**
  * setup all components defined in tests except for those where we want ot manually setup

test/wdio/watch-native-attributes/custom-tag-name.test.tsx

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+import { WatchNativeAttributes } from '../test-components/watch-native-attributes.js';
+
+describe('watch native attributes', () => {
+  beforeEach(() => {
+    customElements.define('some-custom-element', WatchNativeAttributes);
+    render({
+      template: () => <some-custom-element aria-label="myStartingLabel"></some-custom-element>,
+    });
+  });
+
+  it('triggers the callback for the watched attribute', async () => {
+    const $cmp = $('some-custom-element');
+    await $cmp.waitForExist();
+
+    await expect($cmp).toHaveText('Label: myStartingLabel\nCallback triggered: false');
+
+    const cmp = document.querySelector('some-custom-element');
+    cmp.setAttribute('aria-label', 'myNewLabel');
+
+    await expect($cmp).toHaveText('Label: myNewLabel\nCallback triggered: true');
+  });
+});