Add e2e test workflow

.github/workflows/e2e-test.yaml

@@ -0,0 +1,30 @@
+name: E2E Test
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build
+      - name: build example
+        run: |
+          cd example
+          npm ci
+          npm run build
+          cd ../
+      - run: npm run test:e2e
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: screenshots
+          path: ./*.png

.gitignore

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

__tests__/e2e/index.test.ts

@@ -9,10 +9,10 @@ describe('react-select-media-devices-modal', async () => {
     let page: Page;
 
     beforeAll(async () => {
-        server = await preview({ preview: { port: 3000 }, root: 'example' });
+        server = await preview({ root: 'example' });
         browser = await chromium.launch({
             headless: process.env.CI === 'true',
-            args: ['--use-fake-ui-for-media-stream'],
+            args: ['--use-fake-ui-for-media-stream', '--use-fake-device-for-media-stream'],
         });
         page = await browser.newPage();
     });
@@ -25,18 +25,27 @@ describe('react-select-media-devices-modal', async () => {
     });
 
     test('should open modal and select devices', async () => {
-        await page.goto('http://localhost:3000');
+        server.printUrls();
+
+        await page.goto(server.resolvedUrls.local[0]);
+
+        await page.screenshot({ path: 'open-page.png', fullPage: true });
+
         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: 'open-modal.png', fullPage: true });
+
+        await page.getByText('Confirm').click();
 
-        await page.screenshot({ path: 'screenshot.png', fullPage: true });
+        await expect(page.getByText('Fake Default Audio Input')).toBeVisible();
+        await expect(page.getByText('Fake Default Audio Output')).toBeVisible();
+        await expect(page.getByText('fake_device_0')).toBeVisible();
 
-        // const selectMediaDevicesModal = await page.$('[class*=modal');
+        await page.screenshot({ path: 'completed.png', fullPage: true });
     }, 60_000);
 });

vitest.config.ts

@@ -5,6 +5,7 @@ export default defineConfig({
     plugins: [react()],
     test: {
         include: ['**/*.test.ts', '**/*.test.tsx'],
+        exclude: ['**/e2e/*.test.ts'],
         globals: true,
         environment: 'jsdom',
     },