wix-style-react
Version:
wix-style-react
241 lines (206 loc) • 8.06 kB
JavaScript
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
import React from 'react';
import CalendarPanel from './CalendarPanel';
import calendarPanelDriverFactory from './CalendarPanel.driver';
import { createRendererWithDriver, cleanup } from '../../test/utils/unit';
import isSameDay from 'date-fns/is_same_day';
var A_DAY = new Date(2019, 4, 29);
var A_DAY_NOT_IN_PRESETS = new Date(2019, 4, 10);
var A_DAY_BEFORE = function () {
var date = new Date(A_DAY);
date.setDate(date.getDate() - 1);
return date;
}();
var A_WEEK_BEFORE = function () {
var date = new Date(A_DAY);
date.setDate(date.getDate() - 7);
return date;
}();
var A_WEEK_AFTER = function () {
var date = new Date(A_DAY);
date.setDate(date.getDate() + 7);
return date;
}();
var TWO_MONTHS_BEFORE = function () {
var date = new Date(A_DAY);
date.setMonth(date.getDate() - 60);
return date;
}();
var ONE_MONTH_BEFORE = function () {
var date = new Date(A_DAY);
date.setMonth(date.getDate() - 30);
return date;
}();
var presets = [{ id: 1, value: 'a day', selectedDays: { from: A_DAY, to: A_DAY } }, {
id: 2,
value: 'a day before',
selectedDays: { from: A_DAY_BEFORE, to: A_DAY_BEFORE }
}, {
id: 3,
value: 'a week before',
selectedDays: { from: A_WEEK_BEFORE, to: A_DAY }
}, {
id: 4,
value: 'a week after',
selectedDays: { from: A_DAY, to: A_WEEK_AFTER }
}, {
id: 5,
value: 'one month - two months before',
selectedDays: { from: TWO_MONTHS_BEFORE, to: ONE_MONTH_BEFORE }
}];
describe('CalendarPanel', function () {
var render = createRendererWithDriver(calendarPanelDriverFactory);
afterEach(function () {
return cleanup();
});
it('should show the calendar in two month view by default', function () {
var _render = render(React.createElement(CalendarPanel, { onChange: function onChange() {
return null;
}, presets: presets })),
driver = _render.driver;
expect(driver.calendarDriver().getNumOfVisibleMonths()).toBe(2);
});
it('should show the presets dropdown layout', function () {
var _render2 = render(React.createElement(CalendarPanel, { onChange: function onChange() {
return null;
}, presets: presets })),
driver = _render2.driver;
expect(driver.presetsDropdownLayoutDriver().exists()).toBe(true);
expect(driver.presetsDropdownLayoutDriver().isShown()).toBe(true);
});
it('should show the correct presets', function () {
var _render3 = render(React.createElement(CalendarPanel, { onChange: function onChange() {
return null;
}, presets: presets })),
driver = _render3.driver;
expect(driver.presetsDropdownLayoutDriver().optionsLength()).toBe(presets.length);
var optionsContent = driver.presetsDropdownLayoutDriver().optionsContent();
presets.map(function (preset) {
return preset.value;
}).forEach(function (presetValue) {
expect(optionsContent).toContain(presetValue);
});
});
describe('driver.getNumOfVisibleMonths()', function () {
it('should return 2 also when showMonthDropdown=true', function () {
var _render4 = render(React.createElement(CalendarPanel, {
showMonthDropdown: true,
onChange: function onChange() {
return null;
},
presets: presets
})),
driver = _render4.driver;
expect(driver.calendarDriver().getNumOfVisibleMonths()).toBe(2);
});
});
it('should call onChange with the selected preset dates', function () {
var selectedPreset = presets[2];
var onChange = jest.fn();
var _render5 = render(React.createElement(CalendarPanel, { onChange: onChange, presets: presets })),
driver = _render5.driver;
driver.presetsDropdownLayoutDriver().clickAtOptionWithValue(selectedPreset.value);
expect(onChange).toHaveBeenCalledTimes(1);
expect(isSameDay(onChange.mock.calls[0][0].from, selectedPreset.selectedDays.from)).toBe(true);
expect(isSameDay(onChange.mock.calls[0][0].to, selectedPreset.selectedDays.to)).toBe(true);
});
describe('no presets', function () {
it('should not display the dropdown layout when the presets props is empty array', function () {
var _render6 = render(React.createElement(CalendarPanel, {
onChange: jest.fn(),
value: A_DAY_NOT_IN_PRESETS,
selectionMode: 'range',
presets: []
})),
driver = _render6.driver;
expect(driver.isDropdownExists()).toBe(false);
});
it('should not display the dropdown layout when the is no presets prop', function () {
var _render7 = render(React.createElement(CalendarPanel, {
onChange: jest.fn(),
value: A_DAY_NOT_IN_PRESETS,
selectionMode: 'range'
})),
driver = _render7.driver;
expect(driver.isDropdownExists()).toBe(false);
});
});
describe('footer', function () {
it('should render a given footer content', function () {
var compDataHook = 'given-comp';
var renderProp = function renderProp() {
return React.createElement('div', { 'data-hook': compDataHook });
};
var _render8 = render(React.createElement(CalendarPanel, { onChange: jest.fn(), footer: renderProp })),
driver = _render8.driver;
expect(driver.findByDataHook(compDataHook)).toBeTruthy();
});
describe('renderProp arguments', function () {
describe('selectedDays', function () {
it('should have selectedDays prop', function () {
var renderProp = jest.fn();
render(React.createElement(CalendarPanel, {
value: A_DAY,
onChange: jest.fn(),
footer: renderProp
}));
var renderPropFirstArgument = renderProp.mock.calls[0][0];
expect(renderProp).toHaveBeenCalledTimes(1);
expect(Object.keys(renderPropFirstArgument)).toContain('selectedDays');
expect(renderPropFirstArgument.selectedDays).toBe(A_DAY);
});
});
describe('submitDisabled', function () {
var noop = function noop() {};
function testCase(_ref) {
var props = _ref.props,
expectedValue = _ref.expectedValue;
var renderProp = jest.fn();
render(React.createElement(CalendarPanel, _extends({ onChange: noop, footer: renderProp }, props)));
var renderPropFirstArgument = renderProp.mock.calls[0][0];
expect(renderPropFirstArgument.submitDisabled).toBe(expectedValue);
}
describe('selectionMode=day', function () {
it('should be false', function () {
testCase({
props: { value: A_DAY, selectionMode: 'day' },
expectedValue: false
});
});
it('should be true', function () {
testCase({
props: { value: undefined, selectionMode: 'day' },
expectedValue: true
});
});
});
describe('selectionMode=range', function () {
it('should be enabled when a range is selected', function () {
testCase({
props: {
value: { from: A_DAY_BEFORE, to: A_DAY },
selectionMode: 'range'
},
expectedValue: false
});
});
it('should be disabled given no selection', function () {
testCase({
props: { value: undefined, selectionMode: 'range' },
expectedValue: true
});
});
it('should be disabled given only a \'from\' date', function () {
testCase({
props: {
value: { from: new Date(2018, 1, 1) },
selectionMode: 'range'
},
expectedValue: true
});
});
});
});
});
});
});