🤖 ci: port Storybook settings/errors interactions to jsdom harness

Author: ammar-agent

tests/browser/storybook/errors.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * Ports of Storybook interaction tests from `src/browser/stories/App.errors.stories.tsx`.
+ */
+
+import "@testing-library/jest-dom";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { shouldRunIntegrationTests } from "../../testUtils";
+import {
+  renderWithBackend,
+  waitForAppLoad,
+  addProjectViaUI,
+  createTempGitRepo,
+  cleanupTempGitRepo,
+  getProjectName,
+} from "../harness";
+
+const describeIntegration = shouldRunIntegrationTests() ? describe : describe.skip;
+
+describeIntegration("Storybook interactions: Errors", () => {
+  test("ProjectRemovalError: removing a project with active workspaces shows an error alert", async () => {
+    const user = userEvent.setup();
+    const gitRepo = await createTempGitRepo();
+
+    const { cleanup, env, ...queries } = await renderWithBackend();
+    try {
+      await waitForAppLoad(queries);
+
+      await addProjectViaUI(user, queries, gitRepo);
+
+      // Create 2 workspaces, so `projects.remove()` returns the same error shown in Storybook.
+      const ws1 = await env.orpc.workspace.create({
+        projectPath: gitRepo,
+        branchName: "feature-auth",
+        trunkBranch: "main",
+      });
+      const ws2 = await env.orpc.workspace.create({
+        projectPath: gitRepo,
+        branchName: "feature-ui",
+        trunkBranch: "main",
+      });
+      expect(ws1.success && ws2.success).toBe(true);
+      if (!ws1.success || !ws2.success) throw new Error("Workspace creation failed");
+
+      const projectName = getProjectName(gitRepo);
+
+      // The remove button is typically shown on hover; select via aria-label (same as Storybook).
+      await waitFor(() => {
+        const btn = document.querySelector(`button[aria-label="Remove project ${projectName}"]`);
+        expect(btn).toBeTruthy();
+      });
+
+      const removeButton = document.querySelector(
+        `button[aria-label="Remove project ${projectName}"]`
+      ) as HTMLElement;
+      const projectRow = removeButton.closest("[data-project-path]") as HTMLElement | null;
+      expect(projectRow).toBeTruthy();
+
+      await user.hover(projectRow!);
+
+      await waitFor(() => {
+        expect(removeButton).toBeVisible();
+      });
+
+      // This flow intentionally triggers an error path. Silence the expected
+      // console.error line while preserving unexpected errors.
+      const consoleErrorMock = console.error as unknown as jest.Mock;
+      const previousImpl = consoleErrorMock.getMockImplementation();
+      consoleErrorMock.mockImplementation((...args: unknown[]) => {
+        const text = args.map(String).join(" ");
+        if (
+          text.includes(
+            "Failed to remove project: Cannot remove project with active workspaces. Please remove all 2 workspace(s) first."
+          )
+        ) {
+          return;
+        }
+        return previousImpl?.(...args);
+      });
+      try {
+        await user.click(removeButton);
+
+        const alert = await queries.findByRole("alert");
+        expect(alert).toHaveTextContent(
+          /cannot remove project with active workspaces\. please remove all 2 workspace\(s\) first\./i
+        );
+      } finally {
+        consoleErrorMock.mockImplementation(previousImpl ?? (() => {}));
+      }
+    } finally {
+      await cleanupTempGitRepo(gitRepo);
+      await cleanup();
+    }
+  });
+});

tests/browser/storybook/settingsModal.test.tsx

@@ -0,0 +1,93 @@
+/**
+ * Ports of Storybook interaction tests from `src/browser/stories/App.settings.stories.tsx`.
+ *
+ * These tests run in Jest + jsdom using the browser UI harness (real ServiceContainer + oRPC).
+ *
+ * Goal: keep the same user-facing flows as Storybook play functions, but with a real backend.
+ */
+
+import "@testing-library/jest-dom";
+import { within, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { shouldRunIntegrationTests } from "../../testUtils";
+import {
+  createBrowserTestEnv,
+  renderWithBackend,
+  waitForAppLoad,
+  openSettingsToSection,
+} from "../harness";
+
+const describeIntegration = shouldRunIntegrationTests() ? describe : describe.skip;
+
+describeIntegration("Storybook interactions: Settings", () => {
+  test("Providers section reflects configured provider state", async () => {
+    const user = userEvent.setup();
+    const env = await createBrowserTestEnv();
+
+    // Seed provider config before rendering.
+    const setKey = await env.orpc.providers.setProviderConfig({
+      provider: "openai",
+      keyPath: ["apiKey"],
+      value: "test-api-key",
+    });
+    expect(setKey.success).toBe(true);
+
+    const setBaseUrl = await env.orpc.providers.setProviderConfig({
+      provider: "openai",
+      keyPath: ["baseUrl"],
+      value: "https://custom.openai.com/v1",
+    });
+    expect(setBaseUrl.success).toBe(true);
+
+    const { cleanup, ...queries } = await renderWithBackend({ env });
+    try {
+      await waitForAppLoad(queries);
+
+      const modal = await openSettingsToSection(user, queries, "Providers");
+
+      // Expand OpenAI provider row
+      const openaiButton = within(modal).getByRole("button", { name: /openai/i });
+      await user.click(openaiButton);
+
+      // Config dot is title-tagged.
+      expect(openaiButton.querySelector('[title="Configured"]')).toBeInTheDocument();
+
+      // Base URL should show the seeded value.
+      await waitFor(() => {
+        expect(within(modal).getByText("https://custom.openai.com/v1")).toBeInTheDocument();
+      });
+
+      // API key should show as masked.
+      expect(within(modal).getByText("••••••••")).toBeInTheDocument();
+    } finally {
+      await cleanup();
+    }
+  });
+
+  test("Models section shows custom models from provider config", async () => {
+    const user = userEvent.setup();
+    const env = await createBrowserTestEnv();
+
+    const setModels = await env.orpc.providers.setModels({
+      provider: "openai",
+      models: ["my-custom-model-123"],
+    });
+    expect(setModels.success).toBe(true);
+
+    const { cleanup, ...queries } = await renderWithBackend({ env });
+    try {
+      await waitForAppLoad(queries);
+
+      const modal = await openSettingsToSection(user, queries, "Models");
+
+      // Wait for the models UI to load and display custom models.
+      await waitFor(() => {
+        expect(within(modal).getByText(/custom models/i)).toBeInTheDocument();
+      });
+
+      expect(within(modal).getByText("my-custom-model-123")).toBeInTheDocument();
+    } finally {
+      await cleanup();
+    }
+  });
+});