adilalloandCursor
3cdf4174d0
Restore asset/Logo import casing so Turbopack can resolve the module, and align the site lockup gaps with the Figma Asset/Logo instances. Co-authored-by: Cursor <cursoragent@cursor.com>
99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
import React from "react";
|
|
import { screen } from "@testing-library/react";
|
|
import { renderWithProviders as render } from "../utils/test-utils";
|
|
import { describe, it, expect } from "vitest";
|
|
import Logo from "../../app/components/asset/Logo";
|
|
import {
|
|
componentTestSuite,
|
|
ComponentTestSuiteConfig,
|
|
} from "../utils/componentTestSuite";
|
|
|
|
type LogoProps = React.ComponentProps<typeof Logo>;
|
|
|
|
const baseProps: LogoProps = {};
|
|
|
|
const config: ComponentTestSuiteConfig<LogoProps> = {
|
|
component: Logo,
|
|
name: "Logo",
|
|
props: baseProps,
|
|
primaryRole: "link",
|
|
testCases: {
|
|
renders: true,
|
|
accessibility: true,
|
|
keyboardNavigation: true,
|
|
disabledState: false,
|
|
errorState: false,
|
|
},
|
|
};
|
|
|
|
componentTestSuite<LogoProps>(config);
|
|
|
|
describe("Logo (behavioral tests)", () => {
|
|
it("renders as a link to home", () => {
|
|
render(<Logo />);
|
|
const logo = screen.getByRole("link", { name: /communityrule logo/i });
|
|
expect(logo).toHaveAttribute("href", "/");
|
|
expect(logo).toHaveAttribute("aria-label", "CommunityRule Logo");
|
|
});
|
|
|
|
it("animates the mark on hover without scaling the wordmark", () => {
|
|
render(<Logo />);
|
|
const logo = screen.getByRole("link", { name: /communityrule logo/i });
|
|
const wordmark = screen.getByText("CommunityRule");
|
|
const mark = logo.querySelector("img");
|
|
expect(logo).toHaveClass("group");
|
|
expect(wordmark.className).not.toContain("scale-");
|
|
expect(mark).toHaveClass("group-hover:scale-110");
|
|
});
|
|
|
|
it("renders logo icon", () => {
|
|
render(<Logo />);
|
|
expect(screen.getByAltText("CommunityRule Logo")).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders text by default", () => {
|
|
render(<Logo />);
|
|
expect(screen.getByText("CommunityRule")).toBeInTheDocument();
|
|
});
|
|
|
|
it("hides wordmark when wordmark is false", () => {
|
|
const { container } = render(<Logo wordmark={false} />);
|
|
const textElement = container.querySelector(".hidden");
|
|
expect(textElement).toBeInTheDocument();
|
|
expect(screen.getByAltText("CommunityRule Logo")).toBeInTheDocument();
|
|
});
|
|
|
|
it("applies inverse palette styling when palette is inverse", () => {
|
|
render(<Logo palette="inverse" />);
|
|
const link = screen.getByRole("link");
|
|
const textEl = link.querySelector(".font-bricolage-grotesque");
|
|
const img = link.querySelector("img");
|
|
expect(textEl).toHaveClass("text-[var(--color-content-invert-primary)]");
|
|
expect(img).toHaveClass("brightness-0");
|
|
});
|
|
|
|
it("uses the Figma 6px wordmark-to-mark gap at the default size", () => {
|
|
const { container } = render(<Logo />);
|
|
const row = container.querySelector("a > div");
|
|
expect(row?.className).toContain("gap-[var(--spacing-scale-006)]");
|
|
expect(row?.className).toContain("h-[var(--spacing-scale-040)]");
|
|
});
|
|
|
|
it("renders with different size variants", () => {
|
|
const { rerender } = render(<Logo size="default" />);
|
|
expect(screen.getByRole("link")).toBeInTheDocument();
|
|
|
|
rerender(<Logo size="footer" />);
|
|
expect(screen.getByRole("link")).toBeInTheDocument();
|
|
|
|
rerender(<Logo size="createFlow" />);
|
|
expect(screen.getByRole("link")).toBeInTheDocument();
|
|
|
|
rerender(<Logo size="topNavFolderTop" />);
|
|
expect(screen.getByRole("link")).toBeInTheDocument();
|
|
|
|
rerender(<Logo size="topNavHeader" />);
|
|
expect(screen.getByRole("link")).toBeInTheDocument();
|
|
});
|
|
});
|