fix the test suite (#63)

* fix the test suite

* prettier

* fix the test suite

* prettier

package.json

@@ -86,9 +86,9 @@
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "@web/dev-server-esbuild": "^0.3.6",
-    "@web/test-runner": "^0.15.3",
-    "@web/test-runner-commands": "^0.6.6",
-    "@web/test-runner-playwright": "^0.9.0",
+    "@web/test-runner": "^0.18.1",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
     "astro": "^4.0.1",
     "bootstrap-icons": "^1.11.1",
     "browser-sync": "^2.29.3",
@@ -100,8 +100,8 @@
     "cspell": "^6.18.1",
     "custom-element-jet-brains-integration": "^1.4.0",
     "custom-element-vs-code-integration": "^1.2.1",
-    "dedent": "^1.5.1",
     "custom-element-vuejs-integration": "^1.0.0",
+    "dedent": "^1.5.1",
     "del": "^7.1.0",
     "download": "^8.0.0",
     "esbuild": "^0.19.4",
@@ -132,6 +132,7 @@
     "npm-check-updates": "^16.14.6",
     "pascal-case": "^3.1.2",
     "patch-package": "^8.0.0",
+    "playwright": "^1.42.0",
     "plop": "^4.0.0",
     "prettier": "^3.0.3",
     "prismjs": "^1.29.0",

src/components/alert/alert.test.ts

@@ -63,7 +63,8 @@ describe('<wa-alert>', () => {
 
   afterEach(async () => {
     clock?.restore();
-    await resetMouse();
+    // eslint-disable-next-line
+    await resetMouse().catch(() => {});
   });
 
   it('renders', async () => {
@@ -96,28 +97,30 @@ describe('<wa-alert>', () => {
 
       expectAlertToBeInvisible(alert);
 
-      await expectShowAndAfterShowToBeEmittedInCorrectOrder(alert, () => alert.show());
+      await expectShowAndAfterShowToBeEmittedInCorrectOrder(alert, async () => await alert.show());
     });
 
     it('should emit wa-hide and wa-after-hide when calling hide()', async () => {
       const alert = await fixture<WaAlert>(html` <wa-alert open>I am an alert</wa-alert>`);
 
-      await expectHideAndAfterHideToBeEmittedInCorrectOrder(alert, () => alert.hide());
+      await expectHideAndAfterHideToBeEmittedInCorrectOrder(alert, async () => await alert.hide());
     });
 
     it('should emit wa-show and wa-after-show when setting open = true', async () => {
       const alert = await fixture<WaAlert>(html` <wa-alert>I am an alert</wa-alert> `);
 
-      await expectShowAndAfterShowToBeEmittedInCorrectOrder(alert, () => {
+      await expectShowAndAfterShowToBeEmittedInCorrectOrder(alert, async () => {
         alert.open = true;
+        await alert.updateComplete;
       });
     });
 
     it('should emit wa-hide and wa-after-hide when setting open = false', async () => {
       const alert = await fixture<WaAlert>(html` <wa-alert open>I am an alert</wa-alert> `);
 
-      await expectHideAndAfterHideToBeEmittedInCorrectOrder(alert, () => {
+      await expectHideAndAfterHideToBeEmittedInCorrectOrder(alert, async () => {
         alert.open = false;
+        await alert.updateComplete;
       });
     });
   });
@@ -134,8 +137,8 @@ describe('<wa-alert>', () => {
       const alert = await fixture<WaAlert>(html` <wa-alert open closable>I am an alert</wa-alert> `);
       const closeButton = getCloseButton(alert);
 
-      await expectHideAndAfterHideToBeEmittedInCorrectOrder(alert, () => {
-        clickOnElement(closeButton!);
+      await expectHideAndAfterHideToBeEmittedInCorrectOrder(alert, async () => {
+        await clickOnElement(closeButton!);
       });
     });
   });
@@ -159,7 +162,7 @@ describe('<wa-alert>', () => {
     it('can be rendered as a toast', async () => {
       const alert = await fixture<WaAlert>(html`<wa-alert>I am an alert</wa-alert>`);
 
-      expectShowAndAfterShowToBeEmittedInCorrectOrder(alert, () => alert.toast());
+      await expectShowAndAfterShowToBeEmittedInCorrectOrder(alert, async () => await alert.toast());
       const toastStack = getToastStack();
       expect(toastStack).to.be.visible;
       expect(toastStack?.firstChild).to.be.equal(alert);
@@ -292,17 +295,15 @@ describe('<wa-alert>', () => {
       });
     });
   });
-
-  describe('alert variants', () => {
-    const variants = ['brand', 'success', 'neutral', 'warning', 'danger'];
-
-    variants.forEach(variant => {
-      it(`adapts to the variant: ${variant}`, async () => {
-        const alert = await fixture<WaAlert>(html`<wa-alert variant="${variant}" open>I am an alert</wa-alert>`);
-
-        const alertContainer = getAlertContainer(alert);
-        expect(alertContainer).to.have.class(`alert--${variant}`);
-      });
-    });
-  });
+});
+
+it('Should properly render alert variants', async () => {
+  const variants = ['brand', 'success', 'neutral', 'warning', 'danger'];
+
+  for (const variant of variants) {
+    const alert = await fixture<WaAlert>(html`<wa-alert variant="${variant}" open>I am an alert</wa-alert>`);
+
+    const alertContainer = getAlertContainer(alert);
+    expect(alertContainer).to.have.class(`alert--${variant}`);
+  }
 });

src/components/carousel/carousel.test.ts

@@ -1,4 +1,4 @@
-import '../../../dist/shoelace.js';
+import '../../../dist/webawesome.js';
 import { clickOnElement, dragElement, moveMouseOnElement } from '../../internal/test.js';
 import { expect, fixture, html, nextFrame, oneEvent } from '@open-wc/testing';
 import { map } from 'lit/directives/map.js';
@@ -11,7 +11,8 @@ describe('<wa-carousel>', () => {
   const sandbox = sinon.createSandbox();
 
   afterEach(async () => {
-    await resetMouse();
+    // eslint-disable-next-line
+    await resetMouse().catch(() => {});
   });
 
   afterEach(() => {
@@ -641,7 +642,7 @@ describe('<wa-carousel>', () => {
           </wa-carousel>
         `);
         sandbox.spy(el, 'goToSlide');
-        const expectedCarouselItem: HTMLElement = el.querySelector('sl-carousel-item:nth-child(2)')!;
+        const expectedCarouselItem: HTMLElement = el.querySelector('wa-carousel-item:nth-child(2)')!;
 
         // Act
         el.next();
@@ -668,7 +669,7 @@ describe('<wa-carousel>', () => {
             <wa-carousel-item>Node 3</wa-carousel-item>
           </wa-carousel>
         `);
-        const expectedCarouselItem: HTMLElement = el.querySelector('sl-carousel-item:nth-child(1)')!;
+        const expectedCarouselItem: HTMLElement = el.querySelector('wa-carousel-item:nth-child(1)')!;
 
         el.goToSlide(1);
 

src/components/checkbox/checkbox.test.ts

@@ -63,6 +63,7 @@ describe('<wa-checkbox>', () => {
     el.addEventListener('wa-change', changeHandler);
     el.addEventListener('wa-input', inputHandler);
     el.click();
+    await aTimeout(0);
     await el.updateComplete;
 
     expect(changeHandler).to.have.been.calledOnce;
@@ -93,8 +94,10 @@ describe('<wa-checkbox>', () => {
     el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
     el.checked = true;
     await el.updateComplete;
+    await aTimeout(0);
     el.checked = false;
     await el.updateComplete;
+    await aTimeout(0);
   });
 
   it('should hide the native input with the correct positioning to scroll correctly when contained in an overflow', async () => {

src/components/menu-item/menu-item.component.ts

@@ -192,7 +192,7 @@ export default class WaMenuItem extends WebAwesomeElement {
           ></wa-icon>
         </span>
 
-        ${this.submenuController.renderSubmenu()} ${this.loading ? html`<sl-spinner part="spinner"></sl-spinner>` : ''}
+        ${this.submenuController.renderSubmenu()} ${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}
       </div>
     `;
   }

src/components/select/select.test.ts

@@ -452,9 +452,10 @@ describe('<wa-select>', () => {
             <wa-option value="option-2">Option 2</wa-option>
             <wa-option value="option-3">Option 3</wa-option>
           </wa-select>
-          <wa-button type="reset">Reset</wa-button>
+          <wa-button type="reset">Reset</button>
         </form>
       `);
+
       const resetButton = form.querySelector('wa-button')!;
       const select = form.querySelector('wa-select')!;
 
@@ -462,9 +463,17 @@ describe('<wa-select>', () => {
       await select.updateComplete;
       expect(select.value).to.equal('option-3');
 
-      setTimeout(() => clickOnElement(resetButton));
-      await oneEvent(form, 'reset');
+      const resetSpy = sinon.spy();
+      form.addEventListener('reset', () => {
+        resetSpy();
+      });
+      // clickOnElement causes some weird behavior where the `reset` event never fires.
+      // Maybe one day in the future this can go back to using the `clickOnElement`.
+      // await clickOnElement(resetButton);
+      resetButton.click();
       await select.updateComplete;
+
+      expect(resetSpy).to.have.been.calledOnce;
       expect(select.value).to.equal('option-1');
     });
   });

src/components/split-panel/split-panel.test.ts

@@ -33,7 +33,8 @@ const getDivider = (splitPanel: WaSplitPanel): Element => {
 
 describe('<wa-split-panel>', () => {
   afterEach(async () => {
-    await resetMouse();
+    // eslint-disable-next-line
+    await resetMouse().catch(() => {});
   });
 
   it('should render a component', async () => {

web-test-runner.config.js

@@ -23,7 +23,7 @@ export default {
   ],
   browsers: [
     playwrightLauncher({ product: 'chromium' }),
-    playwrightLauncher({ product: 'firefox' }),
+    playwrightLauncher({ product: 'firefox', concurrency: 1 }),
     playwrightLauncher({ product: 'webkit' })
   ],
   testRunnerHtml: testFramework => `