FN-6064: align dashboard backfill tests with current project selector
Update dashboard tests to match the current multi-project selector and split-pane behavior. - adjust Header project selector tests for multi-project dropdown behavior and current labels - update MailboxView CSS expectation for the transparent split resize handle - extend multi-project flow coverage to exercise View All Projects from a multi-project header state Files changed: packages/dashboard/app/components/__tests__/Header.test.tsx | 52 +++++++++++++--------- packages/dashboard/app/components/__tests__/MailboxView.test.tsx | 2 +- packages/dashboard/app/components/__tests__/MultiProjectFlow.test.tsx | 16 +++++-- 3 files changed, 44 insertions(+), 26 deletions(-) Fusion-Task-Id: FN-6064 Fusion-Task-Lineage: be4b93a6-a4a7-4154-a7ad-204f51af9b5f
This commit is contained in:
@@ -1547,85 +1547,93 @@ describe("Header", () => {
|
||||
});
|
||||
|
||||
describe("Manage Projects action", () => {
|
||||
const singleProject = [
|
||||
const projects = [
|
||||
{ id: "1", name: "Test Project", path: "/path/to/project", status: "active" as const },
|
||||
{ id: "2", name: "Other Project", path: "/path/to/other", status: "paused" as const },
|
||||
];
|
||||
|
||||
it("renders project selector trigger on desktop with a single project", () => {
|
||||
it("renders project selector trigger on desktop with multiple projects", () => {
|
||||
renderHeader({
|
||||
projects: singleProject,
|
||||
currentProject: singleProject[0],
|
||||
projects,
|
||||
currentProject: projects[0],
|
||||
onViewAllProjects: noop,
|
||||
onSelectProject: noop,
|
||||
}, "desktop");
|
||||
expect(screen.getByTestId("project-selector-trigger")).toBeDefined();
|
||||
});
|
||||
|
||||
it("shows current project name in the desktop project selector trigger", () => {
|
||||
renderHeader({
|
||||
projects: singleProject,
|
||||
currentProject: singleProject[0],
|
||||
projects,
|
||||
currentProject: projects[0],
|
||||
onViewAllProjects: noop,
|
||||
onSelectProject: noop,
|
||||
}, "desktop");
|
||||
|
||||
const trigger = screen.getByTestId("project-selector-trigger");
|
||||
expect(trigger).toHaveTextContent("Test Project");
|
||||
});
|
||||
|
||||
it("includes the full active project name in the trigger title for truncated labels", () => {
|
||||
it("includes the full active project name in the trigger label for truncated labels", () => {
|
||||
const longName = "This is a very long project name that should be truncated in the header trigger";
|
||||
const projects = [
|
||||
const projectsWithLongName = [
|
||||
{ id: "1", name: longName, path: "/path/to/project", status: "active" as const },
|
||||
{ id: "2", name: "Other Project", path: "/path/to/other", status: "paused" as const },
|
||||
];
|
||||
|
||||
renderHeader({
|
||||
projects,
|
||||
currentProject: projects[0],
|
||||
projects: projectsWithLongName,
|
||||
currentProject: projectsWithLongName[0],
|
||||
onViewAllProjects: noop,
|
||||
onSelectProject: noop,
|
||||
}, "desktop");
|
||||
|
||||
const trigger = screen.getByTestId("project-selector-trigger");
|
||||
expect(trigger).toHaveTextContent(longName);
|
||||
expect(trigger).toHaveAttribute("title", `Switch project (current: ${longName})`);
|
||||
});
|
||||
|
||||
it("falls back to 'Projects' label when current project is missing", () => {
|
||||
it("falls back to 'Select Project' label when current project is missing", () => {
|
||||
renderHeader({
|
||||
projects: singleProject,
|
||||
projects,
|
||||
currentProject: null,
|
||||
onViewAllProjects: noop,
|
||||
onSelectProject: noop,
|
||||
}, "desktop");
|
||||
|
||||
const trigger = screen.getByTestId("project-selector-trigger");
|
||||
expect(trigger).toHaveTextContent("Projects");
|
||||
expect(trigger).toHaveTextContent("Select Project");
|
||||
});
|
||||
|
||||
it("shows Manage Projects action in dropdown and calls onViewAllProjects", () => {
|
||||
it("shows View All Projects action in dropdown and calls onViewAllProjects", () => {
|
||||
const onViewAllProjects = vi.fn();
|
||||
renderHeader({
|
||||
projects: singleProject,
|
||||
currentProject: singleProject[0],
|
||||
projects,
|
||||
currentProject: projects[0],
|
||||
onViewAllProjects,
|
||||
onSelectProject: noop,
|
||||
}, "desktop");
|
||||
|
||||
fireEvent.click(screen.getByTestId("project-selector-trigger"));
|
||||
fireEvent.click(screen.getByTestId("manage-projects-action"));
|
||||
fireEvent.click(screen.getByText("View All Projects"));
|
||||
expect(onViewAllProjects).toHaveBeenCalled();
|
||||
expect(screen.queryByTestId("project-selector-dropdown")).toBeNull();
|
||||
});
|
||||
|
||||
it("does not render separate back button on desktop", () => {
|
||||
renderHeader({
|
||||
projects: singleProject,
|
||||
currentProject: singleProject[0],
|
||||
projects,
|
||||
currentProject: projects[0],
|
||||
onViewAllProjects: noop,
|
||||
onSelectProject: noop,
|
||||
}, "desktop");
|
||||
expect(screen.queryByTestId("back-to-projects-btn")).toBeNull();
|
||||
});
|
||||
|
||||
it("does not render project selector when onViewAllProjects is not provided", () => {
|
||||
renderHeader({
|
||||
projects: singleProject,
|
||||
currentProject: singleProject[0],
|
||||
projects,
|
||||
currentProject: projects[0],
|
||||
onSelectProject: noop,
|
||||
}, "desktop");
|
||||
expect(screen.queryByTestId("project-selector-trigger")).toBeNull();
|
||||
});
|
||||
|
||||
@@ -1829,7 +1829,7 @@ describe("MailboxView", () => {
|
||||
expect(splitPaneBlock).toContain("border: var(--btn-border-width) solid var(--border);");
|
||||
expect(splitPaneBlock).toContain("background: var(--surface);");
|
||||
|
||||
expect(css).toMatch(/\.mailbox-view\s+\.mailbox-split-resize-handle\s*\{[^}]*cursor:\s*col-resize;[^}]*background:\s*color-mix\(in srgb,\s*var\(--border\)\s*70%,\s*transparent\);[^}]*\}/);
|
||||
expect(css).toMatch(/\.mailbox-view\s+\.mailbox-split-resize-handle\s*\{[^}]*cursor:\s*col-resize;[^}]*background:\s*transparent;[^}]*\}/);
|
||||
|
||||
const splitEmptyBlockMatch = css.match(/\.mailbox-view\s+\.mailbox-split-empty\s*\{([^}]*)\}/);
|
||||
expect(splitEmptyBlockMatch).toBeTruthy();
|
||||
|
||||
@@ -130,6 +130,16 @@ describe("MultiProjectFlow", () => {
|
||||
viewMode = "overview";
|
||||
});
|
||||
|
||||
const otherProject: ProjectInfo = {
|
||||
id: "proj_2",
|
||||
name: "Second Project",
|
||||
path: "/path/to/second",
|
||||
status: "active",
|
||||
isolationMode: "in-process",
|
||||
createdAt: "2026-01-01T00:00:00.000Z",
|
||||
updatedAt: "2026-01-01T00:00:00.000Z",
|
||||
};
|
||||
|
||||
render(
|
||||
<Header
|
||||
onOpenSettings={noop}
|
||||
@@ -138,15 +148,15 @@ describe("MultiProjectFlow", () => {
|
||||
enginePaused={false}
|
||||
onToggleGlobalPause={noop}
|
||||
onToggleEnginePause={noop}
|
||||
projects={[singleProject]}
|
||||
projects={[singleProject, otherProject]}
|
||||
currentProject={singleProject}
|
||||
onViewAllProjects={handleViewAllProjects}
|
||||
onSelectProject={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByTestId("project-selector-trigger"));
|
||||
const manageProjectsAction = screen.getByTestId("manage-projects-action");
|
||||
expect(manageProjectsAction.textContent).toContain("Manage Projects");
|
||||
const manageProjectsAction = screen.getByText("View All Projects");
|
||||
|
||||
fireEvent.click(manageProjectsAction);
|
||||
expect(handleViewAllProjects).toHaveBeenCalled();
|
||||
|
||||
Reference in New Issue
Block a user