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",
+ },
},
},
},