From 348d8d8764be1eade4d174acc78bb9c4eea8492d Mon Sep 17 00:00:00 2001
From: jimmy-guzman <hi@jimmyguzman.com>
Date: Thu, 7 Dec 2023 17:15:47 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20`e2e`=20tests=20Githu?=
 =?UTF-8?q?b=20Actions=20worflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/preview.yml | 26 ++++++++++++++++++
 .gitignore                    |  3 +++
 e2e/app.spec.ts               |  4 +--
 package.json                  |  1 +
 playwright.config.ts          |  7 ++++-
 pnpm-lock.yaml                |  3 +++
 vite.config.ts                | 51 ++++++++++++++++++++---------------
 7 files changed, 70 insertions(+), 25 deletions(-)
 create mode 100644 .github/workflows/preview.yml

diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
new file mode 100644
index 0000000..b0d9053
--- /dev/null
+++ b/.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 }}
diff --git a/.gitignore b/.gitignore
index 387a4be..1191814 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,6 @@ storybook-static
 
 # eslint
 .eslintcache
+
+# env
+.env*
diff --git a/e2e/app.spec.ts b/e2e/app.spec.ts
index 331513f..6ec52d2 100644
--- a/e2e/app.spec.ts
+++ b/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 }) => {
diff --git a/package.json b/package.json
index 0b770b2..b9f3e49 100644
--- a/package.json
+++ b/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",
diff --git a/playwright.config.ts b/playwright.config.ts
index 6b7d49a..f8e16f7 100644
--- a/playwright.config.ts
+++ b/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,
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1e000d6..ed5572d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,6 +94,9 @@ devDependencies:
   daisyui:
     specifier: 4.4.19
     version: 4.4.19(postcss@8.4.32)
+  dotenv:
+    specifier: 16.3.1
+    version: 16.3.1
   eslint:
     specifier: 8.55.0
     version: 8.55.0
diff --git a/vite.config.ts b/vite.config.ts
index 04ce265..95f34ce 100644
--- a/vite.config.ts
+++ b/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',
-  },
+  }
 })