Title

import { cleanup, render, screen } from "@testing-library/react";
import React from "react";
import { afterEach, describe, expect, it } from "vitest";
import { Body, Caption, Display, Overline, Subtitle, Title } from "./typography";
afterEach(cleanup);
describe("Typography Components", () => {
    it("Display should render h1 by default", () => {
        render(<Display>Heading</Display>);
        const el = screen.getByText("Heading");
        expect(el.tagName).toBe("H1");
    });
    it("Title should render h2 by default", () => {
        render(<Title>Title</Title>);
        const el = screen.getByText("Title");
        expect(el.tagName).toBe("H2");
    });
    it("Subtitle should render h3 by default", () => {
        render(<Subtitle>Subtitle</Subtitle>);
        const el = screen.getByText("Subtitle");
        expect(el.tagName).toBe("H3");
    });
    it("Body should render p by default", () => {
        render(<Body>Body</Body>);
        const el = screen.getByText("Body");
        expect(el.tagName).toBe("P");
    });
    it("Caption should render span by default", () => {
        render(<Caption>Caption</Caption>);
        const el = screen.getByText("Caption");
        expect(el.tagName).toBe("SPAN");
    });
    it("Overline should render span by default", () => {
        render(<Overline>Overline</Overline>);
        const el = screen.getByText("Overline");
        expect(el.tagName).toBe("SPAN");
    });
    it("should allow changing the element", () => {
        render(<Display element="h2">Heading</Display>);
        const el = screen.getByText("Heading");
        expect(el.tagName).toBe("H2");
    });
});