import { render } from "@testing-library/react";

import { ModalTitle } from "../ModalTitle";

describe("rendering Title", () => {
  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<ModalTitle>test</ModalTitle>);
      expect(getByText("test")).toBeInTheDocument();
    });
    it("has class display-3 when size is set to large", () => {
      const { getByTestId } = render(
        <ModalTitle data-testid="test-id" size="large" />,
      );
      expect(getByTestId("test-id")).toHaveClass("display-3");
    });
    it("has class h3 when size is set to small", () => {
      const { getByTestId } = render(
        <ModalTitle data-testid="test-id" size="small" />,
      );
      expect(getByTestId("test-id")).toHaveClass("h2");
    });
  });
});