import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import "@testing-library/jest-dom/vitest";
import SectionNumber from "../../app/components/sections/SectionNumber";

describe("SectionNumber", () => {
  it("rotates the shape and keeps the numeral upright", () => {
    render(<SectionNumber number={1} />);

    const numeral = screen.getByText("1");
    expect(numeral).toHaveClass("text-large-label");
    expect(numeral.className).not.toMatch(/rotate/);

    const shape = screen.getByAltText("Section 1");
    expect(shape).toHaveClass("rotate-15");
    expect(shape.parentElement).not.toHaveClass("rotate-15");
    expect(shape.parentElement?.className).not.toMatch(/-rotate-/);
  });
});