try to fix locale bugs that happen in CI build but not locally

Author: Smartsheet-JB-Brown

webview-ui/src/components/package-manager/components/__tests__/PackageManagerItemCard.test.tsx

@@ -64,7 +64,12 @@ describe("PackageManagerItemCard", () => {
 
 		expect(screen.getByText("Test Package")).toBeInTheDocument()
 		expect(screen.getByText("A test package")).toBeInTheDocument()
-		expect(screen.getByText("by Test Author")).toBeInTheDocument()
+		expect(
+			screen.getByText((content, element) => {
+				// This will match the translated text "by Test Author" regardless of how it's structured
+				return element?.textContent === "by Test Author"
+			}),
+		).toBeInTheDocument()
 		expect(screen.getByText(/Package/i)).toBeInTheDocument() // Using case-insensitive regex since translations might vary in case
 	})
 
@@ -162,7 +167,8 @@ describe("PackageManagerItemCard", () => {
 		it("should render expandable details section when item has subcomponents", () => {
 			renderWithProviders(<PackageManagerItemCard {...defaultProps} />)
 
-			expect(screen.getByText("Component Details")).toBeInTheDocument()
+			// The component uses t("package-manager:items.card.externalComponents", { count: 0 })
+			expect(screen.getByText("Contains 0 external component")).toBeInTheDocument()
 		})
 
 		it("should not render details section when item has no subcomponents", () => {
@@ -174,10 +180,11 @@ describe("PackageManagerItemCard", () => {
 
 		it("should show grouped items when expanded", () => {
 			renderWithProviders(<PackageManagerItemCard {...defaultProps} />)
+			fireEvent.click(screen.getByText("Contains 0 external component"))
 
-			fireEvent.click(screen.getByText("Component Details"))
-
-			expect(screen.getByText("MCP Servers")).toBeInTheDocument()
+			// These use the type-group translations
+			expect(screen.getByText((content, element) => element?.textContent === "MCP Servers")).toBeInTheDocument()
+			expect(screen.getByText((content, element) => element?.textContent === "Modes")).toBeInTheDocument()
 			expect(screen.getByText("Modes")).toBeInTheDocument()
 
 			// Check for items using getByRole and textContent
@@ -190,8 +197,7 @@ describe("PackageManagerItemCard", () => {
 
 		it("should maintain proper order of items within groups", () => {
 			renderWithProviders(<PackageManagerItemCard {...defaultProps} />)
-
-			fireEvent.click(screen.getByText("Component Details"))
+			fireEvent.click(screen.getByText("Contains 0 external component"))
 
 			const items = screen.getAllByRole("listitem")
 			expect(items[0]).toHaveTextContent("Test Server")

webview-ui/src/components/package-manager/components/__tests__/TypeGroup.test.tsx

@@ -20,8 +20,8 @@ describe("TypeGroup", () => {
 	it("should render type header and items", () => {
 		renderWithProviders(<TypeGroup type="mcp server" items={mockItems} />)
 
-		// Test using translation key
-		expect(screen.getByText("MCP Servers")).toBeInTheDocument()
+		// Test using translation key with flexible text matching
+		expect(screen.getByText((content, element) => element?.textContent === "MCP Servers")).toBeInTheDocument()
 
 		// Check items using list roles and text content
 		const items = screen.getAllByRole("listitem")
@@ -37,12 +37,12 @@ describe("TypeGroup", () => {
 			{ input: "mcp server", expected: "MCP Servers" },
 			{ input: "prompt", expected: "Prompts" },
 			{ input: "package", expected: "Packages" },
-			{ input: "custom", expected: "Customs" },
+			{ input: "custom", expected: "Customs" }, // Uses generic-type with capitalization
 		]
 
 		types.forEach(({ input, expected }) => {
 			const { unmount } = renderWithProviders(<TypeGroup type={input} items={mockItems} />)
-			expect(screen.getByText(expected)).toBeInTheDocument()
+			expect(screen.getByText((content, element) => element?.textContent === expected)).toBeInTheDocument()
 			unmount()
 		})
 	})

webview-ui/src/i18n/test-utils.ts

@@ -29,6 +29,25 @@ export const setupI18nForTests = () => {
 				chat: {
 					test: "Test",
 				},
+				"package-manager": {
+					items: {
+						card: {
+							by: "by {{author}}",
+							viewSource: "View",
+							externalComponents: "Contains {{count}} external component",
+							externalComponents_plural: "Contains {{count}} external components",
+						},
+					},
+					filters: {
+						type: {
+							package: "Package",
+							mode: "Mode",
+						},
+						tags: {
+							clickToFilter: "Click tags to filter items",
+						},
+					},
+				},
 			},
 		},
 	})

webview-ui/src/test/test-utils.tsx

@@ -20,24 +20,33 @@ i18next.use(initReactI18next).init({
 	resources: {
 		en: {
 			"package-manager": {
-				// Type group translations
-				"type-group.mcp-servers": "MCP Servers",
-				"type-group.modes": "Modes",
-				"type-group.prompts": "Prompts",
-				"type-group.packages": "Packages",
-				"type-group.match": "Match",
-				"type-group.generic-type": "{{type}}s",
-
-				// Item card translations
-				"item-card.by-author": "by {{author}}",
-				"item-card.type-package": "Package",
-				"item-card.type-mode": "Mode",
-				"item-card.type-mcp-server": "MCP Server",
-				"item-card.type-prompt": "Prompt",
-				"item-card.source": "Source",
-				"item-card.component-details": "Component Details",
-				"item-card.filter-by-tag": "Filter by tag",
-				"item-card.by": "by",
+				filters: {
+					type: {
+						package: "Package",
+						mode: "Mode",
+						"mcp server": "MCP Server",
+						prompt: "Prompt",
+					},
+					tags: {
+						clickToFilter: "Click tags to filter items",
+					},
+				},
+				items: {
+					card: {
+						by: "by {{author}}",
+						viewSource: "View",
+						externalComponents: "Contains {{count}} external component",
+						externalComponents_plural: "Contains {{count}} external components",
+					},
+				},
+				"type-group": {
+					"mcp-servers": "MCP Servers",
+					modes: "Modes",
+					prompts: "Prompts",
+					packages: "Packages",
+					match: "Match",
+					"generic-type": "{{type}}s",
+				},
 			},
 		},
 	},