react-toastify/src/__tests__/Toast.js

React notification made easy

/* eslint-env jest */
import React from 'react';
import { shallow, mount } from 'enzyme';

import Toast from './../components/Toast';
import ToastContainer from './../components/ToastContainer';
import CloseButton from './../components/CloseButton';
import ProgressBar from './../components/ProgressBar';

const REQUIRED_PROPS = {
  ...ToastContainer.defaultProps,
  closeToast: () => {},
  isDocumentHidden: false,
  type: 'default'
};

describe('Toast', () => {
  it('Should merge container and body className', () => {
    const component = shallow(
      <Toast
        {...REQUIRED_PROPS}
        autoClose={false}
        className="container-class"
        bodyClassName="body-class"
      >
        FooBar
      </Toast>
    );

    expect(component.find('.container-class')).toHaveLength(1);
    expect(component.find('.body-class')).toHaveLength(1);
  });

  it('Should support Rtl display', () => {
    const component = shallow(
      <Toast {...REQUIRED_PROPS} autoClose={false} rtl>
        FooBar
      </Toast>
    );

    expect(component).toMatchSnapshot();
  });

  it('Should not render ProgressBar if autoClose prop is set to false', () => {
    const component = shallow(
      <Toast {...REQUIRED_PROPS} autoClose={false}>
        FooBar
      </Toast>
    );

    expect(component.children().find(ProgressBar).length).toBe(0);
  });

  it('Should not render closeButton if closeButton prop is set to false', () => {
    const component = shallow(
      <Toast {...REQUIRED_PROPS} closeButton={false}>
        FooBar
      </Toast>
    );

    expect(component.children().find(CloseButton).length).toBe(0);
  });

  it('Can call onOpen callback when component mount', () => {
    const onOpen = jest.fn();
    mount(
      <Toast {...REQUIRED_PROPS} onOpen={onOpen}>
        FooBar
      </Toast>
    ).render();

    expect(onOpen).toHaveBeenCalled();
  });

  it('Can call onClose callback when component will unmount', () => {
    const onClose = jest.fn();
    const component = mount(
      <Toast {...REQUIRED_PROPS} onClose={onClose}>
        FooBar
      </Toast>
    );

    component.unmount();
    expect(onClose).toHaveBeenCalled();
  });

  it('Can pause toast delay on mouse enter', () => {
    const component = shallow(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);

    expect(component.instance().state.isRunning).toBeTruthy();
    component
      .find('div')
      .first()
      .simulate('mouseEnter');
    expect(component.instance().state.isRunning).toBeFalsy();
  });

  it('Can keep runing on mouse enter', () => {
    const component = shallow(
      <Toast {...REQUIRED_PROPS} pauseOnHover={false}>
        FooBar
      </Toast>
    );
    expect(component.state('isRunning')).toBeTruthy();
    component
      .find('div')
      .first()
      .simulate('mouseEnter');
    expect(component.state('isRunning')).toBeTruthy();
  });

  it('Should resume toast delay on mouse leave', () => {
    const component = shallow(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);

    expect(component.state('isRunning')).toBeTruthy();
    component
      .find('div')
      .first()
      .simulate('mouseEnter');
    expect(component.state('isRunning')).toBeFalsy();
    component
      .find('div')
      .first()
      .simulate('mouseLeave');
    expect(component.state('isRunning')).toBeTruthy();
  });

  it('Should not call setState if autoClose prop is false', () => {
    const component = shallow(
      <Toast {...REQUIRED_PROPS} autoClose={false}>
        FooBar
      </Toast>
    );
    expect(component.state('isRunning')).toBeTruthy();
    component.simulate('mouseEnter');
    expect(component.state('isRunning')).toBeTruthy();
  });

  it('Should pause Toast when document visibility change', () => {
    const component = mount(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);
    expect(component.state('isRunning')).toBe(true);
    component.setProps({ isDocumentHidden: true });
    expect(component.state('isRunning')).toBe(false);
  });

  describe('Drag event', () => {
    it('Should handle drag start on mousedown', () => {
      const events = {};
      document.addEventListener = (ev, cb) => (events[ev] = cb);
      const component = mount(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);
      expect(component.instance().flag.canDrag).toBe(false);
      component.simulate('mousedown');
      expect(component.instance().flag.canDrag).toBe(true);

      events.mouseup({
        targetTouches: {},
        clientX: 100
      });

      expect(component.instance().flag.canDrag).toBe(false);
    });

    it('Should handle drag start on touchstart', () => {
      const events = {};
      document.addEventListener = (ev, cb) => (events[ev] = cb);
      const component = mount(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);
      expect(component.instance().flag.canDrag).toBe(false);
      component.simulate('touchstart');
      expect(component.instance().flag.canDrag).toBe(true);

      events.touchend({
        targetTouches: [
          {
            clientX: 100
          }
        ]
      });

      expect(component.instance().flag.canDrag).toBe(false);
    });

    it('Should pause toast duration on drag move', () => {
      const events = {};
      document.addEventListener = (ev, cb) => (events[ev] = cb);
      const component = mount(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);

      expect(component.state('isRunning')).toBe(true);

      // to set flags
      component.simulate('mousedown');

      events.mousemove({
        targetTouches: {},
        clientX: 100
      });

      expect(component.state('isRunning')).toBe(false);
    });

    it('Should disable exit transition when removed while draging', () => {
      const events = {};
      document.addEventListener = (ev, cb) => (events[ev] = cb);
      const component = mount(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);

      expect(component.state('preventExitTransition')).toBe(false);

      // to set flags
      component.simulate('mousedown');

      // trigger toast removal
      component.instance().drag.deltaX = 1;
      component.instance().drag.removalDistance = 0;

      events.mouseup({
        targetTouches: {},
        clientX: 100
      });

      expect(component.state('preventExitTransition')).toBe(true);
    });

    it('Should prevent the timer from running on drag end if the mouse hover the toast', () => {
      const component = mount(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);

      expect(component.state('isRunning')).toBe(true);

      // simulate transition end
      component.instance().onDragTransitionEnd();

      expect(component.state('isRunning')).toBe(false);
    });

    it('Should resume the timer on drag end if the mouse is not hovering the toast', () => {
      const component = mount(<Toast {...REQUIRED_PROPS}>FooBar</Toast>);

      expect(component.state('isRunning')).toBe(true);

      // simulate transition end
      component.instance().drag.x = -1;
      component.instance().onDragTransitionEnd();

      expect(component.state('isRunning')).toBe(true);
    });
  });
});