From 325a33573d6f3f8f85531dcabf54833930954272 Mon Sep 17 00:00:00 2001
From: kadoshita <sublimer.me@gmail.com>
Date: Sun, 30 Apr 2023 20:12:20 +0900
Subject: [PATCH] Add e2e test workflow

---
 .github/workflows/e2e-test.yaml | 30 ++++++++++++++++++++++++++++++
 .gitignore                      |  2 +-
 __tests__/e2e/index.test.ts     | 21 +++++++++++++++------
 vitest.config.ts                |  1 +
 4 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 .github/workflows/e2e-test.yaml

diff --git a/.github/workflows/e2e-test.yaml b/.github/workflows/e2e-test.yaml
new file mode 100644
index 0000000..688ef41
--- /dev/null
+++ b/.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
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index d32a942..cbb386d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,4 @@ dist
 docs-dist
 *.local
 coverage/
-screenshot.png
\ No newline at end of file
+*.png
\ No newline at end of file
diff --git a/__tests__/e2e/index.test.ts b/__tests__/e2e/index.test.ts
index 9623a3f..d54afc8 100644
--- a/__tests__/e2e/index.test.ts
+++ b/__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,7 +25,12 @@ 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();
 
@@ -33,10 +38,14 @@ describe('react-select-media-devices-modal', async () => {
 
         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);
 });
diff --git a/vitest.config.ts b/vitest.config.ts
index d4c9ed0..d1de1b0 100644
--- a/vitest.config.ts
+++ b/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',
     },