test: history items

Author: elianiva

webview-ui/src/components/history/HistoryView.tsx

@@ -94,7 +94,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 				</div>
 				<div className="flex flex-col gap-2">
 					<VSCodeTextField
-						style={{ width: "100%" }}
+						className="w-full"
 						placeholder={t("history:searchPlaceholder")}
 						value={searchQuery}
 						data-testid="history-search-input"
@@ -106,23 +106,13 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 								setSortOption("mostRelevant")
 							}
 						}}>
-						<div
-							slot="start"
-							className="codicon codicon-search"
-							style={{ fontSize: 13, marginTop: 2.5, opacity: 0.8 }}
-						/>
+						<div slot="start" className="codicon codicon-search mt-0.5 opacity-80 text-sm!" />
 						{searchQuery && (
 							<div
-								className="input-icon-button codicon codicon-close"
+								className="input-icon-button codicon codicon-close flex justify-center items-center h-full"
 								aria-label="Clear search"
 								onClick={() => setSearchQuery("")}
 								slot="end"
-								style={{
-									display: "flex",
-									justifyContent: "center",
-									alignItems: "center",
-									height: "100%",
-								}}
 							/>
 						)}
 					</VSCodeTextField>
@@ -223,10 +213,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 
 			<TabContent className="p-0">
 				<Virtuoso
-					style={{
-						flexGrow: 1,
-						overflowY: "scroll",
-					}}
+					className="flex-1 overflow-y-scroll"
 					data={tasks}
 					data-testid="virtuoso-container"
 					initialTopMostItemIndex={0}

webview-ui/src/components/history/TaskItemFooter.tsx

