test: update history component tests to match implementation

Update data-testid attributes in HistoryView and TaskItem tests to match the
actual implementation in TaskItemFooter component. The tests were looking for
generic "tokens-in" and "tokens-out" attributes, but the implementation uses
variant-specific attributes like "tokens-in-footer-full".

Also added mocks for CopyButton and ExportButton components to resolve
"Element type is invalid" errors during test rendering.

Signed-off-by: Eric Wheeler <[email protected]>

Author: Eric Wheeler

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

@@ -300,9 +300,9 @@ describe("HistoryView", () => {
 		// Find first task container
 		const taskContainer = screen.getByTestId("virtuoso-item-1")
 
-		// Find token counts within the task container (TaskItem -> TaskItemHeader)
-		expect(within(taskContainer).getByTestId("tokens-in")).toHaveTextContent("100")
-		expect(within(taskContainer).getByTestId("tokens-out")).toHaveTextContent("50")
+		// Find token counts within the task container (TaskItem -> TaskItemFooter)
+		expect(within(taskContainer).getByTestId("tokens-in-footer-full")).toHaveTextContent("100")
+		expect(within(taskContainer).getByTestId("tokens-out-footer-full")).toHaveTextContent("50")
 	})
 
 	it("displays cache information when available", () => {

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

@@ -7,6 +7,13 @@ jest.mock("@src/utils/vscode")
 jest.mock("@src/i18n/TranslationContext")
 jest.mock("lucide-react", () => ({
 	DollarSign: () => <span data-testid="dollar-sign">$</span>,
+	Coins: () => <span data-testid="coins-icon" />, // Mock for Coins icon used in TaskItemFooter compact
+}))
+jest.mock("../CopyButton", () => ({
+	CopyButton: jest.fn(() => <button data-testid="mock-copy-button">Copy</button>),
+}))
+jest.mock("../ExportButton", () => ({
+	ExportButton: jest.fn(() => <button data-testid="mock-export-button">Export</button>),
 }))
 
 const mockTask: HistoryItem = {
@@ -30,18 +37,18 @@ describe("TaskItem", () => {
 
 		expect(screen.getByText("Test task content")).toBeInTheDocument()
 		// Check for tokens display
-		expect(screen.getByTestId("tokens-in")).toHaveTextContent("100")
-		expect(screen.getByTestId("tokens-out")).toHaveTextContent("50")
-		expect(screen.getByText("0.00")).toBeInTheDocument() // Cost
+		expect(screen.getByTestId("tokens-in-footer-compact")).toHaveTextContent("100")
+		expect(screen.getByTestId("tokens-out-footer-compact")).toHaveTextContent("50")
+		expect(screen.getByTestId("cost-footer-compact")).toHaveTextContent("$0.00") // Cost
 	})
 
 	it("renders full variant correctly", () => {
 		render(<TaskItem item={mockTask} variant="full" />)
 
 		expect(screen.getByTestId("task-item-test-task-1")).toBeInTheDocument()
 		expect(screen.getByTestId("task-content")).toBeInTheDocument()
-		expect(screen.getByTestId("tokens-in")).toHaveTextContent("100")
-		expect(screen.getByTestId("tokens-out")).toHaveTextContent("50")
+		expect(screen.getByTestId("tokens-in-footer-full")).toHaveTextContent("100")
+		expect(screen.getByTestId("tokens-out-footer-full")).toHaveTextContent("50")
 	})
 
 	it("shows workspace when showWorkspace is true", () => {