run e2e tests on every PR

.github/workflows/test.yaml

@@ -8,14 +8,11 @@ on:
     branches:
       - "*"
 jobs:
-  test:
+  unit-tests:
     name: "Run Tests"
     runs-on: "depot-ubuntu-24.04-small"
     steps:
       - uses: "actions/checkout@v4"
-      - uses: "authzed/action-spicedb@v1"
-        with:
-          version: "latest"
       - uses: "actions/setup-node@v4"
         with:
           node-version: 22
@@ -24,3 +21,29 @@ jobs:
       - uses: "bahmutov/npm-install@v1"
       - name: "Run tests"
         run: "yarn test"
+  e2e-tests:
+    name: "Run E2E Tests"
+    runs-on: "depot-ubuntu-24.04-4" # Use a larger instance for E2E tests
+    steps:
+      - uses: "actions/checkout@v4"
+      - uses: "actions/setup-node@v4"
+        with:
+          node-version: 22
+          cache-dependency-path: "yarn.lock"
+          cache: "yarn"
+      - uses: "bahmutov/npm-install@v1"
+      - name: "Cypress run"
+        uses: "cypress-io/github-action@v6"
+        with:
+          browser: chrome
+          start: HTTPS=true vite preview -l info --strictPort --port 5173
+          wait-on: "http://localhost:5173"
+          wait-on-timeout: 120
+      - uses: "actions/upload-artifact@v4"
+        if: always()
+        with:
+          name: "cypress-artifacts" # see in "summary" tab of the workflow run
+          path: |
+            cypress/screenshots/
+            cypress/videos/
+            cypress/logs/

.gitignore

@@ -6,3 +6,5 @@ zed
 build
 .vercel
 .env
+cypress/screenshots
+cypress/videos

cypress.config.ts

@@ -1,16 +1,19 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
-  retries: 1,
-  defaultCommandTimeout: 10000,
-  requestTimeout: 11000,
-  responseTimeout: 60000,
+  retries: 0,
+  pageLoadTimeout: 120000, // 120 seconds
+  defaultCommandTimeout: 10000, // 10 seconds
+  requestTimeout: 11000, // 11 seconds
+  responseTimeout: 60000, // 60 seconds
   viewportHeight: 768,
   viewportWidth: 1400,
   chromeWebSecurity: false,
+  video: true,
+  screenshotOnRunFailure: true,
 
   e2e: {
-    baseUrl: "http://localhost:3000",
+    baseUrl: "http://localhost:5173",
     specPattern: [
       "cypress/integration/**/*.spec.{js,ts}",
       "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",

cypress/integration/basic.spec.js

@@ -19,12 +19,10 @@ describe("Playground", () => {
 
   it("displays header buttons", () => {
     cy.dismissTour();
-    cy.get("a").contains("Discuss on Discord").should("exist");
     cy.get("header > button").contains("Select Example Schema").should("exist");
     cy.get("header > button").contains("Share").should("exist");
     cy.get("header > button").contains("Download").should("exist");
     cy.get("header > button").contains("Load From File").should("exist");
-    cy.contains("Sign In To Import").should("exist");
   });
 
   it("default validation succeeds", () => {

cypress/support/commands.js

@@ -42,7 +42,7 @@ Cypress.Commands.add("waitForWasm", () => {
     () => cy.window().then((win) => !!win.runSpiceDBDeveloperRequest),
     {
       errorMsg: "WASM development package not loaded",
-      timeout: 30000,
+      timeout: 120000, // 120 seconds
       interval: 500,
     },
   );

cypress/support/e2e.ts

@@ -17,12 +17,14 @@
 import "./commands";
 
 // Handle uncaught exceptions
-Cypress.on("uncaught:exception", (err) => {
-  // TODO: Ignore transient network errors until either browser caching
-  // or js fixtures are supported
-  // https://github.com/cypress-io/cypress/issues/18335
-  // https://github.com/cypress-io/cypress/issues/1271
-  if (err.message.includes("Uncaught NetworkError")) {
-    return false;
-  }
+Cypress.on("uncaught:exception", (err: Error) => {
+  // https://github.com/suren-atoyan/monaco-react/issues/440
+  // if (err.message.includes("operation is manually canceled")) {
+  //   return false; // Prevents Cypress from failing the test
+  // }
+  //   // https://github.com/cypress-io/cypress/issues/28400
+  //   if (err.message.match(`Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope'`)) {
+  //       return false;
+  //   }
+    return true; // Let other exceptions fail the test
 });

package.json

@@ -74,7 +74,7 @@
     "@types/use-deep-compare-effect": "^1.5.1",
     "@types/uuid": "^9.0.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "cypress": "^12.9.0",
+    "cypress": "15.4.0",
     "cypress-wait-until": "^1.7.2",
     "eslint": "^9.18.0",
     "eslint-plugin-react-hooks": "^5.1.0",
@@ -96,7 +96,7 @@
     "lint-fix": "eslint --fix .",
     "format": "prettier . -w",
     "format:check": "prettier . -c",
-    "cy:run": "cypress run --browser chrome",
+    "cy:run": "cypress run --browser chrome --headless",
     "cy:open": "cypress open",
     "update:spicedb": "./scripts/update-spicedb.sh",
     "update:zed": "./scripts/update-zed.sh",

src/App.tsx

@@ -24,7 +24,7 @@ const rootRoute = createRootRoute({
   component: () => (
     <>
       <Outlet />
-      <TanStackRouterDevtools />
+      <TanStackRouterDevtools position={"bottom-right"} />
     </>
   ),
 });

src/spicedb-common/services/developerservice.ts

@@ -26,7 +26,7 @@ import { create, fromJsonString, toJsonString } from "@bufbuild/protobuf";
 import wasmConfig from "../../wasm-config.json";
 
 const WASM_FILE = `/static/main.wasm`;
-const ESTIMATED_WASM_BINARY_SIZE = 46376012; // bytes
+const ESTIMATED_WASM_BINARY_SIZE = 58000000; // bytes
 const ENTRYPOINT_FUNCTION = "runSpiceDBDeveloperRequest";
 
 /**

src/spicedb-common/services/zedservice.ts

@@ -6,7 +6,7 @@ import { create, toJson } from "@bufbuild/protobuf";
 import wasmConfig from "../../wasm-config.json";
 
 const WASM_FILE = `/static/zed.wasm`;
-const ESTIMATED_WASM_BINARY_SIZE = 55126053; // bytes
+const ESTIMATED_WASM_BINARY_SIZE = 65000000; // bytes
 const ENTRYPOINT_FUNCTION = "runZedCommand";
 
 /**