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

describe("Alert", () => {
  it("should render without errors", () => {
    render(<Alert>Sample text</Alert>);

    expect(screen.getByText("Sample text")).toBeInTheDocument();
  });

  describe("given elementType", () => {
    it("is not applied as element attribute", () => {
      const { container } = render(<Alert elementType="ul">Sample text</Alert>);
      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
    });
  });

  describe("given the show prop is set to false", () => {
    it("should not render", () => {
      const { container } = render(<Alert show={false}>Sample text</Alert>);

      expect(container).toBeEmptyDOMElement();
    });
  });

  it("uses correct class name for info variant", () => {
    const { container } = render(<Alert variant="info">Sample text</Alert>);

    expect(container.firstChild).toHaveClass("--info");
  });

  it("uses correct class name for success variant", () => {
    const { container } = render(<Alert variant="success">Sample text</Alert>);

    expect(container.firstChild).toHaveClass("--success");
  });

  it("uses correct class name for warning variant", () => {
    const { container } = render(<Alert variant="warning">Sample text</Alert>);

    expect(container.firstChild).toHaveClass("--warning");
  });

  it("uses correct class name for error variant", () => {
    const { container } = render(<Alert variant="error">Sample text</Alert>);

    expect(container.firstChild).toHaveClass("--error");
  });

  it("defaults to info variant if invalid variant is provided", () => {
    const { container } = render(
      <Alert variant="I am an invalid variant">Sample text</Alert>,
    );

    expect(container.firstChild).toHaveClass("--info");
  });

  it("defaults to info variant if no variant is provided", () => {
    const { container } = render(<Alert>Sample text</Alert>);

    expect(container.firstChild).toHaveClass("--info");
  });

  describe("when header is defined", () => {
    it("displays the header", () => {
      render(<Alert header="Information">Sample text</Alert>);

      expect(screen.getByText("Information")).toBeInTheDocument();
    });

    it("uses correct class name", () => {
      const { container } = render(
        <Alert header="Information">Sample text</Alert>,
      );

      expect(container.firstChild).toHaveClass("--has-header");
    });
  });
});
