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

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

// value and label props is required
describe("rendering Progress", () => {
  describe("initial state", () => {
    it("has default class progress", () => {
      const { getByTestId } = render(
        <Progress
          value="test-value"
          label="test-label"
          data-testid="test-id"
        />,
      );
      expect(getByTestId("test-id")).toHaveClass("progress");
    });
    it("has default class progress__label", () => {
      const { container } = render(
        <Progress value="test-value" label="test-label" />,
      );
      expect(container.getElementsByClassName("progress__label").length).toBe(
        1,
      );
    });
    it("has default class progress__bar", () => {
      const { container } = render(
        <Progress value="test-value" label="test-label" />,
      );
      expect(container.getElementsByClassName("progress__bar").length).toBe(1);
    });
    it("has default class progress__indicator", () => {
      const { container } = render(
        <Progress value="test-value" label="test-label" />,
      );
      expect(
        container.getElementsByClassName("progress__indicator").length,
      ).toBe(1);
    });
    it("has default class progress__value", () => {
      const { container } = render(
        <Progress value="test-value" label="test-label" />,
      );
      expect(container.getElementsByClassName("progress__value").length).toBe(
        1,
      );
    });
  });

  describe("passed props", () => {
    it("renders value", () => {
      const { getByText } = render(
        <Progress value="test-value" label="test-label">
          test-value
        </Progress>,
      );
      expect(getByText("test-value")).toBeInTheDocument();
    });
    it("renders label", () => {
      const { getByText } = render(
        <Progress value="test-value" label="test-label">
          test-label
        </Progress>,
      );
      expect(getByText("test-label")).toBeInTheDocument();
    });

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

    ["green", "yellow", "red", "blue"].forEach((color) => {
      it(`has progress__indicator--${color} class when color is ${color}`, () => {
        const { container } = render(
          <Progress
            data-testid="test-id"
            color={color}
            value="test-value"
            label="test-label"
          />,
        );
        expect(
          container.getElementsByClassName(`progress__indicator--${color}`)
            .length,
        ).toBe(1);
      });
    });
    it(`doesnt have class progress__indicator--orange class when color is orange`, () => {
      const { container } = render(
        <Progress
          data-testid="test-id"
          color={"orange"}
          value="test-value"
          label="test-label"
        />,
      );
      expect(
        container.getElementsByClassName("progress__indicator--orange").length,
      ).toBe(0);
    });
  });
});