wix-style-react
Version:
271 lines (242 loc) • 10.1 kB
JavaScript
import ReactTestUtils from 'react-dom/test-utils';
import dropdownBaseDriverFactory from '../DropdownBase/DropdownBase.legacy.driver';
var calendarDriverFactory = function calendarDriverFactory(_ref) {
var element = _ref.element;
var getCalendar = function getCalendar() {
return element.querySelector('.DayPicker');
};
var getCalendarWrapper = function getCalendarWrapper() {
return element.querySelector('.DayPicker-wrapper');
};
var getNthDay = function getNthDay(n) {
return element.querySelectorAll('[role="gridcell"]:not([class*="disabled"])>[data-outsideday="false"]')[n];
};
var getNthDayOfTheMonth = function getNthDayOfTheMonth(n) {
return element.querySelectorAll('[role="gridcell"]>[data-outsideday="false"]')[n];
};
var getDayOfDate = function getDayOfDate(year, month, day) {
return element.querySelector("[role=\"gridcell\"]>[data-outsideday=\"false\"][data-date='".concat(year, "-").concat(month, "-").concat(day, "']"));
};
var _getSelectedDay = function getSelectedDay() {
return element.querySelector('[role="gridcell"][aria-selected=true]>[data-outsideday="false"]');
};
var getYearDropdown = function getYearDropdown() {
return element.querySelector('[data-hook="datepicker-year-dropdown-button"]');
};
var getMonthDropdownButton = function getMonthDropdownButton() {
return element.querySelector('[data-hook="datepicker-month-dropdown-button"]');
};
var getNthYear = function getNthYear(n) {
return element.querySelector("[data-hook=\"dropdown-item-".concat(n, "\"]"));
};
var _getMonthCaption = function getMonthCaption() {
return element.querySelector('[data-hook="datepicker-month-caption"]');
};
var getYearCaption = function getYearCaption() {
return element.querySelector('[data-hook="datepicker-year-caption"]');
};
var getMonthAndYear = function getMonthAndYear() {
return [_getMonthCaption(), getYearCaption()];
};
var _getNthWeekDayName = function getNthWeekDayName(n) {
return element.querySelectorAll("[data-hook=\"weekday-day\"]")[n];
};
var getPrevMonthButton = function getPrevMonthButton() {
return element.querySelector('[data-hook="datepicker-left-arrow"]');
};
var getNextMonthButton = function getNextMonthButton() {
return element.querySelector('[data-hook="datepicker-right-arrow"]');
};
var _getFocusedDay = function getFocusedDay() {
return element.querySelector('.DayPicker-Day:focus');
};
var getVisuallyUnfocusedDay = function getVisuallyUnfocusedDay() {
return element.querySelector('.unfocused');
};
var getMonthContainers = function getMonthContainers() {
return element.querySelectorAll('.DayPicker-Month');
};
var getVisibleMonths = function getVisibleMonths() {
return element.querySelectorAll('[class*="DayPicker-Month"]');
};
var _getSelectedDays = function getSelectedDays() {
return element.querySelectorAll('[role="gridcell"][aria-selected=true]>[data-outsideday="false"]');
};
var driver = {
exists: function exists() {
return !!element;
},
close: function close() {
return ReactTestUtils.Simulate.keyDown(_getFocusedDay(), {
key: 'Escape',
keyCode: 27
});
},
isVisible: function isVisible() {
return !!getCalendar();
},
getCurrentMonthWithYear: function getCurrentMonthWithYear() {
return getMonthAndYear() ? getMonthAndYear().map(function (elm) {
return elm.textContent;
}).join(' ') : '';
},
getNthWeekDayName: function getNthWeekDayName() {
var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
return _getNthWeekDayName(n) ? _getNthWeekDayName(n).textContent : '';
},
clickOnNthDay: function clickOnNthDay() {
var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
return getNthDay(n) && ReactTestUtils.Simulate.click(getNthDay(n));
},
clickDay: function clickDay(date) {
var day = getDayOfDate(date.getFullYear(), date.getMonth(), date.getDate());
if (day) {
ReactTestUtils.Simulate.click(day);
} else {
throw new Error("ERROR: CalendarDriver.clickDay() - The given date (".concat(date.toString(), ") is not visible"));
}
},
isDayActive: function isDayActive(date) {
var day = getDayOfDate(date.getFullYear(), date.getMonth(), date.getDate());
if (day) {
return day.parentElement.getAttribute('aria-disabled') === 'false';
} else {
throw new Error("ERROR: CalendarDriver.isDayActive() - The given date (".concat(date.toString(), ") is not visible"));
}
},
clickOnNthDayOfTheMonth: function clickOnNthDayOfTheMonth() {
var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
return getNthDayOfTheMonth(n) && ReactTestUtils.Simulate.click(getNthDayOfTheMonth(n));
},
clickOnSelectedDay: function clickOnSelectedDay() {
return ReactTestUtils.Simulate.click(_getSelectedDay());
},
clickOnYearDropdown: function clickOnYearDropdown() {
return ReactTestUtils.Simulate.click(getYearDropdown());
},
clickOnMonthDropdown: function clickOnMonthDropdown() {
return ReactTestUtils.Simulate.click(getMonthDropdownButton());
},
clickOnNthYear: function clickOnNthYear() {
var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
return ReactTestUtils.Simulate.mouseDown(getNthYear(n));
},
clickOnPrevMonthButton: function clickOnPrevMonthButton() {
return ReactTestUtils.Simulate.click(getPrevMonthButton());
},
clickOnNextMonthButton: function clickOnNextMonthButton() {
return ReactTestUtils.Simulate.click(getNextMonthButton());
},
keyboardNextYear: function keyboardNextYear() {
return ReactTestUtils.Simulate.keyDown(getCalendarWrapper(), {
key: 'ArrowDown',
keyCode: 40
});
},
keyboardPrevYear: function keyboardPrevYear() {
return ReactTestUtils.Simulate.keyDown(getCalendarWrapper(), {
key: 'ArrowUp',
keyCode: 38
});
},
isHeaderVisible: function isHeaderVisible() {
return !!element.querySelector('[data-hook="datepicker-head"]');
},
isYearDropdownExists: function isYearDropdownExists() {
return !!element.querySelector('[data-hook="datepicker-year-dropdown"]');
},
isYearCaptionExists: function isYearCaptionExists() {
return !!getYearCaption();
},
isMonthDropdownExists: function isMonthDropdownExists() {
return !!element.querySelector('[data-hook="datepicker-month-dropdown"]');
},
isMonthCaptionExists: function isMonthCaptionExists() {
return !!_getMonthCaption();
},
getMonthCaption: function getMonthCaption() {
return _getMonthCaption().textContent;
},
getMonthDropdownLabel: function getMonthDropdownLabel() {
return getMonthDropdownButton().textContent;
},
getSelectedYear: function getSelectedYear() {
return getYearDropdown().textContent;
},
/** Returns the text of the focused day or `null` if there is no focused day */
getFocusedDay: function getFocusedDay() {
var focusedDayElement = _getFocusedDay();
return !!focusedDayElement ? focusedDayElement.textContent : null;
},
getFocusedDayElement: function getFocusedDayElement() {
return _getFocusedDay();
},
pressLeftArrow: function pressLeftArrow() {
return ReactTestUtils.Simulate.keyDown(_getFocusedDay(), {
key: 'ArrowLeft',
keyCode: 37
});
},
pressRightArrow: function pressRightArrow() {
return ReactTestUtils.Simulate.keyDown(_getFocusedDay(), {
key: 'ArrowRight',
keyCode: 39
});
},
getSelectedDay: function getSelectedDay() {
return _getSelectedDay().textContent;
},
getWidth: function getWidth() {
return element.style.width;
},
triggerKeyDown: function triggerKeyDown(params) {
return ReactTestUtils.Simulate.keyDown(_getFocusedDay(), params);
},
isFocusedDayVisuallyUnfocused: function isFocusedDayVisuallyUnfocused() {
return _getFocusedDay().classList.contains('unfocused');
},
containsVisuallyUnfocusedDay: function containsVisuallyUnfocusedDay() {
return !!getVisuallyUnfocusedDay();
},
isTwoMonthsLayout: function isTwoMonthsLayout() {
return getMonthContainers().length === 2;
},
getMonthDropdownDriver: function getMonthDropdownDriver() {
ReactTestUtils.Simulate.click(element.querySelector('[data-hook="datepicker-month-dropdown-button"]'));
var dropdownBaseDriver = dropdownBaseDriverFactory({
element: element.querySelector('[data-hook="datepicker-month-dropdown"]')
});
return dropdownBaseDriver.getDropdownLayoutDriver();
},
getYearDropdownDriver: function getYearDropdownDriver() {
ReactTestUtils.Simulate.click(element.querySelector('[data-hook="datepicker-year-dropdown-button"]'));
var dropdownBaseDriver = dropdownBaseDriverFactory({
element: element.querySelector('[data-hook="datepicker-year-dropdown"]')
});
return dropdownBaseDriver.getDropdownLayoutDriver();
},
getNumOfVisibleMonths: function getNumOfVisibleMonths() {
return getVisibleMonths().length;
},
getNumOfSelectedDays: function getNumOfSelectedDays() {
return _getSelectedDays().length;
},
getSelectedDays: function getSelectedDays() {
var result = [];
_getSelectedDays().forEach(function (item) {
var date = item.getAttribute('data-date').split('-').map(function (part) {
return parseInt(part);
});
result.push(new Date(date[0], date[1], date[2]));
});
return result;
},
mouseClickOutside: function mouseClickOutside() {
return document.body.dispatchEvent(new Event('mouseup', {
cancelable: true
}));
}
};
return driver;
};
export default calendarDriverFactory;