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

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

describe("rendering barItem", () => {
  describe("initial state", () => {
    it("has default class bar__item", () => {
      const { getByTestId } = render(<BarItem data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("bar__item");
    });

    it("has default tag div", () => {
      const { container } = render(<BarItem />);
      expect(container.querySelector("div")).toBeTruthy();
    });
  });

  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<BarItem>test</BarItem>);
      expect(getByText("test")).toBeInTheDocument();
    });

    it("has tag span when tag is set to span", () => {
      const { container } = render(<BarItem tag="span" />);
      expect(container.querySelector("span")).toBeTruthy();
    });

    it("has class bar__item--shrinkable when canShrink is set to true", () => {
      const { getByTestId } = render(
        <BarItem data-testid="test-id" canShrink={true} />,
      );
      expect(getByTestId("test-id")).toHaveClass("bar__item--shrinkable");
    });

    it("has class bar__item--fill when canShrink is set to true", () => {
      const { getByTestId } = render(
        <BarItem data-testid="test-id" isFilling={true} />,
      );
      expect(getByTestId("test-id")).toHaveClass("bar__item--fill");
    });

    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <BarItem data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("bar__item");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
  });
});