diff --git a/packages/app/e2e/browser/provider-catalog-icons.spec.ts b/packages/app/e2e/browser/provider-catalog-icons.spec.ts new file mode 100644 index 0000000000..818d88ab84 --- /dev/null +++ b/packages/app/e2e/browser/provider-catalog-icons.spec.ts @@ -0,0 +1,51 @@ +import { ACP_PROVIDER_ICON_SVGS } from "../../src/assets/acp-provider-icons"; +import { expect, test, type Page } from "../support/fixtures"; +import type { TestInfo } from "@playwright/test"; +import { gotoAppShell, openSettings } from "../support/helpers/app"; +import { getServerId } from "../support/helpers/server-id"; +import { + findAcpCatalogProvider, + openAddProviderArea, + openSettingsHost, + openSettingsHostSection, +} from "../support/helpers/settings"; + +async function openProviderCatalog(page: Page) { + await gotoAppShell(page); + await openSettings(page); + await openSettingsHost(page, getServerId()); + await openSettingsHostSection(page, getServerId(), "providers"); + await openAddProviderArea(page); +} + +async function expectProviderArtwork( + page: Page, + testInfo: TestInfo, + id: "devin" | "hermes" | "kiro", + name: string, +) { + await findAcpCatalogProvider(page, name); + // Catalog tiles have no semantic role; scope artwork to the named provider's tile. + const icon = page.getByTestId(`provider-catalog-tile-${id}`).locator("svg").first(); + await expect(icon).toBeVisible(); + // Provider artwork is 24px; the generic PackagePlus fallback is 20px. + await expect.soft(icon).toHaveAttribute("width", "24"); + const expectedPaths = await page.evaluate((xml) => { + const document = new DOMParser().parseFromString(xml, "image/svg+xml"); + return Array.from(document.querySelectorAll("path"), (path) => path.getAttribute("d")!); + }, ACP_PROVIDER_ICON_SVGS[id]); + await expect(icon.locator("path")).toHaveCount(expectedPaths.length); + for (const [index, path] of expectedPaths.entries()) { + await expect(icon.locator("path").nth(index)).toHaveAttribute("d", path); + } + await page.screenshot({ path: testInfo.outputPath(`${id}-catalog.png`) }); +} + +test("#7087: the provider catalog shows Devin, Hermes, and Kiro artwork", async ({ + page, +}, testInfo) => { + await openProviderCatalog(page); + await expectProviderArtwork(page, testInfo, "devin", "Devin CLI"); + await expectProviderArtwork(page, testInfo, "hermes", "Hermes"); + await expectProviderArtwork(page, testInfo, "kiro", "Kiro CLI"); +}); diff --git a/packages/app/src/components/provider-icons.test.ts b/packages/app/src/components/provider-icons.test.ts index 025ff14bef..aceed473be 100644 --- a/packages/app/src/components/provider-icons.test.ts +++ b/packages/app/src/components/provider-icons.test.ts @@ -1,6 +1,6 @@ // @vitest-environment jsdom import { act, cleanup, renderHook } from "@testing-library/react"; -import { Bot } from "lucide-react-native"; +import { Bot, PackagePlus } from "lucide-react-native"; import { SvgXml } from "react-native-svg"; import { afterEach, describe, expect, it } from "vitest"; import { replaceProviderSnapshotIcons } from "@/data/provider-icons"; @@ -17,6 +17,16 @@ function renderIcon(Component: ProviderIconComponent) { } describe("useProviderIcon", () => { + it.each(["devin", "hermes", "kiro", "antigravity"])( + "#7087: %s has a provider mark before a host snapshot arrives", + (provider) => { + const Icon = renderHook(() => useProviderIcon(provider)).result.current; + expect(Icon).not.toBe(Bot); + expect(Icon).not.toBe(PackagePlus); + expect(typeof Icon).toBe("function"); + }, + ); + it("renders registered snapshot SVG metadata with the requested size and color", () => { const svg = ''; replaceProviderSnapshotIcons("server-1", [{ provider: "rendered-provider", iconSvg: svg }]); diff --git a/packages/app/src/hooks/use-acp-provider-catalog.test.ts b/packages/app/src/hooks/use-acp-provider-catalog.test.ts index 201c17c022..c5fd59d53e 100644 --- a/packages/app/src/hooks/use-acp-provider-catalog.test.ts +++ b/packages/app/src/hooks/use-acp-provider-catalog.test.ts @@ -11,6 +11,13 @@ function findProvider(id: string) { } describe("ACP provider catalog", () => { + it.each(["devin", "hermes", "kiro"])( + "#7087: %s supplies its provider mark to the catalog picker", + (provider) => { + expect(findProvider(provider).iconSvg).toContain(" { const ids = new Set();