add tests to ci

Author: kentcdodds

.github/workflows/validate.yml

@@ -35,6 +35,12 @@ jobs:
       - name: ⬣ ESLint
         run: npm run lint
 
+      - name: 🧪 Install Playwright
+        run: npm --prefix epicshop run test:setup
+
+      - name: 🧪 In-browser tests
+        run: npm --prefix epicshop test
+
   deploy:
     name: 🚀 Deploy
     runs-on: ubuntu-latest

epicshop/in-browser-tests.spec.js

@@ -0,0 +1,8 @@
+import { dirname, resolve } from 'path'
+import { fileURLToPath } from 'url'
+import { setupInBrowserTests } from '@epic-web/workshop-utils/playwright.server'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+process.env.EPICSHOP_CONTEXT_CWD = resolve(__dirname, '..')
+
+setupInBrowserTests()

epicshop/package.json

@@ -1,5 +1,9 @@
 {
   "type": "module",
+  "scripts": {
+    "test:setup": "playwright install chromium --with-deps",
+    "test": "playwright test"
+  },
   "dependencies": {
     "@epic-web/workshop-app": "^4.28.0",
     "execa": "^9.1.0"

epicshop/playwright.config.js

@@ -0,0 +1,40 @@
+import os from 'os'
+import path from 'path'
+import { defineConfig, devices } from '@playwright/test'
+
+const PORT = process.env.PORT || '5639'
+const tmpDir = path.join(
+	os.tmpdir(),
+	'epicshop-playwright',
+	path.basename(new URL('../', import.meta.url).pathname),
+)
+
+export default defineConfig({
+	outputDir: path.join(tmpDir, 'playwright-test-output'),
+	reporter: [
+		[
+			'html',
+			{ open: 'never', outputFolder: path.join(tmpDir, 'playwright-report') },
+		],
+	],
+	use: {
+		baseURL: `http://localhost:${PORT}/`,
+		trace: 'retain-on-failure',
+	},
+
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+	],
+
+	webServer: {
+		command: 'cd .. && npm start',
+		port: Number(PORT),
+		reuseExistingServer: !process.env.CI,
+		stdout: 'pipe',
+		stderr: 'pipe',
+		env: { PORT },
+	},
+})