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

"use strict";

var _react = _interopRequireDefault(require("react"));

var _parse = _interopRequireDefault(require("date-fns/parse"));

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

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

var _DatePicker = _interopRequireDefault(require("./DatePicker"));

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

describe('<DatePicker />', function () {
  var wrapper;
  var props = {
    date: (0, _parse.default)('2018-07-03'),
    minDate: (0, _parse.default)('2018-06-01'),
    maxDate: (0, _parse.default)('2018-08-20'),
    selected: (0, _parse.default)('2018-07-20'),
    onDateSelected: jest.fn(),
    monthsToDisplay: 1,
    stacked: true,
    weekdayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    disabledDates: [(0, _parse.default)('2018-07-04'), (0, _parse.default)('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)(_react.default.createElement(_DatePicker.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;
    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
        }));
      });
    });
  });
});