import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { TypographyProps } from "../TypographyProps";
import Typography from "../Typography";

describe("Typography Component", () => {
  const props: TypographyProps = {
    dataTestId: "test-id",
    children: "Test Content",
    className: "test-typography-class",
    fontSize: "medium",
    fontWeight: "normal",
    id: "test-typography-id",
    margin: "medium",
    style: { color: "blue" },
    textAlign: "center",
    textTransform: "capitalize",
    themeColor: "primary",
  };

  it("renders all props correctly", () => {
    render(
      <Typography tag={"code"} {...props}>
        Test
      </Typography>
    );
  });

  it("matches the snapshot", () => {
    const { asFragment } = render(
      <Typography tag={"code"} {...props}>
        Test
      </Typography>
    );
    expect(asFragment()).toMatchSnapshot();
  });

  it("renders children correctly", () => {
    const { getByText } = render(
      <Typography tag={"code"} {...props}>
        Test
      </Typography>
    );
    expect(getByText("Test")).toBeInTheDocument();
  });
});