Merge pull request #37 from remix-run/pedro/ci

CI

.github/workflows/ci.yml

@@ -0,0 +1,40 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+jobs:
+  test:
+    strategy:
+      matrix:
+        include:
+          - os: ubuntu-latest
+            browser: firefox
+          - os: ubuntu-latest
+            browser: chromium
+          - os: macos-latest
+            browser: webkit
+          - os: windows-latest
+            browser: msedge
+      fail-fast: false
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright Browsers
+        working-directory: .tests
+        run: pnpm playwright install --with-deps ${{ matrix.browser }}
+      - name: Run Playwright tests
+        working-directory: .tests
+        run: pnpm test -- --project=${{ matrix.browser }}

.tests/playwright.config.ts

@@ -14,7 +14,24 @@ export default defineConfig({
   projects: [
     {
       name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      use: devices["Desktop Chrome"],
+    },
+    {
+      name: "webkit",
+      use: devices["Desktop Safari"],
+    },
+    {
+      name: "msedge",
+      use: {
+        ...devices["Desktop Edge"],
+        // Desktop Edge uses chromium by default
+        // https://github.com/microsoft/playwright/blob/993546c1bc3267fb72eddaf8cf003cb2e1519598/packages/playwright-core/src/server/deviceDescriptorsSource.json#L1652
+        channel: "msedge",
+      },
+    },
+    {
+      name: "firefox",
+      use: devices["Desktop Firefox"],
     },
   ],
 });

.tests/test.netlify.ts

@@ -1,7 +1,12 @@
 import { expect, Page } from "@playwright/test";
 import getPort from "get-port";
 
-import { matchLine, testTemplate, urlRegex } from "./utils";
+import {
+  matchLine,
+  testTemplate,
+  urlRegex,
+  withoutHmrPortError,
+} from "./utils";
 
 const test = testTemplate("netlify");
 
@@ -15,7 +20,7 @@ test("dev", async ({ page, $ }) => {
 
   const url = await matchLine(dev.stdout, urlRegex.custom);
   await workflow({ page, url });
-  expect(dev.buffer.stderr).toBe("");
+  expect(withoutHmrPortError(dev.buffer.stderr)).toBe("");
 });
 
 test("build", async ({ $ }) => {

.tests/test.node-custom-server.ts

@@ -1,7 +1,12 @@
 import { expect, Page } from "@playwright/test";
 import getPort from "get-port";
 
-import { matchLine, testTemplate, urlRegex } from "./utils";
+import {
+  matchLine,
+  testTemplate,
+  urlRegex,
+  withoutHmrPortError,
+} from "./utils";
 
 const test = testTemplate("node-custom-server");
 
@@ -15,7 +20,8 @@ test("dev", async ({ page, $ }) => {
 
   const url = await matchLine(dev.stdout, urlRegex.custom);
   await workflow({ page, url });
-  expect(dev.buffer.stderr).toBe("");
+
+  expect(withoutHmrPortError(dev.buffer.stderr)).toBe("");
 });
 
 test("build + start", async ({ page, $ }) => {

.tests/test.vercel.ts

@@ -1,7 +1,12 @@
 import { expect, Page } from "@playwright/test";
 import getPort from "get-port";
 
-import { matchLine, testTemplate, urlRegex } from "./utils";
+import {
+  matchLine,
+  testTemplate,
+  urlRegex,
+  withoutHmrPortError,
+} from "./utils";
 
 const test = testTemplate("vercel");
 
@@ -15,7 +20,7 @@ test("dev", async ({ page, $ }) => {
 
   const url = await matchLine(dev.stdout, urlRegex.custom);
   await workflow({ page, url });
-  expect(dev.buffer.stderr).toBe("");
+  expect(withoutHmrPortError(dev.buffer.stderr)).toBe("");
 });
 
 test("build", async ({ $ }) => {

.tests/utils.ts

@@ -62,11 +62,7 @@ export const testTemplate = (template: string) =>
       await use(cwd);
 
       const testPassed = testInfo.errors.length === 0;
-      if (!testPassed) {
-        console.log("cwd: ", cwd);
-        return;
-      }
-      fs.rmSync(cwd, { recursive: true });
+      if (!testPassed) console.log("cwd: ", cwd);
     },
     edit: async ({ cwd }, use) => {
       await use(async (file, transform) => {
@@ -114,7 +110,6 @@ export const testTemplate = (template: string) =>
 
       testHasEnded = true;
       processes.forEach((p) => p.kill());
-      await Promise.all(processes);
     },
   });
 
@@ -144,3 +139,10 @@ export const urlRegex = {
   netlify: urlMatch({ prefix: /◈ Server now ready on / }),
   wrangler: urlMatch({ prefix: /Ready on / }),
 };
+
+// `vite.createServer` always tries to use the same HMR port
+// unless `server.hmr.port` is configured.
+// Ultimately, we should provide better primitives for building custom servers
+// something like `createRequestHandler(pathToBuild)`.
+export const withoutHmrPortError = (stderr: string) =>
+  stderr.replace(/WebSocket server error: Port is already in use/, "").trim();