react-ions/lib/components/Alerts/__tests__/Alert.test.js

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

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Alert = require('../Alert');

var _Alert2 = _interopRequireDefault(_Alert);

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

describe('Alert', function () {
  describe('render', function () {
    it('should render a default alert (success)', function () {
      expect(shallow(_react2.default.createElement(
        _Alert2.default,
        { timeout: 5000 },
        'Test alert'
      ))).toMatchSnapshot();
    });

    it('should render a success alert', function () {
      expect(shallow(_react2.default.createElement(
        _Alert2.default,
        { type: 'success', timeout: 5000 },
        'Test alert'
      ))).toMatchSnapshot();
    });

    it('should render a warning alert', function () {
      expect(shallow(_react2.default.createElement(
        _Alert2.default,
        { type: 'warning', timeout: 5000 },
        'Test alert'
      ))).toMatchSnapshot();
    });

    it('should render an info alert', function () {
      expect(shallow(_react2.default.createElement(
        _Alert2.default,
        { type: 'info', timeout: 5000 },
        'Test alert'
      ))).toMatchSnapshot();
    });

    it('should render a danger alert', function () {
      expect(shallow(_react2.default.createElement(
        _Alert2.default,
        { type: 'danger', timeout: 5000 },
        'Test alert'
      ))).toMatchSnapshot();
    });

    it('should not render the countdown bar if countdownBar prop is set to false', function () {
      expect(shallow(_react2.default.createElement(
        _Alert2.default,
        { type: 'success', timeout: 5000, countdownBar: false },
        'Test alert'
      ))).toMatchSnapshot();
    });

    it('should not render the countdown bar if timeout prop is not provided', function () {
      expect(shallow(_react2.default.createElement(
        _Alert2.default,
        null,
        'Test alert'
      ))).toMatchSnapshot();
    });
  });

  describe('componentDidMount', function () {
    it('should start the timer when mounted', function () {
      var inst = shallow(_react2.default.createElement(
        _Alert2.default,
        null,
        'Test alert'
      )).instance();
      var startTimer = sinon.spy(inst, 'startTimer');

      inst.componentDidMount();
      expect(startTimer.calledOnce).toBe.true;
    });
  });

  describe('startTimer', function () {
    it('should not start the timer if the timeout prop is not provided', function () {
      var wrapper = shallow(_react2.default.createElement(
        _Alert2.default,
        null,
        'Test alert'
      ));
      var state = wrapper.state();

      wrapper.instance().startTimer();
      expect(wrapper.state()).toEqual(state);
    });

    it('should start the timer if the timeout prop is provided', function () {
      var clock = sinon.useFakeTimers();
      var wrapper = shallow(_react2.default.createElement(
        _Alert2.default,
        { timeout: 5000 },
        'Test alert'
      ));
      var inst = wrapper.instance();
      var closeAlert = sinon.spy(inst, 'closeAlert');
      var state = wrapper.state();

      inst.startTimer();
      var updatedState = wrapper.state();
      expect(updatedState).not.toEqual(state);
      expect(updatedState).toMatchSnapshot();

      clock.tick(5000);
      expect(closeAlert.calledOnce).toBe.true;

      clock.restore();
    });
  });

  describe('pauseTimer', function () {
    it('should not do anything if timer is not set in state', function () {
      var wrapper = shallow(_react2.default.createElement(
        _Alert2.default,
        null,
        'Test alert'
      ));
      var state = wrapper.state();

      wrapper.instance().pauseTimer();
      expect(wrapper.state()).toEqual(state);
    });

    it('should pause the timer if timer is set in state', function () {
      var clock = sinon.useFakeTimers();
      var clearTimeout = sinon.spy(clock, 'clearTimeout');
      var wrapper = shallow(_react2.default.createElement(
        _Alert2.default,
        { timeout: 5000 },
        'Test alert'
      ));
      var inst = wrapper.instance();
      var state = wrapper.state();

      clock.tick(2000);

      inst.pauseTimer();
      var updatedState = wrapper.state();
      expect(updatedState).not.toEqual(state);
      expect(updatedState).toMatchSnapshot();

      expect(clearTimeout.calledOnce).toBe.true;

      clock.restore();
    });
  });

  describe('closeAlert', function () {
    it('should not call clearTimeout if timer is not set in state', function () {
      var clock = sinon.useFakeTimers();
      var clearTimeout = sinon.spy(clock, 'clearTimeout');
      var inst = shallow(_react2.default.createElement(
        _Alert2.default,
        null,
        'Test alert'
      )).instance();

      inst.closeAlert();

      expect(clearTimeout.called).toBe.false;

      clock.restore();
    });

    it('should call clearTimeout if timer is set in state', function () {
      var clock = sinon.useFakeTimers();
      var clearTimeout = sinon.spy(clock, 'clearTimeout');
      var inst = shallow(_react2.default.createElement(
        _Alert2.default,
        { timeout: 5000 },
        'Test alert'
      )).instance();

      inst.closeAlert();

      expect(clearTimeout.calledOnce).toBe.true;

      clock.restore();
    });

    it('should call the onClose prop if provided', function () {
      var clock = sinon.useFakeTimers();
      var clearTimeout = sinon.spy(clock, 'clearTimeout');
      var onClose = sinon.spy();
      var inst = shallow(_react2.default.createElement(
        _Alert2.default,
        { timeout: 5000, onClose: onClose },
        'Test alert'
      )).instance();

      inst.closeAlert();

      expect(clearTimeout.calledOnce).toBe.true;
      expect(onClose.calledOnce).toBe.true;

      clock.restore();
    });
  });
});