Fix more tests

Author: cte

webview-ui/src/__tests__/ContextWindowProgress.test.tsx

@@ -2,6 +2,8 @@
 
 import { render, screen } from "@testing-library/react"
 import "@testing-library/jest-dom"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+
 import TaskHeader from "@src/components/chat/TaskHeader"
 
 // Mock formatLargeNumber function
@@ -17,41 +19,37 @@ jest.mock("@vscode/webview-ui-toolkit/react", () => ({
 // Mock ExtensionStateContext since we use useExtensionState
 jest.mock("@src/context/ExtensionStateContext", () => ({
 	useExtensionState: jest.fn(() => ({
-		apiConfiguration: {
-			apiProvider: "openai",
-			// Add other needed properties
-		},
-		currentTaskItem: {
-			id: "test-id",
-			number: 1,
-			size: 1024,
-		},
+		apiConfiguration: { apiProvider: "openai" },
+		currentTaskItem: { id: "test-id", number: 1, size: 1024 },
 	})),
 }))
 
 // Mock highlighting function to avoid JSX parsing issues in tests
 jest.mock("@src/components/chat/TaskHeader", () => {
 	const originalModule = jest.requireActual("@src/components/chat/TaskHeader")
+
 	return {
 		__esModule: true,
 		...originalModule,
 		highlightMentions: jest.fn((text) => text),
 	}
 })
 
+// Mock useSelectedModel hook
+jest.mock("@src/components/ui/hooks/useSelectedModel", () => ({
+	useSelectedModel: jest.fn(() => ({
+		info: { contextWindow: 4000 },
+	})),
+}))
+
 describe("ContextWindowProgress", () => {
+	const queryClient = new QueryClient()
+
 	// Helper function to render just the ContextWindowProgress part through TaskHeader
 	const renderComponent = (props: Record<string, any>) => {
 		// Create a simple mock of the task that avoids importing the actual types
-		const defaultTask = {
-			ts: Date.now(),
-			type: "say" as const,
-			say: "task" as const,
-			text: "Test task",
-		}
-
 		const defaultProps = {
-			task: defaultTask,
+			task: { ts: Date.now(), type: "say" as const, say: "task" as const, text: "Test task" },
 			tokensIn: 100,
 			tokensOut: 50,
 			doesModelSupportPromptCache: true,
@@ -60,18 +58,17 @@ describe("ContextWindowProgress", () => {
 			onClose: jest.fn(),
 		}
 
-		return render(<TaskHeader {...defaultProps} {...props} />)
+		return render(
+			<QueryClientProvider client={queryClient}>
+				<TaskHeader {...defaultProps} {...props} />
+			</QueryClientProvider>,
+		)
 	}
 
-	beforeEach(() => {
-		jest.clearAllMocks()
-	})
+	beforeEach(() => jest.clearAllMocks())
 
-	test("renders correctly with valid inputs", () => {
-		renderComponent({
-			contextTokens: 1000,
-			contextWindow: 4000,
-		})
+	it("renders correctly with valid inputs", () => {
+		renderComponent({ contextTokens: 1000, contextWindow: 4000 })
 
 		// Check for basic elements
 		// The context-window-label is not part of the ContextWindowProgress component
@@ -83,11 +80,8 @@ describe("ContextWindowProgress", () => {
 		expect(screen.getByTestId("context-window-size")).toHaveTextContent(/(4000|128000)/) // contextWindow
 	})
 
-	test("handles zero context window gracefully", () => {
-		renderComponent({
-			contextTokens: 0,
-			contextWindow: 0,
-		})
+	it("handles zero context window gracefully", () => {
+		renderComponent({ contextTokens: 0, contextWindow: 0 })
 
 		// In the current implementation, the component is still displayed with zero values
 		// rather than being hidden completely
@@ -96,26 +90,18 @@ describe("ContextWindowProgress", () => {
 		expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("0")
 	})
 
-	test("handles edge cases with negative values", () => {
-		renderComponent({
-			contextTokens: -100, // Should be treated as 0
-			contextWindow: 4000,
-		})
+	it("handles edge cases with negative values", () => {
+		renderComponent({ contextTokens: -100, contextWindow: 4000 })
 
 		// Should show 0 instead of -100
 		expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("0")
 		// The actual context window might be different than what we pass in
 		expect(screen.getByTestId("context-window-size")).toHaveTextContent(/(4000|128000)/)
 	})
 
-	test("calculates percentages correctly", () => {
-		const contextTokens = 1000
-		const contextWindow = 4000
+	it("calculates percentages correctly", () => {
+		renderComponent({ contextTokens: 1000, contextWindow: 4000 })
 
-		renderComponent({
-			contextTokens,
-			contextWindow,
-		})
 		// Instead of checking the title attribute, verify the data-test-id
 		// which identifies the element containing info about the percentage of tokens used
 		const tokenUsageDiv = screen.getByTestId("context-tokens-used")

webview-ui/src/components/chat/ChatView.tsx

@@ -24,7 +24,7 @@ import { getAllModes } from "@roo/shared/modes"
 
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { vscode } from "@src/utils/vscode"
-import { useSelectedModel } from "@src/utils/normalizeApiConfiguration"
+import { useSelectedModel } from "@/components/ui/hooks/useSelectedModel"
 import { validateCommand } from "@src/utils/command-validation"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 
@@ -1364,7 +1364,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 																		? t("chat:proceedWhileRunning.tooltip")
 																		: undefined
 									}
-									onClick={(e) => handlePrimaryButtonClick(inputValue, selectedImages)}>
+									onClick={() => handlePrimaryButtonClick(inputValue, selectedImages)}>
 									{primaryButtonText}
 								</VSCodeButton>
 							)}
@@ -1387,7 +1387,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 														? t("chat:terminate.tooltip")
 														: undefined
 									}
-									onClick={(e) => handleSecondaryButtonClick(inputValue, selectedImages)}>
+									onClick={() => handleSecondaryButtonClick(inputValue, selectedImages)}>
 									{isStreaming ? t("chat:cancel.title") : secondaryButtonText}
 								</VSCodeButton>
 							)}

webview-ui/src/components/chat/ContextWindowProgress.tsx

@@ -12,6 +12,7 @@ interface ContextWindowProgressProps {
 
 export const ContextWindowProgress = ({ contextWindow, contextTokens, maxTokens }: ContextWindowProgressProps) => {
 	const { t } = useTranslation()
+
 	// Use the shared utility function to calculate all token distribution values
 	const tokenDistribution = useMemo(
 		() => calculateTokenDistribution(contextWindow, contextTokens, maxTokens),

webview-ui/src/components/chat/TaskHeader.tsx

@@ -11,15 +11,15 @@ import { formatLargeNumber } from "@src/utils/format"
 import { cn } from "@src/lib/utils"
 import { Button } from "@src/components/ui"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
-import { useSelectedModel } from "@src/utils/normalizeApiConfiguration"
+import { useSelectedModel } from "@/components/ui/hooks/useSelectedModel"
 
 import Thumbnails from "../common/Thumbnails"
 
 import { TaskActions } from "./TaskActions"
 import { ContextWindowProgress } from "./ContextWindowProgress"
 import { Mention } from "./Mention"
 
-interface TaskHeaderProps {
+export interface TaskHeaderProps {
 	task: ClineMessage
 	tokensIn: number
 	tokensOut: number

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

@@ -2,9 +2,12 @@
 
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import TaskHeader from "../TaskHeader"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+
 import { ApiConfiguration } from "@roo/shared/api"
 
+import TaskHeader, { TaskHeaderProps } from "../TaskHeader"
+
 // Mock the vscode API
 jest.mock("@/utils/vscode", () => ({
 	vscode: {
@@ -30,8 +33,8 @@ jest.mock("@src/context/ExtensionStateContext", () => ({
 }))
 
 describe("TaskHeader", () => {
-	const defaultProps = {
-		task: { text: "Test task", images: [] },
+	const defaultProps: TaskHeaderProps = {
+		task: { type: "say", ts: Date.now(), text: "Test task", images: [] },
 		tokensIn: 100,
 		tokensOut: 50,
 		doesModelSupportPromptCache: true,
@@ -40,82 +43,38 @@ describe("TaskHeader", () => {
 		onClose: jest.fn(),
 	}
 
-	it("should display cost when totalCost is greater than 0", () => {
-		render(
-			<TaskHeader
-				{...defaultProps}
-				task={{
-					type: "say",
-					ts: Date.now(),
-					text: "Test task",
-					images: [],
-				}}
-			/>,
+	const queryClient = new QueryClient()
+
+	const renderTaskHeader = (props: Partial<TaskHeaderProps> = {}) => {
+		return render(
+			<QueryClientProvider client={queryClient}>
+				<TaskHeader {...defaultProps} {...props} />
+			</QueryClientProvider>,
 		)
+	}
+
+	it("should display cost when totalCost is greater than 0", () => {
+		renderTaskHeader()
 		expect(screen.getByText("$0.05")).toBeInTheDocument()
 	})
 
 	it("should not display cost when totalCost is 0", () => {
-		render(
-			<TaskHeader
-				{...defaultProps}
-				totalCost={0}
-				task={{
-					type: "say",
-					ts: Date.now(),
-					text: "Test task",
-					images: [],
-				}}
-			/>,
-		)
+		renderTaskHeader({ totalCost: 0 })
 		expect(screen.queryByText("$0.0000")).not.toBeInTheDocument()
 	})
 
 	it("should not display cost when totalCost is null", () => {
-		render(
-			<TaskHeader
-				{...defaultProps}
-				totalCost={null as any}
-				task={{
-					type: "say",
-					ts: Date.now(),
-					text: "Test task",
-					images: [],
-				}}
-			/>,
-		)
+		renderTaskHeader({ totalCost: null as any })
 		expect(screen.queryByText(/\$/)).not.toBeInTheDocument()
 	})
 
 	it("should not display cost when totalCost is undefined", () => {
-		render(
-			<TaskHeader
-				{...defaultProps}
-				totalCost={undefined as any}
-				task={{
-					type: "say",
-					ts: Date.now(),
-					text: "Test task",
-					images: [],
-				}}
-			/>,
-		)
+		renderTaskHeader({ totalCost: undefined as any })
 		expect(screen.queryByText(/\$/)).not.toBeInTheDocument()
 	})
 
 	it("should not display cost when totalCost is NaN", () => {
-		render(
-			<TaskHeader
-				{...defaultProps}
-				totalCost={NaN}
-				task={{
-					type: "say",
-					ts: Date.now(),
-					text: "Test task",
-					images: [],
-				}}
-			/>,
-		)
+		renderTaskHeader({ totalCost: NaN })
 		expect(screen.queryByText(/\$/)).not.toBeInTheDocument()
 	})
 })

webview-ui/src/components/settings/ApiOptions.tsx

@@ -25,7 +25,8 @@ import { AWS_REGIONS } from "@roo/shared/aws_regions"
 
 import { vscode } from "@src/utils/vscode"
 import { validateApiConfiguration, validateModelId, validateBedrockArn } from "@src/utils/validate"
-import { useRouterModels, useSelectedModel } from "@src/utils/normalizeApiConfiguration"
+import { useRouterModels } from "@/components/ui/hooks/useRouterModels"
+import { useSelectedModel } from "@/components/ui/hooks/useSelectedModel"
 import {
 	useOpenRouterModelProviders,
 	OPENROUTER_DEFAULT_PROVIDER_NAME,
@@ -48,7 +49,7 @@ import { DiffSettingsControl } from "./DiffSettingsControl"
 import { TemperatureControl } from "./TemperatureControl"
 import { RateLimitSecondsControl } from "./RateLimitSecondsControl"
 
-interface ApiOptionsProps {
+export interface ApiOptionsProps {
 	uriScheme: string | undefined
 	apiConfiguration: ApiConfiguration
 	setApiConfigurationField: <K extends keyof ApiConfiguration>(field: K, value: ApiConfiguration[K]) => void

webview-ui/src/components/settings/ModelPicker.tsx

@@ -6,7 +6,7 @@ import { ChevronsUpDown, Check, X } from "lucide-react"
 import { ProviderSettings, ModelInfo } from "@roo/schemas"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
-import { useSelectedModel } from "@src/utils/normalizeApiConfiguration"
+import { useSelectedModel } from "@/components/ui/hooks/useSelectedModel"
 import { cn } from "@src/lib/utils"
 import {
 	Command,

webview-ui/src/components/settings/ThinkingBudget.tsx

@@ -17,7 +17,7 @@ interface ThinkingBudgetProps {
 export const ThinkingBudget = ({ apiConfiguration, setApiConfigurationField, modelInfo }: ThinkingBudgetProps) => {
 	const { t } = useAppTranslation()
 
-	const isThinkingModel = modelInfo && modelInfo.thinking && modelInfo.maxTokens
+	const isThinkingModel = !!modelInfo && !!modelInfo.thinking && !!modelInfo.maxTokens
 
 	const customMaxOutputTokens = apiConfiguration.modelMaxTokens || DEFAULT_MAX_OUTPUT_TOKENS
 	const customMaxThinkingTokens = apiConfiguration.modelMaxThinkingTokens || DEFAULT_MAX_THINKING_TOKENS
@@ -54,7 +54,7 @@ export const ThinkingBudget = ({ apiConfiguration, setApiConfigurationField, mod
 			</div>
 			<div className="flex flex-col gap-1">
 				<div className="font-medium">{t("settings:thinkingBudget.maxThinkingTokens")}</div>
-				<div className="flex items-center gap-1">
+				<div className="flex items-center gap-1" data-testid="thinking-budget">
 					<Slider
 						min={1024}
 						max={modelMaxThinkingTokens}