diff --git a/webview-ui/src/components/package-manager/components/__tests__/PackageManagerItemCard.test.tsx b/webview-ui/src/components/package-manager/components/__tests__/PackageManagerItemCard.test.tsx index 500513c1de..c2c5bfe68f 100644 --- a/webview-ui/src/components/package-manager/components/__tests__/PackageManagerItemCard.test.tsx +++ b/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() - 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() + 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() - - 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") diff --git a/webview-ui/src/components/package-manager/components/__tests__/TypeGroup.test.tsx b/webview-ui/src/components/package-manager/components/__tests__/TypeGroup.test.tsx index f6ced20eee..3f3877a016 100644 --- a/webview-ui/src/components/package-manager/components/__tests__/TypeGroup.test.tsx +++ b/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() - // 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() - expect(screen.getByText(expected)).toBeInTheDocument() + expect(screen.getByText((content, element) => element?.textContent === expected)).toBeInTheDocument() unmount() }) }) diff --git a/webview-ui/src/i18n/test-utils.ts b/webview-ui/src/i18n/test-utils.ts index 9abd4d9e06..55208237df 100644 --- a/webview-ui/src/i18n/test-utils.ts +++ b/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", + }, + }, + }, }, }, }) diff --git a/webview-ui/src/test/test-utils.tsx b/webview-ui/src/test/test-utils.tsx index 7b6af8ea02..a73b9428f4 100644 --- a/webview-ui/src/test/test-utils.tsx +++ b/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", + }, }, }, },