improve config

Author: kentcdodds

.github/workflows/validate.yml

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

.gitignore

@@ -4,8 +4,6 @@ workspace/
 **/.cache/
 **/build/
 **/public/build
-**/playwright-report
-data.db
 /playground
 **/tsconfig.tsbuildinfo
 

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/playwright.config.js

@@ -0,0 +1,36 @@
+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(), 'epicreact-server-components')
+
+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 },
+	},
+})