test: use data-testid for querying

Author: elianiva

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

@@ -6,7 +6,7 @@ interface ApiErrorMessageProps {
 }
 
 export const ApiErrorMessage = ({ errorMessage, children }: ApiErrorMessageProps) => (
-	<div className="flex flex-col gap-2 text-vscode-errorForeground text-sm">
+	<div className="flex flex-col gap-2 text-vscode-errorForeground text-sm" data-testid="api-error-message">
 		<div className="flex flex-row items-center gap-1">
 			<div className="codicon codicon-close" />
 			<div>{errorMessage}</div>

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

@@ -122,7 +122,8 @@ export const ModelPicker = ({
 							variant="combobox"
 							role="combobox"
 							aria-expanded={open}
-							className="w-full justify-between">
+							className="w-full justify-between"
+							data-testid="model-picker-button">
 							<div>{selectedModelId ?? t("settings:common.select")}</div>
 							<ChevronsUpDown className="opacity-50" />
 						</Button>
@@ -157,7 +158,11 @@ export const ModelPicker = ({
 								</CommandEmpty>
 								<CommandGroup>
 									{modelIds.map((model) => (
-										<CommandItem key={model} value={model} onSelect={onSelect}>
+										<CommandItem
+											key={model}
+											value={model}
+											onSelect={onSelect}
+											data-testid={`model-option-${model}`}>
 											{model}
 											<Check
 												className={cn(

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

@@ -73,7 +73,7 @@ describe("ModelPicker", () => {
 
 		await act(async () => {
 			// Open the popover by clicking the button.
-			const button = screen.getByRole("combobox")
+			const button = screen.getByTestId("model-picker-button")
 			fireEvent.click(button)
 		})
 
@@ -91,7 +91,7 @@ describe("ModelPicker", () => {
 		// Need to find and click the CommandItem to trigger onSelect
 		await act(async () => {
 			// Find the CommandItem for model2 and click it
-			const modelItem = screen.getByText("model2")
+			const modelItem = screen.getByTestId("model-option-model2")
 			fireEvent.click(modelItem)
 		})
 
@@ -104,7 +104,7 @@ describe("ModelPicker", () => {
 
 		await act(async () => {
 			// Open the popover by clicking the button.
-			const button = screen.getByRole("combobox")
+			const button = screen.getByTestId("model-picker-button")
 			fireEvent.click(button)
 		})
 
@@ -154,6 +154,7 @@ describe("ModelPicker", () => {
 			})
 
 			// Check that the error message is displayed
+			expect(screen.getByTestId("api-error-message")).toBeInTheDocument()
 			expect(screen.getByText(errorMessage)).toBeInTheDocument()
 		})
 
@@ -180,13 +181,13 @@ describe("ModelPicker", () => {
 			})
 
 			// Check that both the model selector and error message are present
-			const modelSelector = screen.getByRole("combobox")
+			const modelSelector = screen.getByTestId("model-picker-button")
+			const errorContainer = screen.getByTestId("api-error-message")
 			const errorElement = screen.getByText(errorMessage)
 
 			expect(modelSelector).toBeInTheDocument()
+			expect(errorContainer).toBeInTheDocument()
 			expect(errorElement).toBeInTheDocument()
-
-			// Verify the error message is rendered (positioning is handled by CSS)
 			expect(errorElement).toBeVisible()
 		})
 
@@ -201,6 +202,7 @@ describe("ModelPicker", () => {
 			)
 
 			// Check initial error is displayed
+			expect(screen.getByTestId("api-error-message")).toBeInTheDocument()
 			expect(screen.getByText(initialError)).toBeInTheDocument()
 
 			// Update the error message
@@ -211,6 +213,7 @@ describe("ModelPicker", () => {
 			)
 
 			// Check that the error message has been updated
+			expect(screen.getByTestId("api-error-message")).toBeInTheDocument()
 			expect(screen.queryByText(initialError)).not.toBeInTheDocument()
 			expect(screen.getByText(updatedError)).toBeInTheDocument()
 		})
@@ -225,6 +228,7 @@ describe("ModelPicker", () => {
 			)
 
 			// Check error is initially displayed
+			expect(screen.getByTestId("api-error-message")).toBeInTheDocument()
 			expect(screen.getByText(errorMessage)).toBeInTheDocument()
 
 			// Remove the error message
@@ -235,6 +239,7 @@ describe("ModelPicker", () => {
 			)
 
 			// Check that the error message has been removed
+			expect(screen.queryByTestId("api-error-message")).not.toBeInTheDocument()
 			expect(screen.queryByText(errorMessage)).not.toBeInTheDocument()
 		})
 	})