@@ -13,32 +13,24 @@ export interface TaskItemFooterProps {
 }
 
 const TaskItemFooter: React.FC<TaskItemFooterProps> = ({ item, variant, isSelectionMode = false }) => {
-	const metadataIconWithTextAdjustStyle: React.CSSProperties = {
-		fontSize: "12px",
-		color: "var(--vscode-descriptionForeground)",
-		verticalAlign: "middle",
-		marginBottom: "-2px",
-		fontWeight: "bold",
-	}
-
 	return (
 		<div className="text-xs text-vscode-descriptionForeground flex justify-between items-center mt-1">
 			<div className="flex gap-2">
-				{!!item.cacheWrites && (
-					<span className="flex items-center gap-px" data-testid="cache-compact">
-						<i className="codicon codicon-database" style={metadataIconWithTextAdjustStyle} />
-						{formatLargeNumber(item.cacheWrites || 0)}
-						<i className="codicon codicon-arrow-right" style={metadataIconWithTextAdjustStyle} />
-						{formatLargeNumber(item.cacheReads || 0)}
+				{!!(item.cacheReads || item.cacheWrites) && (
+					<span className="flex items-center" data-testid="cache-compact">
+						<i className="mr-1 codicon codicon-cloud-upload text-sm! text-vscode-descriptionForeground" />
+						<span className="inline-block mr-1">{formatLargeNumber(item.cacheWrites || 0)}</span>
+						<i className="mr-1 codicon codicon-cloud-download text-sm! text-vscode-descriptionForeground" />
+						<span>{formatLargeNumber(item.cacheReads || 0)}</span>
 					</span>
 				)}
 
 				{/* Full Tokens */}
-				{(item.tokensIn || item.tokensOut) && (
-					<>
+				{!!(item.tokensIn || item.tokensOut) && (
+					<span className="flex items-center gap-1">
 						<span data-testid="tokens-in-footer-compact">↑ {formatLargeNumber(item.tokensIn || 0)}</span>
 						<span data-testid="tokens-out-footer-compact">↓ {formatLargeNumber(item.tokensOut || 0)}</span>
-					</>
+					</span>
 				)}
 
 				{/* Full Cost */}

webview-ui/src/components/history/__tests__/BatchDeleteTaskDialog.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen, fireEvent } from "@testing-library/react"
+import { BatchDeleteTaskDialog } from "../BatchDeleteTaskDialog"
+import { vscode } from "@/utils/vscode"
+
+jest.mock("@/utils/vscode")
+jest.mock("@/i18n/TranslationContext", () => ({
+	useAppTranslation: () => ({
+		t: (key: string, options?: Record<string, any>) => {
+			const translations: Record<string, string> = {
+				"history:deleteTasks": "Delete Tasks",
+				"history:confirmDeleteTasks": `Are you sure you want to delete ${options?.count || 0} tasks?`,
+				"history:deleteTasksWarning": "This action cannot be undone.",
+				"history:cancel": "Cancel",
+				"history:deleteItems": `Delete ${options?.count || 0} items`,
+			}
+			return translations[key] || key
+		},
+	}),
+}))
+
+describe("BatchDeleteTaskDialog", () => {
+	const mockTaskIds = ["task-1", "task-2", "task-3"]
+	const mockOnOpenChange = jest.fn()
+
+	beforeEach(() => {
+		jest.clearAllMocks()
+	})
+
+	it("renders dialog with correct content", () => {
+		render(<BatchDeleteTaskDialog taskIds={mockTaskIds} open={true} onOpenChange={mockOnOpenChange} />)
+
+		expect(screen.getByText("Delete Tasks")).toBeInTheDocument()
+		expect(screen.getByText("Are you sure you want to delete 3 tasks?")).toBeInTheDocument()
+		expect(screen.getByText("This action cannot be undone.")).toBeInTheDocument()
+		expect(screen.getByText("Cancel")).toBeInTheDocument()
+		expect(screen.getByText("Delete 3 items")).toBeInTheDocument()
+	})
+
+	it("calls vscode.postMessage when delete is confirmed", () => {
+		render(<BatchDeleteTaskDialog taskIds={mockTaskIds} open={true} onOpenChange={mockOnOpenChange} />)
+
+		const deleteButton = screen.getByText("Delete 3 items")
+		fireEvent.click(deleteButton)
+
+		expect(vscode.postMessage).toHaveBeenCalledWith({
+			type: "deleteMultipleTasksWithIds",
+			ids: mockTaskIds,
+		})
+		expect(mockOnOpenChange).toHaveBeenCalledWith(false)
+	})
+
+	it("calls onOpenChange when cancel is clicked", () => {
+		render(<BatchDeleteTaskDialog taskIds={mockTaskIds} open={true} onOpenChange={mockOnOpenChange} />)
+
+		const cancelButton = screen.getByText("Cancel")
+		fireEvent.click(cancelButton)
+
+		expect(vscode.postMessage).not.toHaveBeenCalled()
+		expect(mockOnOpenChange).toHaveBeenCalledWith(false)
+	})
+
+	it("does not call vscode.postMessage when taskIds is empty", () => {
+		render(<BatchDeleteTaskDialog taskIds={[]} open={true} onOpenChange={mockOnOpenChange} />)
+
+		const deleteButton = screen.getByText("Delete 0 items")
+		fireEvent.click(deleteButton)
+
+		expect(vscode.postMessage).not.toHaveBeenCalled()
+		expect(mockOnOpenChange).toHaveBeenCalledWith(false)
+	})
+
+	it("renders with correct task count in messages", () => {
+		const singleTaskId = ["task-1"]
+		render(<BatchDeleteTaskDialog taskIds={singleTaskId} open={true} onOpenChange={mockOnOpenChange} />)
+
+		expect(screen.getByText("Are you sure you want to delete 1 tasks?")).toBeInTheDocument()
+		expect(screen.getByText("Delete 1 items")).toBeInTheDocument()
+	})
+
+	it("renders trash icon in delete button", () => {
+		render(<BatchDeleteTaskDialog taskIds={mockTaskIds} open={true} onOpenChange={mockOnOpenChange} />)
+
+		const deleteButton = screen.getByText("Delete 3 items")
+		const trashIcon = deleteButton.querySelector(".codicon-trash")
+		expect(trashIcon).toBeInTheDocument()
+	})
+})

webview-ui/src/components/history/__tests__/CopyButton.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen, fireEvent } from "@testing-library/react"
+import { CopyButton } from "../CopyButton"
+import { useClipboard } from "@/components/ui/hooks"
+
+jest.mock("@/components/ui/hooks")
+jest.mock("@src/i18n/TranslationContext", () => ({
+	useAppTranslation: () => ({
+		t: (key: string) => key,
+	}),
+}))
+
+describe("CopyButton", () => {
+	const mockCopy = jest.fn()
+
+	beforeEach(() => {
+		jest.clearAllMocks()
+		;(useClipboard as jest.Mock).mockReturnValue({
+			isCopied: false,
+			copy: mockCopy,
+		})
+	})
+
+	it("copies task content when clicked", () => {
+		render(<CopyButton itemTask="Test task content" />)
+
+		const copyButton = screen.getByRole("button")
+		fireEvent.click(copyButton)
+
+		expect(mockCopy).toHaveBeenCalledWith("Test task content")
+	})
+})

webview-ui/src/components/history/__tests__/DeleteButton.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen, fireEvent } from "@testing-library/react"
+import { DeleteButton } from "../DeleteButton"
+
+jest.mock("@src/i18n/TranslationContext", () => ({
+	useAppTranslation: () => ({
+		t: (key: string) => key,
+	}),
+}))
+
+describe("DeleteButton", () => {
+	it("calls onDelete when clicked", () => {
+		const onDelete = jest.fn()
+		render(<DeleteButton itemId="test-id" onDelete={onDelete} />)
+
+		const deleteButton = screen.getByRole("button")
+		fireEvent.click(deleteButton)
+
+		expect(onDelete).toHaveBeenCalledWith("test-id")
+	})
+})

webview-ui/src/components/history/__tests__/DeleteTaskDialog.test.tsx

@@ -0,0 +1,143 @@
+import { render, screen, fireEvent } from "@testing-library/react"
+import { DeleteTaskDialog } from "../DeleteTaskDialog"
+import { vscode } from "@/utils/vscode"
+
+jest.mock("@/utils/vscode")
+jest.mock("@/i18n/TranslationContext", () => ({
+	useAppTranslation: () => ({
+		t: (key: string) => {
+			const translations: Record<string, string> = {
+				"history:deleteTask": "Delete Task",
+				"history:deleteTaskMessage": "Are you sure you want to delete this task? This action cannot be undone.",
+				"history:cancel": "Cancel",
+				"history:delete": "Delete",
+			}
+			return translations[key] || key
+		},
+	}),
+}))
+
+jest.mock("react-use", () => ({
+	useKeyPress: jest.fn(),
+}))
+
+import { useKeyPress } from "react-use"
+
+const mockUseKeyPress = useKeyPress as jest.MockedFunction<typeof useKeyPress>
+
+describe("DeleteTaskDialog", () => {
+	const mockTaskId = "test-task-id"
+	const mockOnOpenChange = jest.fn()
+
+	beforeEach(() => {
+		jest.clearAllMocks()
+		mockUseKeyPress.mockReturnValue([false, null])
+	})
+
+	it("renders dialog with correct content", () => {
+		render(<DeleteTaskDialog taskId={mockTaskId} open={true} onOpenChange={mockOnOpenChange} />)
+
+		expect(screen.getByText("Delete Task")).toBeInTheDocument()
+		expect(
+			screen.getByText("Are you sure you want to delete this task? This action cannot be undone."),
+		).toBeInTheDocument()
+		expect(screen.getByText("Cancel")).toBeInTheDocument()
+		expect(screen.getByText("Delete")).toBeInTheDocument()
+	})
+
+	it("calls vscode.postMessage when delete is confirmed", () => {
+		render(<DeleteTaskDialog taskId={mockTaskId} open={true} onOpenChange={mockOnOpenChange} />)
+
+		const deleteButton = screen.getByText("Delete")
+		fireEvent.click(deleteButton)
+
+		expect(vscode.postMessage).toHaveBeenCalledWith({
+			type: "deleteTaskWithId",
+			text: mockTaskId,
+		})
+		expect(mockOnOpenChange).toHaveBeenCalledWith(false)
+	})
+
+	it("calls onOpenChange when cancel is clicked", () => {
+		render(<DeleteTaskDialog taskId={mockTaskId} open={true} onOpenChange={mockOnOpenChange} />)
+
+		const cancelButton = screen.getByText("Cancel")
+		fireEvent.click(cancelButton)
+
+		expect(vscode.postMessage).not.toHaveBeenCalled()
+		expect(mockOnOpenChange).toHaveBeenCalledWith(false)
+	})
+
+	it("does not call vscode.postMessage when taskId is empty", () => {
+		render(<DeleteTaskDialog taskId="" open={true} onOpenChange={mockOnOpenChange} />)
+
+		const deleteButton = screen.getByText("Delete")
+		fireEvent.click(deleteButton)
+
+		expect(vscode.postMessage).not.toHaveBeenCalled()
+		expect(mockOnOpenChange).toHaveBeenCalledWith(false)
+	})
+
+	it("handles Enter key press to delete task", () => {
+		// Mock Enter key being pressed
+		mockUseKeyPress.mockReturnValue([true, null])
+
+		render(<DeleteTaskDialog taskId={mockTaskId} open={true} onOpenChange={mockOnOpenChange} />)
+
+		expect(vscode.postMessage).toHaveBeenCalledWith({
+			type: "deleteTaskWithId",
+			text: mockTaskId,
+		})
+		expect(mockOnOpenChange).toHaveBeenCalledWith(false)
+	})
+
+	it("does not delete on Enter key press when taskId is empty", () => {
+		// Mock Enter key being pressed
+		mockUseKeyPress.mockReturnValue([true, null])
+
+		render(<DeleteTaskDialog taskId="" open={true} onOpenChange={mockOnOpenChange} />)
+
+		expect(vscode.postMessage).not.toHaveBeenCalled()
+		expect(mockOnOpenChange).not.toHaveBeenCalled()
+	})
+
+	it("calls onOpenChange on escape key", () => {
+		render(<DeleteTaskDialog taskId={mockTaskId} open={true} onOpenChange={mockOnOpenChange} />)
+
+		// Simulate escape key press on the dialog content
+		const dialogContent = screen.getByRole("alertdialog")
+		fireEvent.keyDown(dialogContent, { key: "Escape" })
+
+		expect(mockOnOpenChange).toHaveBeenCalledWith(false)
+	})
+
+	it("has correct button variants", () => {
+		render(<DeleteTaskDialog taskId={mockTaskId} open={true} onOpenChange={mockOnOpenChange} />)
+
+		const cancelButton = screen.getByText("Cancel")
+		const deleteButton = screen.getByText("Delete")
+
+		// These should have the correct styling classes based on the component
+		expect(cancelButton).toBeInTheDocument()
+		expect(deleteButton).toBeInTheDocument()
+	})
+
+	it("handles multiple Enter key presses correctly", () => {
+		// First render with Enter not pressed
+		const { rerender } = render(
+			<DeleteTaskDialog taskId={mockTaskId} open={true} onOpenChange={mockOnOpenChange} />,
+		)
+
+		expect(vscode.postMessage).not.toHaveBeenCalled()
+
+		// Then simulate Enter key press
+		mockUseKeyPress.mockReturnValue([true, null])
+		rerender(<DeleteTaskDialog taskId={mockTaskId} open={true} onOpenChange={mockOnOpenChange} />)
+
+		expect(vscode.postMessage).toHaveBeenCalledTimes(1)
+		expect(vscode.postMessage).toHaveBeenCalledWith({
+			type: "deleteTaskWithId",
+			text: mockTaskId,
+		})
+	})
+})