🤖 ci: add browser UI tests organized by product section

_Generated with `mux`_

Author: ammar-agent

tests/browser/appLoader.test.tsx tests/browser/app/appLoader.test.tsxtests/browser/appLoader.test.tsx renamed to tests/browser/app/appLoader.test.tsx

@@ -7,16 +7,15 @@
 
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
-import { shouldRunIntegrationTests } from "../testUtils";
+import { shouldRunIntegrationTests } from "../../testUtils";
 import {
   renderWithBackend,
   createTempGitRepo,
   cleanupTempGitRepo,
   waitForAppLoad,
   addProjectViaUI,
-  expandProject,
   getProjectName,
-} from "./harness";
+} from "../harness";
 
 const describeIntegration = shouldRunIntegrationTests() ? describe : describe.skip;
 
@@ -76,39 +75,6 @@ describeIntegration("AppLoader React Integration", () => {
       }
     });
 
-    test("workspace appears under project when expanded", async () => {
-      const user = userEvent.setup();
-      const gitRepo = await createTempGitRepo();
-      const { cleanup, env, ...queries } = await renderWithBackend();
-      try {
-        await waitForAppLoad(queries);
-
-        // Add project via UI
-        await addProjectViaUI(user, queries, gitRepo);
-        const projectName = getProjectName(gitRepo);
-
-        // Create workspace via oRPC (UI flow requires sending a chat message)
-        const workspaceResult = await env.orpc.workspace.create({
-          projectPath: gitRepo,
-          branchName: "test-branch",
-          trunkBranch: "main",
-        });
-        expect(workspaceResult.success).toBe(true);
-        if (!workspaceResult.success) throw new Error("Workspace creation failed");
-
-        // Expand project via UI
-        await expandProject(user, queries, projectName);
-
-        // Workspace should be visible
-        const workspaceElement = await queries.findByRole("button", {
-          name: `Select workspace ${workspaceResult.metadata.name}`,
-        });
-        expect(workspaceElement).toBeInTheDocument();
-      } finally {
-        await cleanupTempGitRepo(gitRepo);
-        await cleanup();
-      }
-    });
   });
 
   describe("User Interactions", () => {

tests/browser/harness/env.ts

@@ -64,6 +64,10 @@ function createMockBrowserWindow(): BrowserWindow {
  */
 export async function createBrowserTestEnv(): Promise<BrowserTestEnv> {
   const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "mux-browser-test-"));
+  // Prevent browser UI tests from making real network calls for AI.
+  // This keeps tests hermetic even if the environment has provider credentials.
+  const previousMockAI = process.env.MUX_MOCK_AI;
+  process.env.MUX_MOCK_AI = "1";
 
   const config = new Config(tempDir);
   const mockWindow = createMockBrowserWindow();
@@ -105,6 +109,13 @@ export async function createBrowserTestEnv(): Promise<BrowserTestEnv> {
     }
 
     const maxRetries = 3;
+
+    // Restore process env to avoid leaking mock mode across unrelated tests.
+    if (previousMockAI === undefined) {
+      delete process.env.MUX_MOCK_AI;
+    } else {
+      process.env.MUX_MOCK_AI = previousMockAI;
+    }
     for (let i = 0; i < maxRetries; i++) {
       try {
         await fs.rm(tempDir, { recursive: true, force: true });

tests/browser/harness/global-setup.js

@@ -14,51 +14,109 @@ if (typeof globalThis.ResizeObserver === "undefined") {
     disconnect() {}
   };
 }
+// Default to a desktop viewport so mobile-only behavior (like auto-collapsing the sidebar)
+// doesn't interfere with UI integration tests.
+try {
+  Object.defineProperty(globalThis, "innerWidth", { value: 1024, writable: true });
+  Object.defineProperty(globalThis, "innerHeight", { value: 768, writable: true });
+} catch {
+  // ignore
+}
+
 globalThis.import_meta_env = {
   VITE_BACKEND_URL: undefined,
   MODE: "test",
   DEV: false,
   PROD: false,
 };
 
-// Patch setTimeout to add unref method (required by undici timers)
-// jsdom's setTimeout doesn't have unref, but node's does
-const originalSetTimeout = globalThis.setTimeout;
-globalThis.setTimeout = function patchedSetTimeout(...args) {
-  const timer = originalSetTimeout.apply(this, args);
-  if (timer && typeof timer === "object" && !timer.unref) {
-    timer.unref = () => timer;
-    timer.ref = () => timer;
-  }
-  return timer;
-};
+// Use Node's timers implementation so the returned handles support unref/ref
+// requestIdleCallback is used by the renderer for stream batching.
+// jsdom doesn't provide it.
+globalThis.requestIdleCallback =
+  globalThis.requestIdleCallback ??
+  ((cb) =>
+    globalThis.setTimeout(() =>
+      cb({ didTimeout: false, timeRemaining: () => 50 })
+    ));
+globalThis.cancelIdleCallback =
+  globalThis.cancelIdleCallback ?? ((id) => globalThis.clearTimeout(id));
 
-const originalSetInterval = globalThis.setInterval;
-globalThis.setInterval = function patchedSetInterval(...args) {
-  const timer = originalSetInterval.apply(this, args);
-  if (timer && typeof timer === "object" && !timer.unref) {
-    timer.unref = () => timer;
-    timer.ref = () => timer;
-  }
-  return timer;
-};
+// (required by undici timers). This also provides setImmediate/clearImmediate.
+const nodeTimers = require("node:timers");
+globalThis.setTimeout = nodeTimers.setTimeout;
+globalThis.clearTimeout = nodeTimers.clearTimeout;
+globalThis.setInterval = nodeTimers.setInterval;
+globalThis.clearInterval = nodeTimers.clearInterval;
+globalThis.setImmediate = nodeTimers.setImmediate;
+globalThis.clearImmediate = nodeTimers.clearImmediate;
 
 // Polyfill TextEncoder/TextDecoder - required by undici
 const { TextEncoder, TextDecoder } = require("util");
 globalThis.TextEncoder = globalThis.TextEncoder ?? TextEncoder;
 globalThis.TextDecoder = globalThis.TextDecoder ?? TextDecoder;
 
 // Polyfill streams - required by AI SDK
-const { TransformStream, ReadableStream, WritableStream } = require("node:stream/web");
+const {
+  TransformStream,
+  ReadableStream,
+  WritableStream,
+  TextDecoderStream,
+} = require("node:stream/web");
 globalThis.TransformStream = globalThis.TransformStream ?? TransformStream;
 globalThis.ReadableStream = globalThis.ReadableStream ?? ReadableStream;
 globalThis.WritableStream = globalThis.WritableStream ?? WritableStream;
+globalThis.TextDecoderStream = globalThis.TextDecoderStream ?? TextDecoderStream;
 
 // Polyfill MessageChannel/MessagePort - required by undici
 const { MessageChannel, MessagePort } = require("node:worker_threads");
 globalThis.MessageChannel = globalThis.MessageChannel ?? MessageChannel;
+
+// Radix UI (Select, etc.) relies on Pointer Events + pointer capture.
+// jsdom doesn't implement these, so provide minimal no-op shims.
+if (globalThis.Element && !globalThis.Element.prototype.hasPointerCapture) {
+  globalThis.Element.prototype.hasPointerCapture = () => false;
+}
+if (globalThis.Element && !globalThis.Element.prototype.setPointerCapture) {
+  globalThis.Element.prototype.setPointerCapture = () => {};
+}
+if (globalThis.Element && !globalThis.Element.prototype.scrollIntoView) {
+  globalThis.Element.prototype.scrollIntoView = () => {};
+}
+if (globalThis.Element && !globalThis.Element.prototype.releasePointerCapture) {
+  globalThis.Element.prototype.releasePointerCapture = () => {};
+}
 globalThis.MessagePort = globalThis.MessagePort ?? MessagePort;
 
+// undici reads `performance.markResourceTiming` at import time. In jsdom,
+// Some renderer code uses `performance.mark()` for lightweight timing.
+if (globalThis.performance && typeof globalThis.performance.mark !== "function") {
+  globalThis.performance.mark = () => {};
+}
+if (globalThis.performance && typeof globalThis.performance.measure !== "function") {
+  globalThis.performance.measure = () => {};
+}
+if (
+  globalThis.performance &&
+  typeof globalThis.performance.clearMarks !== "function"
+) {
+  globalThis.performance.clearMarks = () => {};
+}
+if (
+  globalThis.performance &&
+  typeof globalThis.performance.clearMeasures !== "function"
+) {
+  globalThis.performance.clearMeasures = () => {};
+}
+
+// `performance` exists but doesn't implement the Resource Timing API.
+if (
+  globalThis.performance &&
+  typeof globalThis.performance.markResourceTiming !== "function"
+) {
+  globalThis.performance.markResourceTiming = () => {};
+}
+
 // Now undici can be safely imported
 const { fetch, Request, Response, Headers, FormData, Blob } = require("undici");
 globalThis.fetch = globalThis.fetch ?? fetch;

tests/browser/harness/jestSetup.ts

@@ -13,9 +13,14 @@ const originalConsoleError = console.error.bind(console);
 const originalDefaultMaxListeners = EventEmitter.defaultMaxListeners;
 const originalConsoleLog = console.log.bind(console);
 
-const shouldSuppressActWarning = (args: unknown[]) => {
-  return args.some(
-    (arg) => typeof arg === "string" && arg.toLowerCase().includes("not wrapped in act")
+const shouldSuppressConsoleError = (args: unknown[]) => {
+  const text = args.map(String).join(" ").toLowerCase();
+  return (
+    text.includes("not wrapped in act") ||
+    text.includes("mock scenario turn mismatch") ||
+    (text.includes("failed to save metadata") && text.includes("extensionmetadata.json")) ||
+    (text.includes("failed to remove project") &&
+      text.includes("cannot remove project with active workspaces"))
   );
 };
 
@@ -25,7 +30,7 @@ beforeAll(() => {
   // once the default (10) listener limit is exceeded.
   EventEmitter.defaultMaxListeners = 50;
   jest.spyOn(console, "error").mockImplementation((...args) => {
-    if (shouldSuppressActWarning(args)) {
+    if (shouldSuppressConsoleError(args)) {
       return;
     }
     originalConsoleError(...args);
@@ -35,13 +40,15 @@ beforeAll(() => {
   // they need to assert on logs.
   jest.spyOn(console, "log").mockImplementation(() => {});
   jest.spyOn(console, "warn").mockImplementation(() => {});
+  jest.spyOn(console, "debug").mockImplementation(() => {});
 });
 
 afterAll(() => {
   EventEmitter.defaultMaxListeners = originalDefaultMaxListeners;
   (console.error as jest.Mock).mockRestore();
   (console.log as jest.Mock).mockRestore();
   (console.warn as jest.Mock).mockRestore();
+  (console.debug as jest.Mock).mockRestore();
 
   // Ensure captured originals don't get tree-shaken / flagged as unused in some tooling.
   void originalConsoleLog;

tests/browser/harness/render.tsx

@@ -38,9 +38,11 @@ export interface RenderWithBackendOptions extends Omit<RenderOptions, "wrapper">
  * With pre-existing env (for setup before render):
  * ```tsx
  * const env = await createBrowserTestEnv();
- * await env.orpc.projects.create({ projectPath: '/some/path' });
  * const { cleanup, getByText } = await renderWithBackend({ env });
  * ```
+ *
+ * Note: tests should prefer UI-driven setup. `env.orpc` exists for rare cases where
+ * the UI cannot reasonably reach a state.
  */
 export async function renderWithBackend(
   options?: RenderWithBackendOptions