make it easier to run tests (when we get them)

Author: kentcdodds

.github/workflows/validate.yml

@@ -35,6 +35,13 @@ jobs:
       - name: ⬣ ESLint
         run: npm run lint
 
+      # TODO: get this working again
+      # - 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-lock.json

@@ -1,8 +1,13 @@
 {
   "type": "module",
+  "scripts": {
+    "test:setup": "playwright install chromium --with-deps",
+    "test": "playwright test"
+  },
   "dependencies": {
     "@epic-web/config": "^1.11.2",
     "@epic-web/workshop-app": "^4.28.0",
+    "@epic-web/workshop-utils": "^4.28.0",
     "execa": "^9.2.0"
   }
 }

epicshop/package.json

@@ -0,0 +1,41 @@
+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({
+	workers: process.env.CI ? 1 : undefined,
+	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 },
+	},
+})