Fix tests

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

@@ -68,11 +68,11 @@ describe("ContextWindowProgress", () => {
 		})
 
 		// Check for basic elements
-		expect(screen.getByText("Context Window:")).toBeInTheDocument()
-		expect(screen.getByText("1000")).toBeInTheDocument() // contextTokens
+		expect(screen.getByTestId("context-window-label")).toBeInTheDocument()
+		expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("1000") // contextTokens
 		// The actual context window might be different than what we pass in
 		// due to the mock returning a default value from the API config
-		expect(screen.getByText(/(4000|128000)/)).toBeInTheDocument() // contextWindow
+		expect(screen.getByTestId("context-window-size")).toHaveTextContent(/(4000|128000)/) // contextWindow
 	})
 
 	test("handles zero context window gracefully", () => {
@@ -83,8 +83,8 @@ describe("ContextWindowProgress", () => {
 
 		// In the current implementation, the component is still displayed with zero values
 		// rather than being hidden completely
-		expect(screen.getByText("Context Window:")).toBeInTheDocument()
-		expect(screen.getByText("0")).toBeInTheDocument()
+		expect(screen.getByTestId("context-window-label")).toBeInTheDocument()
+		expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("0")
 	})
 
 	test("handles edge cases with negative values", () => {
@@ -94,9 +94,9 @@ describe("ContextWindowProgress", () => {
 		})
 
 		// Should show 0 instead of -100
-		expect(screen.getByText("0")).toBeInTheDocument()
+		expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("0")
 		// The actual context window might be different than what we pass in
-		expect(screen.getByText(/(4000|128000)/)).toBeInTheDocument()
+		expect(screen.getByTestId("context-window-size")).toHaveTextContent(/(4000|128000)/)
 	})
 
 	test("calculates percentages correctly", () => {
@@ -107,15 +107,18 @@ describe("ContextWindowProgress", () => {
 			contextTokens,
 			contextWindow,
 		})
-
-		// Instead of checking the exact style, verify the title attribute
-		// which contains information about the percentage of tokens used
-		const tokenUsageDiv = screen.getByTitle(/Tokens used:/, { exact: false })
+		// 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")
 		expect(tokenUsageDiv).toBeInTheDocument()
 
+		// Just verify that the element has a title attribute (the actual text is translated and may vary)
+		expect(tokenUsageDiv).toHaveAttribute("title")
+
 		// We can't reliably test computed styles in JSDOM, so we'll just check
 		// that the component appears to be working correctly by checking for expected elements
-		expect(screen.getByText("Context Window:")).toBeInTheDocument()
+		expect(screen.getByTestId("context-window-label")).toBeInTheDocument()
+		expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("1000")
 		expect(screen.getByText("1000")).toBeInTheDocument()
 	})
 })

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

@@ -445,10 +445,12 @@ const ContextWindowProgress = ({ contextWindow, contextTokens, maxTokens }: Cont
 	return (
 		<>
 			<div className="flex items-center gap-1 flex-shrink-0">
-				<span className="font-bold">{t("chat:task.contextWindow")}</span>
+				<span className="font-bold" data-testid="context-window-label">
+					{t("chat:task.contextWindow")}
+				</span>
 			</div>
 			<div className="flex items-center gap-2 flex-1 whitespace-nowrap px-2">
-				<div>{formatLargeNumber(safeContextTokens)}</div>
+				<div data-testid="context-tokens-count">{formatLargeNumber(safeContextTokens)}</div>
 				<div className="flex-1 relative">
 					{/* Invisible overlay for hover area */}
 					<div
@@ -459,6 +461,7 @@ const ContextWindowProgress = ({ contextWindow, contextTokens, maxTokens }: Cont
 							zIndex: 5,
 						}}
 						title={t("chat:tokenProgress.availableSpace", { amount: formatLargeNumber(availableSize) })}
+						data-testid="context-available-space"
 					/>
 
 					{/* Main progress bar container */}
@@ -478,6 +481,7 @@ const ContextWindowProgress = ({ contextWindow, contextTokens, maxTokens }: Cont
 									used: formatLargeNumber(safeContextTokens),
 									total: formatLargeNumber(safeContextWindow),
 								})}
+								data-testid="context-tokens-used"
 							/>
 							{/* Current tokens used - darkest */}
 							<div
@@ -502,6 +506,7 @@ const ContextWindowProgress = ({ contextWindow, contextTokens, maxTokens }: Cont
 								title={t("chat:tokenProgress.reservedForResponse", {
 									amount: formatLargeNumber(reservedForOutput),
 								})}
+								data-testid="context-reserved-tokens"
 							/>
 							{/* Reserved for output section - medium gray */}
 							<div
@@ -527,12 +532,13 @@ const ContextWindowProgress = ({ contextWindow, contextTokens, maxTokens }: Cont
 									title={t("chat:tokenProgress.availableSpace", {
 										amount: formatLargeNumber(availableSize),
 									})}
+									data-testid="context-available-space-section"
 								/>
 							</div>
 						)}
 					</div>
 				</div>
-				<div>{formatLargeNumber(safeContextWindow)}</div>
+				<div data-testid="context-window-size">{formatLargeNumber(safeContextWindow)}</div>
 			</div>
 		</>
 	)