forked from baron/baron-sso
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { act } from "react-dom/test-utils";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import type { ReactNode, ComponentProps } from "react";
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { ClientLogo } from "./ClientLogo";
|
|
|
|
vi.mock("../../../components/ui/avatar", () => ({
|
|
Avatar: ({ children }: { children: ReactNode }) => (
|
|
<div data-testid="avatar">{children}</div>
|
|
),
|
|
AvatarImage: (props: ComponentProps<"img">) => <img alt="" {...props} />,
|
|
AvatarFallback: ({ children }: { children: ReactNode }) => (
|
|
<div data-testid="fallback">{children}</div>
|
|
),
|
|
}));
|
|
|
|
const roots: Root[] = [];
|
|
|
|
afterEach(() => {
|
|
for (const root of roots.splice(0)) {
|
|
act(() => {
|
|
root.unmount();
|
|
});
|
|
}
|
|
document.body.innerHTML = "";
|
|
});
|
|
|
|
function renderLogo(client: Parameters<typeof ClientLogo>[0]["client"]) {
|
|
const container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
const root = createRoot(container);
|
|
roots.push(root);
|
|
|
|
act(() => {
|
|
root.render(<ClientLogo client={client} />);
|
|
});
|
|
|
|
return container;
|
|
}
|
|
|
|
describe("ClientLogo", () => {
|
|
it("renders the fallback icon when no logo url exists", () => {
|
|
const container = renderLogo({
|
|
name: "",
|
|
type: "private",
|
|
metadata: {},
|
|
});
|
|
|
|
expect(container.querySelectorAll("svg").length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it("uses the logo image when a trimmed url is provided", () => {
|
|
const container = renderLogo({
|
|
name: "Gitea",
|
|
type: "pkce",
|
|
metadata: { logo_url: " https://example.com/logo.png " },
|
|
});
|
|
|
|
const image = container.querySelector("img");
|
|
expect(image).not.toBeNull();
|
|
expect(container.querySelector("[data-testid='fallback']")).not.toBeNull();
|
|
expect(image?.getAttribute("alt")).toContain("Gitea");
|
|
expect(image?.getAttribute("src")).toBe("https://example.com/logo.png");
|
|
});
|
|
});
|