test(FN-4925): complete Step 6 — add mobile layout regression coverage

Fusion-Task-Id: FN-4925
Fusion-Task-Lineage: 31fe1419-89df-4d8b-b7fe-7a872801c665

packages/dashboard/app/components/__tests__/DevServerView.mobile.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { loadAllAppCss } from "../../test/cssFixture";
+import { DevServerView } from "../DevServerView";
+
+const mockUseDevServer = vi.fn();
+const mockUseDevServerLogs = vi.fn();
+const mockUsePreviewEmbed = vi.fn();
+
+vi.mock("../../hooks/useDevServer", () => ({
+  useDevServer: (...args: unknown[]) => mockUseDevServer(...args),
+}));
+
+vi.mock("../../hooks/useDevServerLogs", () => ({
+  useDevServerLogs: (...args: unknown[]) => mockUseDevServerLogs(...args),
+}));
+
+vi.mock("../../hooks/usePreviewEmbed", () => ({
+  usePreviewEmbed: (...args: unknown[]) => mockUsePreviewEmbed(...args),
+}));
+
+vi.mock("../DevServerLogViewer", () => ({
+  DevServerLogViewer: () => <div data-testid="mock-devserver-log-viewer" />,
+}));
+
+function createDevServerHookState() {
+  return {
+    session: {
+      config: { id: "default", name: "Dev Server", command: "pnpm dev", cwd: "." },
+      status: "running",
+      previewUrl: "http://localhost:3000",
+      logHistory: [],
+    },
+    sessions: [],
+    detectedCommands: [],
+    previewUrl: "http://localhost:3000",
+    isLoading: false,
+    error: null,
+    startServer: vi.fn().mockResolvedValue(undefined),
+    stopServer: vi.fn().mockResolvedValue(undefined),
+    restartServer: vi.fn().mockResolvedValue(undefined),
+    setPreviewUrl: vi.fn().mockResolvedValue(undefined),
+    detectCommands: vi.fn().mockResolvedValue(undefined),
+    refresh: vi.fn().mockResolvedValue(undefined),
+  };
+}
+
+describe("DevServerView mobile CSS/structure", () => {
+  it("defines one mobile rule-set for preview header/actions and wraps badge correctly", () => {
+    const css = loadAllAppCss();
+    const mobileBlockMatch = css.match(/@media \(max-width: 768px\)\s*\{([\s\S]*?)\n\}/g) ?? [];
+    const mobileCss = mobileBlockMatch.join("\n");
+
+    const headerRuleCount = (mobileCss.match(/\.devserver-preview-header\s*\{/g) ?? []).length;
+    expect(headerRuleCount).toBe(1);
+    expect(mobileCss).toMatch(/\.devserver-preview-url-badge\s*\{[\s\S]*max-width:\s*100%/);
+    expect(mobileCss).toMatch(/\.dev-server-header-title\s*\{[\s\S]*flex-wrap:\s*wrap/);
+  });
+
+  it("renders preview header elements and keeps URL badge outside preview actions", () => {
+    mockUseDevServer.mockReturnValue(createDevServerHookState());
+    mockUseDevServerLogs.mockReturnValue({
+      entries: [],
+      loading: false,
+      loadingMore: false,
+      hasMore: false,
+      total: 0,
+      loadMore: vi.fn(),
+    });
+    mockUsePreviewEmbed.mockReturnValue({
+      embedStatus: "embedded",
+      setEmbedStatus: vi.fn(),
+      resetEmbedStatus: vi.fn(),
+      iframeRef: { current: null },
+      isEmbedded: true,
+      isBlocked: false,
+      blockReason: null,
+      retry: vi.fn(),
+    });
+
+    render(<DevServerView addToast={vi.fn()} projectId="project-a" />);
+
+    const previewPanel = screen.getByTestId("devserver-preview-panel");
+    const badge = screen.getByTestId("devserver-preview-url-badge");
+    const actions = previewPanel.querySelector(".devserver-preview-actions");
+    const statusBadge = screen.getByTestId("dev-server-status-badge");
+
+    expect(previewPanel.querySelector(".devserver-preview-header")).toBeInTheDocument();
+    expect(statusBadge).toBeInTheDocument();
+    expect(actions).toBeTruthy();
+    expect(actions?.contains(badge)).toBe(false);
+    expect(badge.parentElement).toBe(previewPanel.querySelector(".devserver-preview-header"));
+  });
+});