Use vitest for browser tests

package.json

@@ -12,8 +12,8 @@
     "typecheck": "tsc --noEmit",
     "format": "oxfmt",
     "format:check": "oxfmt --check",
-    "cy:run": "cypress run --browser chrome",
-    "cy:open": "cypress open",
+    "test:unit": "vitest --project unit",
+    "test:browser": "vitest --project browser",
     "update:deps": "./scripts/update-spicedb.sh && buf generate && ./scripts/update-zed.sh"
   },
   "dependencies": {
@@ -51,6 +51,7 @@
     "file-saver": "^2.0.5",
     "file-select-dialog": "^1.5.4",
     "line-column": "^1.0.2",
+    "lodash": "^4.17.23",
     "lucide-react": "^0.503.0",
     "marked": "^4.0.10",
     "monaco-editor": "~0.40.0",
@@ -79,8 +80,7 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@playwright/test": "^1.58.2",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/dagre": "^0.7.53",
     "@types/file-saver": "^2.0.5",
@@ -95,18 +95,20 @@
     "@types/styled-components": "^5.1.26",
     "@types/use-deep-compare-effect": "^1.5.1",
     "@types/uuid": "^9.0.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "cypress": "^12.9.0",
-    "cypress-wait-until": "^1.7.2",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/browser": "4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
     "globals": "^15.14.0",
     "oxfmt": "^0.28.0",
     "oxlint": "^1.48.0",
     "oxlint-tsgolint": "^0.14.0",
+    "playwright": "^1.58.2",
     "tw-animate-css": "^1.2.8",
     "typescript": "~5.7.3",
-    "vite": "^6.0.7",
-    "vite-plugin-svgr": "^4.3.0",
-    "vitest": "^2.1.8"
+    "vite": "^7.3.1",
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.18",
+    "vitest-browser-react": "^2.0.5"
   },
   "browserslist": {
     "production": [

src/tests/browser/basic.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  clickTab,
+  dismissTour,
+  setupPlayground,
+  waitForWasm,
+} from "./helpers";
+
+describe("Playground", () => {
+  it("displays tutorial", async () => {
+    const screen = await setupPlayground()
+    await expect
+      .element(screen.getByText("Welcome!"))
+      .toBeVisible();
+  });
+
+  it("can dismiss tutorial", async () => {
+    const screen = await setupPlayground()
+    await screen.getByText("Skip").click();
+    await expect.element(screen.getByText("Welcome!")).not.toBeInTheDocument();
+  });
+
+  it("displays header buttons", async () => {
+    const screen = await setupPlayground()
+    await dismissTour(screen);
+    await expect
+      .element(screen.getByRole("link", { name: /Discuss on Discord/i }))
+      .toBeVisible();
+    await expect
+      .element(
+        screen.getByText("Select Example Schema")
+      )
+      .toBeVisible();
+    await expect
+      .element(screen.getByRole("button", { name: "Share" }))
+      .toBeVisible();
+    await expect
+      .element(screen.getByRole("button", { name: "Download" }))
+      .toBeVisible();
+    await expect
+      .element(screen.getByRole("button", { name: "Load From File" }))
+      .toBeVisible();
+  });
+
+  it("default validation succeeds", async () => {
+    const screen = await setupPlayground()
+    await dismissTour(screen);
+    await waitForWasm();
+    await clickTab(screen, "Assertions");
+    await screen.getByRole("button", { name: "Run" }).click();
+    await expect
+      .element(screen.getByText("Validated!"), { timeout: 15000 })
+      .toBeVisible();
+  });
+});

src/tests/browser/helpers.tsx

@@ -0,0 +1,45 @@
+import { render, type RenderResult } from 'vitest-browser-react'
+import { StrictMode } from "react";
+import { vi } from "vitest";
+
+import App from "@/App";
+
+export function setupPlayground() {
+  // TODO: see if this breaks parallel tests because it's shared state
+  // Reset state between tests
+  document.cookie =
+    "dismiss-tour=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+  localStorage.clear();
+
+  return render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+    );
+}
+
+export async function dismissTour(screen: RenderResult) {
+  await screen.getByText("Skip").click();
+}
+
+export async function clickTab(screen: RenderResult, label: string): Promise<void> {
+  await screen.getByLabelText("Tabs").getByText(label).click();
+}
+
+export async function clickPanel(screen: RenderResult, label: string): Promise<void> {
+  await screen.getByRole("button", { name: label }).click();
+}
+
+export async function waitForWasm(): Promise<void> {
+  await vi.waitFor(
+    () => {
+      const w = window as typeof window & {
+        runSpiceDBDeveloperRequest?: unknown;
+      };
+      if (typeof w.runSpiceDBDeveloperRequest !== "function") {
+        throw new Error("WASM not loaded");
+      }
+    },
+    { timeout: 30000, interval: 500 }
+  );
+}