|
1 | 1 | import { cleanup, fireEvent, render, screen } from "@testing-library/react"; |
2 | 2 | import userEvent from "@testing-library/user-event"; |
3 | | -import { beforeEach, describe, expect, it } from "vitest"; |
| 3 | +import { beforeEach, describe, expect, it, vi } from "vitest"; |
4 | 4 | import { MemoryRouter } from "react-router-dom"; |
5 | 5 | import { buildProjectFromTemplate } from "@gph/core"; |
6 | 6 | import { closeCreateItem } from "../../commands/palette-bus"; |
7 | 7 | import { useProjectStore } from "../../store/project-store"; |
8 | 8 | import { CreateItemDialog } from "../../work-item"; |
9 | 9 | import { RoadmapView } from "./RoadmapView"; |
10 | 10 |
|
| 11 | +class MockPointerEvent extends MouseEvent { |
| 12 | + readonly pointerId: number; |
| 13 | + readonly isPrimary: boolean; |
| 14 | + |
| 15 | + constructor(type: string, init: PointerEventInit = {}) { |
| 16 | + super(type, init); |
| 17 | + this.pointerId = init.pointerId ?? 0; |
| 18 | + this.isPrimary = init.isPrimary ?? true; |
| 19 | + } |
| 20 | +} |
| 21 | + |
| 22 | +vi.stubGlobal("PointerEvent", MockPointerEvent); |
| 23 | + |
11 | 24 | describe("RoadmapView", () => { |
12 | 25 | beforeEach(() => { |
13 | 26 | cleanup(); |
@@ -116,6 +129,98 @@ describe("RoadmapView", () => { |
116 | 129 | expect(updated.milestoneId).toBe(secondMilestone.id); |
117 | 130 | }); |
118 | 131 |
|
| 132 | + it("keeps the rendered bar width synchronized with the inclusive date range", () => { |
| 133 | + const bundle = buildProjectFromTemplate("software-project", "Roadmap geometry"); |
| 134 | + useProjectStore.setState({ bundle }); |
| 135 | + useProjectStore.getState().applyCommand({ |
| 136 | + type: "item.create", |
| 137 | + projectId: bundle.project.id, |
| 138 | + typeId: "task", |
| 139 | + title: "Resizable roadmap item", |
| 140 | + statusId: "ready", |
| 141 | + startDate: "2026-07-01", |
| 142 | + dueDate: "2026-07-10" |
| 143 | + }); |
| 144 | + |
| 145 | + render(<MemoryRouter><RoadmapView /></MemoryRouter>); |
| 146 | + fireEvent.change(screen.getByLabelText("Anchor"), { target: { value: "2026-07" } }); |
| 147 | + |
| 148 | + const bar = screen.getByRole("group", { name: /Resizable roadmap item timeline/ }); |
| 149 | + const grid = bar.closest<HTMLElement>(".roadmap-grid")!; |
| 150 | + expect(grid.style.gridTemplateColumns).toBe("220px 31fr 31fr 30fr 31fr 30fr 31fr"); |
| 151 | + expect(parseFloat(bar.style.width)).toBeCloseTo((10 / 184) * 100); |
| 152 | + |
| 153 | + fireEvent.change(screen.getByLabelText("Due date for Resizable roadmap item"), { |
| 154 | + target: { value: "2026-07-20" } |
| 155 | + }); |
| 156 | + |
| 157 | + expect(parseFloat(bar.style.width)).toBeCloseTo((20 / 184) * 100); |
| 158 | + expect(bar).toHaveAttribute("data-due-date", "2026-07-20"); |
| 159 | + }); |
| 160 | + |
| 161 | + it("moves and resizes with the measured timeline scale and pointer capture", () => { |
| 162 | + const bundle = buildProjectFromTemplate("software-project", "Roadmap pointers"); |
| 163 | + useProjectStore.setState({ bundle }); |
| 164 | + useProjectStore.getState().applyCommand({ |
| 165 | + type: "item.create", |
| 166 | + projectId: bundle.project.id, |
| 167 | + typeId: "task", |
| 168 | + title: "Pointer roadmap item", |
| 169 | + statusId: "ready", |
| 170 | + startDate: "2026-07-01", |
| 171 | + dueDate: "2026-07-10" |
| 172 | + }); |
| 173 | + |
| 174 | + render(<MemoryRouter><RoadmapView /></MemoryRouter>); |
| 175 | + fireEvent.change(screen.getByLabelText("Anchor"), { target: { value: "2026-07" } }); |
| 176 | + |
| 177 | + const bar = screen.getByRole("group", { name: /Pointer roadmap item timeline/ }); |
| 178 | + const timeline = bar.parentElement!; |
| 179 | + vi.spyOn(timeline, "getBoundingClientRect").mockReturnValue({ |
| 180 | + bottom: 88, |
| 181 | + height: 88, |
| 182 | + left: 0, |
| 183 | + right: 1840, |
| 184 | + top: 0, |
| 185 | + width: 1840, |
| 186 | + x: 0, |
| 187 | + y: 0, |
| 188 | + toJSON: () => ({}) |
| 189 | + }); |
| 190 | + const setPointerCapture = vi.fn(); |
| 191 | + const releasePointerCapture = vi.fn(); |
| 192 | + Object.assign(bar, { |
| 193 | + hasPointerCapture: vi.fn(() => true), |
| 194 | + releasePointerCapture, |
| 195 | + setPointerCapture |
| 196 | + }); |
| 197 | + |
| 198 | + fireEvent.pointerDown(bar, { button: 0, clientX: 100, isPrimary: true, pointerId: 7 }); |
| 199 | + fireEvent.pointerMove(bar, { clientX: 130, isPrimary: true, pointerId: 7 }); |
| 200 | + fireEvent.pointerUp(bar, { clientX: 130, isPrimary: true, pointerId: 7 }); |
| 201 | + |
| 202 | + let updated = useProjectStore.getState().bundle!.core.items.find((item) => |
| 203 | + item.title === "Pointer roadmap item" |
| 204 | + )!; |
| 205 | + expect(updated).toMatchObject({ startDate: "2026-07-04", dueDate: "2026-07-13" }); |
| 206 | + expect(setPointerCapture).toHaveBeenCalledWith(7); |
| 207 | + expect(releasePointerCapture).toHaveBeenCalledWith(7); |
| 208 | + |
| 209 | + const resizeHandle = screen.getByRole("button", { name: "Adjust due date for Pointer roadmap item" }); |
| 210 | + fireEvent.pointerDown(resizeHandle, { button: 0, clientX: 200, isPrimary: true, pointerId: 8 }); |
| 211 | + fireEvent.pointerMove(bar, { clientX: 270, isPrimary: true, pointerId: 8 }); |
| 212 | + fireEvent.pointerUp(bar, { clientX: 270, isPrimary: true, pointerId: 8 }); |
| 213 | + |
| 214 | + updated = useProjectStore.getState().bundle!.core.items.find((item) => |
| 215 | + item.title === "Pointer roadmap item" |
| 216 | + )!; |
| 217 | + expect(updated).toMatchObject({ startDate: "2026-07-04", dueDate: "2026-07-20" }); |
| 218 | + expect(screen.getByRole("group", { name: /Pointer roadmap item timeline/ })).toHaveAttribute( |
| 219 | + "data-due-date", |
| 220 | + "2026-07-20" |
| 221 | + ); |
| 222 | + }); |
| 223 | + |
119 | 224 | it("clears only the edited side of a roadmap date range", () => { |
120 | 225 | const bundle = buildProjectFromTemplate("software-project", "Roadmap"); |
121 | 226 | useProjectStore.setState({ bundle }); |
|
0 commit comments