fix: flaky tests (#2768)

<!-- ## Title: Please consider adding the [skip chromatic] flag to the
PR title in case you dont need chromatic testing your changes. -->
## Description:
This PR tries to fix some tests that create inconsistencies in our
pipelines.

## Definition of Reviewable:
<!-- *PR notes: Irrelevant elements should be removed.* -->
- [ ] Documentation is created/updated
- [ ] Migration Guide is created/updated
<!-- *PR notes: If this PR includes a BREAKING CHANGE, a migration guide
is needed to explain how users can migrate between versions. * -->
- [ ] E2E tests (features, a11y, bug fixes) are created/updated
<!-- *If this PR includes a bug fix, an E2E test is necessary to verify
the change. If the fix is purely visual, ensuring it is captured within
our chromatic screenshot tests is sufficient.* -->
- [ ] Stories (features, a11y) are created/updated
- [ ] relevant tickets are linked

Author: smfonseca

.changeset/deep-shrimps-invite.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/components': patch
+---
+
+Fixes flaky tests on `sd-dropdown`, `sd-audio`, `sd-video` and `sd-carousel`.

.changeset/olive-chefs-share.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Added safeguard to prevent `sd-icon` tests from timing out during Playwright testing.

packages/components/src/components/audio/audio.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/solid-components';
 import { expect, fixture, html } from '@open-wc/testing';
+import { sendMouse } from '@web/test-runner-commands';
 import base64Audio from './base64Audio';
 import sinon from 'sinon';
 import type SdAudio from './audio';
@@ -24,6 +25,8 @@ describe('<sd-audio>', () => {
     const spy = sinon.spy();
     el.addEventListener('sd-playback-start', spy);
 
+    // Simulate a real user gesture to allow media playback
+    await sendMouse({ type: 'click', position: [0, 0] });
     (playButton as HTMLElement).click();
 
     expect(spy.calledOnce).to.be.true;

packages/components/src/components/carousel/carousel.test.ts

@@ -1,5 +1,5 @@
 import '../../../dist/solid-components';
-import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
 import { clickOnElement } from '../../internal/test.js';
 import sinon from 'sinon';
 import type SdCarousel from './carousel';
@@ -598,15 +598,15 @@ describe('<sd-carousel>', () => {
         el.goToSlide(2, 'smooth');
         await oneEvent(el.scrollContainer, 'scroll');
         await el.updateComplete;
+        await waitUntil(() => el.scrollContainer.getAttribute('aria-busy') === 'true');
         // Assert
         expect(el.scrollContainer).to.have.attribute('aria-busy', 'true');
 
         await oneEvent(el.scrollContainer, 'scrollend');
         await el.updateComplete;
-
         // It takes a moment for the scrollend event to be fired.
         await aTimeout(100);
-
+        await waitUntil(() => el.scrollContainer.getAttribute('aria-busy') === 'false');
         expect(el.scrollContainer).to.have.attribute('aria-busy', 'false');
       });
     });

packages/components/src/components/dropdown/dropdown.test.ts

@@ -391,7 +391,7 @@ describe('<sd-dropdown>', () => {
     // navigate down
     await sendKeys({ press: 'ArrowDown' });
     await firstItem.updateComplete;
-
+    await waitUntil(() => firstItem.classList.contains('menu-item-focus'));
     expect(firstItem.classList.contains('menu-item-focus')).to.be.true;
   });
 
@@ -425,13 +425,15 @@ describe('<sd-dropdown>', () => {
     await sendKeys({ press: 'ArrowDown' });
     await firstItem.updateComplete;
 
+    await waitUntil(() => firstItem.classList.contains('menu-item-focus'));
     expect(firstItem.classList.contains('menu-item-focus')).to.be.true;
 
     // click outside
     document.body.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
     await el.updateComplete;
 
     // check all menu items have lost focus
+    await waitUntil(() => Array.from(items).every(item => !item.classList.contains('menu-item-focus')));
     items.forEach(item => {
       expect(item.classList.contains('menu-item-focus')).to.be.false;
     });

packages/components/src/components/video/video.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/solid-components';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
+import { sendKeys, sendMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import type SdVideo from './video';
 
@@ -64,12 +64,15 @@ describe('<sd-video>', () => {
       const el: SdVideo = await fixture(variants.default);
       const playSpy = sinon.spy();
       el.addEventListener('sd-play', playSpy);
+      // Simulate a real user gesture to allow media playback
+      await sendMouse({ type: 'click', position: [0, 0] });
       el.shadowRoot?.querySelector('button')?.click();
       expect(playSpy.calledOnce).to.be.true;
     });
 
     it('toggles playing property', async () => {
       const el: SdVideo = await fixture(variants.default);
+      await sendMouse({ type: 'click', position: [0, 0] });
       el.shadowRoot?.querySelector('button')?.click();
       expect(el.playing).to.be.true;
     });
@@ -81,12 +84,14 @@ describe('<sd-video>', () => {
         const el: SdVideo = await fixture(variants.default);
         const playSpy = sinon.spy();
         el.addEventListener('sd-play', playSpy);
+        await sendMouse({ type: 'click', position: [0, 0] });
         el.shadowRoot?.querySelector('button')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
         expect(playSpy.calledOnce).to.be.true;
       });
 
       it('toggles playing property', async () => {
         const el: SdVideo = await fixture(variants.default);
+        await sendMouse({ type: 'click', position: [0, 0] });
         el.shadowRoot?.querySelector('button')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
         expect(el.playing).to.be.true;
       });
@@ -110,6 +115,7 @@ describe('<sd-video>', () => {
     it('video is focusable after played', async () => {
       const el: SdVideo = await fixture(variants.all);
 
+      await sendMouse({ type: 'click', position: [0, 0] });
       el.shadowRoot?.querySelector('button')?.click();
 
       await sendKeys({ press: tabKey });
@@ -130,6 +136,7 @@ describe('<sd-video>', () => {
       return getComputedStyle(imgElement).opacity === '0';
     });
 
+    await sendMouse({ type: 'click', position: [0, 0] });
     el.shadowRoot?.querySelector('button')?.click();
 
     await transitionEndPromise; // Wait for the transitionend event

packages/docs/scripts/test.js

@@ -39,13 +39,13 @@ async function previewAndTest() {
           prefixColor: 'magenta'
         },
         {
-          command: `wait-on -v -t 5s tcp:127.0.0.1:${PORT} && ${testCommand}`,
+          command: `wait-on -v -t 10s tcp:127.0.0.1:${PORT} && ${testCommand}`,
           name: 'Testing',
           prefixColor: 'blue'
         }
       ],
       {
-        killOthers: ['failure', 'success'],
+        killOthersOn: ['failure', 'success'],
         successCondition: 'first',
         raw: true
       }

packages/docs/src/stories/components/icon.default.stories.ts

@@ -41,7 +41,11 @@ export const LibraryDefaultContent = {
         y: {
           type: 'attribute',
           name: 'name',
-          values: (iconsFromCdn as { content: string[] }).content.map(icon => `content/${icon}`)
+          values: Array.isArray(iconsFromCdn?.content)
+            ? iconsFromCdn.content
+                .filter((icon: string): icon is string => typeof icon === 'string' && icon.length > 0)
+                .map((icon: string) => `content/${icon}`)
+            : []
         }
       },
       constants: [{ type: 'attribute', name: 'library', value: '' }],
@@ -75,7 +79,11 @@ export const LibraryDefaultSystem = {
         y: {
           type: 'attribute',
           name: 'name',
-          values: (iconsFromCdn as { system: string[] }).system.map(icon => `system/${icon}`)
+          values: Array.isArray(iconsFromCdn?.system)
+            ? iconsFromCdn.system
+                .filter((icon: string): icon is string => typeof icon === 'string' && icon.length > 0)
+                .map((icon: string) => `system/${icon}`)
+            : []
         }
       },
       constants: [{ type: 'attribute', name: 'library', value: '' }],