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

Optimizely's Component Library.

"use strict";

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

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

var _enzyme = require("enzyme");

var _accessibility = require("../../../utils/accessibility");

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

describe("ButtonIcon component", function () {
  it("should render a medium size icon by default", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      iconName: "add"
    }));
    expect(component.find(".oui-button-icon__medium").length).toBe(1);
    expect(component.find(".oui-icon").length).toBe(1);
  });
  it("should change size when prop is passed", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      iconName: "add",
      size: "large"
    }));
    expect(component.find(".oui-button-icon__large").length).toBe(1);
  });
  it("should set the title on the button when title is passed", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      iconName: "add",
      title: "add row"
    }));
    expect(component.getDOMNode().attributes.getNamedItem("title").value).toBe("add row");
  });
  it("should disable the button if isDisabled is true", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      iconName: "add",
      isDisabled: true
    }));
    expect(component.getDOMNode().attributes.getNamedItem("disabled").value).not.toBe(null);
  });
  it("should add a style when style prop is passed", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      iconName: "add",
      style: "danger"
    }));
    expect(component.find(".oui-button--danger").length).toBe(1);
  });
  it("should fill the icon when iconFill is supplied", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      iconName: "add",
      iconFill: "red"
    }));
    expect(component.find(".oui-icon").getDOMNode().attributes.getNamedItem("style").value).toContain("fill: ".concat(_accessibility.FILL_COLOR_MAP["red"]));
  });
  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,
      iconName: "add"
    }));
    component.simulate("click");
    expect(onClickSpy).toHaveBeenCalled();
  });
  it("should not call the onClick function if button isDisabled", function () {
    var onClickSpy = jest.fn();
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      iconName: "add",
      isDisabled: true,
      onClick: onClickSpy
    }));
    component.simulate("click");
    expect(onClickSpy).not.toHaveBeenCalled();
  });
  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",
        iconName: "add"
      }));
      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",
        iconName: "add"
      }));
      expect(component).toHaveProp({
        unknownProp: "some value"
      });
    });
  });
});