Fix tests

This commit is contained in:
Matt Rubens 2025-03-17 15:55:15 -04:00
parent 7780957fed
commit a926b5a575
2 changed files with 24 additions and 15 deletions

View file

@ -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()
})
})

View file

@ -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>
</>
)