monday-ui-react-core/src/components/ProgressBars/LinearProgressBar/LinearProgressBar-test.js

Official monday.com UI resources for application development in React.js

import React from "react";
import { render, cleanup, act, screen } from "@testing-library/react";
import { expect } from "../../../test/test-helpers";
import LinearProgressBar from "./LinearProgressBar";

describe("ProgressBars Tests", () => {
  let component;

  beforeEach(() => {
    cleanup();
    act(() => {
      component = render(<LinearProgressBar id="test" />);
    });
  });

  afterEach(() => {
    cleanup();
  });

  describe("rendering of bars", () => {
    it("should not render progress bars if no values provided", () => {
      expect(screen.queryAllByRole("progressbar").length).to.eq(0);
    });

    it("should render progress bars if values are provided", () => {
      const { rerender } = component;
      act(() => {
        component = rerender(<LinearProgressBar value={13} id="test" />);
      });
      expect(
        screen.queryAllByRole("progressbar").length,
        "should render only main progress bar"
      ).to.eq(1);

      act(() => {
        component = rerender(
          <LinearProgressBar value={14} valueSecondary={15} id="test" />
        );
      });
      expect(
        screen.queryAllByRole("progressbar").length,
        "should render both progress bars"
      ).to.eq(2);
    });
  });

  describe("indicate progress", () => {
    it("should not render progress indication if not set", () => {
      const { rerender } = component;
      act(() => {
        component = rerender(
          <LinearProgressBar value={13} max={100} id="test" />
        );
      });
      expect(screen.queryAllByText("13%").length).to.eq(0);
    });

    it("should render progress indication if set", () => {
      const { rerender } = component;
      act(() => {
        component = rerender(
          <LinearProgressBar
            value={13}
            max={100}
            id="test"
            indicateProgress={true}
          />
        );
      });

      expect(screen.getByText("13%")).to.be.ok;
    });

    it("should change progress indication for value changes", () => {
      const { rerender } = component;
      const value = 13;
      for (let i = 0; i < 2; i++) {
        act(() => {
          rerender(
            <LinearProgressBar
              value={value + i}
              max={100}
              id="test"
              indicateProgress={true}
            />
          );
        });

        expect(screen.getByText(`${value + i}%`)).to.be.ok;
      }
    });
  });

  describe("multi progress bars", () => {
    const multiValues = [
      { value: 10, color: "rgb(255, 0, 0)" },
      { value: 20, color: "rgb(0, 255, 0)" },
      { value: 30, color: "rgb(0, 0, 255)" }
    ];
    let multiBarsComponent;

    beforeEach(() => {
      multiBarsComponent = render(
        <LinearProgressBar max={100} id="test" multi />
      );
    });

    it("should not render multiple bars if multi is not set", () => {
      const { rerender } = component;
      act(() => {
        component = rerender(
          <LinearProgressBar max={100} id="test" multiValues={multiValues} />
        );
      });

      expect(screen.queryAllByRole("progressbar").length).to.eq(0);
    });

    it("should render all the given bars with the correct values", () => {
      const { rerender } = multiBarsComponent;
      rerender(
        <LinearProgressBar
          max={100}
          id="test"
          multi
          multiValues={multiValues}
        />
      );

      const progressBarElements = screen.queryAllByRole("progressbar");
      expect(progressBarElements.length).to.equal(3);
      const style = window.getComputedStyle(progressBarElements[1]);
      expect(style.backgroundColor).to.equal(`${multiValues[1].color}`);
    });

    it("should propagate value changes to bars", () => {
      const multiValuesWithChange = [
        { value: 100, color: "rgb(255, 255, 255)" },
        multiValues[1],
        multiValues[2]
      ];
      const { rerender } = multiBarsComponent;
      rerender(
        <LinearProgressBar
          max={100}
          id="test"
          multi
          multiValues={multiValues}
        />
      );

      let progressBarElements = screen.queryAllByRole("progressbar");
      let style = window.getComputedStyle(progressBarElements[0]);
      const widthBeforeChange = style.width;

      rerender(
        <LinearProgressBar
          max={100}
          id="test"
          multi
          multiValues={multiValuesWithChange}
        />
      );

      console.log(multiValuesWithChange);

      progressBarElements = screen.queryAllByRole("progressbar");
      style = window.getComputedStyle(progressBarElements[2]);
      expect(Number(style.width.replace("px", ""))).to.greaterThan(
        Number(widthBeforeChange.replace("px", ""))
      );
      expect(style.backgroundColor).to.equal(multiValuesWithChange[0].color);
    });
  });
});