chore: update tests

src/components/carousel/carousel.test.ts

@@ -1,9 +1,14 @@
-import { clickOnElement } from '../../internal/test';
+import { clickOnElement, moveMouseOnElement } from '../../internal/test';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { resetMouse, sendMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import type SlCarousel from './carousel';
 
 describe('<sl-carousel>', () => {
+  afterEach(async () => {
+    await resetMouse();
+  });
+
   it('should render a carousel with default configuration', async () => {
     // Arrange
     const el = await fixture(html`
@@ -293,6 +298,63 @@ describe('<sl-carousel>', () => {
     });
   });
 
+  describe('when `mouse-dragging` attribute is provided', () => {
+    it('should be possible to drag the carousel using mouse', async () => {
+      // Arrange
+      const el = await fixture<SlCarousel>(html`
+        <sl-carousel mouse-dragging>
+          <sl-carousel-item>Node 1</sl-carousel-item>
+          <sl-carousel-item>Node 2</sl-carousel-item>
+          <sl-carousel-item>Node 3</sl-carousel-item>
+        </sl-carousel>
+      `);
+      const carouselItem = el.querySelector('sl-carousel-item') as HTMLElement;
+
+      // Act
+      await moveMouseOnElement(carouselItem, 'right');
+      await sendMouse({
+        type: 'down'
+      });
+
+      // For some reason it seems necessary to move the mouse back and forth to trigger a move event
+      await moveMouseOnElement(carouselItem, 'left');
+      await moveMouseOnElement(carouselItem, 'right');
+      await moveMouseOnElement(carouselItem, 'left');
+
+      await sendMouse({
+        type: 'up'
+      });
+
+      await oneEvent(el.scrollContainer, 'scrollend');
+      await el.updateComplete;
+
+      // Assert
+      expect(el.activeSlide).to.be.equal(1);
+    });
+
+    it('should be possible to interact with clickable elements', async () => {
+      // Arrange
+      const el = await fixture<SlCarousel>(html`
+        <sl-carousel mouse-dragging>
+          <sl-carousel-item><button>click me</button></sl-carousel-item>
+          <sl-carousel-item>Node 2</sl-carousel-item>
+          <sl-carousel-item>Node 3</sl-carousel-item>
+        </sl-carousel>
+      `);
+      const button = el.querySelector('button')!;
+
+      const clickSpy = sinon.spy();
+      button.addEventListener('click', clickSpy);
+
+      // Act
+      await moveMouseOnElement(button);
+      await clickOnElement(button);
+
+      // Assert
+      expect(clickSpy).to.have.been.called;
+    });
+  });
+
   describe('Navigation controls', () => {
     describe('when the user clicks the next button', () => {
       it('should scroll to the next slide', async () => {

web-test-runner.config.js

@@ -5,7 +5,7 @@ import { playwrightLauncher } from '@web/test-runner-playwright';
 export default {
   rootDir: '.',
   files: 'src/**/*.test.ts', // "default" group
-  concurrentBrowsers: 1,
+  concurrentBrowsers: 3,
   nodeResolve: true,
   testFramework: {
     config: {