Fix Playwright test reliability and CI improvements

.github/workflows/build-and-deploy_devresults-xdev.yml

@@ -2,8 +2,6 @@ name: Build
 
 on:
   push:
-    branches:
-      - main
   pull_request:
     types: [opened, synchronize, reopened]
     branches:
@@ -35,18 +33,19 @@ jobs:
       - name: lint
         run: pnpm lint
 
-      - name: test
-        id: test
-        run: |
-          pnpm test
-          pnpm test:pw
+      - name: unit tests
+        run: pnpm test
+
+      - name: build
+        run: pnpm build
+
+      - name: playwright tests
+        id: playwright
+        run: pnpm test:pw
 
-      - name: Capture test output
-        if: ${{ failure() && steps.test.conclusion == 'failure' }}
+      - name: Capture playwright output
+        if: ${{ failure() && steps.playwright.conclusion == 'failure' }}
         uses: actions/upload-artifact@v4
         with:
           name: playwright-test-results
           path: ./test-results
-
-      - name: build
-        run: pnpm build

.gitignore

@@ -12,3 +12,4 @@
 /.vscode/
 test-results
 storybook-static
+dist

app/hooks/useRedirect.tsx

@@ -12,16 +12,16 @@ export function useRedirect({ from, to, condition = true, localState = undefined
   useEffect(() => {
     if (!condition) return
     if (typeof from === "string" && pathname === from) {
-      console.log(`redirecting from ${from} to ${to}`)
+      // exact match
       if (localState) update(localState)
       void navigate(to, { state })
     } else if (from instanceof RegExp && from.test(pathname)) {
+      // regex match
       const newTo = pathname.replace(from, to)
-      console.log(`redirecting from ${from} to ${newTo}`)
       if (localState) update(localState)
       void navigate(newTo, { state })
     } else {
-      console.log("oops... don't know how to redirect", { from, to, pathname })
+      // nothing to do
     }
   }, [pathname, state, from, to, condition, navigate])
 }

app/root.tsx

@@ -34,15 +34,15 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 const createWorker = () =>
-  new SharedWorker(new URL("../public/shared-worker", import.meta.url), {
+  new SharedWorker(new URL("shared-worker.ts", import.meta.url), {
     type: "module",
     name: "dxos-client-worker",
   })
 
 export default function App() {
   return (
     <ClientProvider
-      // shell="./shell.html"
+      shell="./shell.html"
       config={configProvider}
       createWorker={createWorker}
       types={[Contact, DoneEntry, TimeEntry, Client, Project]}

public/shared-worker.js → app/shared-worker.ts

@@ -1,4 +1,4 @@
-onconnect = async event => {
+onconnect = async (event: MessageEvent) => {
   const { onconnect } = await import("@dxos/react-client/worker")
   await onconnect(event)
 }

app/ui/stories/util/storyContact.ts

@@ -13,7 +13,7 @@ export function storyContact(
     contact: c,
     isSelf: self,
     isAdmin: admin,
-    identity: undefined, // todo
+    identity: undefined,
   })
 }
 

package.json

@@ -4,13 +4,15 @@
   "type": "module",
   "scripts": {
     "benchmark": "vitest bench",
-    "build": "react-router build",
+    "build": "run-s build:reactrouter build:shell",
+    "build:reactrouter": "react-router build",
+    "build:shell": "vite build -c vite.config.shell.ts",
     "build:storybook": "storybook build",
     "dev": "react-router dev --open",
     "icon-types": "node ./scripts/generate-icon-types.js",
     "lint": "xo",
     "preinstall": "npx only-allow pnpm",
-    "start": "react-router-serve ./build/server/index.js",
+    "start": "vite preview --open",
     "start:storybook": "http-server storybook-static/ -os",
     "storybook": "storybook dev -p 6006",
     "test": "vitest",
@@ -21,11 +23,11 @@
     "test:pw:ui": "cross-env PLAYWRIGHT_UI=1 run-p dev test:pw:exec:ui"
   },
   "dependencies": {
-    "@dxos/config": "^0.7.5-feature-compute.4d9d99a",
-    "@dxos/echo-schema": "^0.7.5-feature-compute.4d9d99a",
-    "@dxos/react-client": "^0.7.5-feature-compute.4d9d99a",
-    "@dxos/shell": "0.7.5-feature-compute.4d9d99a",
-    "@dxos/util": "0.7.5-feature-compute.4d9d99a",
+    "@dxos/config": "0.7.4",
+    "@dxos/echo-schema": "0.7.4",
+    "@dxos/react-client": "0.7.4",
+    "@dxos/shell": "0.7.4",
+    "@dxos/util": "0.7.4",
     "@effect/schema": "^0.75.5",
     "@headlessui/react": "^2.2.0",
     "@herbcaudill/random": "^1.0.5",
@@ -93,6 +95,7 @@
     "@types/platform": "^1.3.6",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.3.4",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-xo": "^0.45.0",
@@ -103,6 +106,7 @@
     "eslint-plugin-unused-imports": "^3.2.0",
     "http-server": "^14.1.1",
     "mockdate": "^3.0.5",
+    "npm-run-all": "^4.1.5",
     "platform": "^1.3.6",
     "prettier": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.6.11",

playwright.config.ts

@@ -8,8 +8,11 @@ export default defineConfig({
   testDir: "./test",
   testMatch: "*.test.ts",
 
+  /* Warm up Vite's dependency cache before running tests */
+  globalSetup: "./test/global-setup.ts",
+
   /* tests fail if they take longer than this */
-  timeout: 45_000,
+  timeout: 15_000,
 
   /* abort if we get several test failures (probably server isn't running or something) */
   maxFailures: 10,
@@ -24,7 +27,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
 
   /* Opt out of parallel tests */
-  workers: 1,
+  workers: process.env.CI ? 1 : 8,
 
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: "list",
@@ -67,8 +70,16 @@ export default defineConfig({
   ],
 
   webServer:
-    isPlaywrightUI ?
-      []
+    isPlaywrightUI ? []
+    : process.env.CI ?
+      // use the built website for testing in ci
+      [
+        {
+          command: "pnpm vite preview --port 3001",
+          url: "http://localhost:3001",
+          reuseExistingServer: false,
+        },
+      ]
     : [
         {
           command: "pnpm react-router dev --port 3001",