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:
gsxdsm
2026-06-09 02:11:25 -07:00
parent 4366a933da
commit 14cea4a24e
3 changed files with 44 additions and 26 deletions

View File

@@ -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();
});

View File

@@ -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();

View File

@@ -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();