import { render, screen } from "@testing-library/react";
import { ErrorMessage } from ".";

const CLASS_NAME = "mobius-error-message";

describe("Error message", () => {
  it("should render without errors", () => {
    render(<ErrorMessage />);
  });

  it("should not display when there is no message", () => {
    const { container } = render(<ErrorMessage />);
    expect(container.childNodes.length).toEqual(0);
  });

  it("should display when there is a message", () => {
    render(<ErrorMessage errorMessage="Oops" />);
    expect(screen.getByText("Oops")).toBeInTheDocument();
  });

  it("uses Mobius class", () => {
    render(<ErrorMessage errorMessage="Oops" />);
    expect(screen.getByText("Oops").closest("div")).toHaveClass("mobius");
  });

  it("uses base Mobius class", () => {
    render(<ErrorMessage errorMessage="Oops" />);
    expect(screen.getByText("Oops").closest("div")).toHaveClass(CLASS_NAME);
  });

  it("uses CSS classes", () => {
    const { container } = render(
      <ErrorMessage errorMessage="Oops" className="custom-class" />,
    );
    expect(container.firstChild).toHaveClass("custom-class");
  });
});
