@roo-ui/components/dist/DatePicker/DatePicker.test.js

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _dateFns = require('date-fns');

var _themes = require('@roo-ui/themes');

var _testUtils = require('@roo-ui/test-utils');

var _DatePicker = require('./DatePicker');

var _DatePicker2 = _interopRequireDefault(_DatePicker);

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

describe('<DatePicker />', function () {
  var wrapper = void 0;

  var props = {
    date: (0, _dateFns.parse)('2018-07-03'),
    minDate: (0, _dateFns.parse)('2018-06-01'),
    maxDate: (0, _dateFns.parse)('2018-08-20'),
    selected: (0, _dateFns.parse)('2018-07-20'),
    onDateSelected: jest.fn(),
    monthsToDisplay: 1,
    stacked: true,
    weekdayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    disabledDates: [(0, _dateFns.parse)('2018-07-04'), (0, _dateFns.parse)('2018-07-05')]
  };

  var setup = function setup() {
    var args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    props.interactiveDisabledDates = args.interactiveDisabledDates || false;
    wrapper = (0, _testUtils.mountWithTheme)(_react2.default.createElement(_DatePicker2.default, props), _themes.qantas);
  };

  describe('<Dayzed />', function () {
    beforeEach(function () {
      setup();
    });

    it('passes down props.monthsToDisplay', function () {
      expect(wrapper.find('Dayzed').prop('monthsToDisplay')).toEqual(props.monthsToDisplay);
    });

    it('assigns the rest of the props', function () {
      expect(wrapper.props()).toEqual(expect.objectContaining({
        date: props.date,
        minDate: props.minDate,
        maxDate: props.maxDate,
        selected: props.selected,
        onDateSelected: props.onDateSelected
      }));
    });
  });

  describe('<CalendarMonth />', function () {
    var calendarMonthWrapper = void 0;

    beforeEach(function () {
      setup();

      calendarMonthWrapper = wrapper.find('CalendarMonth');
    });

    it('passes the month name to each calendar month', function () {
      expect(calendarMonthWrapper.prop('monthName')).toEqual('Jul');
    });

    it('passes down props.stacked', function () {
      expect(calendarMonthWrapper.prop('stacked')).toEqual(props.stacked);
    });

    it('passes down props.monthsToDisplay', function () {
      expect(calendarMonthWrapper.prop('monthsToDisplay')).toEqual(props.monthsToDisplay);
    });
  });

  describe('<CalendarEmptyDay />', function () {
    beforeEach(function () {
      setup();
    });

    it('renders one for each empty day in the calendar month', function () {
      expect(wrapper.find('CalendarEmptyDay')).toHaveLength(11);
    });
  });

  describe('<CalendarDay />', function () {
    describe('renders correctly', function () {
      beforeEach(function () {
        setup();
      });

      it('it renders a day for each day in the month', function () {
        expect(wrapper.find('CalendarDay')).toHaveLength(31);
      });

      it('renders days as clickable elements', function () {
        var day = wrapper.find('CalendarDay').first();

        expect(day.props()).toEqual(expect.objectContaining({
          selectable: true,
          disabled: false
        }));
      });

      it('adds props.selected true when date is in props.selected', function () {
        var day19 = wrapper.find('CalendarDay').at(19);

        expect(day19.props()).toEqual(expect.objectContaining({
          selected: true
        }));
      });

      it('renders a disabled day when date is in props.disabledDates', function () {
        var day3 = wrapper.find('CalendarDay').at(3);
        var day4 = wrapper.find('CalendarDay').at(4);

        expect(day3.props()).toEqual(expect.objectContaining({
          selected: false,
          selectable: false,
          disabled: true
        }));

        expect(day4.props()).toEqual(expect.objectContaining({
          selected: false,
          selectable: false,
          disabled: true
        }));
      });
    });
  });
});