import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/react";
import Progress from "../progress";
import ProgressBar from "../progress-bar";

test("shows progress", () => {
  const { queryByTestId } = render(
    <Progress>
      <ProgressBar value={undefined} />
    </Progress>
  );

  expect(queryByTestId("honeyui-progressbar")).toBeTruthy();
  expect(queryByTestId("honeyui-progressbar")).toHaveClass("progress-bar");
  expect(queryByTestId("honeyui-progressbar").style.width).toBe("0%");
});

test("shows progress 23", () => {
  const { queryByTestId } = render(
    <Progress>
      <ProgressBar value={23} />
    </Progress>
  );

  expect(queryByTestId("honeyui-progressbar").style.width).toBe("23%");
});

test("shows progress stripped", () => {
  const { queryByTestId } = render(
    <Progress>
      <ProgressBar value={23} isStriped />
    </Progress>
  );

  expect(queryByTestId("honeyui-progressbar")).toHaveClass("progress-bar-striped");
});

test("shows progress animated", () => {
  const { queryByTestId } = render(
    <Progress>
      <ProgressBar value={90} isAnimated />
    </Progress>
  );

  expect(queryByTestId("honeyui-progressbar")).toHaveClass("progress-bar-animated");
});