Add e2e test

.gitignore

@@ -3,4 +3,5 @@ node_modules
 dist
 docs-dist
 *.local
-coverage/
+coverage/
+screenshot.png

__tests__/e2e/index.test.ts

@@ -0,0 +1,42 @@
+import { afterAll, beforeAll, describe, test } from 'vitest';
+import { PreviewServer, preview } from 'vite';
+import { Browser, Page, chromium } from 'playwright';
+import { expect } from '@playwright/test';
+
+describe('react-select-media-devices-modal', async () => {
+    let server: PreviewServer;
+    let browser: Browser;
+    let page: Page;
+
+    beforeAll(async () => {
+        server = await preview({ preview: { port: 3000 }, root: 'example' });
+        browser = await chromium.launch({
+            headless: process.env.CI === 'true',
+            args: ['--use-fake-ui-for-media-stream'],
+        });
+        page = await browser.newPage();
+    });
+
+    afterAll(async () => {
+        await browser.close();
+        await new Promise<void>((resolve, reject) => {
+            server.httpServer.close((err) => (err ? reject(err) : resolve()));
+        });
+    });
+
+    test('should open modal and select devices', async () => {
+        await page.goto('http://localhost:3000');
+        const selectDeviceButton = page.getByText('Select Device');
+        await expect(selectDeviceButton).toBeVisible();
+
+        await selectDeviceButton.click();
+
+        await expect(page.getByText('Audio input device')).toBeVisible();
+
+        await new Promise((r) => setTimeout(r, 3000));
+
+        await page.screenshot({ path: 'screenshot.png', fullPage: true });
+
+        // const selectMediaDevicesModal = await page.$('[class*=modal');
+    }, 60_000);
+});

package.json

@@ -34,7 +34,8 @@
         "dev": "vite serve example",
         "build": "vite build",
         "test": "vitest",
-        "coverage": "vitest run --coverage"
+        "coverage": "vitest run --coverage",
+        "test:e2e": "vitest run -c vitest.e2e.config.ts"
     },
     "dependencies": {
         "react": "^18.2.0",
@@ -43,6 +44,7 @@
     },
     "devDependencies": {
         "@mdx-js/react": "^2.3.0",
+        "@playwright/test": "^1.33.0",
         "@rollup/plugin-typescript": "^11.1.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
@@ -53,6 +55,7 @@
         "@vitest/coverage-c8": "^0.30.1",
         "@vitest/ui": "^0.30.1",
         "jsdom": "^21.1.1",
+        "playwright": "^1.33.0",
         "rimraf": "^4.4.1",
         "serve": "^14.2.0",
         "vite": "^4.2.1",

vitest.e2e.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        include: ['**/e2e/*.test.ts'],
+        globals: true,
+        testTimeout: 60_000,
+        hookTimeout: 60_000,
+    },
+});