test: enable testing with Wrangler for Pages and Workers (#28)

* test: enable testing with Wrangler for Pages and Workers

* build before tests

* add the test for vite in `examples/cloudflare-workers`

Author: yusukebe

examples/cloudflare-pages/package.json

@@ -10,7 +10,8 @@
     "start": "wrangler pages dev ./build/client",
     "typecheck": "tsc",
     "preview": "npm run build && wrangler pages dev",
-    "test:e2e": "playwright test -- -c playwright.config.ts e2e.test.ts"
+    "test:e2e:vite": "playwright test -c playwright-vite.config.ts e2e.test.ts",
+    "test:e2e:pages": "npm run build && playwright test -c playwright-pages.config.ts e2e.test.ts"
   },
   "dependencies": {
     "@remix-run/cloudflare": "^2.14.0",
@@ -36,4 +37,4 @@
   "engines": {
     "node": ">=20.0.0"
   }
-}
+}

examples/cloudflare-pages/playwright.config.ts renamed to examples/cloudflare-pages/playwright-pages.config.ts

@@ -1,12 +1,14 @@
 import { defineConfig, devices } from '@playwright/test'
 
+const port = 8798
+
 export default defineConfig({
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
   use: {
-    baseURL: 'http://localhost:6173',
+    baseURL: `http://localhost:${port.toString()}`,
   },
   projects: [
     {
@@ -17,8 +19,8 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'npm exec vite -- --port 6173 -c ./vite.config.ts',
-    port: 6173,
+    command: `npm exec wrangler pages dev -- --port ${port.toString()}`,
+    port,
     reuseExistingServer: !process.env.CI,
   },
 })

examples/cloudflare-pages/playwright-vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const port = 6173
+
+export default defineConfig({
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  use: {
+    baseURL: `http://localhost:${port.toString()}`,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      timeout: 5000,
+      retries: 2,
+    },
+  ],
+  webServer: {
+    command: `npm exec vite -- --port ${port.toString()} -c ./vite.config.ts`,
+    port,
+    reuseExistingServer: !process.env.CI,
+  },
+})

examples/cloudflare-workers/.gitignore

@@ -1,3 +1,10 @@
+node_modules
+
+test-results
+
+/.cache
 /build
 .env
 .dev.vars
+
+.wrangler

examples/cloudflare-workers/e2e.test.ts

@@ -0,0 +1,27 @@
+import { expect, test } from '@playwright/test'
+
+test('Should return 200 response - /', async ({ page }) => {
+  const response = await page.goto('/')
+  expect(response?.status()).toBe(200)
+
+  const headers = response?.headers() ?? {}
+  expect(headers['x-powered-by']).toBe('Remix and Hono')
+
+  const contentH1 = await page.textContent('h1')
+  expect(contentH1).toBe('Remix and Hono')
+
+  const contentH2 = await page.textContent('h2')
+  expect(contentH2).toBe('Var is My Value')
+
+  const contentH3 = await page.textContent('h3')
+  expect(contentH3).toBe('cf,ctx,caches are available')
+
+  const contentH4 = await page.textContent('h4')
+  expect(contentH4).toBe('Extra is stuff')
+})
+
+test('Should return 200 response - /api', async ({ page }) => {
+  const response = await page.goto('/api')
+  expect(response?.status()).toBe(200)
+  expect(await response?.json()).toEqual({ message: 'Hello', var: 'My Value' })
+})

examples/cloudflare-workers/package.json

@@ -9,7 +9,9 @@
     "dev": "remix vite:dev",
     "start": "wrangler dev",
     "typecheck": "tsc",
-    "preview": "npm run build && wrangler dev"
+    "preview": "npm run build && wrangler dev",
+    "test:e2e:vite": "playwright test -c playwright-vite.config.ts e2e.test.ts",
+    "test:e2e:workers": "npm run build && playwright test -c playwright-workers.config.ts e2e.test.ts"
   },
   "dependencies": {
     "@remix-run/cloudflare": "^2.14.0",
@@ -22,9 +24,11 @@
   },
   "devDependencies": {
     "@hono/vite-dev-server": "^0.16.0",
+    "@playwright/test": "^1.48.2",
     "@remix-run/dev": "^2.14.0",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
+    "playwright": "^1.47.0",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.2.1",

examples/cloudflare-workers/playwright-vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const port = 6173
+
+export default defineConfig({
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  use: {
+    baseURL: `http://localhost:${port.toString()}`,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      timeout: 5000,
+      retries: 2,
+    },
+  ],
+  webServer: {
+    command: `npm exec vite -- --port ${port.toString()} -c ./vite.config.ts`,
+    port,
+    reuseExistingServer: !process.env.CI,
+  },
+})

examples/cloudflare-workers/playwright-workers.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const port = 8797
+
+export default defineConfig({
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  use: {
+    baseURL: `http://localhost:${port.toString()}`,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      timeout: 5000,
+      retries: 2,
+    },
+  ],
+  webServer: {
+    command: `npm exec wrangler dev -- --port ${port.toString()} ./worker.ts`,
+    port,
+    reuseExistingServer: !process.env.CI,
+  },
+})