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

import { Loader } from "../";

describe("rendering Item", () => {
  describe("initial state", () => {
    it("has additional class when className is set ", () => {
      const { getByTestId } = render(<Loader data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("loader");
    });

    it("has default class loader__body", () => {
      const { container } = render(<Loader />);
      expect(container.getElementsByClassName("loader__body").length).toBe(1);
    });
    it("has default class loader__line", () => {
      const { container } = render(<Loader />);
      expect(container.getElementsByClassName("loader__line").length).toBe(1);
    });
  });

  describe("passed props", () => {
    it("has additional class when className is set ", () => {
      const { getByTestId } = render(
        <Loader data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("loader");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("has loader--large when size is set to large", () => {
      const { container } = render(<Loader size="large" />);
      expect(container.getElementsByClassName("loader--large").length).toBe(1);
    });
    it("has loader__messages class when messages is set ", () => {
      const { container } = render(<Loader messages={["test1", "test2"]} />);
      expect(container.getElementsByClassName("loader__messages").length).toBe(
        1,
      );
    });
    it("renders children when messages is set", () => {
      const { queryByText } = render(
        <Loader messages={["test1", "test2"]}>test-child</Loader>,
      );
      expect(queryByText("test-child")).toBeTruthy();
    });
    it("renders children when messages is set", () => {
      const { queryByText } = render(<Loader>test-child</Loader>);
      expect(queryByText("test-child")).toBeFalsy();
    });
    it("renders children when messages is set", () => {
      const { getByText } = render(
        <Loader messages={["test1", "test2"]}>test-child</Loader>,
      );
      expect(getByText("test-child").getAttribute("data-loader-messages")).toBe(
        '["test1","test2"]',
      );
    });
  });
});