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

import { Bar } from "../";

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

  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<Bar>test</Bar>);
      expect(getByText("test")).toBeInTheDocument();
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Bar className="test-class" data-testid="test-id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("bar");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });

    ["start", "end", "center"].map((align) => {
      it(`has align-items-${align} class when align is ${align}`, () => {
        const { getByTestId } = render(
          <Bar data-testid="test-id" align={align} />,
        );
        expect(getByTestId("test-id")).toHaveClass(`align-items-${align}`);
      });
    });

    ["small", "large"].map((space) => {
      it(`has bar--space-${space} class when space is ${space}`, () => {
        const { getByTestId } = render(
          <Bar data-testid="test-id" space={space} />,
        );
        expect(getByTestId("test-id")).toHaveClass(`bar--space-${space}`);
      });
    });

    it("has class bar--nowrap when canWrap is set to false", () => {
      const { getByTestId } = render(
        <Bar data-testid="test-id" canWrap={false} />,
      );
      expect(getByTestId("test-id")).toHaveClass("bar--nowrap");
    });

    it("has class bar--vertical when isVertical is set to true", () => {
      const { getByTestId } = render(
        <Bar data-testid="test-id" isVertical={true} />,
      );
      expect(getByTestId("test-id")).toHaveClass("bar--vertical");
    });
  });
});