fix: playwright tests

.github/workflows/development.yml

@@ -21,7 +21,7 @@ jobs:
       - name: 📦 Build the worker
         run: npm run build
       - name: 💣 Run some tests
-        run: npm run test
+        run: playwright test
 
   lint:
     name: ⬣ Linting

.gitignore

@@ -8,5 +8,9 @@ node_modules
 # Cloudflare
 .wrangler
 
+# Playwright
+/test-results
+/playwright-report
+
 # Remix stacks
 /package-lock.json

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged

app/root.tsx

@@ -95,7 +95,9 @@ function Layout({
 	return (
 		<div className="container mx-auto">
 			<div className="flex flex-col-reverse lg:flex-row">
-				<section className="flex-1 relative border-t lg:border-t-0">
+				<section
+					className={`flex-1 relative ${children ? 'border-t lg:border-t-0' : ''}`.trim()}
+				>
 					<div className="sticky top-0">
 						<div className="flex flex-col lg:min-h-screen lg:py-10 px-5 py-5">
 							<header className="py-4">
@@ -115,7 +117,7 @@ function Layout({
 									</a>
 								) : null}
 							</div>
-							<footer>
+							<footer className="pt-8">
 								Wanna know more about Remix? Check out{' '}
 								<a className="underline" href="https://remix.guide">
 									Remix Guide

package.json

@@ -1,17 +1,17 @@
 {
 	"private": true,
-	"name": "remix-worker-template",
+	"name": "remix-cloudflare-template",
+	"type": "module",
 	"description": "All-in-one remix starter template for Cloudflare Pages",
-	"module": "./dist/worker.mjs",
 	"scripts": {
 		"dev": "remix vite:dev",
-		"test": "NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" playwright test",
+		"test": "playwright test --ui",
 		"start": "wrangler pages dev ./build/client",
 		"build": "remix vite:build",
-		"cleanup": "rimraf .cache ./build ./public/build",
+		"cleanup": "rimraf .cache ./build",
 		"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
 		"typecheck": "tsc",
-		"prepare": "husky install"
+		"prepare": "husky"
 	},
 	"dependencies": {
 		"@markdoc/markdoc": "^0.4.0",
@@ -39,6 +39,7 @@
 		"husky": "^9.0.10",
 		"lint-staged": "^15.2.2",
 		"miniflare": "^3.20240129.1",
+		"msw": "^2.1.7",
 		"postcss": "^8.4.35",
 		"prettier": "^3.2.5",
 		"rimraf": "^5.0.5",

playwright.config.ts

@@ -1,24 +1,28 @@
-import { type PlaywrightTestConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 
-const config: PlaywrightTestConfig = {
+const PORT = process.env.PORT || '5173';
+
+export default defineConfig({
+	testDir: './tests/e2e',
+	timeout: 15 * 1000,
+	expect: {
+		timeout: 5 * 1000,
+	},
 	forbidOnly: !!process.env.CI,
 	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: 'html',
 	use: {
+		baseURL: `http://localhost:${PORT}`,
 		trace: 'on-first-retry',
 	},
+
 	projects: [
 		{
 			name: 'chromium',
-			use: { ...devices['Desktop Chrome'] },
-		},
-		{
-			name: 'firefox',
-			use: { ...devices['Desktop Firefox'] },
-		},
-		{
-			name: 'webkit',
-			use: { ...devices['Desktop Safari'] },
+			use: {
+				...devices['Desktop Chrome'],
+			},
 		},
 	],
-};
-export default config;
+});

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	plugins: {
 		tailwindcss: {},
 		autoprefixer: {},

tailwind.config.js

@@ -1,5 +1,7 @@
-module.exports = {
+import typeography from '@tailwindcss/typography';
+
+export default {
 	content: ['./app/**/*.tsx', './app/**/*.ts'],
 	theme: {},
-	plugins: [require('@tailwindcss/typography')],
+	plugins: [typeography],
 };

wrangler.toml

@@ -1,4 +1,4 @@
 name = "remix-cloudflare-template"
 kv_namespaces = [
-  { binding = "cache", id = "7bd353e1660544f497319275f6e241fa" }
+  { binding = "cache", id = "cache" }
 ]