feat: add base Playwright setup for e2e testing, and first smoke test

danielstals · Sep 9, 2024 · 69d3824 · 69d3824
1 parent 1435fbd
commit 69d3824
Show file tree

Hide file tree

Showing 12 changed files with 255 additions and 49 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -84,5 +84,11 @@ module.exports = {
 				],
 			},
 		},
+		{
+			files: ['e2e/**/*.ts', 'e2e/**/*.tsx'],
+			rules: {
+				'testing-library/prefer-screen-queries': 'off',
+			},
+		},
 	],
 };
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g pnpm && pnpm install
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+    - name: Run Playwright tests
+      run: pnpm exec playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -10,7 +10,7 @@ on:
       - main
 
 jobs:
-  test:
+  unit_tests:
     name: Run Jest Tests
     runs-on: ubuntu-latest
     steps:
@@ -30,8 +30,39 @@ jobs:
       - name: Run Jest Tests
         run: pnpm test:ci
 
+  e2e_tests:
+    needs: [unit_tests]
+    name: Run Playwright E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js version from .nvmrc
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm test:ci
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
   deploy_preview:
-    needs: [test]
+    needs: [unit_tests, e2e_tests]
     name: Deploy to Preview
     runs-on: ubuntu-latest
     environment: Preview

diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,10 @@
 /coverage
 /reports
 /reports/*
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
 
 # next.js
 /.next/

diff --git a/e2e/tests/smoke.spec.ts b/e2e/tests/smoke.spec.ts
@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Smoke test suite', () => {
+	test.beforeEach(async ({ page }) => {
+		console.log(`Running ${test.info().title}`);
+		await page.goto('/');
+	});
+
+	test('should navigate to the about page', async ({ page }) => {
+		await expect(page.locator('h2')).toContainText('Hi, ik ben Daniel Stals!');
+	});
+
+	test('dark or light mode should be toggled when theme toggle button is clicked', async ({ page }) => {
+		const themeToggleButton = page.getByRole('button', { name: /toggle theme/i });
+		const htmlElement = page.locator('html');
+		await themeToggleButton.click();
+		await expect(htmlElement).toHaveClass(/dark/);
+		await themeToggleButton.click();
+		await expect(htmlElement).toHaveClass(/light/);
+	});
+
+	test('chat window should open when input is focussed', async ({ page }) => {
+		const formElement = page.getByRole('form', { name: /chat/i });
+		await formElement.click();
+		await expect(formElement).toHaveClass(/sm:h-\[400px\]/);
+	});
+
+	test('clicking a prompt suggestion should update chat input', async ({ page }) => {
+		const promptSuggestionButtons = page.getByTestId('prompt-button');
+		const firstPromptText = await promptSuggestionButtons.first().innerText();
+		await promptSuggestionButtons.first().click();
+		await expect(page.getByRole('textbox', { name: /chat-input/i })).toHaveValue(firstPromptText);
+	});
+});
diff --git a/jest.config.ts b/jest.config.ts
@@ -23,10 +23,7 @@ export const jestBaseConfig: Config = {
 	moduleNameMapper: {
 		'^@/(.*)$': '<rootDir>/src/$1',
 	},
-	// Reducing noise in the output by limiting the number of worker threads in CI
-	maxWorkers: '50%',
-	// Run tests in CI mode, where the terminal has limited capabilities
-	ci: true,
+	testPathIgnorePatterns: ['/node_modules/', '/e2e/'],
 };
 
 export default createJestConfig(jestBaseConfig);
diff --git a/package.json b/package.json
@@ -11,6 +11,8 @@
 		"test": "jest",
 		"test:ci": "jest --config jest.config.ci.ts --runInBand",
 		"test:watch": "jest --watch",
+		"test:e2e": "npx playwright test --ui",
+		"test:e2e:ci": "npx playwright test --config=playwright.config.ts --reporter=dot --timeout=10000",
 		"check-types": "tsc --project tsconfig.json --pretty --noEmit",
 		"generate": "npx ts-node ./scripts/generate.ts",
 		"generate-upstash": "npx ts-node ./scripts/generate-upstash.ts",
@@ -58,6 +60,7 @@
 	},
 	"devDependencies": {
 		"@eslint/eslintrc": "^3.1.0",
+		"@playwright/test": "^1.47.0",
 		"@testing-library/react": "^16.0.1",
 		"@types/jest": "^29.5.12",
 		"@types/node": "^20",

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -0,0 +1,56 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const PORT = 3000;
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './e2e',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: 'http://localhost:3000',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{ name: 'setup', testMatch: /.*\.setup\.ts/ },
+		{
+			name: 'chromium',
+			testMatch: /.*\.spec\.ts/,
+			use: {
+				...devices['Desktop Chrome'],
+			},
+			dependencies: ['setup'],
+		},
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: `pnpm dev --port ${PORT}`,
+		timeout: 10 * 1000,
+		port: PORT,
+		reuseExistingServer: !process.env.CI, // reuse server to speed up tests
+	},
+});