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,21 @@ jobs:
       - uses: "bahmutov/npm-install@v1"
       - name: "Run tests"
         run: "yarn test"
+  e2e-tests:
+    name: "Run E2E 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
+          cache-dependency-path: "yarn.lock"
+          cache: "yarn"
+      - uses: "bahmutov/npm-install@v1"
+      - name: "Run sever locally"
+        run: "yarn dev"
+      - name: "Run e2e tests"
+        run: "yarn cy:run"

.gitignore

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

cypress.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   chromeWebSecurity: false,
 
   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/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
   }
 });

src/App.tsx

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