@roo-ui/components
Version:
566 lines (436 loc) • 20.1 kB
JavaScript
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 }));
});
});
});
});
;