95 lines
3.4 KiB
TypeScript
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\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"));
|
|
});
|
|
});
|