adilallo
129 lines
4.1 KiB
React
129 lines
4.1 KiB
React
import { render, screen } from "@testing-library/react";
|
|
import { describe, it, expect } from "vitest";
|
|
import Logo from "../../app/components/Logo";
|
|
|
|
describe("Logo Component", () => {
|
|
it("renders the logo with default props", () => {
|
|
render(<Logo />);
|
|
|
|
const logo = screen.getByRole("link", { name: /communityrule logo/i });
|
|
expect(logo).toBeInTheDocument();
|
|
expect(screen.getByText("CommunityRule")).toBeInTheDocument();
|
|
expect(screen.getByAltText("CommunityRule Logo Icon")).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders with custom size variant", () => {
|
|
const { rerender } = render(<Logo size="header" />);
|
|
let logoDiv = screen.getByRole("link").querySelector("div");
|
|
expect(logoDiv).toHaveClass("h-[20.85px]");
|
|
|
|
rerender(<Logo size="headerLg" />);
|
|
logoDiv = screen.getByRole("link").querySelector("div");
|
|
expect(logoDiv).toHaveClass("h-[28px]");
|
|
|
|
rerender(<Logo size="footer" />);
|
|
logoDiv = screen.getByRole("link").querySelector("div");
|
|
expect(logoDiv).toHaveClass("h-[calc(40px*1.37)]");
|
|
});
|
|
|
|
it("renders without text when showText is false", () => {
|
|
render(<Logo showText={false} />);
|
|
|
|
expect(screen.queryByText("CommunityRule")).not.toBeInTheDocument();
|
|
expect(screen.getByAltText("CommunityRule Logo Icon")).toBeInTheDocument();
|
|
});
|
|
|
|
it("applies proper hover effects", () => {
|
|
render(<Logo />);
|
|
|
|
const logoDiv = screen.getByRole("link").querySelector("div");
|
|
expect(logoDiv).toHaveClass("hover:scale-[1.02]", "transition-all");
|
|
});
|
|
|
|
it("applies proper accessibility attributes", () => {
|
|
render(<Logo />);
|
|
|
|
const logo = screen.getByRole("link");
|
|
expect(logo).toHaveAttribute("aria-label", "CommunityRule Logo");
|
|
expect(logo).toHaveAttribute("href", "/");
|
|
});
|
|
|
|
it("applies proper text styling for different sizes", () => {
|
|
const { rerender } = render(<Logo size="homeHeaderMd" />);
|
|
let textElement = screen.getByText("CommunityRule");
|
|
expect(textElement).toHaveClass(
|
|
"text-[var(--color-content-inverse-primary)]"
|
|
);
|
|
|
|
rerender(<Logo size="header" />);
|
|
textElement = screen.getByText("CommunityRule");
|
|
expect(textElement).toHaveClass(
|
|
"text-[var(--color-content-default-primary)]"
|
|
);
|
|
});
|
|
|
|
it("applies proper icon sizing for different variants", () => {
|
|
const { rerender } = render(<Logo size="homeHeaderSm" />);
|
|
let icon = screen.getByAltText("CommunityRule Logo Icon");
|
|
expect(icon).toHaveClass("w-[14.39px]", "h-[14.39px]");
|
|
|
|
rerender(<Logo size="headerXl" />);
|
|
icon = screen.getByAltText("CommunityRule Logo Icon");
|
|
expect(icon).toHaveClass("w-[33.81px]", "h-[33.81px]");
|
|
});
|
|
|
|
it("applies brightness filter for home header variants", () => {
|
|
render(<Logo size="homeHeaderMd" />);
|
|
|
|
const icon = screen.getByAltText("CommunityRule Logo Icon");
|
|
expect(icon).toHaveClass("filter", "brightness-0");
|
|
});
|
|
|
|
it("maintains proper spacing when text is hidden", () => {
|
|
render(<Logo showText={false} />);
|
|
|
|
const logo = screen.getByRole("link");
|
|
// Should not have gap class when text is hidden
|
|
expect(logo.className).not.toContain("gap-[8.28px]");
|
|
});
|
|
|
|
it("applies proper font classes to text", () => {
|
|
render(<Logo />);
|
|
|
|
const textElement = screen.getByText("CommunityRule");
|
|
expect(textElement).toHaveClass("font-bricolage-grotesque", "font-normal");
|
|
});
|
|
|
|
it("applies proper icon attributes", () => {
|
|
render(<Logo />);
|
|
|
|
const icon = screen.getByAltText("CommunityRule Logo Icon");
|
|
expect(icon).toHaveAttribute("src", "/assets/Logo.svg");
|
|
expect(icon).toHaveAttribute("aria-hidden", "true");
|
|
});
|
|
|
|
it("handles all size variants correctly", () => {
|
|
const sizes = [
|
|
"default",
|
|
"homeHeaderXsmall",
|
|
"homeHeaderSm",
|
|
"homeHeaderMd",
|
|
"homeHeaderLg",
|
|
"homeHeaderXl",
|
|
"header",
|
|
"headerMd",
|
|
"headerLg",
|
|
"headerXl",
|
|
"footer",
|
|
"footerLg",
|
|
];
|
|
|
|
sizes.forEach((size) => {
|
|
const { unmount } = render(<Logo size={size} />);
|
|
const logo = screen.getByRole("link");
|
|
expect(logo).toBeInTheDocument();
|
|
unmount();
|
|
});
|
|
});
|
|
});
|