From 91c16cbec4724ebc6bfca2637c67991da5f4cc70 Mon Sep 17 00:00:00 2001
From: "Ton Hoang Nguyen (Bill)" <32552798+HahaBill@users.noreply.github.com>
Date: Fri, 27 Jun 2025 00:38:25 +0100
Subject: [PATCH] feat: improve unit tests and adding `data-testid` to slider
 and checkbox components

---
 .../components/settings/providers/Gemini.tsx  |  8 +++++
 .../providers/__tests__/Gemini.spec.tsx       | 35 ++++++++++++++-----
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/webview-ui/src/components/settings/providers/Gemini.tsx b/webview-ui/src/components/settings/providers/Gemini.tsx
index 54df49c392..b772b1529f 100644
--- a/webview-ui/src/components/settings/providers/Gemini.tsx
+++ b/webview-ui/src/components/settings/providers/Gemini.tsx
@@ -128,6 +128,7 @@ export const Gemini = ({
 
 			<div>
 				<Checkbox
+					data-testid="checkbox-custom-base-url"
 					checked={googleGeminiBaseUrlSelected}
 					onChange={(checked: boolean) => {
 						setGoogleGeminiBaseUrlSelected(checked)
@@ -157,6 +158,7 @@ export const Gemini = ({
 					</label>
 					<div className="flex items-center space-x-2">
 						<Slider
+							data-testid="slider-top-p"
 							min={0}
 							max={1}
 							step={0.01}
@@ -177,6 +179,7 @@ export const Gemini = ({
 					</label>
 					<div className="flex items-center space-x-2">
 						<Slider
+							data-testid="slider-top-k"
 							min={0}
 							max={100}
 							step={1}
@@ -197,6 +200,7 @@ export const Gemini = ({
 					</label>
 					<div className="flex items-center space-x-2">
 						<Slider
+							data-testid="slider-max-output-tokens"
 							min={3000}
 							max={modelInfo.maxTokens}
 							step={1}
@@ -227,6 +231,7 @@ export const Gemini = ({
 				</h3>
 				<div>
 					<Checkbox
+						data-testid="checkbox-custom-context-limit"
 						checked={isCustomContextLimit}
 						onChange={(checked: boolean) => {
 							setIsCustomContextLimit(checked)
@@ -258,6 +263,7 @@ export const Gemini = ({
 							<div>
 								<div className="flex items-center gap-2">
 									<Slider
+										data-testid="slider-context-limit"
 										min={32000}
 										max={modelInfo?.contextWindow || 1048576}
 										step={1000}
@@ -397,6 +403,7 @@ export const Gemini = ({
 				</h3>
 
 				<Checkbox
+					data-testid="checkbox-url-context"
 					checked={!!apiConfiguration.enableUrlContext}
 					onChange={(checked: boolean) => setApiConfigurationField("enableUrlContext", checked)}>
 					{t("settings:providers.geminiParameters.urlContext.title")}
@@ -406,6 +413,7 @@ export const Gemini = ({
 				</div>
 
 				<Checkbox
+					data-testid="checkbox-grounding-search"
 					checked={!!apiConfiguration.enableGrounding}
 					onChange={(checked: boolean) => setApiConfigurationField("enableGrounding", checked)}>
 					{t("settings:providers.geminiParameters.groundingSearch.title")}
diff --git a/webview-ui/src/components/settings/providers/__tests__/Gemini.spec.tsx b/webview-ui/src/components/settings/providers/__tests__/Gemini.spec.tsx
index 7b69538ff9..f36ef10785 100644
--- a/webview-ui/src/components/settings/providers/__tests__/Gemini.spec.tsx
+++ b/webview-ui/src/components/settings/providers/__tests__/Gemini.spec.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { render, screen, fireEvent } from "@testing-library/react"
 import { Gemini } from "../Gemini"
 import type { ProviderSettings } from "@roo-code/types"
@@ -14,8 +13,8 @@ vi.mock("@vscode/webview-ui-toolkit/react", () => ({
 }))
 
 vi.mock("vscrui", () => ({
-	Checkbox: ({ children, checked, onChange }: any) => (
-		<label data-testid="checkbox-custom-context-limit">
+	Checkbox: ({ children, checked, onChange, "data-testid": testId, _ }: any) => (
+		<label data-testid={testId}>
 			<input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
 			{children}
 		</label>
@@ -23,9 +22,9 @@ vi.mock("vscrui", () => ({
 }))
 
 vi.mock("@src/components/ui", () => ({
-	Slider: ({ min, max, step, value, onValueChange }: any) => (
+	Slider: ({ min, max, step, value, onValueChange, "data-testid": testId, _ }: any) => (
 		<input
-			data-testid="slider"
+			data-testid={testId}
 			type="range"
 			min={min}
 			max={max}
@@ -54,19 +53,35 @@ describe("Gemini provider settings", () => {
 		render(
 			<Gemini apiConfiguration={config} setApiConfigurationField={setApiField} currentModelId={defaultModelId} />,
 		)
-		expect(screen.queryByTestId("slider")).toBeNull()
+		expect(screen.queryByTestId("slider-context-limit")).toBeNull()
+
+		expect(screen.getByTestId("slider-top-p")).toBeInTheDocument()
+		expect(screen.getByTestId("slider-top-k")).toBeInTheDocument()
+		expect(screen.getByTestId("slider-max-output-tokens")).toBeInTheDocument()
 	})
 
 	it("enables custom context limit on checkbox toggle and shows slider with default value", () => {
 		const setApiField = vi.fn()
 		const config: ProviderSettings = {}
-		render(
+		const { rerender } = render(
 			<Gemini apiConfiguration={config} setApiConfigurationField={setApiField} currentModelId={defaultModelId} />,
 		)
+
 		const checkbox = screen.getByTestId("checkbox-custom-context-limit")
 		fireEvent.click(checkbox)
+
 		expect(setApiField).toHaveBeenCalledWith("contextLimit", defaultContextWindow)
-		const slider = screen.getByTestId("slider")
+
+		const updatedConfig = { ...config, contextLimit: defaultContextWindow }
+		rerender(
+			<Gemini
+				apiConfiguration={updatedConfig}
+				setApiConfigurationField={setApiField}
+				currentModelId={defaultModelId}
+			/>,
+		)
+
+		const slider = screen.getByTestId("slider-context-limit")
 		expect(slider).toHaveValue(defaultContextWindow.toString())
 	})
 
@@ -77,8 +92,10 @@ describe("Gemini provider settings", () => {
 		render(
 			<Gemini apiConfiguration={config} setApiConfigurationField={setApiField} currentModelId={defaultModelId} />,
 		)
-		const slider = screen.getByTestId("slider")
+
+		const slider = screen.getByTestId("slider-context-limit")
 		expect(slider).toHaveValue(initialLimit.toString())
+
 		fireEvent.change(slider, { target: { value: "50000" } })
 		expect(setApiField).toHaveBeenCalledWith("contextLimit", 50000)
 	})