monday-ui-react-core/src/components/Button/Button-test.js

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

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

describe("<Buttoon />", () => {
  let clickActionStub;
  let onMouseDownStub;
  let buttonComponent;
  const text = "Click Me!";
  const className = "test-class";
  beforeEach(() => {
    clickActionStub = sinon.stub();
    onMouseDownStub = sinon.stub();
    buttonComponent = render(
      <Button className={className} onClick={clickActionStub} onMouseDown={onMouseDownStub}>
        {text}
      </Button>
    );
  });

  afterEach(() => {
    clickActionStub.reset();
    cleanup();
  });
  describe("click", () => {
    it("should call the click callback when clicked", () => {
      const { container } = buttonComponent;
      fireEvent.click(container.firstChild);
      expect(clickActionStub).to.be.calledOnce;
    });

    describe("disabled click", () => {
      it("should be disabled in the dom", () => {
        const { rerender, getByText } = buttonComponent;
        rerender(
          <Button onClick={clickActionStub} disabled>
            {text}
          </Button>
        );
        expect(getByText(text).closest("button").disabled).to.equal(true);
      });

      it("should not call the callback if disabled", () => {
        const { container, rerender } = buttonComponent;
        rerender(
          <Button onClick={clickActionStub} disabled>
            {text}
          </Button>
        );
        fireEvent.click(container.firstChild);
        expect(clickActionStub).not.to.be.calledOnce;
      });

      it("should not call the callback on loading", () => {
        const { container, rerender } = buttonComponent;
        rerender(
          <Button onClick={clickActionStub} loading>
            {text}
          </Button>
        );
        fireEvent.click(container.firstChild);
        expect(clickActionStub).not.to.be.calledOnce;
      });

      it("should not call the callback if success", () => {
        const { container, rerender } = buttonComponent;
        rerender(
          <Button onClick={clickActionStub} success>
            {text}
          </Button>
        );
        fireEvent.click(container.firstChild);
        expect(clickActionStub).not.to.be.calledOnce;
      });
    });
  });
  describe("mouse down", () => {
    it("should call the click callback when clicked", () => {
      const { container } = buttonComponent;
      fireEvent.mouseDown(container.firstChild);
      expect(onMouseDownStub).to.be.calledOnce;
    });
  });
  describe("adding classnames", () => {
    it("should should add class name when provided", () => {
      const { container } = buttonComponent;
      const classNameQuery = container.querySelector(`.${className}`);
      expect(classNameQuery).to.be.ok;
    });
  });
  describe("a11y", () => {
    it("should add the aria label", () => {
      const ariaLabel = "Icon Name";
      const { getByLabelText } = render(
        <Button ariaLabel={ariaLabel} className={className} onClick={clickActionStub} onMouseDown={onMouseDownStub}>
          {text}
        </Button>
      );
      const buttonElement = getByLabelText(ariaLabel);
      expect(buttonElement).to.be.ok;
    });
  });
  describe("sizes", () => {
    beforeEach(() => {
      const { unmount } = buttonComponent;
      unmount();
    });
    it("small size should add the relevant class small", () => {
      const { getByText } = render(
        <Button className={className} size={Button.sizes.SMALL}>
          {text}
        </Button>
      );
      const buttonElement = getByText(text);
      expect(buttonElement.classList.contains(`monday-style-button--size-${Button.sizes.SMALL}`)).to.equal(true);
    });

    it("small size should add the relevant class medium", () => {
      const { getByText } = render(
        <Button className={className} size={Button.sizes.MEDIUM}>
          {text}
        </Button>
      );
      const buttonElement = getByText(text);
      expect(buttonElement.classList.contains(`monday-style-button--size-${Button.sizes.MEDIUM}`)).to.equal(true);
    });

    it("small size should add the relevant class large", () => {
      const { getByText } = render(
        <Button className={className} size={Button.sizes.LARGE}>
          {text}
        </Button>
      );
      const buttonElement = getByText(text);
      expect(buttonElement.classList.contains(`monday-style-button--size-${Button.sizes.LARGE}`)).to.equal(true);
    });
  });
  describe("colors", () => {
    beforeEach(() => {
      const { unmount } = buttonComponent;
      unmount();
    });
    it("should add primary color", () => {
      const { getByText } = render(<Button className={className}>{text}</Button>);
      const buttonElement = getByText(text);
      expect(buttonElement.classList.contains(`monday-style-button--color-${Button.colors.PRIMARY}`)).to.equal(true);
    });
    it("should add primary positive", () => {
      const { getByText } = render(
        <Button className={className} color={Button.colors.POSITIVE}>
          {text}
        </Button>
      );
      const buttonElement = getByText(text);
      expect(buttonElement.classList.contains(`monday-style-button--color-${Button.colors.POSITIVE}`)).to.equal(true);
    });
    it("should add primary negative", () => {
      const { getByText } = render(
        <Button className={className} color={Button.colors.NEGATIVE}>
          {text}
        </Button>
      );
      const buttonElement = getByText(text);
      expect(buttonElement.classList.contains(`monday-style-button--color-${Button.colors.NEGATIVE}`)).to.equal(true);
    });
    it("should add primary on-primary", () => {
      const { getByText } = render(
        <Button className={className} color={Button.colors.ON_PRIMARY_COLOR}>
          {text}
        </Button>
      );
      const buttonElement = getByText(text);
      expect(buttonElement.classList.contains(`monday-style-button--color-${Button.colors.ON_PRIMARY_COLOR}`)).to.equal(
        true
      );
    });

    describe("success", () => {
      beforeEach(() => {
        const { unmount } = buttonComponent;
        unmount();
      });

      it("should change text to success text when success becomes true", () => {
        const { getByText, rerender, container } = render(
          <Button className={className} color={Button.colors.PRIMARY}>
            {text}
          </Button>
        );
        rerender(
          <Button success successText="Success">
            {text}
          </Button>
        );
        expect(getByText("Success")).to.be.ok;
      });

      it("color should be POSITIVE when success is true", () => {
        const { getByText } = render(
          <Button className={className} color={Button.colors.PRIMARY} success successText="Success">
            {text}
          </Button>
        );
        const buttonElement = getByText("Success");
        expect(buttonElement.classList.contains(`monday-style-button--color-${Button.colors.POSITIVE}`)).to.equal(true);
      });
    });
  });
});