Files
fusion/packages/dashboard/app/components/__tests__/DevServerView.mobile.test.tsx
gsxdsm f58fb8955a fix(engine-tests): eliminate temp-dir leak and raise subprocess guard for concurrent workspace runs
Two engine merger tests created mkdtempSync workspaces directly in tmpdir()
under the tracked `fusion-test-` prefix; under full-suite concurrent load
the post-run check-test-isolation flagged them as leaks. Route both
(`merger-no-op-fix-finalize.test.ts`, `merger-verification-fix-already-on-main.test.ts`)
through FUSION_TEST_WORKER_ROOT like sibling merger tests so they nest
inside the already-tracked worker root.

Bump engine vitest subprocess guard from 60s to 120s and testTimeout to
30s — plain git commands (branch -d, worktree remove) queued behind
system contention during `pnpm -r --workspace-concurrency=2` runs were
timing out. The guard only fires on hangs, so healthy tests pay nothing.

Also bundles in-progress dashboard mobile-breakpoint regex/CSS test
updates and docs index additions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-22 20:20:42 -07:00

95 lines
3.4 KiB
TypeScript

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]*?)\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"));
});
});