run e2e tests on every PR

Author: miparnisari

.github/workflows/test.yaml

@@ -8,7 +8,7 @@ on:
     branches:
       - "*"
 jobs:
-  test:
+  unit-tests:
     name: "Run Tests"
     runs-on: "depot-ubuntu-24.04-small"
     steps:
@@ -24,3 +24,28 @@ 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: "authzed/action-spicedb@v1"
+        with:
+          version: "latest"
+      - uses: "actions/setup-node@v4"
+        with:
+          node-version: 22
+          cache-dependency-path: "yarn.lock"
+          cache: "yarn"
+      - uses: "bahmutov/npm-install@v1"
+      - name: "Run server locally and tests"
+        run:
+          yarn dev & sleep 60 && yarn cy:run
+      - 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,19 +1,32 @@
 import { defineConfig } from "cypress";
+import fs from 'fs';
 
 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}",
     ],
   },
+    setupNodeEvents: (on) => {
+      on("task", {
+        log(message) {
+            console.log(message);
+            fs.appendFileSync('cypress/logs/console.log', `${message}\n`);
+            return null;
+        }
+      })
+    }
 });

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,9 @@
 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: { msg: string }) => {
+  // https://github.com/suren-atoyan/monaco-react/issues/440
+  if (err.msg.includes("operation is manually canceled")) {
+    return false; // Prevents Cypress from failing the test
   }
 });

package.json

@@ -32,6 +32,7 @@
     "es-toolkit": "^1.36.0",
     "file-saver": "^2.0.5",
     "file-select-dialog": "^1.5.4",
+    "fs": "^0.0.1-security",
     "line-column": "^1.0.2",
     "lucide-react": "^0.503.0",
     "marked": "^4.0.10",
@@ -96,7 +97,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";
 
 /**