feat: ✨ add e2e tests Github Actions worflow

.github/workflows/preview.yml

@@ -0,0 +1,26 @@
+name: preview
+
+on: [deployment_status]
+
+jobs:
+  e2e:
+    if: github.event.deployment_status.state == 'success'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🏗 Setup Repository
+        uses: actions/checkout@v3
+
+      - name: 📦 Install
+        uses: ./.github/actions/install
+        with:
+          node-version: 20
+          pnpm-version: 8.10.5
+
+      - name: 📦 Install Playwright Deps
+        run: pnpm exec playwright install --with-deps
+
+      - name: ✅ e2e
+        run: pnpm e2e
+        env:
+          BASE_URL: ${{ github.event.deployment_status.environment_url }}

.gitignore

@@ -40,3 +40,6 @@ storybook-static
 
 # eslint
 .eslintcache
+
+# env
+.env*

e2e/app.spec.ts

@@ -1,14 +1,14 @@
 import { expect, test } from '@playwright/test'
 
 test('has title', async ({ page }) => {
-  await page.goto('http://localhost:5173/')
+  await page.goto('/')
 
   await expect(page).toHaveTitle(/React Starter/)
 })
 
 test.describe('external links', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('http://localhost:5173/')
+    await page.goto('/')
   })
 
   test('opened vite docs', async ({ page, context }) => {

package.json

@@ -61,6 +61,7 @@
     "@vitest/coverage-v8": "1.0.2",
     "autoprefixer": "10.4.16",
     "daisyui": "4.4.19",
+    "dotenv": "16.3.1",
     "eslint": "8.55.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.1",

playwright.config.ts

@@ -1,5 +1,10 @@
+import 'dotenv/config'
+
 import { defineConfig, devices } from '@playwright/test'
 
+const PORT = process.env.PORT ?? 5173
+const BASE_URL = process.env.BASE_URL ?? `http://localhost:${PORT}`
+
 export default defineConfig({
   forbidOnly: Boolean(process.env.CI),
   fullyParallel: true,
@@ -22,6 +27,6 @@ export default defineConfig({
   reporter: 'html',
   retries: process.env.CI ? 2 : 0,
   testDir: './e2e',
-  use: { trace: 'on-first-retry' },
+  use: { trace: 'on-first-retry', baseURL: BASE_URL },
   workers: process.env.CI ? 1 : undefined,
 })

vite.config.ts

@@ -1,29 +1,36 @@
 import path from 'node:path'
 
 import react from '@vitejs/plugin-react-swc'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import { configDefaults } from 'vitest/config'
 
-export default defineConfig({
-  plugins: [react()],
-  resolve: { alias: { '@': path.resolve(__dirname, './src') } },
-  test: {
-    coverage: {
-      reporter: ['html', 'text-summary'],
-      exclude: [
-        '**/*.d.ts',
-        'storybook-static/**',
-        '.storybook/**',
-        '**/*.stories.*',
-        '**/main.tsx',
-        '{tailwind,postcss,playwright}.config.*',
-        '.{eslint,prettier}rc.{?(c|m)js,yml}',
-        'node_modules/.pnpm/**',
-      ],
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+
+  return {
+    plugins: [react()],
+    resolve: { alias: { '@': path.resolve(__dirname, './src') } },
+    server: {
+      port: parseInt(env.PORT),
+    },
+    test: {
+      coverage: {
+        reporter: ['html', 'text-summary'],
+        exclude: [
+          '**/*.d.ts',
+          'storybook-static/**',
+          '.storybook/**',
+          '**/*.stories.*',
+          '**/main.tsx',
+          '{tailwind,postcss,playwright}.config.*',
+          '.{eslint,prettier}rc.{?(c|m)js,yml}',
+          'node_modules/.pnpm/**',
+        ],
+      },
+      environment: 'happy-dom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      globals: true,
+      setupFiles: './src/test/setup.ts',
     },
-    environment: 'happy-dom',
-    exclude: [...configDefaults.exclude, 'e2e/*'],
-    globals: true,
-    setupFiles: './src/test/setup.ts',
-  },
+  }
 })