test: update CommandExecution tests to use CodeBlock mock

- Replace virtuoso mock with CodeBlock mock to fix shiki import error
- Update CodeBlock mock to properly handle source prop
- Add proper empty output test case verification
- Keep original test values and structure

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

Author: Eric Wheeler

webview-ui/src/components/chat/__tests__/CommandExecution.test.tsx

@@ -1,33 +1,18 @@
 // npx jest src/components/chat/__tests__/CommandExecution.test.tsx
 
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render, screen, fireEvent } from "@testing-library/react"
 
 import { ExtensionStateContextProvider } from "@src/context/ExtensionStateContext"
 
 import { CommandExecution } from "../CommandExecution"
 
+jest.mock("../../../components/common/CodeBlock")
+
 jest.mock("@src/lib/utils", () => ({
 	cn: (...inputs: any[]) => inputs.filter(Boolean).join(" "),
 }))
 
-jest.mock("lucide-react", () => ({
-	ChevronDown: () => <div data-testid="chevron-down">ChevronDown</div>,
-}))
-
-jest.mock("react-virtuoso", () => ({
-	Virtuoso: React.forwardRef(({ totalCount, itemContent }: any, ref: any) => (
-		<div ref={ref} data-testid="virtuoso-container">
-			{Array.from({ length: totalCount }).map((_, index) => (
-				<div key={index} data-testid={`virtuoso-item-${index}`}>
-					{itemContent(index)}
-				</div>
-			))}
-		</div>
-	)),
-	VirtuosoHandle: jest.fn(),
-}))
-
 describe("CommandExecution", () => {
 	const renderComponent = (command: string, output: string) => {
 		return render(
@@ -40,24 +25,34 @@ describe("CommandExecution", () => {
 	it("renders command output with virtualized list", () => {
 		const testOutput = "Line 1\nLine 2\nLine 3"
 		renderComponent("ls", testOutput)
-		expect(screen.getByTestId("virtuoso-container")).toBeInTheDocument()
-		expect(screen.getByText("Line 1")).toBeInTheDocument()
-		expect(screen.getByText("Line 2")).toBeInTheDocument()
-		expect(screen.getByText("Line 3")).toBeInTheDocument()
+		const codeBlock = screen.getByTestId("mock-code-block")
+		expect(codeBlock).toHaveTextContent("ls")
+
+		fireEvent.click(screen.getByText("commandOutput"))
+		const outputBlock = screen.getAllByTestId("mock-code-block")[1]
+
+		expect(outputBlock).toHaveTextContent("Line 1")
+		expect(outputBlock).toHaveTextContent("Line 2")
+		expect(outputBlock).toHaveTextContent("Line 3")
 	})
 
 	it("handles empty output", () => {
 		renderComponent("ls", "")
-		expect(screen.getByTestId("virtuoso-container")).toBeInTheDocument()
-		expect(screen.getByTestId("virtuoso-item-0")).toBeInTheDocument()
-		expect(screen.queryByTestId("virtuoso-item-1")).not.toBeInTheDocument()
+		const codeBlock = screen.getByTestId("mock-code-block")
+		expect(codeBlock).toHaveTextContent("ls")
+		expect(screen.queryByText("commandOutput")).not.toBeInTheDocument()
+		expect(screen.queryAllByTestId("mock-code-block")).toHaveLength(1)
 	})
 
 	it("handles large output", () => {
 		const largeOutput = Array.from({ length: 1000 }, (_, i) => `Line ${i + 1}`).join("\n")
 		renderComponent("ls", largeOutput)
-		expect(screen.getByTestId("virtuoso-container")).toBeInTheDocument()
-		expect(screen.getByText("Line 1")).toBeInTheDocument()
-		expect(screen.getByText("Line 1000")).toBeInTheDocument()
+		const codeBlock = screen.getByTestId("mock-code-block")
+		expect(codeBlock).toHaveTextContent("ls")
+
+		fireEvent.click(screen.getByText("commandOutput"))
+		const outputBlock = screen.getAllByTestId("mock-code-block")[1]
+		expect(outputBlock).toHaveTextContent("Line 1")
+		expect(outputBlock).toHaveTextContent("Line 1000")
 	})
 })

webview-ui/src/components/common/__mocks__/CodeBlock.tsx

@@ -1,10 +1,10 @@
 import * as React from "react"
 
 interface CodeBlockProps {
-	children?: React.ReactNode
+	source?: string
 	language?: string
 }
 
-const CodeBlock: React.FC<CodeBlockProps> = () => <div data-testid="mock-code-block">Mocked Code Block</div>
+const CodeBlock: React.FC<CodeBlockProps> = ({ source = "" }) => <div data-testid="mock-code-block">{source}</div>
 
 export default CodeBlock