react-ions/lib/components/Button/__tests__/ButtonConfirmation.test.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _ButtonConfirmation = require('../ButtonConfirmation');

var _ButtonConfirmation2 = _interopRequireDefault(_ButtonConfirmation);

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

describe('ButtonConfirmation', function () {
  var wrapper = void 0,
      inst = void 0;

  beforeEach(function () {
    window.matchMedia = function () {
      return {
        addListener: sinon.spy(),
        removeListener: sinon.spy()
      };
    };
  });

  afterEach(function () {
    window.matchMedia = null;
  });

  describe('render', function () {
    it('displays confirmation button without prompt', function () {
      expect(mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        null,
        'Delete'
      ))).toMatchSnapshot();
    });

    it('handles collapse with confirmation button', function () {
      expect(mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        { collapse: true },
        'Delete'
      ))).toMatchSnapshot();
    });
  });

  describe('handleOpen', function () {
    it('handles opening and closing on the confirmation button', function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        { hasBeenOpened: true },
        'Delete'
      ));
      inst = wrapper.instance();

      inst.handleOpen();
      expect(wrapper.state().confirmationOverlayOpen).toBeTruthy();

      inst.handleOpen();
      expect(wrapper.state().confirmationOverlayOpen).toBeFalsy();
    });
  });

  describe('handleConfirmation', function () {
    it('handles confirmation on the confirmation button', function () {
      var handleConfirmation = sinon.spy();
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        { handleConfirmation: handleConfirmation },
        'Delete'
      ));
      wrapper.setState({ confirmationOverlayOpen: true });

      wrapper.instance().handleConfirmation();
      expect(wrapper.state().confirmationOverlayOpen).toBeFalsy();
      expect(handleConfirmation.called).toBeFalsy();
    });

    it('calls the handleConfirmation prop if it is a function and if true is passed to the method', function () {
      var handleConfirmation = sinon.spy();
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        { handleConfirmation: handleConfirmation },
        'Delete'
      ));
      wrapper.setState({ confirmationOverlayOpen: true });

      wrapper.instance().handleConfirmation(true);
      expect(wrapper.state().confirmationOverlayOpen).toBeFalsy();
      expect(handleConfirmation.called).toBeTruthy();
    });
  });

  describe('getStyles', function () {
    it('get styles on the confirmation button when position not passed', function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        null,
        'Delete'
      ));
      wrapper.setState({
        overlayWidth: 20,
        triggerWidth: 10
      });

      expect(wrapper.instance().getStyles()).toMatchSnapshot();
    });

    it('get styles on the confirmation button when position right', function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        { position: 'right' },
        'Delete'
      ));
      wrapper.setState({ confirmationOverlayOffset: 40 });

      expect(wrapper.instance().getStyles()).toMatchSnapshot();
    });

    it('get styles on the confirmation button when position left', function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        { position: 'left' },
        'Delete'
      ));
      wrapper.setState({ confirmationOverlayOffset: 40 });

      expect(wrapper.instance().getStyles()).toMatchSnapshot();
    });
  });

  describe('getCaretStyles', function () {
    it('get caret styles on the confirmation button when position not passed and is not wide', function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        null,
        'Delete'
      ));
      wrapper.setState({ wide: false });

      expect(wrapper.instance().getCaretStyles()).toMatchSnapshot();
    });

    it('get caret styles on the confirmation button when position not passed and is wide', function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        null,
        'Delete'
      ));
      wrapper.setState({ wide: true });

      expect(wrapper.instance().getCaretStyles()).toMatchSnapshot();
    });

    it('get caret styles on the confirmation button when position right', function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        { position: 'right' },
        'Delete'
      ));
      wrapper.setState({ triggerWidth: 40 });

      expect(wrapper.instance().getCaretStyles()).toMatchSnapshot();
    });

    it('get caret styles on the confirmation button when position left', function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        { position: 'left' },
        'Delete'
      ));
      wrapper.setState({ triggerWidth: 40 });

      expect(wrapper.instance().getCaretStyles()).toMatchSnapshot();
    });
  });

  describe('handleSetup', function () {
    it('handles setup on the confirmation button', function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        null,
        'Delete'
      ));
      wrapper.instance()._trigger = {
        children: [{
          getBoundingClientRect: function getBoundingClientRect() {
            return {
              width: 40
            };
          }
        }],
        querySelector: function querySelector() {
          return {
            getBoundingClientRect: function getBoundingClientRect() {
              return {
                width: 40
              };
            }
          };
        }
      };

      wrapper.instance().handleSetup();
      expect(wrapper.state().triggerWidth).toEqual(40);
      expect(wrapper.state().overlayWidth).toEqual(40);
    });
  });

  describe('handleWide', function () {
    it('handles wide on the confirmation button', function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        { prompt: 'This is a test.' },
        'Delete'
      ));
      inst = wrapper.instance();

      inst.handleWide();
      expect(wrapper.state().wide).toBeFalsy();

      wrapper.setProps({ prompt: 'This is a test that will make it wide' });
      wrapper.update();

      // Mocking handleSetup because it was already tested and requires a decent setup
      inst.handleSetup = sinon.spy();

      inst.handleWide();
      expect(wrapper.state().wide).toBeTruthy();
    });
  });

  describe('shouldComponentUpdate', function () {
    var state = void 0,
        shouldComponentUpdate = void 0;
    var props = {
      size: 'large',
      disabled: false,
      loading: false,
      collapse: false,
      optClass: 'test-class',
      onClick: function onClick() {},
      prompt: 'Test prompt'
    };

    beforeEach(function () {
      wrapper = mount(_react2.default.createElement(
        _ButtonConfirmation2.default,
        props,
        'Delete'
      ));
      state = wrapper.state();
      shouldComponentUpdate = wrapper.instance().shouldComponentUpdate;
    });

    it('does not update when props and state have not changed', function () {
      expect(shouldComponentUpdate(props, state)).toBeFalsy();
    });

    it('updates when loading is changed', function () {
      expect(shouldComponentUpdate(_extends({}, props, { loading: true }), state)).toBeTruthy();
    });

    it('updates when prompt is changed', function () {
      expect(shouldComponentUpdate(_extends({}, props, { prompt: 'New prompt' }), state)).toBeTruthy();
    });

    it('updates when confirmationOverlayOpen is changed', function () {
      expect(shouldComponentUpdate(props, _extends({}, state, { confirmationOverlayOpen: true }))).toBeTruthy();
    });

    it('updates when triggerWidth is changed', function () {
      expect(shouldComponentUpdate(props, _extends({}, state, { triggerWidth: 10 }))).toBeTruthy();
    });

    it('updates when overlayWidth is changed', function () {
      expect(shouldComponentUpdate(props, _extends({}, state, { overlayWidth: 50 }))).toBeTruthy();
    });

    it('updates when wide is changed', function () {
      expect(shouldComponentUpdate(props, _extends({}, state, { wide: true }))).toBeTruthy();
    });
  });
});