tests for sandboxes

apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx

@@ -4,10 +4,7 @@ import { useParams } from "next/navigation"
 import { SandboxHeader } from "@/components/features/studio/sandbox/components/sandbox-header"
 import { useRouter, usePathname } from "next/navigation"
 import { useState } from "react"
-import {
-  ServerSandbox,
-  useSandbox,
-} from "@/components/features/studio/sandbox/hooks/use-sandbox"
+import { ServerSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
 import PageClient from "./page.client"
 
 export default function Page() {

apps/web/cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

apps/web/cypress/e2e/sandbox_basic.cy.ts

@@ -0,0 +1,24 @@
+describe("Home Page Portal Interaction", () => {
+  it("should open the portal after clicking Browse Component and restrict interaction to the portal", () => {
+    cy.visit("http://localhost:3000/")
+    cy.contains(/browse component/i).click()
+    cy.get("[data-portal]").should("be.visible")
+    cy.get("body").then(($body) => {
+      if ($body.find("[data-portal]").length) {
+        cy.get("[data-portal]").should("be.visible")
+        cy.get("main, header, footer").should(
+          "have.css",
+          "pointer-events",
+          "none",
+        )
+      }
+    })
+  })
+})
+
+describe("Studio Page Basic Load", () => {
+  it("should load the studio page for serjobasDEV", () => {
+    cy.visit("http://localhost:3000/studio/serjobasDEV")
+    cy.contains("serjobasDEV").should("be.visible")
+  })
+})

apps/web/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

apps/web/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

apps/web/cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

apps/web/package.json

@@ -10,6 +10,7 @@
     "start": "next start",
     "lint": "next lint",
     "test": "vitest run",
+    "cypress:open": "cypress open",
     "build:css": "tailwindcss -i ./input.css -o ./public/compiled-tailwind.css --minify",
     "combine-css": "node css/combinedCSS.js",
     "generate-embeddings": "ts-node --project scripts/tsconfig.json scripts/generate-embeddings.ts"
@@ -115,6 +116,7 @@
     "@types/react": "19.1.1",
     "@types/react-dom": "19.1.2",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "cypress": "^14.3.3",
     "dotenv": "^16.4.5",
     "eslint": "^8",
     "eslint-config-next": "15.3.0",