Skip to content
This repository was archived by the owner on May 15, 2026. It is now read-only.

Commit 85736c8

Browse files
roomoteroomote
committed
fix(test): update HistoryPreview tests to match refactored component
The HistoryPreview component was refactored to use useGroupedTasks and TaskGroupItem instead of rendering TaskItem directly. This updates the test file to properly mock the new dependencies: - Mock useGroupedTasks hook to provide grouped task data - Mock TaskGroupItem instead of TaskItem - Update assertions to test for task groups instead of individual tasks
1 parent 836f480 commit 85736c8

1 file changed

Lines changed: 143 additions & 39 deletions

File tree

‎webview-ui/src/components/history/__tests__/HistoryPreview.spec.tsx‎

Lines changed: 143 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,28 @@ import { render, screen } from "@/utils/test-utils"
33
import type { HistoryItem } from "@roo-code/types"
44

55
import HistoryPreview from "../HistoryPreview"
6+
import type { TaskGroup } from "../types"
67

78
vi.mock("../useTaskSearch")
9+
vi.mock("../useGroupedTasks")
810

9-
vi.mock("../TaskItem", () => {
11+
vi.mock("../TaskGroupItem", () => {
1012
return {
11-
default: vi.fn(({ item, variant }) => (
12-
<div data-testid={`task-item-${item.id}`} data-variant={variant}>
13-
{item.task}
13+
default: vi.fn(({ group, variant }) => (
14+
<div data-testid={`task-group-${group.parent.id}`} data-variant={variant}>
15+
{group.parent.task}
1416
</div>
1517
)),
1618
}
1719
})
1820

1921
import { useTaskSearch } from "../useTaskSearch"
20-
import TaskItem from "../TaskItem"
22+
import { useGroupedTasks } from "../useGroupedTasks"
23+
import TaskGroupItem from "../TaskGroupItem"
2124

2225
const mockUseTaskSearch = useTaskSearch as any
23-
const mockTaskItem = TaskItem as any
26+
const mockUseGroupedTasks = useGroupedTasks as any
27+
const mockTaskGroupItem = TaskGroupItem as any
2428

2529
const mockTasks: HistoryItem[] = [
2630
{
@@ -79,6 +83,15 @@ const mockTasks: HistoryItem[] = [
7983
},
8084
]
8185

86+
// Helper to create mock groups from tasks
87+
function createMockGroups(tasks: HistoryItem[]): TaskGroup[] {
88+
return tasks.map((task) => ({
89+
parent: { ...task, isSubtask: false },
90+
subtasks: [],
91+
isExpanded: false,
92+
}))
93+
}
94+
8295
describe("HistoryPreview", () => {
8396
beforeEach(() => {
8497
vi.clearAllMocks()
@@ -97,14 +110,21 @@ describe("HistoryPreview", () => {
97110
setShowAllWorkspaces: vi.fn(),
98111
})
99112

113+
mockUseGroupedTasks.mockReturnValue({
114+
groups: [],
115+
flatTasks: null,
116+
toggleExpand: vi.fn(),
117+
isSearchMode: false,
118+
})
119+
100120
const { container } = render(<HistoryPreview />)
101121

102-
// Should render the container but no task items
122+
// Should render the container but no task groups
103123
expect(container.firstChild).toHaveClass("flex", "flex-col", "gap-1")
104-
expect(screen.queryByTestId(/task-item-/)).not.toBeInTheDocument()
124+
expect(screen.queryByTestId(/task-group-/)).not.toBeInTheDocument()
105125
})
106126

107-
it("renders up to 4 tasks when tasks are available", () => {
127+
it("renders up to 4 groups when tasks are available", () => {
108128
mockUseTaskSearch.mockReturnValue({
109129
tasks: mockTasks,
110130
searchQuery: "",
@@ -117,18 +137,26 @@ describe("HistoryPreview", () => {
117137
setShowAllWorkspaces: vi.fn(),
118138
})
119139

140+
const mockGroups = createMockGroups(mockTasks)
141+
mockUseGroupedTasks.mockReturnValue({
142+
groups: mockGroups,
143+
flatTasks: null,
144+
toggleExpand: vi.fn(),
145+
isSearchMode: false,
146+
})
147+
120148
render(<HistoryPreview />)
121149

122-
// Should render only the first 3 tasks
123-
expect(screen.getByTestId("task-item-task-1")).toBeInTheDocument()
124-
expect(screen.getByTestId("task-item-task-2")).toBeInTheDocument()
125-
expect(screen.getByTestId("task-item-task-3")).toBeInTheDocument()
126-
expect(screen.getByTestId("task-item-task-4")).toBeInTheDocument()
127-
expect(screen.queryByTestId("task-item-task-5")).not.toBeInTheDocument()
128-
expect(screen.queryByTestId("task-item-task-6")).not.toBeInTheDocument()
150+
// Should render only the first 4 groups
151+
expect(screen.getByTestId("task-group-task-1")).toBeInTheDocument()
152+
expect(screen.getByTestId("task-group-task-2")).toBeInTheDocument()
153+
expect(screen.getByTestId("task-group-task-3")).toBeInTheDocument()
154+
expect(screen.getByTestId("task-group-task-4")).toBeInTheDocument()
155+
expect(screen.queryByTestId("task-group-task-5")).not.toBeInTheDocument()
156+
expect(screen.queryByTestId("task-group-task-6")).not.toBeInTheDocument()
129157
})
130158

131-
it("renders all tasks when there are 3 or fewer", () => {
159+
it("renders all groups when there are 4 or fewer", () => {
132160
const threeTasks = mockTasks.slice(0, 3)
133161
mockUseTaskSearch.mockReturnValue({
134162
tasks: threeTasks,
@@ -142,17 +170,25 @@ describe("HistoryPreview", () => {
142170
setShowAllWorkspaces: vi.fn(),
143171
})
144172

173+
const mockGroups = createMockGroups(threeTasks)
174+
mockUseGroupedTasks.mockReturnValue({
175+
groups: mockGroups,
176+
flatTasks: null,
177+
toggleExpand: vi.fn(),
178+
isSearchMode: false,
179+
})
180+
145181
render(<HistoryPreview />)
146182

147-
expect(screen.getByTestId("task-item-task-1")).toBeInTheDocument()
148-
expect(screen.getByTestId("task-item-task-2")).toBeInTheDocument()
149-
expect(screen.getByTestId("task-item-task-3")).toBeInTheDocument()
150-
expect(screen.queryByTestId("task-item-task-4")).not.toBeInTheDocument()
151-
expect(screen.queryByTestId("task-item-task-5")).not.toBeInTheDocument()
152-
expect(screen.queryByTestId("task-item-task-6")).not.toBeInTheDocument()
183+
expect(screen.getByTestId("task-group-task-1")).toBeInTheDocument()
184+
expect(screen.getByTestId("task-group-task-2")).toBeInTheDocument()
185+
expect(screen.getByTestId("task-group-task-3")).toBeInTheDocument()
186+
expect(screen.queryByTestId("task-group-task-4")).not.toBeInTheDocument()
187+
expect(screen.queryByTestId("task-group-task-5")).not.toBeInTheDocument()
188+
expect(screen.queryByTestId("task-group-task-6")).not.toBeInTheDocument()
153189
})
154190

155-
it("renders only 1 task when there is only 1 task", () => {
191+
it("renders only 1 group when there is only 1 task", () => {
156192
const oneTask = mockTasks.slice(0, 1)
157193
mockUseTaskSearch.mockReturnValue({
158194
tasks: oneTask,
@@ -166,15 +202,24 @@ describe("HistoryPreview", () => {
166202
setShowAllWorkspaces: vi.fn(),
167203
})
168204

205+
const mockGroups = createMockGroups(oneTask)
206+
mockUseGroupedTasks.mockReturnValue({
207+
groups: mockGroups,
208+
flatTasks: null,
209+
toggleExpand: vi.fn(),
210+
isSearchMode: false,
211+
})
212+
169213
render(<HistoryPreview />)
170214

171-
expect(screen.getByTestId("task-item-task-1")).toBeInTheDocument()
172-
expect(screen.queryByTestId("task-item-task-2")).not.toBeInTheDocument()
215+
expect(screen.getByTestId("task-group-task-1")).toBeInTheDocument()
216+
expect(screen.queryByTestId("task-group-task-2")).not.toBeInTheDocument()
173217
})
174218

175-
it("passes correct props to TaskItem components", () => {
219+
it("passes correct props to TaskGroupItem components", () => {
220+
const threeTasks = mockTasks.slice(0, 3)
176221
mockUseTaskSearch.mockReturnValue({
177-
tasks: mockTasks.slice(0, 3),
222+
tasks: threeTasks,
178223
searchQuery: "",
179224
setSearchQuery: vi.fn(),
180225
sortOption: "newest",
@@ -185,35 +230,43 @@ describe("HistoryPreview", () => {
185230
setShowAllWorkspaces: vi.fn(),
186231
})
187232

233+
const mockGroups = createMockGroups(threeTasks)
234+
mockUseGroupedTasks.mockReturnValue({
235+
groups: mockGroups,
236+
flatTasks: null,
237+
toggleExpand: vi.fn(),
238+
isSearchMode: false,
239+
})
240+
188241
render(<HistoryPreview />)
189242

190-
// Verify TaskItem was called with correct props for first 3 tasks
191-
expect(mockTaskItem).toHaveBeenCalledWith(
243+
// Verify TaskGroupItem was called with correct props for first 3 groups
244+
expect(mockTaskGroupItem).toHaveBeenCalledWith(
192245
expect.objectContaining({
193-
item: mockTasks[0],
246+
group: mockGroups[0],
194247
variant: "compact",
195248
}),
196249
expect.anything(),
197250
)
198-
expect(mockTaskItem).toHaveBeenCalledWith(
251+
expect(mockTaskGroupItem).toHaveBeenCalledWith(
199252
expect.objectContaining({
200-
item: mockTasks[1],
253+
group: mockGroups[1],
201254
variant: "compact",
202255
}),
203256
expect.anything(),
204257
)
205-
expect(mockTaskItem).toHaveBeenCalledWith(
258+
expect(mockTaskGroupItem).toHaveBeenCalledWith(
206259
expect.objectContaining({
207-
item: mockTasks[2],
260+
group: mockGroups[2],
208261
variant: "compact",
209262
}),
210263
expect.anything(),
211264
)
212265
})
213266

214-
it("renders with correct container classes", () => {
267+
it("displays the header and view all button", () => {
215268
mockUseTaskSearch.mockReturnValue({
216-
tasks: mockTasks.slice(0, 1),
269+
tasks: mockTasks,
217270
searchQuery: "",
218271
setSearchQuery: vi.fn(),
219272
sortOption: "newest",
@@ -224,8 +277,59 @@ describe("HistoryPreview", () => {
224277
setShowAllWorkspaces: vi.fn(),
225278
})
226279

227-
const { container } = render(<HistoryPreview />)
280+
const mockGroups = createMockGroups(mockTasks)
281+
mockUseGroupedTasks.mockReturnValue({
282+
groups: mockGroups,
283+
flatTasks: null,
284+
toggleExpand: vi.fn(),
285+
isSearchMode: false,
286+
})
228287

229-
expect(container.firstChild).toHaveClass("flex", "flex-col", "gap-1")
288+
render(<HistoryPreview />)
289+
290+
// Should show header and view all button
291+
expect(screen.getByText("history:recentTasks")).toBeInTheDocument()
292+
expect(screen.getByText("history:viewAllHistory")).toBeInTheDocument()
293+
})
294+
295+
it("calls toggleExpand when onToggleExpand is called", () => {
296+
const oneTask = mockTasks.slice(0, 1)
297+
mockUseTaskSearch.mockReturnValue({
298+
tasks: oneTask,
299+
searchQuery: "",
300+
setSearchQuery: vi.fn(),
301+
sortOption: "newest",
302+
setSortOption: vi.fn(),
303+
lastNonRelevantSort: null,
304+
setLastNonRelevantSort: vi.fn(),
305+
showAllWorkspaces: false,
306+
setShowAllWorkspaces: vi.fn(),
307+
})
308+
309+
const mockToggleExpand = vi.fn()
310+
const mockGroups = createMockGroups(oneTask)
311+
mockUseGroupedTasks.mockReturnValue({
312+
groups: mockGroups,
313+
flatTasks: null,
314+
toggleExpand: mockToggleExpand,
315+
isSearchMode: false,
316+
})
317+
318+
render(<HistoryPreview />)
319+
320+
// Verify TaskGroupItem received onToggleExpand prop
321+
expect(mockTaskGroupItem).toHaveBeenCalledWith(
322+
expect.objectContaining({
323+
onToggleExpand: expect.any(Function),
324+
}),
325+
expect.anything(),
326+
)
327+
328+
// Call the onToggleExpand function passed to TaskGroupItem
329+
const callArgs = mockTaskGroupItem.mock.calls[0][0]
330+
callArgs.onToggleExpand()
331+
332+
// Verify toggleExpand was called with the parent id
333+
expect(mockToggleExpand).toHaveBeenCalledWith("task-1")
230334
})
231335
})

0 commit comments

Comments
 (0)