Chore/setup e2e tests

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -129,4 +129,9 @@ walkthrough.md
 dist-electron
 release
 
-
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

package.json

@@ -16,6 +16,7 @@
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
     "test": "vitest",
+    "test:e2e": "playwright test",
     "preview": "vite preview",
     "prepare": "husky",
     "electron:build-ts": "tsc -p tsconfig.electron.json",
@@ -82,6 +83,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@playwright/test": "^1.57.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -124,4 +126,4 @@
       "eslint --fix"
     ]
   }
-}
+}

playwright.config.ts

@@ -0,0 +1,63 @@
+import { defineConfig, devices } from "@playwright/test"
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    baseURL: process.env.BASE_URL || "http://localhost:5173",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    launchOptions: {
+      slowMo: 1000,
+    },
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:5173",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+})

tests/example.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test"
+
+test("has title", async ({ page }) => {
+  await page.goto("https://playwright.dev/")
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/)
+})
+
+test("get started link", async ({ page }) => {
+  await page.goto("https://playwright.dev/")
+
+  // Click the get started link.
+  await page.getByRole("link", { name: "Get started" }).click()
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole("heading", { name: "Installation" })).toBeVisible()
+})

tests/file-creation.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from "@playwright/test"
+
+test("File Creation works", async ({ page }) => {
+  await page.goto("/dashboard")
+
+  // Create Scape
+  await page.getByRole("button", { name: "New Scape" }).first().click()
+  await page.getByRole("textbox", { name: "Scape Name" }).fill("file creation test")
+  await page.getByText("Blank ProjectA simple HTML/").click()
+  await page.getByRole("button", { name: "Create Scape" }).click()
+
+  // Create File
+  await page.getByRole("button", { name: "New File" }).click()
+  await page.getByRole("textbox", { name: "filename.ext" }).fill("testfile.txt")
+  await page.getByRole("textbox", { name: "filename.ext" }).press("Enter")
+
+  // VERIFY: The file exists in the file tree
+  // We look for the text "testfile.txt" in the sidebar
+  await expect(page.getByText("testfile.txt").first()).toBeVisible()
+})

tests/theme.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from "@playwright/test"
+
+test("Theme Toggle correctly sets Dark Mode", async ({ page }) => {
+  // 1. Your Navigation (Recorded)
+  await page.goto("/dashboard")
+  await page.getByRole("button", { name: "Toggle theme" }).click()
+  await page.getByRole("menuitem", { name: "Dark" }).click()
+
+  // 2. The Verification (Upgraded)
+  // Instead of checking if a random div is visible, we check the SYSTEM state.
+
+  // Method A: Check the HTML Class (The Source of Truth)
+  await expect(page.locator("html")).toHaveClass(/dark/)
+})

tests/three-preview.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from "@playwright/test"
+
+test("Three.js Preview Renders Canvas", async ({ page }) => {
+  // 1. Navigation & Creation (From your recording)
+  await page.goto("/dashboard")
+
+  // Create New Scape
+  await page.getByRole("button", { name: "New Scape" }).first().click()
+  await page.getByRole("textbox", { name: "Scape Name" }).fill("Test 3D")
+  await page.getByText("3D graphics with Three.js").click()
+  await page.getByRole("button", { name: "Create Scape" }).click()
+
+  // 2. The Verification (The "Magic Line")
+  // We use .frameLocator() to go INSIDE the iframe
+  const previewIframe = page.frameLocator('iframe[title="preview"]')
+
+  // We check for the <canvas> element (which Three.js creates)
+  const threeCanvas = previewIframe.locator("canvas")
+
+  // Assert 1: It exists and is visible
+  // We give it a slightly longer timeout (10s) because assets need to load
+  await expect(threeCanvas).toBeVisible({ timeout: 15000 })
+
+  // Assert 2: It has dimensions (proves it's not a 0x0 hidden element)
+  const box = await threeCanvas.boundingBox()
+  expect(box?.width).toBeGreaterThan(100)
+  expect(box?.height).toBeGreaterThan(100)
+
+  // 3. Test the "Refresh Bug" (Optional but recommended)
+  // Click the Refresh button in the UI
+  // Note: We need to find the correct selector for the refresh button.
+  // Based on code, it's likely a button with a restart icon, typically title="Restart Preview" or similar.
+  // For now, we trust the canvas loads initially.
+})

vite.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
     globals: true,
     environment: "jsdom",
     setupFiles: "./src/test/setup.ts",
+    exclude: ["tests/**", "node_modules/**"],
   },
   server: {
     headers: {