@momentum-ui/react/src/lib/DatePicker/tests/index.spec.js

Cisco Momentum UI framework for ReactJs applications

import React from 'react';
import { mount, shallow } from 'enzyme';
import DatePicker from '../index';
import moment from 'moment-timezone';

describe('tests for <DatePicker />', () => {
  const TEST_DATE = '2018-04-01';
  let day;

  beforeAll(() => {
    // setting timezone to CST
    moment.tz.setDefault('Asia/Kolkata');
    day = moment(TEST_DATE);
  });

  afterAll(() => {
    moment.tz.setDefault();
  });

  it("should show the calendar when focusing on the date input", () => {
    const container = shallow(
      <DatePicker selectedDate={day.toDate()}>
        <div className="trigger">Select Date</div>
      </DatePicker>
    );
    expect(container).toMatchSnapshot();
  });

  it("should focus/select the selectedDate day if passed", () => {
    const container = mount(
      <DatePicker selectedDate={day.toDate()}>
        <div className="trigger">Select Date</div>
      </DatePicker>
    );

    container.find('.trigger').simulate('click');
    expect(container.find('.md-button.md-datepicker__day--focus').text()).toEqual("1");
    expect(container.find('.md-button.md-datepicker__day--selected').text()).toEqual("1");
  });

  it("on press of enter should select the date", () => {
    const container = mount(
      <DatePicker selectedDate={day.toDate()} shouldCloseOnSelect={false}>
        <div className="trigger">Select Date</div>
      </DatePicker>
    );
    container.find('.trigger').simulate('click');
    container.find('.md-button.md-datepicker__day--focus').simulate('click');
    expect(container.find('.md-button.md-datepicker__day--selected').text()).toEqual("1");
  });

  it("when shouldCloseOnSelect is true should close the DatePicker", () => {
    const container = mount(
      <DatePicker selectedDate={day.toDate()} shouldCloseOnSelect={true}>
        <div className="trigger">Select Date</div>
      </DatePicker>
    );
    container.find('.trigger').simulate('click');
    container.find('.md-button.md-datepicker__day--focus').simulate('click');
    expect(container.find('.md-event-overlay__children').length).toEqual(0);
  });

  it("should handle keyBoard keys", () => {
    const container = mount(
      <DatePicker selectedDate={day.toDate()} shouldCloseOnSelect={false}>
        <div className="trigger">Select Date</div>
      </DatePicker>
    );
    container.find('.trigger').simulate('click');
    // right
    container.find('.trigger').simulate('keydown', { which: 39 });
    expect(container.find('.md-button.md-datepicker__day--focus').text()).toEqual("2");
    // down
    container.find('.trigger').simulate('keydown', { which: 40 });
    expect(container.find('.md-button.md-datepicker__day--focus').text()).toEqual("9");
    // up
    container.find('.trigger').simulate('keydown', { which: 38 });
    expect(container.find('.md-button.md-datepicker__day--focus').text()).toEqual("2");
    // left
    container.find('.trigger').simulate('keydown', { which: 37 });
    expect(container.find('.md-button.md-datepicker__day--focus').text()).toEqual("1");

    container.find('.trigger').simulate('keydown', { which: 13 });
    expect(container.find('.md-button.md-datepicker__day--selected').text()).toEqual("1");
  });

  it("onSelect/onChange callback should be called when a date is clicked", () => {
    let selectedDate;
    let changedDate;
    const onSelectFn = jest.fn((e, date) => selectedDate = date);
    const onChangeFn = jest.fn((e, date) => changedDate = date);
    const container = mount(
      <DatePicker
        selectedDate={day.toDate()}
        onSelect={onSelectFn}
        onChange={onChangeFn}
      >
        <div className="trigger">Select Date</div>
      </DatePicker>
    );
    container.find('.trigger').simulate('click');
    container.find('.md-button.md-datepicker__day--focus').simulate('click');
    expect(onSelectFn).toHaveBeenCalled();
    expect(onChangeFn).toHaveBeenCalled();

    expect(selectedDate).toEqual(day.toDate());
    expect(changedDate).toEqual(day.toDate());
  });

  it("onChange callback should be called when a focused date changes", () => {
    let changedDate;
    const onChangeFn = jest.fn((e, date) => changedDate = date);
    const container = mount(
      <DatePicker selectedDate={day.toDate()} onChange={onChangeFn}>
        <div className="trigger">Select Date</div>
      </DatePicker>
    );
    container.find('.trigger').simulate('click');
    //right
    container.find('.trigger').simulate('keydown', { which: 39 });
    expect(container.find('.md-button.md-datepicker__day--focus').text()).toEqual("2");

    expect(onChangeFn).toHaveBeenCalled();
    expect(changedDate).toEqual(day.clone().add(1, 'day').toDate());
  });

  it("onMonthChange callback should be called when a month switch happens", () => {
    let changedDate;
    const onMonthChangeFn = jest.fn((e, date) => changedDate = date);
    const container = mount(
      <DatePicker selectedDate={day.toDate()} onMonthChange={onMonthChangeFn}>
        <div className="trigger">Select Date</div>
      </DatePicker>
    );
    container.find('.trigger').simulate('click');
    //next month
    container.find('.md-button.md-button--icon').at(1)
      .simulate('click');
    expect(changedDate).toEqual(day.clone().add(1, 'month').toDate());
    expect(onMonthChangeFn).toHaveBeenCalledTimes(1);

    //prev month
    container.find('.md-button.md-button--icon').at(0)
      .simulate('click');
    expect(changedDate).toEqual(day.toDate());
    expect(onMonthChangeFn).toHaveBeenCalledTimes(2);
  });

  it('on click outside, should close the DatePicker', () => {
    const container = mount(
      <DatePicker selectedDate={day.toDate()}>
        <div className="trigger">Select Date</div>
      </DatePicker>
    );
    container.find('.trigger').simulate('click');
    expect(container.find('.md-event-overlay')).toHaveLength(1);

    // Dispatch click outside Event
    const evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", false, true);
    document.dispatchEvent(evt);

    container.update();
    expect(container.find('.md-event-overlay')).toHaveLength(0);
  });

  it('should selectedDate if valid, after the DatePicker is loaded', () => {
    /* eslint-disable react/no-multi-comp */
    class Container extends React.Component {
      state = {
        date: false
      };
      render() {
        const { date } = this.state;
        return (
          <DatePicker selectedDate={date || day.toDate()}>
            <div className="trigger">Select Date</div>
          </DatePicker>
        );
      }
    }
    /* eslint-enable react/no-multi-comp */
    const container = mount(<Container />);
    container.find('.trigger').simulate('click');
    expect(container.find('.md-button.md-datepicker__day--focus').text()).toEqual("1");
    expect(container.find('.md-button.md-datepicker__day--selected').text()).toEqual("1");


    container.setState({ date: day.clone().add(1, 'day').toDate() });
    container.update();
    expect(container.find('.md-button.md-datepicker__day--focus').text()).toEqual("2");
    expect(container.find('.md-button.md-datepicker__day--selected').text()).toEqual("2");
  });

});