optimizely-oui/dist/js/components/Button/tests/index.js

Optimizely's Component Library.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _index = _interopRequireDefault(require("../index"));

var _enzyme = require("enzyme");

var _enzymeToJson = require("enzyme-to-json");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

describe("components/Loading Button", function () {
  it("should not disable the button if isLoading is false", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isLoading: false
    }, "Create Campaign"));
    expect(component.getDOMNode().attributes.getNamedItem("disabled")).toBe(null);
  });
  it("should disable the button if isLoading is true", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isLoading: true
    }, "Create Campaign"));
    expect(component.getDOMNode().attributes.getNamedItem("disabled").value).not.toBe(null);
  });
  it("should add a loading spinner", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isLoading: true
    }, "Create Campaign"));
    expect(component.find(".oui-button--loading").exists()).toBe(true);
    expect(component.find(".oui-spinner").exists()).toBe(true);
  });
  it("should change the button text to Processing if loadingText is not passed", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isLoading: true
    }, "Create Campaign"));
    expect(component.find("button").text()).toBe("Processing");
  });
  it("should change the button text to the loadingText passed in", function () {
    var loadingText = "Creating Campaign";
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isLoading: true,
      loadingText: loadingText
    }, "Create Campaign"));
    expect(component.find("button").text()).toBe(loadingText);
  });
  it("should add an `aria-live` polite value", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isLoading: true
    }, "Create Campaign"));
    expect(component.find('[aria-live="polite"]').exists()).toBe(true);
  });
});
describe("components/Button", function () {
  it("should render a `button` HTML element", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], null, "Hello!"));
    expect(component.find("button").exists()).toBe(true);
  });
  it("should render contents that are passed in", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], null, "Hello!"));
    expect(component.text()).toBe("Hello!");
  });
  it("should call function that is passed in as `onClick` after click", function () {
    var onClickSpy = jest.fn();
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      onClick: onClickSpy
    }, "Hello!"));
    component.simulate("click");
    expect(onClickSpy).toHaveBeenCalled();
  });
  it("should call function that is passed in as `onBlur` after losing focus", function () {
    var onBlurSpy = jest.fn();
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      onBlur: onBlurSpy
    }, "Hello!"));
    component.simulate("blur");
    expect(onBlurSpy).toHaveBeenCalled();
  });
  it("should call function that is passed in as `onMouseDown` after mousedown", function () {
    var onMouseDownSpy = jest.fn();
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      onMouseDown: onMouseDownSpy
    }, "Hello!"));
    component.simulate("mousedown");
    expect(onMouseDownSpy).toHaveBeenCalled();
  });
  it("should add an `aria-label` when provided", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      ariaLabel: "a11y"
    }, "Hello!"));
    expect(component.find('[aria-label="a11y"]').exists()).toBe(true);
  });
  it("should add an `aria-haspopup` when provided", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      ariaHasPopup: true
    }, "Hello!"));
    expect(component.find("[aria-haspopup=true]").exists()).toBe(true);
  });
  it("should add a title when provided", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      title: "a11y"
    }, "Hello!"));
    expect(component.find('[title="a11y"]').exists()).toBe(true);
  });
  it("should add the active class if `isActive` is true", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isActive: true
    }, "Hello!"));
    expect(component.find("button").hasClass("is-active")).toBe(true);
  });
  it("should add the disabled attribute if `isDisabled` is true", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isDisabled: true
    }, "Hello!"));
    expect(component.getDOMNode().attributes.getNamedItem("disabled").value).not.toBe(null);
  });
  it("should be of type `button` when `isSubmit` is false", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isSubmit: false
    }, "Hello!"));
    expect(component.getDOMNode().attributes.getNamedItem("type").value).toBe("button");
  });
  it("should be of type `button` when `isSubmit` is not provided", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], null, "Hello!"));
    expect(component.getDOMNode().attributes.getNamedItem("type").value).toBe("button");
  });
  it("should be of type `submit` when `isSubmit` is true", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isSubmit: true
    }, "Hello!"));
    expect(component.getDOMNode().attributes.getNamedItem("type").value).toBe("submit");
  });
  it("should have a properly set size class if `size` is provided", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      size: "tiny"
    }, "Hello!"));
    expect(component.find("button").hasClass("oui-button--tiny")).toBe(true);
  });
  it("should have a properly set style class if `style` is provided", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      style: "outline"
    }, "Hello!"));
    expect(component.find("button").hasClass("oui-button--outline")).toBe(true);
  });
  it("should have a properly set test section", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      testSection: "foo"
    }, "Hello!"));
    expect(component.find('[data-test-section="foo"]').exists()).toBe(true);
  });
  it("should have a properly set width class if `width` is provided", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      width: "full"
    }, "Hello!"));
    expect(component.find("button").hasClass("oui-button--full")).toBe(true);
  });
  it("should render as a div if isLink is true", function () {
    var output = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isLink: true
    }, "Faux Button"));
    expect(output.find("button").exists()).toBe(false);
    expect((0, _enzymeToJson.mountToJson)(output)).toMatchSnapshot();
  });
  it("should add an icon if specified", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      leftIcon: "add"
    }, "Create Campaign"));
    expect(component.find("Memo(Icon)").exists()).toBe(true);
  });
  describe("when given a className", function () {
    it("appends it to the root element", function () {
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
        className: "extra-class"
      }, "Text"));
      expect(component.prop("className").includes("extra-class")).toBe(true);
    });
  });
  describe("when given an unknown prop", function () {
    it("passes it to the root element", function () {
      // @ts-ignore: `unknownProps` is not part of any typed interface and therefore a good test value.
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
        unknownProp: "some value"
      }, "Text"));
      expect(component).toHaveProp({
        unknownProp: "some value"
      });
    });
  });
});