UNPKG

@roo-ui/components

Version:

566 lines (436 loc) 20.1 kB
'use strict'; var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _dateFns = require('date-fns'); var _range = require('lodash/range'); var _range2 = _interopRequireDefault(_range); var _themes = require('@roo-ui/themes'); var _testUtils = require('@roo-ui/test-utils'); var _DateRangePicker = require('./DateRangePicker'); var _DateRangePicker2 = _interopRequireDefault(_DateRangePicker); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } describe('<DateRangePicker />', function () { var wrapper = void 0; var props = { minDate: (0, _dateFns.parse)('2018-07-01'), maxDate: (0, _dateFns.parse)('2018-07-31'), onRangeSelected: 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.startDate = args.startDate || null; props.endDate = args.endDate || null; props.setStartDate = args.setStartDate || false; props.setEndDate = args.setEndDate || false; wrapper = (0, _testUtils.mountWithTheme)(_react2.default.createElement(_DateRangePicker2.default, props), _themes.qantas); }; describe('disabledDates', function () { beforeEach(function () { setup(); }); it('disables dates in disabledDates array', function () { var date4 = wrapper.find('CalendarDay').at(3); var date5 = wrapper.find('CalendarDay').at(4); expect(date4.props()).toEqual(expect.objectContaining({ selected: false, selectable: false, disabled: true })); expect(date5.props()).toEqual(expect.objectContaining({ selected: false, selectable: false, disabled: true })); }); it('does not disable other dates', function () { var date3 = wrapper.find('CalendarDay').at(2); var date6 = wrapper.find('CalendarDay').at(5); expect(date3.props()).not.toEqual(expect.objectContaining({ disabled: true })); expect(date6.props()).not.toEqual(expect.objectContaining({ disabled: true })); }); }); describe('preselected range', function () { var startDate = (0, _dateFns.parse)('2018-07-15'); var endDate = (0, _dateFns.parse)('2018-07-20'); beforeEach(function () { setup({ startDate: startDate, endDate: endDate }); }); it('highlights dates in range', function () { (0, _range2.default)(15, 18).forEach(function (index) { var date = wrapper.find('CalendarDay').at(index); expect(date.props()).toEqual(expect.objectContaining({ highlighted: true })); }); }); it('selects start & end dates', function () { var day15 = wrapper.find('CalendarDay').at(14); var day20 = wrapper.find('CalendarDay').at(19); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); expect(day20.props()).toEqual(expect.objectContaining({ selected: true })); }); }); describe('when only start date is set', function () { var startDate = (0, _dateFns.parse)('2018-07-15'); describe('with setStartDate is false', function () { var setStartDate = false; beforeEach(function () { setup({ startDate: startDate, setStartDate: setStartDate }); }); it('selects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); describe('with mouse on a past date', function () { var hoverdDate = void 0; beforeEach(function () { hoverdDate = wrapper.find('CalendarDay').at(11); hoverdDate.simulate('mouseEnter'); wrapper.update(); }); it('selects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); it('does not highlight range', function () { var date13 = wrapper.find('CalendarDay').at(12); var date14 = wrapper.find('CalendarDay').at(13); expect(date13.props()).not.toEqual(expect.objectContaining({ highlighted: true })); expect(date14.props()).not.toEqual(expect.objectContaining({ highlighted: true })); }); }); describe('when click on a past date', function () { var newClickedDate = void 0; beforeEach(function () { wrapper.find('CalendarDay').at(11).find('button').simulate('click'); wrapper.update(); newClickedDate = wrapper.find('CalendarDay').at(11); }); it('deselects original start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).not.toEqual(expect.objectContaining({ selected: true })); }); it('selects the new start date', function () { expect(newClickedDate.props()).toEqual(expect.objectContaining({ selected: true })); }); }); describe('with mouse on a future date', function () { var date18 = void 0; beforeEach(function () { date18 = wrapper.find('CalendarDay').at(17); date18.find('button').simulate('mouseEnter'); wrapper.update(); }); it('selects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); it('highlights the range', function () { var date16 = wrapper.find('CalendarDay').at(15); var date17 = wrapper.find('CalendarDay').at(16); expect(date16.props()).toEqual(expect.objectContaining({ highlighted: true })); expect(date17.props()).toEqual(expect.objectContaining({ highlighted: true })); }); }); describe('when click on a future date', function () { var date18 = void 0; beforeEach(function () { wrapper.find('CalendarDay').at(17).find('button').simulate('click'); wrapper.update(); date18 = wrapper.find('CalendarDay').at(17); }); it('selects original start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); it('selects the new start date', function () { expect(date18.props()).toEqual(expect.objectContaining({ selected: true })); }); it('highlights the range', function () { var date16 = wrapper.find('CalendarDay').at(15); var date17 = wrapper.find('CalendarDay').at(16); expect(date16.props()).toEqual(expect.objectContaining({ highlighted: true })); expect(date17.props()).toEqual(expect.objectContaining({ highlighted: true })); }); }); }); describe('with setStartDate is true', function () { var setStartDate = true; beforeEach(function () { setup({ startDate: startDate, setStartDate: setStartDate }); }); it('selects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); describe('with mouse on a past date', function () { var hoverdDate = void 0; beforeEach(function () { hoverdDate = wrapper.find('CalendarDay').at(11); hoverdDate.simulate('mouseEnter'); wrapper.update(); }); it('selects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); it('does not highlight range', function () { var date13 = wrapper.find('CalendarDay').at(12); var date14 = wrapper.find('CalendarDay').at(13); expect(date13.props()).not.toEqual(expect.objectContaining({ highlighted: true })); expect(date14.props()).not.toEqual(expect.objectContaining({ highlighted: true })); }); }); describe('when click on a past date', function () { var newClickedDate = void 0; beforeEach(function () { wrapper.find('CalendarDay').at(11).find('button').simulate('click'); wrapper.update(); newClickedDate = wrapper.find('CalendarDay').at(11); }); it('deselects original start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).not.toEqual(expect.objectContaining({ selected: true })); }); it('selects the new start date', function () { expect(newClickedDate.props()).toEqual(expect.objectContaining({ selected: true })); }); }); describe('with mouse on a future date', function () { var date18 = void 0; beforeEach(function () { date18 = wrapper.find('CalendarDay').at(17); date18.find('button').simulate('mouseEnter'); wrapper.update(); }); it('selects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); it('does not highlight the range', function () { var date16 = wrapper.find('CalendarDay').at(15); var date17 = wrapper.find('CalendarDay').at(16); expect(date16.props()).not.toEqual(expect.objectContaining({ highlighted: true })); expect(date17.props()).not.toEqual(expect.objectContaining({ highlighted: true })); }); }); describe('when click on a future date', function () { var date18 = void 0; beforeEach(function () { wrapper.find('CalendarDay').at(17).find('button').simulate('click'); wrapper.update(); date18 = wrapper.find('CalendarDay').at(17); }); it('deselects original start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).not.toEqual(expect.objectContaining({ selected: true })); }); it('selects the new start date', function () { expect(date18.props()).toEqual(expect.objectContaining({ selected: true })); }); it('does not highlight the range', function () { var date16 = wrapper.find('CalendarDay').at(15); var date17 = wrapper.find('CalendarDay').at(16); expect(date16.props()).not.toEqual(expect.objectContaining({ highlighted: true })); expect(date17.props()).not.toEqual(expect.objectContaining({ highlighted: true })); }); }); }); describe('with setEndDate is true', function () { var setEndDate = true; beforeEach(function () { setup({ startDate: startDate, setEndDate: setEndDate }); }); it('selects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); describe('with mouse on a past date', function () { var hoverdDate = void 0; beforeEach(function () { hoverdDate = wrapper.find('CalendarDay').at(11); hoverdDate.simulate('mouseEnter'); wrapper.update(); }); it('selects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); it('does not highlight range', function () { var date13 = wrapper.find('CalendarDay').at(12); var date14 = wrapper.find('CalendarDay').at(13); expect(date13.props()).not.toEqual(expect.objectContaining({ highlighted: true })); expect(date14.props()).not.toEqual(expect.objectContaining({ highlighted: true })); }); }); describe('when click on a past date', function () { var newClickedDate = void 0; beforeEach(function () { wrapper.find('CalendarDay').at(11).find('button').simulate('click'); wrapper.update(); newClickedDate = wrapper.find('CalendarDay').at(11); }); it('deselects original start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).not.toEqual(expect.objectContaining({ selected: true })); }); it('selects the new start date', function () { expect(newClickedDate.props()).toEqual(expect.objectContaining({ selected: true })); }); }); describe('with mouse on a future date', function () { var date18 = void 0; beforeEach(function () { date18 = wrapper.find('CalendarDay').at(17); date18.find('button').simulate('mouseEnter'); wrapper.update(); }); it('selects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); it('highlights the range', function () { var date16 = wrapper.find('CalendarDay').at(15); var date17 = wrapper.find('CalendarDay').at(16); expect(date16.props()).toEqual(expect.objectContaining({ highlighted: true })); expect(date17.props()).toEqual(expect.objectContaining({ highlighted: true })); }); }); describe('when click on a future date', function () { var date18 = void 0; beforeEach(function () { wrapper.find('CalendarDay').at(17).find('button').simulate('click'); wrapper.update(); date18 = wrapper.find('CalendarDay').at(17); }); it('selects original start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); it('selects the new start date', function () { expect(date18.props()).toEqual(expect.objectContaining({ selected: true })); }); it('highlights the range', function () { var date16 = wrapper.find('CalendarDay').at(15); var date17 = wrapper.find('CalendarDay').at(16); expect(date16.props()).toEqual(expect.objectContaining({ highlighted: true })); expect(date17.props()).toEqual(expect.objectContaining({ highlighted: true })); }); }); }); }); describe('when start date & end date are set', function () { var startDate = (0, _dateFns.parse)('2018-07-15'); var endDate = (0, _dateFns.parse)('2018-07-20'); describe('with setStartDate is true', function () { var setStartDate = true; beforeEach(function () { setup({ startDate: startDate, endDate: endDate, setStartDate: setStartDate }); }); describe('when click on a date < endDate', function () { var newClickedDate = void 0; beforeEach(function () { wrapper.find('CalendarDay').at(11).find('button').simulate('click'); wrapper.update(); newClickedDate = wrapper.find('CalendarDay').at(11); }); it('deselects original start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).not.toEqual(expect.objectContaining({ selected: true })); }); it('selects the new start date', function () { expect(newClickedDate.props()).toEqual(expect.objectContaining({ selected: true })); }); it('keeps end date selected', function () { var day20 = wrapper.find('CalendarDay').at(19); expect(day20.props()).toEqual(expect.objectContaining({ selected: true })); }); }); describe('when click on a date > endDate', function () { var newClickedDate = void 0; beforeEach(function () { wrapper.find('CalendarDay').at(22).find('button').simulate('click'); wrapper.update(); newClickedDate = wrapper.find('CalendarDay').at(22); }); it('deselects original start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).not.toEqual(expect.objectContaining({ selected: true })); }); it('selects the new start date', function () { expect(newClickedDate.props()).toEqual(expect.objectContaining({ selected: true })); }); it('deselects end date', function () { var day20 = wrapper.find('CalendarDay').at(19); expect(day20.props()).not.toEqual(expect.objectContaining({ selected: true })); }); }); }); describe('with setEndDate is true', function () { var setEndDate = true; beforeEach(function () { setup({ startDate: startDate, endDate: endDate, setEndDate: setEndDate }); }); describe('when click on a date > startDate', function () { var newClickedDate = void 0; beforeEach(function () { wrapper.find('CalendarDay').at(17).find('button').simulate('click'); wrapper.update(); newClickedDate = wrapper.find('CalendarDay').at(17); }); it('keeps start date selected', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).toEqual(expect.objectContaining({ selected: true })); }); it('selects the new end date', function () { expect(newClickedDate.props()).toEqual(expect.objectContaining({ selected: true })); }); it('deselects end date', function () { var day20 = wrapper.find('CalendarDay').at(19); expect(day20.props()).not.toEqual(expect.objectContaining({ selected: true })); }); }); describe('when click on a date < startDate', function () { var newClickedDate = void 0; beforeEach(function () { wrapper.find('CalendarDay').at(11).find('button').simulate('click'); wrapper.update(); newClickedDate = wrapper.find('CalendarDay').at(11); }); it('deselects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).not.toEqual(expect.objectContaining({ selected: true })); }); it('selects the new start date', function () { expect(newClickedDate.props()).toEqual(expect.objectContaining({ selected: true })); }); it('deselects endDate', function () { var day20 = wrapper.find('CalendarDay').at(19); expect(day20.props()).not.toEqual(expect.objectContaining({ selected: true })); }); }); }); describe('with setStartDate is false and setEndDate is false', function () { var newClickedDate = void 0; beforeEach(function () { setup({ startDate: startDate, endDate: endDate }); wrapper.find('CalendarDay').at(22).find('button').simulate('click'); wrapper.update(); newClickedDate = wrapper.find('CalendarDay').at(22); }); it('deselects start date', function () { var day15 = wrapper.find('CalendarDay').at(14); expect(day15.props()).not.toEqual(expect.objectContaining({ selected: true })); }); it('selects the new start date', function () { expect(newClickedDate.props()).toEqual(expect.objectContaining({ selected: true })); }); it('deselects endDate', function () { var day20 = wrapper.find('CalendarDay').at(19); expect(day20.props()).not.toEqual(expect.objectContaining({ selected: true })); }); }); }); });