chore: add test setup

.github/workflows/ci.yml

@@ -30,15 +30,14 @@ jobs:
         - name: Install dependencies 🧳
           run: yarn
 
-        - name: Format files 🤹🏻
-          run: yarn format
+        - name: Install Playwright Browsers 🕹️
+          run: npx playwright install --with-deps
 
-        - name: Lint files 💅🏻
+        - name: Check Lint 💅🏻
           run: yarn lint
 
         - name: Build 🔨
           run: yarn build
 
         - name: Test 🧪
-          run: yarn test
-
+          run: yarn e2e:test

.gitignore

@@ -38,4 +38,8 @@ yarn-error.log*
 *.tsbuildinfo
 
 dist
-.gitsigners
+.gitsigners
+
+test-results/
+playwright-report/
+playwright/.cache/

apps/web/package.json

@@ -6,8 +6,10 @@
   "scripts": {
     "dev": "next dev --port 4783",
     "build": "next build",
-    "start": "next start",
-    "lint": "eslint . --ext .js,.ts,.tsx"
+    "start": "next build && next start --port 4783",
+    "lint": "eslint . --ext .js,.ts,.tsx",
+    "dev:test": "playwright test",
+    "e2e:test": "start-server-and-test start http://localhost:4783 dev:test"
   },
   "dependencies": {
     "@apollo/client": "^3.7.5",
@@ -48,6 +50,7 @@
     "zustand": "^4.3.2"
   },
   "devDependencies": {
+    "@playwright/test": "^1.30.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/mixpanel-browser": "^2.38.1",
     "@types/node": "18.11.18",
@@ -59,6 +62,7 @@
     "eslint-config-weblint": "*",
     "lens": "*",
     "postcss": "^8.4.19",
+    "start-server-and-test": "^1.15.3",
     "tailwindcss": "^3.2.4",
     "tsconfig": "*",
     "typescript": "4.9.4",

apps/web/playwright.config.ts

@@ -0,0 +1,43 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+import { devices } from '@playwright/test'
+
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 5000
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    actionTimeout: 0,
+    trace: 'on-first-retry'
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome']
+      }
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox']
+      }
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari']
+      }
+    }
+  ]
+}
+
+export default config

apps/web/tests/home.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test'
+
+test('has title', async ({ page }) => {
+  await page.goto('http://localhost:4783')
+
+  await expect(page).toHaveTitle(/Lenstube/)
+})

package.json

@@ -12,7 +12,8 @@
     "dev": "turbo run dev --parallel",
     "codegen": "turbo run codegen",
     "lint": "turbo run lint",
-    "test": "turbo run test",
+    "dev:test": "turbo run dev:test",
+    "e2e:test": "turbo run e2e:test",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {

turbo.json

@@ -5,9 +5,10 @@
       "dependsOn": ["^build"],
       "outputs": ["dist/**", ".next/**"]
     },
-    "test": { "dependsOn": ["^build"] },
+    "e2e:test": { "dependsOn": ["^build"] },
     "lint": { "outputs": [] },
     "codegen": { "outputs": [] },
-    "dev": { "cache": false }
+    "dev": { "cache": false },
+    "dev:test": { "cache": false }
   }
 }