mx-react-toaster/src/alert-container/AlertContainer.spec.js

A simple react toaster component

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactTestRenderer = require('react-test-renderer');

var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);

var _enzyme = require('enzyme');

var _AlertContainer = require('./AlertContainer');

var _AlertContainer2 = _interopRequireDefault(_AlertContainer);

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

describe('AlertContainer', function () {
  test('should set its position based on the given position prop', function () {
    var props = {
      position: 'top left'
    };
    var component = _reactTestRenderer2.default.create(_react2.default.createElement(_AlertContainer2.default, props));

    var tree = component.toJSON();
    expect(tree).toMatchSnapshot();

    props = {
      position: 'top right'
    };
    component = _reactTestRenderer2.default.create(_react2.default.createElement(_AlertContainer2.default, props));

    tree = component.toJSON();
    expect(tree).toMatchSnapshot();

    props = {
      position: 'bottom right'
    };
    component = _reactTestRenderer2.default.create(_react2.default.createElement(_AlertContainer2.default, props));

    tree = component.toJSON();
    expect(tree).toMatchSnapshot();

    props = {
      position: 'bottom left'
    };
    component = _reactTestRenderer2.default.create(_react2.default.createElement(_AlertContainer2.default, props));

    tree = component.toJSON();
    expect(tree).toMatchSnapshot();

    props = {
      position: 'top center'
    };
    component = _reactTestRenderer2.default.create(_react2.default.createElement(_AlertContainer2.default, props));

    tree = component.toJSON();
    expect(tree).toMatchSnapshot();

    props = {
      position: 'bottom center'
    };
    component = _reactTestRenderer2.default.create(_react2.default.createElement(_AlertContainer2.default, props));

    tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });

  describe('show', function () {
    test('should be called on each type method call', function () {
      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_AlertContainer2.default, null));
      var instance = wrapper.instance();
      instance.show = jest.fn();

      instance.success('Some message');
      instance.info('Some message');
      instance.error('Some message');

      expect(instance.show).toHaveBeenCalledTimes(3);
      expect(instance.show.mock.calls[0][0]).toBe('Some message');
      expect(instance.show.mock.calls[0][1]).toEqual({ type: 'success' });
      expect(instance.show.mock.calls[1][0]).toBe('Some message');
      expect(instance.show.mock.calls[1][1]).toEqual({ type: 'info' });
      expect(instance.show.mock.calls[2][0]).toBe('Some message');
      expect(instance.show.mock.calls[2][1]).toEqual({ type: 'error' });
    });

    test('should add an alert object to state', function () {
      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_AlertContainer2.default, null));
      var instance = wrapper.instance();

      expect(instance.state.alerts).toHaveLength(0);
      instance.show('Some message');
      expect(instance.state.alerts).toHaveLength(1);
    });

    test('should be called with default method params', function () {
      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_AlertContainer2.default, null));
      var instance = wrapper.instance();
      instance.show = jest.fn();

      instance.success();
      instance.info();
      instance.error();

      expect(instance.show).toHaveBeenCalledTimes(3);
      expect(instance.show.mock.calls[0][0]).toBe('');
      expect(instance.show.mock.calls[0][1]).toEqual({ type: 'success' });
      expect(instance.show.mock.calls[1][0]).toBe('');
      expect(instance.show.mock.calls[1][1]).toEqual({ type: 'info' });
      expect(instance.show.mock.calls[2][0]).toBe('');
      expect(instance.show.mock.calls[2][1]).toEqual({ type: 'error' });
    });

    test('should work with default options', function () {
      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_AlertContainer2.default, null));
      var instance = wrapper.instance();

      instance.show();
      expect(instance.state.alerts[0].id).toBeDefined();
      expect(instance.state.alerts[0].message).toBe('');
      expect(instance.state.alerts[0].time).toBe(5000);
      expect(instance.state.alerts[0].theme).toBe('dark');
    });

    test('should work with custom options', function () {
      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_AlertContainer2.default, { time: 123, theme: 'light' }));
      var instance = wrapper.instance();

      instance.show('custom message', { foo: 1, bar: 2 });
      expect(instance.state.alerts[0].id).toBeDefined();
      expect(instance.state.alerts[0].message).toBe('custom message');
      expect(instance.state.alerts[0].time).toBe(123);
      expect(instance.state.alerts[0].theme).toBe('light');
      expect(instance.state.alerts[0].foo).toBe(1);
      expect(instance.state.alerts[0].bar).toBe(2);
    });
  });

  describe('removeAll', function () {
    test('should remove all alerts from state, calling onClose function', function () {
      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_AlertContainer2.default, null));
      var instance = wrapper.instance();
      var onCloseFn1 = jest.fn();
      var onCloseFn2 = jest.fn();

      expect(instance.state.alerts).toHaveLength(0);
      instance.show('Some message', { onClose: onCloseFn1 });
      instance.show('Some message', { onClose: onCloseFn2 });
      expect(instance.state.alerts).toHaveLength(2);
      instance.removeAll();
      expect(instance.state.alerts).toHaveLength(0);
      expect(onCloseFn1).toHaveBeenCalled();
      expect(onCloseFn2).toHaveBeenCalled();
    });
  });

  describe('removeAlert', function () {
    test('should remove a given alert from state', function () {
      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_AlertContainer2.default, null));
      var instance = wrapper.instance();
      var onCloseFn = jest.fn();

      expect(instance.state.alerts).toHaveLength(0);
      instance.show('Some message', { onClose: onCloseFn });
      expect(instance.state.alerts).toHaveLength(1);
      instance.removeAlert(instance.state.alerts[0].id);
      expect(instance.state.alerts).toHaveLength(0);
      expect(onCloseFn).toHaveBeenCalled();
    });

    test('should not call close function if alert is manually closed', function () {
      var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_AlertContainer2.default, null));
      var instance = wrapper.instance();
      var onCloseFn = jest.fn();

      expect(instance.state.alerts).toHaveLength(0);
      instance.show('Some message', { onClose: onCloseFn });
      expect(instance.state.alerts).toHaveLength(1);
      instance.removeAlert(instance.state.alerts[0].id);

      onCloseFn.mockReset();

      instance.removeAlert('deleted id');
      expect(instance.state.alerts).toHaveLength(0);
      expect(onCloseFn).not.toHaveBeenCalled();
    });
  });
});