community-rule/tests/components/Logo.test.tsx

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" });
    expect(logo).toHaveAttribute("href", "/");
    expect(logo).toHaveAttribute("aria-label", "CommunityRule");
  });

  it("animates the mark on hover without scaling the wordmark", () => {
    render(<Logo />);
    const logo = screen.getByRole("link", { name: "CommunityRule" });
    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")).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")).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(--space-150)]");
    expect(row?.className).toContain("h-[var(--space-1000)]");
  });

  it("hides the folder-top wordmark below md", () => {
    render(<Logo size="topNavFolderTop" wordmark />);
    const wordmark = screen.getByText("CommunityRule");
    expect(wordmark.className).toMatch(/\bhidden\b/);
    expect(wordmark.className).toContain("md:block");
  });

  it("hides the standard header wordmark below sm", () => {
    render(<Logo size="topNavHeader" wordmark />);
    const wordmark = screen.getByText("CommunityRule");
    expect(wordmark.className).toContain("hidden");
    expect(wordmark.className).toContain("sm:block");
  });

  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();
  });
});