@roo-ui/components
Version:
669 lines (651 loc) • 25.5 kB
JavaScript
;
var _react = _interopRequireDefault(require("react"));
var _parse = _interopRequireDefault(require("date-fns/parse"));
var _format = _interopRequireDefault(require("date-fns/format"));
var _range = _interopRequireDefault(require("lodash/range"));
var _themes = require("@roo-ui/themes");
var _testUtils = require("@roo-ui/test-utils");
var _DateRangePicker = _interopRequireDefault(require("./DateRangePicker"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var dateToString = function dateToString(date) {
return (0, _format.default)(date, 'YYYY-MM-DD');
};
var rangeInclusive = function rangeInclusive() {
var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
return (0, _range.default)(start, end + 1);
};
var getDayOfMonth = function getDayOfMonth(wrapper, dayOfMonth) {
return wrapper.find('CalendarDay').at(dayOfMonth - 1);
};
describe('<DateRangePicker />', function () {
var wrapper;
var defaultProps = {
minDate: (0, _parse.default)('2018-07-01'),
onRangeSelected: 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] : {};
var props = _objectSpread({}, defaultProps, args);
wrapper = (0, _testUtils.mountWithTheme)(_react.default.createElement(_DateRangePicker.default, props), _themes.qantas);
};
describe('when initial dates are passed in', function () {
describe('and those dates are in the same month as the minDate', function () {
var initialStartDate = new Date('2018-07-15');
var initialEndDate = new Date('2018-07-20');
beforeEach(function () {
return setup({
initialStartDate: initialStartDate,
initialEndDate: initialEndDate
});
});
it('displays the correct month', function () {
var MonthWrapper = wrapper.find('MonthWrapper');
expect(MonthWrapper.find('Text').first().text()).toEqual('Jul 2018');
});
});
describe('and those dates are in advance of the minDate', function () {
var initialStartDate = new Date('2018-11-15');
var initialEndDate = new Date('2018-11-20');
beforeEach(function () {
return setup({
initialStartDate: initialStartDate,
initialEndDate: initialEndDate
});
});
it('displays the correct month', function () {
var MonthWrapper = wrapper.find('MonthWrapper');
expect(MonthWrapper.find('Text').first().text()).toEqual('Nov 2018');
});
});
});
describe('disabledDates', function () {
var initialStartDate = new Date('2018-07-15');
var initialEndDate = new Date('2018-07-20');
beforeEach(function () {
return setup({
initialStartDate: initialStartDate,
initialEndDate: initialEndDate
});
});
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 initialStartDate = (0, _parse.default)('2018-07-15');
var initialEndDate = (0, _parse.default)('2018-07-20');
beforeEach(function () {
setup({
initialStartDate: initialStartDate,
initialEndDate: initialEndDate
});
});
it('highlights dates in range', function () {
rangeInclusive(15, 20).forEach(function (index) {
var day = getDayOfMonth(wrapper, index);
expect(day.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('callbacks', function () {
var callback;
describe('when selecting three sequential days', function () {
beforeEach(function () {
callback = jest.fn();
var initialDisplayDate = (0, _parse.default)('2018-07-15');
setup({
initialDisplayDate: initialDisplayDate,
onChangeDates: callback
});
getDayOfMonth(wrapper, 1).find('button').simulate('click');
getDayOfMonth(wrapper, 2).find('button').simulate('click');
getDayOfMonth(wrapper, 3).find('button').simulate('click');
wrapper.update();
});
it('calls the callback three times', function () {
expect(callback).toHaveBeenCalledTimes(3);
});
it('calls the first callback with only the correct start date', function () {
expect(dateToString(callback.mock.calls[0][0].startDate)).toEqual('2018-07-01');
expect(callback.mock.calls[0][0].endDate).toBeNull();
});
it('calls the second callback with the correct start and end dates', function () {
expect(dateToString(callback.mock.calls[1][0].startDate)).toEqual('2018-07-01');
expect(dateToString(callback.mock.calls[1][0].endDate)).toEqual('2018-07-02');
});
it('calls the third callback with the correct start date and resets the end date', function () {
expect(dateToString(callback.mock.calls[2][0].startDate)).toEqual('2018-07-03');
expect(callback.mock.calls[2][0].endDate).toBeNull();
});
});
});
describe('when only start date is set', function () {
var initialStartDate = (0, _parse.default)('2018-07-15');
describe('with isSettingStartDate is false', function () {
var isSettingStartDate = false;
beforeEach(function () {
setup({
initialStartDate: initialStartDate,
isSettingStartDate: isSettingStartDate
});
});
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;
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;
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;
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;
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 isSettingStartDate is true', function () {
var isSettingStartDate = true;
beforeEach(function () {
setup({
initialStartDate: initialStartDate,
isSettingStartDate: isSettingStartDate
});
});
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;
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;
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;
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;
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 isSettingEndDate is true', function () {
var isSettingEndDate = true;
beforeEach(function () {
setup({
initialStartDate: initialStartDate,
isSettingEndDate: isSettingEndDate
});
});
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;
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;
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;
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;
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 initialStartDate = (0, _parse.default)('2018-07-15');
var initialEndDate = (0, _parse.default)('2018-07-20');
describe('with isSettingStartDate is true', function () {
var isSettingStartDate = true;
beforeEach(function () {
setup({
initialStartDate: initialStartDate,
initialEndDate: initialEndDate,
isSettingStartDate: isSettingStartDate
});
});
describe('when click on a date < endDate', function () {
var newClickedDate;
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;
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 isSettingEndDate is true', function () {
var isSettingEndDate = true;
beforeEach(function () {
setup({
initialStartDate: initialStartDate,
initialEndDate: initialEndDate,
isSettingEndDate: isSettingEndDate
});
});
describe('when click on a date > startDate', function () {
var newClickedDate;
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;
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 isSettingStartDate is false and isSettingEndDate is false', function () {
var newClickedDate;
beforeEach(function () {
setup({
initialStartDate: initialStartDate,
initialEndDate: initialEndDate
});
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
}));
});
});
});
});