react-calendar
Advanced tools
Comparing version 3.7.0 to 3.8.0
var _excluded = ["activeStartDate", "defaultActiveStartDate", "defaultValue", "defaultView", "maxDetail", "minDetail", "value", "view"]; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -15,3 +15,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
@@ -26,3 +26,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
@@ -351,6 +351,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
_defineProperty(_assertThisInitialized(_this), "onChange", function (value, event) { | ||
var selectRange = _this.props.selectRange; | ||
var _assertThisInitialize4 = _assertThisInitialized(_this), | ||
previousValue = _assertThisInitialize4.value; | ||
var _this$props2 = _this.props, | ||
goToRangeStartOnSelect = _this$props2.goToRangeStartOnSelect, | ||
selectRange = _this$props2.selectRange; | ||
_this.onClickTile(value, event); | ||
var isFirstValueInRange = selectRange && !getIsSingleValue(previousValue); | ||
var nextValue; | ||
@@ -360,7 +366,6 @@ | ||
// Range selection turned on | ||
var _assertThisInitialize4 = _assertThisInitialized(_this), | ||
previousValue = _assertThisInitialize4.value, | ||
valueType = _assertThisInitialize4.valueType; | ||
var _assertThisInitialize5 = _assertThisInitialized(_this), | ||
valueType = _assertThisInitialize5.valueType; | ||
if (!getIsSingleValue(previousValue)) { | ||
if (isFirstValueInRange) { | ||
// Value has 0 or 2 elements - either way we're starting a new array | ||
@@ -378,5 +383,8 @@ // First value | ||
var nextActiveStartDate = getActiveStartDate(_objectSpread(_objectSpread({}, _this.props), {}, { | ||
var nextActiveStartDate = // Range selection turned off | ||
!selectRange || // Range selection turned on, first value | ||
isFirstValueInRange || // Range selection turned on, second value, goToRangeStartOnSelect toggled on | ||
goToRangeStartOnSelect ? getActiveStartDate(_objectSpread(_objectSpread({}, _this.props), {}, { | ||
value: nextValue | ||
})); | ||
})) : null; | ||
event.persist(); | ||
@@ -392,10 +400,10 @@ | ||
_defineProperty(_assertThisInitialized(_this), "onClickTile", function (value, event) { | ||
var _assertThisInitialize5 = _assertThisInitialized(_this), | ||
view = _assertThisInitialize5.view; | ||
var _assertThisInitialize6 = _assertThisInitialized(_this), | ||
view = _assertThisInitialize6.view; | ||
var _this$props2 = _this.props, | ||
onClickDay = _this$props2.onClickDay, | ||
onClickDecade = _this$props2.onClickDecade, | ||
onClickMonth = _this$props2.onClickMonth, | ||
onClickYear = _this$props2.onClickYear; | ||
var _this$props3 = _this.props, | ||
onClickDay = _this$props3.onClickDay, | ||
onClickDecade = _this$props3.onClickDecade, | ||
onClickMonth = _this$props3.onClickMonth, | ||
onClickYear = _this$props3.onClickYear; | ||
@@ -455,5 +463,5 @@ var callback = function () { | ||
get: function get() { | ||
var _this$props3 = this.props, | ||
selectRange = _this$props3.selectRange, | ||
valueProps = _this$props3.value; | ||
var _this$props4 = this.props, | ||
selectRange = _this$props4.selectRange, | ||
valueProps = _this$props4.value; | ||
var valueState = this.state.value; // In the middle of range selection, use value from state | ||
@@ -476,6 +484,6 @@ | ||
get: function get() { | ||
var _this$props4 = this.props, | ||
minDetail = _this$props4.minDetail, | ||
maxDetail = _this$props4.maxDetail, | ||
viewProps = _this$props4.view; | ||
var _this$props5 = this.props, | ||
minDetail = _this$props5.minDetail, | ||
maxDetail = _this$props5.maxDetail, | ||
viewProps = _this$props5.view; | ||
var viewState = this.state.view; | ||
@@ -487,5 +495,5 @@ return getView(viewProps || viewState, minDetail, maxDetail); | ||
get: function get() { | ||
var _this$props5 = this.props, | ||
minDetail = _this$props5.minDetail, | ||
maxDetail = _this$props5.maxDetail; | ||
var _this$props6 = this.props, | ||
minDetail = _this$props6.minDetail, | ||
maxDetail = _this$props6.maxDetail; | ||
return getLimitedViews(minDetail, maxDetail); | ||
@@ -521,7 +529,7 @@ } | ||
value: function getProcessedValue(value) { | ||
var _this$props6 = this.props, | ||
minDate = _this$props6.minDate, | ||
maxDate = _this$props6.maxDate, | ||
maxDetail = _this$props6.maxDetail, | ||
returnValue = _this$props6.returnValue; | ||
var _this$props7 = this.props, | ||
minDate = _this$props7.minDate, | ||
maxDate = _this$props7.maxDate, | ||
maxDetail = _this$props7.maxDetail, | ||
returnValue = _this$props7.returnValue; | ||
@@ -559,11 +567,11 @@ var processFunction = function () { | ||
view = this.view; | ||
var _this$props7 = this.props, | ||
calendarType = _this$props7.calendarType, | ||
locale = _this$props7.locale, | ||
maxDate = _this$props7.maxDate, | ||
minDate = _this$props7.minDate, | ||
selectRange = _this$props7.selectRange, | ||
tileClassName = _this$props7.tileClassName, | ||
tileContent = _this$props7.tileContent, | ||
tileDisabled = _this$props7.tileDisabled; | ||
var _this$props8 = this.props, | ||
calendarType = _this$props8.calendarType, | ||
locale = _this$props8.locale, | ||
maxDate = _this$props8.maxDate, | ||
minDate = _this$props8.minDate, | ||
selectRange = _this$props8.selectRange, | ||
tileClassName = _this$props8.tileClassName, | ||
tileContent = _this$props8.tileContent, | ||
tileDisabled = _this$props8.tileDisabled; | ||
var hover = this.hover; | ||
@@ -606,5 +614,5 @@ var activeStartDate = next ? getBeginNext(view, currentActiveStartDate) : getBegin(view, currentActiveStartDate); | ||
{ | ||
var _this$props8 = this.props, | ||
formatMonth = _this$props8.formatMonth, | ||
formatMonthYear = _this$props8.formatMonthYear; | ||
var _this$props9 = this.props, | ||
formatMonth = _this$props9.formatMonth, | ||
formatMonthYear = _this$props9.formatMonthYear; | ||
return /*#__PURE__*/React.createElement(YearView, _extends({ | ||
@@ -618,11 +626,11 @@ formatMonth: formatMonth, | ||
{ | ||
var _this$props9 = this.props, | ||
formatDay = _this$props9.formatDay, | ||
formatLongDate = _this$props9.formatLongDate, | ||
formatShortWeekday = _this$props9.formatShortWeekday, | ||
onClickWeekNumber = _this$props9.onClickWeekNumber, | ||
showDoubleView = _this$props9.showDoubleView, | ||
showFixedNumberOfWeeks = _this$props9.showFixedNumberOfWeeks, | ||
showNeighboringMonth = _this$props9.showNeighboringMonth, | ||
showWeekNumbers = _this$props9.showWeekNumbers; | ||
var _this$props10 = this.props, | ||
formatDay = _this$props10.formatDay, | ||
formatLongDate = _this$props10.formatLongDate, | ||
formatShortWeekday = _this$props10.formatShortWeekday, | ||
onClickWeekNumber = _this$props10.onClickWeekNumber, | ||
showDoubleView = _this$props10.showDoubleView, | ||
showFixedNumberOfWeeks = _this$props10.showFixedNumberOfWeeks, | ||
showNeighboringMonth = _this$props10.showNeighboringMonth, | ||
showWeekNumbers = _this$props10.showWeekNumbers; | ||
var onMouseLeave = this.onMouseLeave; | ||
@@ -658,20 +666,20 @@ return /*#__PURE__*/React.createElement(MonthView, _extends({ | ||
views = this.views; | ||
var _this$props10 = this.props, | ||
formatMonthYear = _this$props10.formatMonthYear, | ||
formatYear = _this$props10.formatYear, | ||
locale = _this$props10.locale, | ||
maxDate = _this$props10.maxDate, | ||
minDate = _this$props10.minDate, | ||
navigationAriaLabel = _this$props10.navigationAriaLabel, | ||
navigationAriaLive = _this$props10.navigationAriaLive, | ||
navigationLabel = _this$props10.navigationLabel, | ||
next2AriaLabel = _this$props10.next2AriaLabel, | ||
next2Label = _this$props10.next2Label, | ||
nextAriaLabel = _this$props10.nextAriaLabel, | ||
nextLabel = _this$props10.nextLabel, | ||
prev2AriaLabel = _this$props10.prev2AriaLabel, | ||
prev2Label = _this$props10.prev2Label, | ||
prevAriaLabel = _this$props10.prevAriaLabel, | ||
prevLabel = _this$props10.prevLabel, | ||
showDoubleView = _this$props10.showDoubleView; | ||
var _this$props11 = this.props, | ||
formatMonthYear = _this$props11.formatMonthYear, | ||
formatYear = _this$props11.formatYear, | ||
locale = _this$props11.locale, | ||
maxDate = _this$props11.maxDate, | ||
minDate = _this$props11.minDate, | ||
navigationAriaLabel = _this$props11.navigationAriaLabel, | ||
navigationAriaLive = _this$props11.navigationAriaLive, | ||
navigationLabel = _this$props11.navigationLabel, | ||
next2AriaLabel = _this$props11.next2AriaLabel, | ||
next2Label = _this$props11.next2Label, | ||
nextAriaLabel = _this$props11.nextAriaLabel, | ||
nextLabel = _this$props11.nextLabel, | ||
prev2AriaLabel = _this$props11.prev2AriaLabel, | ||
prev2Label = _this$props11.prev2Label, | ||
prevAriaLabel = _this$props11.prevAriaLabel, | ||
prevLabel = _this$props11.prevLabel, | ||
showDoubleView = _this$props11.showDoubleView; | ||
return /*#__PURE__*/React.createElement(Navigation, { | ||
@@ -705,7 +713,7 @@ activeStartDate: activeStartDate, | ||
value: function render() { | ||
var _this$props11 = this.props, | ||
className = _this$props11.className, | ||
inputRef = _this$props11.inputRef, | ||
selectRange = _this$props11.selectRange, | ||
showDoubleView = _this$props11.showDoubleView; | ||
var _this$props12 = this.props, | ||
className = _this$props12.className, | ||
inputRef = _this$props12.inputRef, | ||
selectRange = _this$props12.selectRange, | ||
showDoubleView = _this$props12.showDoubleView; | ||
var onMouseLeave = this.onMouseLeave, | ||
@@ -730,2 +738,3 @@ value = this.value; | ||
Calendar.defaultProps = { | ||
goToRangeStartOnSelect: true, | ||
maxDate: defaultMaxDate, | ||
@@ -755,2 +764,3 @@ maxDetail: 'month', | ||
formatYear: PropTypes.func, | ||
goToRangeStartOnSelect: PropTypes.bool, | ||
inputRef: isRef, | ||
@@ -757,0 +767,0 @@ locale: PropTypes.string, |
@@ -9,3 +9,3 @@ var _excluded = ["classes", "formatYear"]; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -7,3 +7,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -10,0 +10,0 @@ import React from 'react'; |
@@ -9,3 +9,3 @@ var _excluded = ["classes", "formatYear"]; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -7,3 +7,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -10,0 +10,0 @@ import React from 'react'; |
var _excluded = ["children", "className", "direction", "count", "offset", "style", "wrap"]; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -5,0 +5,0 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } |
var _excluded = ["calendarType", "formatShortWeekday", "onClickWeekNumber", "showWeekNumbers"]; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -5,0 +5,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -9,3 +9,3 @@ var _excluded = ["formatDay", "formatLongDate", "calendarType", "classes", "currentMonthIndex"]; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -9,3 +9,3 @@ var _excluded = ["showFixedNumberOfWeeks", "showNeighboringMonth"]; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import mergeClassNames from 'merge-class-names'; | ||
import { getYear, getMonth, getMonthStart } from '@wojtekmaj/date-utils'; | ||
import Flex from '../Flex'; | ||
import { getDayOfWeek } from '../shared/dates'; | ||
import { getDayOfWeek, isWeekend } from '../shared/dates'; | ||
import { formatWeekday, formatShortWeekday as defaultFormatShortWeekday } from '../shared/dateFormatter'; | ||
import { isCalendarType } from '../shared/propTypes'; | ||
var className = 'react-calendar__month-view__weekdays'; | ||
var weekdayClassName = "".concat(className, "__weekday"); | ||
export default function Weekdays(props) { | ||
@@ -26,3 +28,3 @@ var calendarType = props.calendarType, | ||
key: weekday, | ||
className: "".concat(className, "__weekday") | ||
className: mergeClassNames(weekdayClassName, isWeekend(weekdayDate, calendarType) && "".concat(weekdayClassName, "--weekend")) | ||
}, /*#__PURE__*/React.createElement("abbr", { | ||
@@ -29,0 +31,0 @@ "aria-label": abbr, |
var _excluded = ["date", "onClickWeekNumber", "weekNumber"]; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -5,0 +5,0 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } |
@@ -15,3 +15,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
@@ -26,3 +26,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
@@ -29,0 +29,0 @@ 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; } |
@@ -9,3 +9,3 @@ var _excluded = ["className", "count", "dateTransform", "dateType", "end", "hover", "offset", "start", "step", "tile", "value", "valueType"]; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -9,3 +9,3 @@ var _excluded = ["classes", "formatMonth", "formatMonthYear"]; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -7,3 +7,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -10,0 +10,0 @@ import React from 'react'; |
@@ -38,3 +38,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -51,3 +51,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
@@ -62,3 +62,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
@@ -376,6 +376,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
_defineProperty(_assertThisInitialized(_this), "onChange", function (value, event) { | ||
var selectRange = _this.props.selectRange; | ||
var _assertThisInitialize4 = _assertThisInitialized(_this), | ||
previousValue = _assertThisInitialize4.value; | ||
var _this$props2 = _this.props, | ||
goToRangeStartOnSelect = _this$props2.goToRangeStartOnSelect, | ||
selectRange = _this$props2.selectRange; | ||
_this.onClickTile(value, event); | ||
var isFirstValueInRange = selectRange && !getIsSingleValue(previousValue); | ||
var nextValue; | ||
@@ -385,7 +391,6 @@ | ||
// Range selection turned on | ||
var _assertThisInitialize4 = _assertThisInitialized(_this), | ||
previousValue = _assertThisInitialize4.value, | ||
valueType = _assertThisInitialize4.valueType; | ||
var _assertThisInitialize5 = _assertThisInitialized(_this), | ||
valueType = _assertThisInitialize5.valueType; | ||
if (!getIsSingleValue(previousValue)) { | ||
if (isFirstValueInRange) { | ||
// Value has 0 or 2 elements - either way we're starting a new array | ||
@@ -403,5 +408,8 @@ // First value | ||
var nextActiveStartDate = getActiveStartDate(_objectSpread(_objectSpread({}, _this.props), {}, { | ||
var nextActiveStartDate = // Range selection turned off | ||
!selectRange || // Range selection turned on, first value | ||
isFirstValueInRange || // Range selection turned on, second value, goToRangeStartOnSelect toggled on | ||
goToRangeStartOnSelect ? getActiveStartDate(_objectSpread(_objectSpread({}, _this.props), {}, { | ||
value: nextValue | ||
})); | ||
})) : null; | ||
event.persist(); | ||
@@ -417,10 +425,10 @@ | ||
_defineProperty(_assertThisInitialized(_this), "onClickTile", function (value, event) { | ||
var _assertThisInitialize5 = _assertThisInitialized(_this), | ||
view = _assertThisInitialize5.view; | ||
var _assertThisInitialize6 = _assertThisInitialized(_this), | ||
view = _assertThisInitialize6.view; | ||
var _this$props2 = _this.props, | ||
onClickDay = _this$props2.onClickDay, | ||
onClickDecade = _this$props2.onClickDecade, | ||
onClickMonth = _this$props2.onClickMonth, | ||
onClickYear = _this$props2.onClickYear; | ||
var _this$props3 = _this.props, | ||
onClickDay = _this$props3.onClickDay, | ||
onClickDecade = _this$props3.onClickDecade, | ||
onClickMonth = _this$props3.onClickMonth, | ||
onClickYear = _this$props3.onClickYear; | ||
@@ -480,5 +488,5 @@ var callback = function () { | ||
get: function get() { | ||
var _this$props3 = this.props, | ||
selectRange = _this$props3.selectRange, | ||
valueProps = _this$props3.value; | ||
var _this$props4 = this.props, | ||
selectRange = _this$props4.selectRange, | ||
valueProps = _this$props4.value; | ||
var valueState = this.state.value; // In the middle of range selection, use value from state | ||
@@ -501,6 +509,6 @@ | ||
get: function get() { | ||
var _this$props4 = this.props, | ||
minDetail = _this$props4.minDetail, | ||
maxDetail = _this$props4.maxDetail, | ||
viewProps = _this$props4.view; | ||
var _this$props5 = this.props, | ||
minDetail = _this$props5.minDetail, | ||
maxDetail = _this$props5.maxDetail, | ||
viewProps = _this$props5.view; | ||
var viewState = this.state.view; | ||
@@ -512,5 +520,5 @@ return getView(viewProps || viewState, minDetail, maxDetail); | ||
get: function get() { | ||
var _this$props5 = this.props, | ||
minDetail = _this$props5.minDetail, | ||
maxDetail = _this$props5.maxDetail; | ||
var _this$props6 = this.props, | ||
minDetail = _this$props6.minDetail, | ||
maxDetail = _this$props6.maxDetail; | ||
return getLimitedViews(minDetail, maxDetail); | ||
@@ -546,7 +554,7 @@ } | ||
value: function getProcessedValue(value) { | ||
var _this$props6 = this.props, | ||
minDate = _this$props6.minDate, | ||
maxDate = _this$props6.maxDate, | ||
maxDetail = _this$props6.maxDetail, | ||
returnValue = _this$props6.returnValue; | ||
var _this$props7 = this.props, | ||
minDate = _this$props7.minDate, | ||
maxDate = _this$props7.maxDate, | ||
maxDetail = _this$props7.maxDetail, | ||
returnValue = _this$props7.returnValue; | ||
@@ -584,11 +592,11 @@ var processFunction = function () { | ||
view = this.view; | ||
var _this$props7 = this.props, | ||
calendarType = _this$props7.calendarType, | ||
locale = _this$props7.locale, | ||
maxDate = _this$props7.maxDate, | ||
minDate = _this$props7.minDate, | ||
selectRange = _this$props7.selectRange, | ||
tileClassName = _this$props7.tileClassName, | ||
tileContent = _this$props7.tileContent, | ||
tileDisabled = _this$props7.tileDisabled; | ||
var _this$props8 = this.props, | ||
calendarType = _this$props8.calendarType, | ||
locale = _this$props8.locale, | ||
maxDate = _this$props8.maxDate, | ||
minDate = _this$props8.minDate, | ||
selectRange = _this$props8.selectRange, | ||
tileClassName = _this$props8.tileClassName, | ||
tileContent = _this$props8.tileContent, | ||
tileDisabled = _this$props8.tileDisabled; | ||
var hover = this.hover; | ||
@@ -631,5 +639,5 @@ var activeStartDate = next ? (0, _dates.getBeginNext)(view, currentActiveStartDate) : (0, _dates.getBegin)(view, currentActiveStartDate); | ||
{ | ||
var _this$props8 = this.props, | ||
formatMonth = _this$props8.formatMonth, | ||
formatMonthYear = _this$props8.formatMonthYear; | ||
var _this$props9 = this.props, | ||
formatMonth = _this$props9.formatMonth, | ||
formatMonthYear = _this$props9.formatMonthYear; | ||
return /*#__PURE__*/_react["default"].createElement(_YearView["default"], _extends({ | ||
@@ -643,11 +651,11 @@ formatMonth: formatMonth, | ||
{ | ||
var _this$props9 = this.props, | ||
formatDay = _this$props9.formatDay, | ||
formatLongDate = _this$props9.formatLongDate, | ||
formatShortWeekday = _this$props9.formatShortWeekday, | ||
onClickWeekNumber = _this$props9.onClickWeekNumber, | ||
showDoubleView = _this$props9.showDoubleView, | ||
showFixedNumberOfWeeks = _this$props9.showFixedNumberOfWeeks, | ||
showNeighboringMonth = _this$props9.showNeighboringMonth, | ||
showWeekNumbers = _this$props9.showWeekNumbers; | ||
var _this$props10 = this.props, | ||
formatDay = _this$props10.formatDay, | ||
formatLongDate = _this$props10.formatLongDate, | ||
formatShortWeekday = _this$props10.formatShortWeekday, | ||
onClickWeekNumber = _this$props10.onClickWeekNumber, | ||
showDoubleView = _this$props10.showDoubleView, | ||
showFixedNumberOfWeeks = _this$props10.showFixedNumberOfWeeks, | ||
showNeighboringMonth = _this$props10.showNeighboringMonth, | ||
showWeekNumbers = _this$props10.showWeekNumbers; | ||
var onMouseLeave = this.onMouseLeave; | ||
@@ -683,20 +691,20 @@ return /*#__PURE__*/_react["default"].createElement(_MonthView["default"], _extends({ | ||
views = this.views; | ||
var _this$props10 = this.props, | ||
formatMonthYear = _this$props10.formatMonthYear, | ||
formatYear = _this$props10.formatYear, | ||
locale = _this$props10.locale, | ||
maxDate = _this$props10.maxDate, | ||
minDate = _this$props10.minDate, | ||
navigationAriaLabel = _this$props10.navigationAriaLabel, | ||
navigationAriaLive = _this$props10.navigationAriaLive, | ||
navigationLabel = _this$props10.navigationLabel, | ||
next2AriaLabel = _this$props10.next2AriaLabel, | ||
next2Label = _this$props10.next2Label, | ||
nextAriaLabel = _this$props10.nextAriaLabel, | ||
nextLabel = _this$props10.nextLabel, | ||
prev2AriaLabel = _this$props10.prev2AriaLabel, | ||
prev2Label = _this$props10.prev2Label, | ||
prevAriaLabel = _this$props10.prevAriaLabel, | ||
prevLabel = _this$props10.prevLabel, | ||
showDoubleView = _this$props10.showDoubleView; | ||
var _this$props11 = this.props, | ||
formatMonthYear = _this$props11.formatMonthYear, | ||
formatYear = _this$props11.formatYear, | ||
locale = _this$props11.locale, | ||
maxDate = _this$props11.maxDate, | ||
minDate = _this$props11.minDate, | ||
navigationAriaLabel = _this$props11.navigationAriaLabel, | ||
navigationAriaLive = _this$props11.navigationAriaLive, | ||
navigationLabel = _this$props11.navigationLabel, | ||
next2AriaLabel = _this$props11.next2AriaLabel, | ||
next2Label = _this$props11.next2Label, | ||
nextAriaLabel = _this$props11.nextAriaLabel, | ||
nextLabel = _this$props11.nextLabel, | ||
prev2AriaLabel = _this$props11.prev2AriaLabel, | ||
prev2Label = _this$props11.prev2Label, | ||
prevAriaLabel = _this$props11.prevAriaLabel, | ||
prevLabel = _this$props11.prevLabel, | ||
showDoubleView = _this$props11.showDoubleView; | ||
return /*#__PURE__*/_react["default"].createElement(_Navigation["default"], { | ||
@@ -730,7 +738,7 @@ activeStartDate: activeStartDate, | ||
value: function render() { | ||
var _this$props11 = this.props, | ||
className = _this$props11.className, | ||
inputRef = _this$props11.inputRef, | ||
selectRange = _this$props11.selectRange, | ||
showDoubleView = _this$props11.showDoubleView; | ||
var _this$props12 = this.props, | ||
className = _this$props12.className, | ||
inputRef = _this$props12.inputRef, | ||
selectRange = _this$props12.selectRange, | ||
showDoubleView = _this$props12.showDoubleView; | ||
var onMouseLeave = this.onMouseLeave, | ||
@@ -755,2 +763,3 @@ value = this.value; | ||
Calendar.defaultProps = { | ||
goToRangeStartOnSelect: true, | ||
maxDate: defaultMaxDate, | ||
@@ -783,2 +792,3 @@ maxDetail: 'month', | ||
formatYear: _propTypes["default"].func, | ||
goToRangeStartOnSelect: _propTypes["default"].bool, | ||
inputRef: _propTypes2.isRef, | ||
@@ -785,0 +795,0 @@ locale: _propTypes["default"].string, |
@@ -32,3 +32,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -35,0 +35,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -28,3 +28,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -31,0 +31,0 @@ function Decades(props) { |
@@ -30,3 +30,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -33,0 +33,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -26,3 +26,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -29,0 +29,0 @@ function Years(props) { |
@@ -16,3 +16,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -19,0 +19,0 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } |
@@ -28,3 +28,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -31,0 +31,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -32,3 +32,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -35,0 +35,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -32,3 +32,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -35,0 +35,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -12,2 +12,4 @@ "use strict"; | ||
var _mergeClassNames = _interopRequireDefault(require("merge-class-names")); | ||
var _dateUtils = require("@wojtekmaj/date-utils"); | ||
@@ -26,2 +28,3 @@ | ||
var className = 'react-calendar__month-view__weekdays'; | ||
var weekdayClassName = "".concat(className, "__weekday"); | ||
@@ -45,3 +48,3 @@ function Weekdays(props) { | ||
key: weekday, | ||
className: "".concat(className, "__weekday") | ||
className: (0, _mergeClassNames["default"])(weekdayClassName, (0, _dates.isWeekend)(weekdayDate, calendarType) && "".concat(weekdayClassName, "--weekend")) | ||
}, /*#__PURE__*/_react["default"].createElement("abbr", { | ||
@@ -48,0 +51,0 @@ "aria-label": abbr, |
@@ -16,3 +16,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -19,0 +19,0 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } |
@@ -36,3 +36,3 @@ "use strict"; | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
@@ -47,3 +47,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
@@ -50,0 +50,0 @@ 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; } |
@@ -28,3 +28,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -31,0 +31,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -30,3 +30,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -33,0 +33,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } |
@@ -28,3 +28,3 @@ "use strict"; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } | ||
@@ -31,0 +31,0 @@ function Months(props) { |
{ | ||
"name": "react-calendar", | ||
"version": "3.7.0", | ||
"version": "3.8.0", | ||
"description": "Ultimate calendar for your React app.", | ||
@@ -79,8 +79,9 @@ "main": "dist/umd/index.js", | ||
"@babel/preset-react": "^7.14.0", | ||
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.0", | ||
"enzyme": "^3.10.0", | ||
"@testing-library/jest-dom": "^5.15.0", | ||
"@testing-library/react": "^12.1.0", | ||
"eslint": "^8.5.0", | ||
"eslint-config-wojtekmaj": "^0.6.5", | ||
"husky": "^7.0.0", | ||
"jest": "^27.0.0", | ||
"husky": "^8.0.0", | ||
"jest": "^29.0.0", | ||
"jest-environment-jsdom": "^29.0.0", | ||
"less": "^4.0.0", | ||
@@ -87,0 +88,0 @@ "prettier": "^2.5.0", |
@@ -102,2 +102,3 @@ [![npm](https://img.shields.io/npm/v/react-calendar.svg)](https://www.npmjs.com/package/react-calendar) ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) [![CI](https://github.com/wojtekmaj/react-calendar/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-calendar/actions) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) | ||
| formatYear | Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'YYYY')` | | ||
| goToRangeStartOnSelect | Whether to go to the beginning of the range when selecting the end of the range. | `true` | `false` | | ||
| inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Calendar>` component. | n/a | <ul><li>Function:<br />`(ref) => { this.myCalendar = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul> | | ||
@@ -104,0 +105,0 @@ | locale | Locale that should be used by the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"` | |
@@ -375,11 +375,14 @@ import React, { Component } from 'react'; | ||
onChange = (value, event) => { | ||
const { selectRange } = this.props; | ||
const { value: previousValue } = this; | ||
const { goToRangeStartOnSelect, selectRange } = this.props; | ||
this.onClickTile(value, event); | ||
const isFirstValueInRange = selectRange && !getIsSingleValue(previousValue); | ||
let nextValue; | ||
if (selectRange) { | ||
// Range selection turned on | ||
const { value: previousValue, valueType } = this; | ||
if (!getIsSingleValue(previousValue)) { | ||
const { valueType } = this; | ||
if (isFirstValueInRange) { | ||
// Value has 0 or 2 elements - either way we're starting a new array | ||
@@ -397,6 +400,14 @@ // First value | ||
const nextActiveStartDate = getActiveStartDate({ | ||
...this.props, | ||
value: nextValue, | ||
}); | ||
const nextActiveStartDate = | ||
// Range selection turned off | ||
!selectRange || | ||
// Range selection turned on, first value | ||
isFirstValueInRange || | ||
// Range selection turned on, second value, goToRangeStartOnSelect toggled on | ||
goToRangeStartOnSelect | ||
? getActiveStartDate({ | ||
...this.props, | ||
value: nextValue, | ||
}) | ||
: null; | ||
@@ -627,2 +638,3 @@ event.persist(); | ||
Calendar.defaultProps = { | ||
goToRangeStartOnSelect: true, | ||
maxDate: defaultMaxDate, | ||
@@ -654,2 +666,3 @@ maxDetail: 'month', | ||
formatYear: PropTypes.func, | ||
goToRangeStartOnSelect: PropTypes.bool, | ||
inputRef: isRef, | ||
@@ -656,0 +669,0 @@ locale: PropTypes.string, |
@@ -1,3 +0,3 @@ | ||
import React from 'react'; | ||
import { shallow, mount } from 'enzyme'; | ||
import React, { createRef } from 'react'; | ||
import { render } from '@testing-library/react'; | ||
import { getMonthStart } from '@wojtekmaj/date-utils'; | ||
@@ -21,7 +21,7 @@ | ||
const component = shallow(<Calendar className={className} />); | ||
const { container } = render(<Calendar className={className} />); | ||
const wrapperClassName = component.find('.react-calendar').prop('className'); | ||
const wrapper = container.querySelector('.react-calendar'); | ||
expect(wrapperClassName.includes(className)).toBe(true); | ||
expect(wrapper).toHaveClass(className); | ||
}); | ||
@@ -32,3 +32,3 @@ | ||
mount(<Calendar inputRef={inputRef} />); | ||
render(<Calendar inputRef={inputRef} />); | ||
@@ -40,51 +40,63 @@ expect(inputRef).toHaveBeenCalled(); | ||
it('renders Navigation by default', () => { | ||
const component = shallow(<Calendar />); | ||
const { container } = render(<Calendar />); | ||
const navigation = component.find('Navigation'); | ||
const navigation = container.querySelector('.react-calendar__navigation'); | ||
expect(navigation).toHaveLength(1); | ||
expect(navigation).toBeInTheDocument(); | ||
}); | ||
it('does not render Navigation when showNavigation flag is set to false', () => { | ||
const component = shallow(<Calendar showNavigation={false} />); | ||
const { container } = render(<Calendar showNavigation={false} />); | ||
const navigation = component.find('Navigation'); | ||
const navigation = container.querySelector('.react-calendar__navigation'); | ||
expect(navigation).toHaveLength(0); | ||
expect(navigation).not.toBeInTheDocument(); | ||
}); | ||
it('uses given value when passed value using value prop', () => { | ||
const component = shallow(<Calendar value={new Date(2019, 0, 1)} />); | ||
const instance = createRef(); | ||
expect(component.instance().value).toEqual(new Date(2019, 0, 1)); | ||
render(<Calendar value={new Date(2019, 0, 1)} ref={instance} />); | ||
expect(instance.current.value).toEqual(new Date(2019, 0, 1)); | ||
}); | ||
it('uses given value when passed value using defaultValue prop', () => { | ||
const component = shallow(<Calendar defaultValue={new Date(2019, 0, 1)} />); | ||
const instance = createRef(); | ||
expect(component.instance().value).toEqual(new Date(2019, 0, 1)); | ||
render(<Calendar defaultValue={new Date(2019, 0, 1)} ref={instance} />); | ||
expect(instance.current.value).toEqual(new Date(2019, 0, 1)); | ||
}); | ||
it('renders given view when passed view using view prop', () => { | ||
const component = shallow(<Calendar view="century" />); | ||
const instance = createRef(); | ||
expect(component.instance().view).toBe('century'); | ||
render(<Calendar view="century" ref={instance} />); | ||
expect(instance.current.view).toBe('century'); | ||
}); | ||
it('renders given view when passed view using defaultView prop', () => { | ||
const component = shallow(<Calendar defaultView="century" />); | ||
const instance = createRef(); | ||
expect(component.instance().view).toBe('century'); | ||
render(<Calendar defaultView="century" ref={instance} />); | ||
expect(instance.current.view).toBe('century'); | ||
}); | ||
it('renders given active start date when passed active start date using activeStartDate prop', () => { | ||
const component = shallow(<Calendar activeStartDate={new Date(2019, 0, 1)} />); | ||
const instance = createRef(); | ||
expect(component.instance().activeStartDate).toEqual(new Date(2019, 0, 1)); | ||
render(<Calendar activeStartDate={new Date(2019, 0, 1)} ref={instance} />); | ||
expect(instance.current.activeStartDate).toEqual(new Date(2019, 0, 1)); | ||
}); | ||
it('renders given active start date when passed active start date using activeStartDate prop', () => { | ||
const component = shallow(<Calendar defaultActiveStartDate={new Date(2019, 0, 1)} />); | ||
const instance = createRef(); | ||
expect(component.instance().activeStartDate).toEqual(new Date(2019, 0, 1)); | ||
render(<Calendar defaultActiveStartDate={new Date(2019, 0, 1)} ref={instance} />); | ||
expect(instance.current.activeStartDate).toEqual(new Date(2019, 0, 1)); | ||
}); | ||
@@ -96,8 +108,9 @@ | ||
const newActiveStartDate = new Date(2018, 0, 1); | ||
const instance = createRef(); | ||
const component = shallow(<Calendar value={value} />); | ||
const { rerender } = render(<Calendar value={value} ref={instance} />); | ||
component.setProps({ value: newValue }); | ||
rerender(<Calendar value={newValue} ref={instance} />); | ||
expect(component.instance().activeStartDate).toEqual(newActiveStartDate); | ||
expect(instance.current.activeStartDate).toEqual(newActiveStartDate); | ||
}); | ||
@@ -109,8 +122,9 @@ | ||
const newActiveStartDate = new Date(2018, 0, 1); | ||
const instance = createRef(); | ||
const component = shallow(<Calendar value={value} />); | ||
render(<Calendar value={value} ref={instance} />); | ||
component.instance().onChange(newValue, event); | ||
instance.current.onChange(newValue, event); | ||
expect(component.instance().activeStartDate).toEqual(newActiveStartDate); | ||
expect(instance.current.activeStartDate).toEqual(newActiveStartDate); | ||
}); | ||
@@ -121,7 +135,9 @@ | ||
const newActiveStartDate = new Date(2018, 0, 1); | ||
const component = shallow(<Calendar activeStartDate={activeStartDate} />); | ||
const instance = createRef(); | ||
component.setProps({ activeStartDate: newActiveStartDate }); | ||
const { rerender } = render(<Calendar activeStartDate={activeStartDate} ref={instance} />); | ||
expect(component.instance().activeStartDate).toEqual(newActiveStartDate); | ||
rerender(<Calendar activeStartDate={newActiveStartDate} ref={instance} />); | ||
expect(instance.current.activeStartDate).toEqual(newActiveStartDate); | ||
}); | ||
@@ -131,101 +147,106 @@ | ||
it('renders MonthView by default', () => { | ||
const component = shallow(<Calendar />); | ||
const { container } = render(<Calendar />); | ||
const monthView = component.find('MonthView'); | ||
const monthView = container.querySelector('.react-calendar__month-view'); | ||
expect(monthView).toHaveLength(1); | ||
expect(monthView).toBeInTheDocument(); | ||
}); | ||
it('renders MonthView when given view = "month"', () => { | ||
const component = shallow(<Calendar view="month" />); | ||
const { container } = render(<Calendar view="month" />); | ||
const monthView = component.find('MonthView'); | ||
const monthView = container.querySelector('.react-calendar__month-view'); | ||
expect(monthView).toHaveLength(1); | ||
expect(monthView).toBeInTheDocument(); | ||
}); | ||
it('renders YearView when given view = "year"', () => { | ||
const component = shallow(<Calendar view="year" />); | ||
const { container } = render(<Calendar view="year" />); | ||
const yearView = component.find('YearView'); | ||
const yearView = container.querySelector('.react-calendar__year-view'); | ||
expect(yearView).toHaveLength(1); | ||
expect(yearView).toBeInTheDocument(); | ||
}); | ||
it('renders DecadeView when given view = "decade"', () => { | ||
const component = shallow(<Calendar view="decade" />); | ||
const { container } = render(<Calendar view="decade" />); | ||
const decadeView = component.find('DecadeView'); | ||
const decadeView = container.querySelector('.react-calendar__decade-view'); | ||
expect(decadeView).toHaveLength(1); | ||
expect(decadeView).toBeInTheDocument(); | ||
}); | ||
it('renders CenturyView when given view = "century"', () => { | ||
const component = shallow(<Calendar view="century" />); | ||
const { container } = render(<Calendar view="century" />); | ||
const centuryView = component.find('CenturyView'); | ||
const centuryView = container.querySelector('.react-calendar__century-view'); | ||
expect(centuryView).toHaveLength(1); | ||
expect(centuryView).toBeInTheDocument(); | ||
}); | ||
it('renders maximum allowed view when given maxDetail', () => { | ||
const component = shallow(<Calendar maxDetail="year" />); | ||
const { container } = render(<Calendar maxDetail="year" />); | ||
const yearView = component.find('YearView'); | ||
const yearView = container.querySelector('.react-calendar__year-view'); | ||
expect(yearView).toHaveLength(1); | ||
expect(yearView).toBeInTheDocument(); | ||
}); | ||
it('renders maximum allowed view when given view that is not allowed', () => { | ||
const component = shallow(<Calendar maxDetail="year" view="month" />); | ||
const { container } = render(<Calendar maxDetail="year" view="month" />); | ||
const yearView = component.find('YearView'); | ||
const yearView = container.querySelector('.react-calendar__year-view'); | ||
expect(yearView).toHaveLength(1); | ||
expect(yearView).toBeInTheDocument(); | ||
}); | ||
it('renders maximum allowed view when attempting to externally switch to a view that is not allowed', () => { | ||
const component = shallow(<Calendar maxDetail="year" view="year" />); | ||
const { container, rerender } = render(<Calendar maxDetail="year" view="year" />); | ||
component.setProps({ view: 'month' }); | ||
rerender(<Calendar maxDetail="year" view="month" />); | ||
const yearView = component.find('YearView'); | ||
const yearView = container.querySelector('.react-calendar__year-view'); | ||
expect(yearView).toHaveLength(1); | ||
expect(yearView).toBeInTheDocument(); | ||
}); | ||
it('renders maximum allowed view when given changed maxDetail', () => { | ||
const component = shallow(<Calendar maxDetail="month" view="month" />); | ||
const { container, rerender } = render(<Calendar maxDetail="month" view="month" />); | ||
component.setProps({ maxDetail: 'year' }); | ||
component.update(); | ||
rerender(<Calendar maxDetail="year" view="month" />); | ||
const yearView = component.find('YearView'); | ||
const yearView = container.querySelector('.react-calendar__year-view'); | ||
expect(yearView).toHaveLength(1); | ||
expect(yearView).toBeInTheDocument(); | ||
}); | ||
}); | ||
it('does not pass showWeekNumbers flag to MonthView component by default', () => { | ||
const component = shallow(<Calendar view="month" />); | ||
it('does not render WeekNumbers component by default', () => { | ||
const { container } = render(<Calendar view="month" />); | ||
const monthView = component.find('MonthView'); | ||
const weekNumbers = container.querySelector('.react-calendar__month-view__weekNumbers'); | ||
expect(monthView.prop('showWeekNumbers')).toBeFalsy(); | ||
expect(weekNumbers).not.toBeInTheDocument(); | ||
}); | ||
it('passes showWeekNumbers flag to MonthView component given showWeekNumbers flag', () => { | ||
const component = shallow(<Calendar showWeekNumbers view="month" />); | ||
it('renders WeekNumbers component given showWeekNumbers flag', () => { | ||
const { container } = render(<Calendar showWeekNumbers view="month" />); | ||
const monthView = component.find('MonthView'); | ||
const weekNumbers = container.querySelector('.react-calendar__month-view__weekNumbers'); | ||
expect(monthView.prop('showWeekNumbers')).toBeTruthy(); | ||
expect(weekNumbers).toBeInTheDocument(); | ||
}); | ||
it('passes showNeighboringMonth flag to MonthView component given showNeighboringMonth flag', () => { | ||
const component = shallow(<Calendar showNeighboringMonth view="month" />); | ||
const activeStartDate = new Date(2017, 0, 1); | ||
const monthView = component.find('MonthView'); | ||
const { container } = render( | ||
<Calendar activeStartDate={activeStartDate} showNeighboringMonth view="month" />, | ||
); | ||
expect(monthView.prop('showNeighboringMonth')).toBeTruthy(); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
// The first date that this calendar should show is December 26, 2016. | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(new Date(2016, 11, 26))); | ||
}); | ||
@@ -236,7 +257,11 @@ | ||
const defaultValue = new Date(2017, 0, 15); | ||
const component = shallow(<Calendar defaultValue={defaultValue} />); | ||
const monthView = component.find('MonthView'); | ||
const { container } = render( | ||
<Calendar defaultValue={defaultValue} showNeighboringMonth={false} />, | ||
); | ||
expect(monthView.prop('activeStartDate')).toEqual(new Date(2017, 0, 1)); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(new Date(2017, 0, 1))); | ||
}); | ||
@@ -246,7 +271,9 @@ | ||
const value = new Date(2017, 0, 15); | ||
const component = shallow(<Calendar value={value} />); | ||
const monthView = component.find('MonthView'); | ||
const { container } = render(<Calendar value={value} showNeighboringMonth={false} />); | ||
expect(monthView.prop('activeStartDate')).toEqual(new Date(2017, 0, 1)); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(new Date(2017, 0, 1))); | ||
}); | ||
@@ -257,9 +284,15 @@ | ||
const value = new Date(2018, 0, 15); | ||
const component = shallow( | ||
<Calendar defaultActiveStartDate={defaultActiveStartDate} value={value} />, | ||
const { container } = render( | ||
<Calendar | ||
defaultActiveStartDate={defaultActiveStartDate} | ||
showNeighboringMonth={false} | ||
value={value} | ||
/>, | ||
); | ||
const monthView = component.find('MonthView'); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
expect(monthView.prop('activeStartDate')).toEqual(defaultActiveStartDate); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(defaultActiveStartDate)); | ||
}); | ||
@@ -269,7 +302,11 @@ | ||
const defaultActiveStartDate = new Date(2017, 0, 1); | ||
const component = shallow(<Calendar defaultActiveStartDate={defaultActiveStartDate} />); | ||
const monthView = component.find('MonthView'); | ||
const { container } = render( | ||
<Calendar defaultActiveStartDate={defaultActiveStartDate} showNeighboringMonth={false} />, | ||
); | ||
expect(monthView.prop('activeStartDate')).toEqual(defaultActiveStartDate); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(defaultActiveStartDate)); | ||
}); | ||
@@ -279,7 +316,11 @@ | ||
const activeStartDate = new Date(2017, 0, 1); | ||
const component = shallow(<Calendar activeStartDate={activeStartDate} />); | ||
const monthView = component.find('MonthView'); | ||
const { container } = render( | ||
<Calendar activeStartDate={activeStartDate} showNeighboringMonth={false} />, | ||
); | ||
expect(monthView.prop('activeStartDate')).toEqual(activeStartDate); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(activeStartDate)); | ||
}); | ||
@@ -290,7 +331,9 @@ | ||
const beginOfCurrentMonth = getMonthStart(today); | ||
const component = shallow(<Calendar />); | ||
const monthView = component.find('MonthView'); | ||
const { container } = render(<Calendar showNeighboringMonth={false} />); | ||
expect(monthView.prop('activeStartDate')).toEqual(beginOfCurrentMonth); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(beginOfCurrentMonth)); | ||
}); | ||
@@ -300,9 +343,10 @@ | ||
const defaultActiveStartDate = new Date(2012, 5, 6); | ||
const component = mount(<Calendar defaultActiveStartDate={defaultActiveStartDate} />); | ||
const firstDayTile = component.find('.react-calendar__tile').first(); | ||
const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label'); | ||
const { container } = render(<Calendar defaultActiveStartDate={defaultActiveStartDate} />); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
// The date of the first Monday that this calendar should show is May 28, 2012. | ||
expect(firstDayTileTimeAbbr).toBe(format(new Date(2012, 4, 28))); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(new Date(2012, 4, 28))); | ||
}); | ||
@@ -312,9 +356,10 @@ | ||
const activeStartDate = new Date(2012, 5, 6); | ||
const component = mount(<Calendar activeStartDate={activeStartDate} />); | ||
const firstDayTile = component.find('.react-calendar__tile').first(); | ||
const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label'); | ||
const { container } = render(<Calendar activeStartDate={activeStartDate} />); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
// The date of the first Monday that this calendar should show is May 28, 2012. | ||
expect(firstDayTileTimeAbbr).toBe(format(new Date(2012, 4, 28))); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(new Date(2012, 4, 28))); | ||
}); | ||
@@ -325,9 +370,10 @@ }); | ||
it('drills up when allowed', () => { | ||
const component = shallow(<Calendar />); | ||
const instance = createRef(); | ||
component.setState({ view: 'month' }); | ||
render(<Calendar ref={instance} />); | ||
component.instance().drillUp(); | ||
instance.current.setState({ view: 'month' }); | ||
instance.current.drillUp(); | ||
expect(component.instance().view).toBe('year'); | ||
expect(instance.current.view).toBe('year'); | ||
}); | ||
@@ -337,8 +383,14 @@ | ||
const onDrillUp = jest.fn(); | ||
const instance = createRef(); | ||
const component = shallow( | ||
<Calendar activeStartDate={new Date(2017, 6, 1)} onDrillUp={onDrillUp} view="month" />, | ||
render( | ||
<Calendar | ||
activeStartDate={new Date(2017, 6, 1)} | ||
onDrillUp={onDrillUp} | ||
view="month" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().drillUp(); | ||
instance.current.drillUp(); | ||
@@ -354,11 +406,11 @@ expect(onDrillUp).toHaveBeenCalledWith({ | ||
const onDrillUp = jest.fn(); | ||
const instance = createRef(); | ||
const component = shallow( | ||
<Calendar activeStartDate={new Date(2017, 6, 1)} onDrillUp={onDrillUp} />, | ||
render( | ||
<Calendar activeStartDate={new Date(2017, 6, 1)} onDrillUp={onDrillUp} ref={instance} />, | ||
); | ||
component.setState({ view: 'month' }); | ||
instance.current.setState({ view: 'month' }); | ||
instance.current.drillUp(); | ||
component.instance().drillUp(); | ||
expect(onDrillUp).toHaveBeenCalledWith({ | ||
@@ -373,6 +425,7 @@ action: 'drillUp', | ||
const onDrillUp = jest.fn(); | ||
const instance = createRef(); | ||
const component = shallow(<Calendar onDrillUp={onDrillUp} view="century" />); | ||
render(<Calendar onDrillUp={onDrillUp} view="century" ref={instance} />); | ||
component.instance().drillUp(); | ||
instance.current.drillUp(); | ||
@@ -385,9 +438,10 @@ expect(onDrillUp).not.toHaveBeenCalled(); | ||
it('drills down when allowed', () => { | ||
const component = shallow(<Calendar />); | ||
const instance = createRef(); | ||
component.setState({ view: 'century' }); | ||
render(<Calendar ref={instance} />); | ||
component.instance().drillDown(new Date(2011, 0, 1)); | ||
instance.current.setState({ view: 'century' }); | ||
instance.current.drillDown(new Date(2011, 0, 1)); | ||
expect(component.instance().view).toBe('decade'); | ||
expect(instance.current.view).toBe('decade'); | ||
}); | ||
@@ -397,4 +451,5 @@ | ||
const onDrillDown = jest.fn(); | ||
const instance = createRef(); | ||
const component = shallow( | ||
render( | ||
<Calendar | ||
@@ -404,6 +459,7 @@ activeStartDate={new Date(2001, 0, 1)} | ||
view="century" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().drillDown(new Date(2011, 0, 1)); | ||
instance.current.drillDown(new Date(2011, 0, 1)); | ||
@@ -419,11 +475,15 @@ expect(onDrillDown).toHaveBeenCalledWith({ | ||
const onDrillDown = jest.fn(); | ||
const instance = createRef(); | ||
const component = shallow( | ||
<Calendar activeStartDate={new Date(2001, 0, 1)} onDrillDown={onDrillDown} />, | ||
render( | ||
<Calendar | ||
activeStartDate={new Date(2001, 0, 1)} | ||
onDrillDown={onDrillDown} | ||
ref={instance} | ||
/>, | ||
); | ||
component.setState({ view: 'century' }); | ||
instance.current.setState({ view: 'century' }); | ||
instance.current.drillDown(new Date(2011, 0, 1)); | ||
component.instance().drillDown(new Date(2011, 0, 1)); | ||
expect(onDrillDown).toHaveBeenCalledWith({ | ||
@@ -438,6 +498,7 @@ action: 'drillDown', | ||
const onDrillDown = jest.fn(); | ||
const instance = createRef(); | ||
const component = shallow(<Calendar onDrillDown={onDrillDown} view="month" />); | ||
render(<Calendar onDrillDown={onDrillDown} view="month" ref={instance} />); | ||
component.instance().drillUp(); | ||
instance.current.drillUp(); | ||
@@ -450,7 +511,9 @@ expect(onDrillDown).not.toHaveBeenCalled(); | ||
it('changes active start date when allowed', () => { | ||
const component = shallow(<Calendar />); | ||
const instance = createRef(); | ||
component.instance().setActiveStartDate(new Date(2019, 0, 1)); | ||
render(<Calendar ref={instance} />); | ||
expect(component.instance().activeStartDate).toEqual(new Date(2019, 0, 1)); | ||
instance.current.setActiveStartDate(new Date(2019, 0, 1)); | ||
expect(instance.current.activeStartDate).toEqual(new Date(2019, 0, 1)); | ||
}); | ||
@@ -462,7 +525,14 @@ | ||
const onActiveStartDateChange = jest.fn(); | ||
const component = shallow( | ||
<Calendar onActiveStartDateChange={onActiveStartDateChange} value={value} view="year" />, | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
onActiveStartDateChange={onActiveStartDateChange} | ||
value={value} | ||
view="year" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().setActiveStartDate(newActiveStartDate); | ||
instance.current.setActiveStartDate(newActiveStartDate); | ||
@@ -481,3 +551,5 @@ expect(onActiveStartDateChange).toHaveBeenCalledWith({ | ||
const onActiveStartDateChange = jest.fn(); | ||
const component = shallow( | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
@@ -488,6 +560,7 @@ activeStartDate={activeStartDate} | ||
view="year" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().setActiveStartDate(newActiveStartDate); | ||
instance.current.setActiveStartDate(newActiveStartDate); | ||
@@ -505,3 +578,5 @@ expect(onActiveStartDateChange).toHaveBeenCalledWith({ | ||
const onActiveStartDateChange = jest.fn(); | ||
const component = shallow( | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
@@ -511,6 +586,7 @@ activeStartDate={activeStartDate} | ||
view="year" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().setActiveStartDate(newActiveStartDate); | ||
instance.current.setActiveStartDate(newActiveStartDate); | ||
@@ -524,7 +600,14 @@ expect(onActiveStartDateChange).not.toHaveBeenCalled(); | ||
const onActiveStartDateChange = jest.fn(); | ||
const component = shallow( | ||
<Calendar onActiveStartDateChange={onActiveStartDateChange} value={value} view="year" />, | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
onActiveStartDateChange={onActiveStartDateChange} | ||
value={value} | ||
view="year" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().setActiveStartDate(newActiveStartDate); | ||
instance.current.setActiveStartDate(newActiveStartDate); | ||
@@ -541,7 +624,14 @@ expect(onActiveStartDateChange).not.toHaveBeenCalled(); | ||
const onViewChange = jest.fn(); | ||
const component = shallow( | ||
<Calendar activeStartDate={activeStartDate} onViewChange={onViewChange} value={value} />, | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
activeStartDate={activeStartDate} | ||
onViewChange={onViewChange} | ||
value={value} | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().setStateAndCallCallbacks({ view: newView }); | ||
instance.current.setStateAndCallCallbacks({ view: newView }); | ||
@@ -561,3 +651,5 @@ expect(onViewChange).toHaveBeenCalledWith({ | ||
const onViewChange = jest.fn(); | ||
const component = shallow( | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
@@ -568,6 +660,7 @@ activeStartDate={activeStartDate} | ||
view={view} | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().setStateAndCallCallbacks({ view: newView }); | ||
instance.current.setStateAndCallCallbacks({ view: newView }); | ||
@@ -585,6 +678,8 @@ expect(onViewChange).toHaveBeenCalledWith({ | ||
const onViewChange = jest.fn(); | ||
const component = shallow(<Calendar onViewChange={onViewChange} view={view} />); | ||
const instance = createRef(); | ||
component.instance().setStateAndCallCallbacks({ view: newView }); | ||
render(<Calendar onViewChange={onViewChange} view={view} ref={instance} />); | ||
instance.current.setStateAndCallCallbacks({ view: newView }); | ||
expect(onViewChange).not.toHaveBeenCalled(); | ||
@@ -597,6 +692,8 @@ }); | ||
const onChange = jest.fn(); | ||
const component = shallow(<Calendar onChange={onChange} view="month" />); | ||
const instance = createRef(); | ||
component.instance().onChange(new Date(2017, 0, 1), event); | ||
render(<Calendar onChange={onChange} view="month" ref={instance} />); | ||
instance.current.onChange(new Date(2017, 0, 1), event); | ||
expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1), event); | ||
@@ -607,6 +704,8 @@ }); | ||
const onChange = jest.fn(); | ||
const component = shallow(<Calendar onChange={onChange} returnValue="start" view="month" />); | ||
const instance = createRef(); | ||
component.instance().onChange(new Date(2017, 0, 1), event); | ||
render(<Calendar onChange={onChange} returnValue="start" view="month" ref={instance} />); | ||
instance.current.onChange(new Date(2017, 0, 1), event); | ||
expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1), event); | ||
@@ -617,6 +716,8 @@ }); | ||
const onChange = jest.fn(); | ||
const component = shallow(<Calendar onChange={onChange} returnValue="end" view="month" />); | ||
const instance = createRef(); | ||
component.instance().onChange(new Date(2017, 0, 1), event); | ||
render(<Calendar onChange={onChange} returnValue="end" view="month" ref={instance} />); | ||
instance.current.onChange(new Date(2017, 0, 1), event); | ||
expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1, 23, 59, 59, 999), event); | ||
@@ -627,6 +728,8 @@ }); | ||
const onChange = jest.fn(); | ||
const component = shallow(<Calendar onChange={onChange} returnValue="range" view="month" />); | ||
const instance = createRef(); | ||
component.instance().onChange(new Date(2017, 0, 1), event); | ||
render(<Calendar onChange={onChange} returnValue="range" view="month" ref={instance} />); | ||
instance.current.onChange(new Date(2017, 0, 1), event); | ||
expect(onChange).toHaveBeenCalledWith( | ||
@@ -640,3 +743,5 @@ [new Date(2017, 0, 1), new Date(2017, 0, 1, 23, 59, 59, 999)], | ||
const onChange = jest.fn(); | ||
const component = shallow( | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
@@ -647,6 +752,7 @@ minDate={new Date(2017, 0, 1, 12)} | ||
view="month" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().onChange(new Date(2017, 0, 1), event); | ||
instance.current.onChange(new Date(2017, 0, 1), event); | ||
@@ -658,3 +764,5 @@ expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1, 12), event); | ||
const onChange = jest.fn(); | ||
const component = shallow( | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
@@ -665,6 +773,7 @@ maxDate={new Date(2017, 0, 1, 12)} | ||
view="month" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().onChange(new Date(2017, 0, 2), event); | ||
instance.current.onChange(new Date(2017, 0, 2), event); | ||
@@ -676,3 +785,5 @@ expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1, 12), event); | ||
const onChange = jest.fn(); | ||
const component = shallow( | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
@@ -683,6 +794,7 @@ minDate={new Date(2017, 0, 2, 12)} | ||
view="month" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().onChange(new Date(2017, 0, 1), event); | ||
instance.current.onChange(new Date(2017, 0, 1), event); | ||
@@ -694,3 +806,5 @@ expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 2, 12), event); | ||
const onChange = jest.fn(); | ||
const component = shallow( | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
@@ -701,6 +815,7 @@ maxDate={new Date(2017, 0, 1, 12)} | ||
view="month" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().onChange(new Date(2017, 0, 2), event); | ||
instance.current.onChange(new Date(2017, 0, 2), event); | ||
@@ -712,6 +827,8 @@ expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1, 12), event); | ||
const onChange = jest.fn(); | ||
const component = shallow(<Calendar onChange={onChange} selectRange view="month" />); | ||
const instance = createRef(); | ||
component.instance().onChange(new Date(2018, 0, 1), event); | ||
render(<Calendar onChange={onChange} selectRange view="month" ref={instance} />); | ||
instance.current.onChange(new Date(2018, 0, 1), event); | ||
expect(onChange).not.toHaveBeenCalled(); | ||
@@ -722,7 +839,15 @@ }); | ||
const onChange = jest.fn(); | ||
const component = shallow( | ||
<Calendar allowPartialRange={false} onChange={onChange} selectRange view="month" />, | ||
const instance = createRef(); | ||
render( | ||
<Calendar | ||
allowPartialRange={false} | ||
onChange={onChange} | ||
selectRange | ||
view="month" | ||
ref={instance} | ||
/>, | ||
); | ||
component.instance().onChange(new Date(2018, 0, 1), event); | ||
instance.current.onChange(new Date(2018, 0, 1), event); | ||
@@ -734,7 +859,9 @@ expect(onChange).not.toHaveBeenCalled(); | ||
const onChange = jest.fn(); | ||
const component = shallow( | ||
<Calendar allowPartialRange onChange={onChange} selectRange view="month" />, | ||
const instance = createRef(); | ||
render( | ||
<Calendar allowPartialRange onChange={onChange} selectRange view="month" ref={instance} />, | ||
); | ||
component.instance().onChange(new Date(2018, 0, 1), event); | ||
instance.current.onChange(new Date(2018, 0, 1), event); | ||
@@ -747,7 +874,9 @@ expect(onChange).toHaveBeenCalledTimes(1); | ||
const onChange = jest.fn(); | ||
const component = shallow(<Calendar onChange={onChange} selectRange view="month" />); | ||
const instance = createRef(); | ||
component.instance().onChange(new Date(2018, 0, 1), event); | ||
component.instance().onChange(new Date(2018, 6, 1), event); | ||
render(<Calendar onChange={onChange} selectRange view="month" ref={instance} />); | ||
instance.current.onChange(new Date(2018, 0, 1), event); | ||
instance.current.onChange(new Date(2018, 6, 1), event); | ||
expect(onChange).toHaveBeenCalledTimes(1); | ||
@@ -762,7 +891,9 @@ expect(onChange).toHaveBeenCalledWith( | ||
const onChange = jest.fn(); | ||
const component = shallow(<Calendar onChange={onChange} selectRange view="month" />); | ||
const instance = createRef(); | ||
component.instance().onChange(new Date(2018, 6, 1), event); | ||
component.instance().onChange(new Date(2018, 0, 1), event); | ||
render(<Calendar onChange={onChange} selectRange view="month" ref={instance} />); | ||
instance.current.onChange(new Date(2018, 6, 1), event); | ||
instance.current.onChange(new Date(2018, 0, 1), event); | ||
expect(onChange).toHaveBeenCalledTimes(1); | ||
@@ -778,7 +909,8 @@ expect(onChange).toHaveBeenCalledWith( | ||
const formatMonthYear = () => 'Month year'; | ||
const component = shallow(<Calendar formatMonthYear={formatMonthYear} />); | ||
const navigation = component.find('Navigation'); | ||
const { container } = render(<Calendar formatMonthYear={formatMonthYear} />); | ||
expect(navigation.prop('formatMonthYear')).toBe(formatMonthYear); | ||
const navigation = container.querySelector('.react-calendar__navigation'); | ||
expect(navigation).toHaveTextContent('Month year'); | ||
}); | ||
@@ -788,7 +920,8 @@ | ||
const formatYear = () => 'Year'; | ||
const component = shallow(<Calendar formatYear={formatYear} />); | ||
const navigation = component.find('Navigation'); | ||
const { container } = render(<Calendar formatYear={formatYear} view="year" />); | ||
expect(navigation.prop('formatYear')).toBe(formatYear); | ||
const navigation = container.querySelector('.react-calendar__navigation'); | ||
expect(navigation).toHaveTextContent('Year'); | ||
}); | ||
@@ -798,7 +931,8 @@ | ||
const formatDay = () => 'Day'; | ||
const component = shallow(<Calendar formatDay={formatDay} />); | ||
const monthView = component.find('MonthView'); | ||
const { container } = render(<Calendar formatDay={formatDay} />); | ||
expect(monthView.prop('formatDay')).toBe(formatDay); | ||
const monthView = container.querySelector('.react-calendar__month-view'); | ||
expect(monthView).toHaveTextContent('Day'); | ||
}); | ||
@@ -808,7 +942,9 @@ | ||
const formatLongDate = () => 'Long date'; | ||
const component = shallow(<Calendar formatLongDate={formatLongDate} />); | ||
const monthView = component.find('MonthView'); | ||
const { container } = render(<Calendar formatLongDate={formatLongDate} />); | ||
expect(monthView.prop('formatLongDate')).toBe(formatLongDate); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName('Long date'); | ||
}); | ||
@@ -818,7 +954,8 @@ | ||
const formatShortWeekday = () => 'Weekday'; | ||
const component = shallow(<Calendar formatShortWeekday={formatShortWeekday} />); | ||
const monthView = component.find('MonthView'); | ||
const { container } = render(<Calendar formatShortWeekday={formatShortWeekday} />); | ||
expect(monthView.prop('formatShortWeekday')).toBe(formatShortWeekday); | ||
const monthView = container.querySelector('.react-calendar__month-view'); | ||
expect(monthView).toHaveTextContent('Weekday'); | ||
}); | ||
@@ -828,7 +965,8 @@ | ||
const formatMonth = () => 'Month'; | ||
const component = shallow(<Calendar formatMonth={formatMonth} view="year" />); | ||
const yearView = component.find('YearView'); | ||
const { container } = render(<Calendar formatMonth={formatMonth} view="year" />); | ||
expect(yearView.prop('formatMonth')).toBe(formatMonth); | ||
const yearView = container.querySelector('.react-calendar__year-view'); | ||
expect(yearView).toHaveTextContent('Month'); | ||
}); | ||
@@ -838,7 +976,8 @@ | ||
const formatYear = () => 'Year'; | ||
const component = shallow(<Calendar formatYear={formatYear} view="decade" />); | ||
const decadeView = component.find('DecadeView'); | ||
const { container } = render(<Calendar formatYear={formatYear} view="decade" />); | ||
expect(decadeView.prop('formatYear')).toBe(formatYear); | ||
const decadeView = container.querySelector('.react-calendar__decade-view'); | ||
expect(decadeView).toHaveTextContent('Year'); | ||
}); | ||
@@ -848,8 +987,9 @@ | ||
const formatYear = () => 'Year'; | ||
const component = shallow(<Calendar formatYear={formatYear} view="century" />); | ||
const centuryView = component.find('CenturyView'); | ||
const { container } = render(<Calendar formatYear={formatYear} view="century" />); | ||
expect(centuryView.prop('formatYear')).toBe(formatYear); | ||
const centuryView = container.querySelector('.react-calendar__century-view'); | ||
expect(centuryView).toHaveTextContent('Year'); | ||
}); | ||
}); |
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
import { fireEvent, render } from '@testing-library/react'; | ||
@@ -17,5 +17,5 @@ import Navigation from './Navigation'; | ||
it('renders prev2, prev, drill up, next and next2 buttons', () => { | ||
const component = shallow(<Navigation {...defaultProps} view="month" />); | ||
const { container } = render(<Navigation {...defaultProps} view="month" />); | ||
const children = component.children(); | ||
const children = [...container.firstChild.children]; | ||
@@ -33,5 +33,5 @@ const [prev2, prev, drillUp, next, next2] = children; | ||
it('renders prev, drill up, next and buttons only for century view', () => { | ||
const component = shallow(<Navigation {...defaultProps} view="century" />); | ||
const { container } = render(<Navigation {...defaultProps} view="century" />); | ||
const children = component.children(); | ||
const children = [...container.firstChild.children]; | ||
@@ -47,43 +47,43 @@ const [prev, drillUp, next] = children; | ||
it('displays proper title for month view', () => { | ||
const component = shallow(<Navigation {...defaultProps} view="month" />); | ||
const { container } = render(<Navigation {...defaultProps} view="month" />); | ||
const drillUp = component.find('.react-calendar__navigation__label'); | ||
const drillUp = container.querySelector('.react-calendar__navigation__label'); | ||
expect(drillUp.text()).toBe('January 2017'); | ||
expect(drillUp).toHaveTextContent('January 2017'); | ||
}); | ||
it('displays proper title for year view', () => { | ||
const component = shallow(<Navigation {...defaultProps} view="year" />); | ||
const { container } = render(<Navigation {...defaultProps} view="year" />); | ||
const drillUp = component.find('.react-calendar__navigation__label'); | ||
const drillUp = container.querySelector('.react-calendar__navigation__label'); | ||
expect(drillUp.text()).toBe('2017'); | ||
expect(drillUp).toHaveTextContent('2017'); | ||
}); | ||
it('displays proper title for decade view', () => { | ||
const component = shallow(<Navigation {...defaultProps} view="decade" />); | ||
const { container } = render(<Navigation {...defaultProps} view="decade" />); | ||
const drillUp = component.find('.react-calendar__navigation__label'); | ||
const drillUp = container.querySelector('.react-calendar__navigation__label'); | ||
expect(drillUp.text()).toBe('2011 – 2020'); | ||
expect(drillUp).toHaveTextContent('2011 – 2020'); | ||
}); | ||
it('displays proper title for century view', () => { | ||
const component = shallow(<Navigation {...defaultProps} view="century" />); | ||
const { container } = render(<Navigation {...defaultProps} view="century" />); | ||
const drillUp = component.find('.react-calendar__navigation__label'); | ||
const drillUp = container.querySelector('.react-calendar__navigation__label'); | ||
expect(drillUp.text()).toBe('2001 – 2100'); | ||
expect(drillUp).toHaveTextContent('2001 – 2100'); | ||
}); | ||
it('displays proper title for month view given showDouble flags is set to true', () => { | ||
const component = shallow(<Navigation {...defaultProps} showDoubleView view="month" />); | ||
const { container } = render(<Navigation {...defaultProps} showDoubleView view="month" />); | ||
const drillUp = component.find('.react-calendar__navigation__label'); | ||
const drillUp = container.querySelector('.react-calendar__navigation__label'); | ||
expect(drillUp.text()).toBe('January 2017 – February 2017'); | ||
expect(drillUp).toHaveTextContent('January 2017 – February 2017'); | ||
}); | ||
it('displays proper user-defined labels on prev2, prev, next and next2 buttons', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation | ||
@@ -99,22 +99,22 @@ {...defaultProps} | ||
const [prev2, prev, , next, next2] = component.children(); | ||
const [prev2, prev, , next, next2] = [...container.firstChild.children]; | ||
expect(prev2.props.children).toBe('prev2Label'); | ||
expect(prev.props.children).toBe('prevLabel'); | ||
expect(next.props.children).toBe('nextLabel'); | ||
expect(next2.props.children).toBe('next2Label'); | ||
expect(prev2).toHaveTextContent('prev2Label'); | ||
expect(prev).toHaveTextContent('prevLabel'); | ||
expect(next).toHaveTextContent('nextLabel'); | ||
expect(next2).toHaveTextContent('next2Label'); | ||
}); | ||
it('uses proper user-defined ARIA live on navigation button', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} navigationAriaLive="polite" view="month" />, | ||
); | ||
const [, , navigation] = component.children(); | ||
const [, , navigation] = [...container.firstChild.children]; | ||
expect(navigation.props['aria-live']).toBe('polite'); | ||
expect(navigation).toHaveAttribute('aria-live', 'polite'); | ||
}); | ||
it('displays proper user-defined ARIA labels on prev2, prev, navigation, next and next2 buttons', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation | ||
@@ -131,9 +131,9 @@ {...defaultProps} | ||
const [prev2, prev, navigation, next, next2] = component.children(); | ||
const [prev2, prev, navigation, next, next2] = [...container.firstChild.children]; | ||
expect(prev2.props['aria-label']).toBe('prev2AriaLabel'); | ||
expect(prev.props['aria-label']).toBe('prevAriaLabel'); | ||
expect(navigation.props['aria-label']).toBe('navigationAriaLabel'); | ||
expect(next.props['aria-label']).toBe('nextAriaLabel'); | ||
expect(next2.props['aria-label']).toBe('next2AriaLabel'); | ||
expect(prev2).toHaveAccessibleName('prev2AriaLabel'); | ||
expect(prev).toHaveAccessibleName('prevAriaLabel'); | ||
expect(navigation).toHaveAccessibleName('navigationAriaLabel'); | ||
expect(next).toHaveAccessibleName('nextAriaLabel'); | ||
expect(next2).toHaveAccessibleName('next2AriaLabel'); | ||
}); | ||
@@ -143,8 +143,9 @@ | ||
const drillUpFn = jest.fn(); | ||
const component = shallow(<Navigation {...defaultProps} drillUp={drillUpFn} view="month" />); | ||
const button = component.find('button.react-calendar__navigation__label'); | ||
const { container } = render(<Navigation {...defaultProps} drillUp={drillUpFn} view="month" />); | ||
button.simulate('click'); | ||
const button = container.querySelector('button.react-calendar__navigation__label'); | ||
fireEvent.click(button); | ||
expect(drillUpFn).toHaveBeenCalledTimes(1); | ||
@@ -155,17 +156,18 @@ }); | ||
const setActiveStartDateFn = jest.fn(); | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} setActiveStartDate={setActiveStartDateFn} view="month" />, | ||
); | ||
const arrows = component.find('button.react-calendar__navigation__arrow'); | ||
const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow'); | ||
const prev2 = arrows.at(0); | ||
const prev = arrows.at(1); | ||
const next = arrows.at(2); | ||
const next2 = arrows.at(3); | ||
const prev2 = arrows[0]; | ||
const prev = arrows[1]; | ||
const next = arrows[2]; | ||
const next2 = arrows[3]; | ||
prev2.simulate('click'); | ||
prev.simulate('click'); | ||
next.simulate('click'); | ||
next2.simulate('click'); | ||
fireEvent.click(prev2); | ||
fireEvent.click(prev); | ||
fireEvent.click(next); | ||
fireEvent.click(next2); | ||
@@ -175,244 +177,272 @@ expect(setActiveStartDateFn).toHaveBeenCalledTimes(4); | ||
const monthSetActiveStartDateFn = jest.fn(); | ||
describe('month navigation', () => { | ||
const monthSetActiveStartDateFn = jest.fn(); | ||
let monthViewArrows; | ||
const monthViewComponent = shallow( | ||
<Navigation {...defaultProps} setActiveStartDate={monthSetActiveStartDateFn} view="month" />, | ||
); | ||
beforeEach(() => { | ||
const { container: monthContainer } = render( | ||
<Navigation | ||
{...defaultProps} | ||
setActiveStartDate={monthSetActiveStartDateFn} | ||
view="month" | ||
/>, | ||
); | ||
const monthViewArrows = monthViewComponent.find('button.react-calendar__navigation__arrow'); | ||
monthViewArrows = monthContainer.querySelectorAll('button.react-calendar__navigation__arrow'); | ||
}); | ||
it('jumps 12 months back on prev2 button click for month view', () => { | ||
const prev2 = monthViewArrows.at(0); | ||
it('jumps 12 months back on prev2 button click for month view', () => { | ||
const prev2 = monthViewArrows[0]; | ||
prev2.simulate('click'); | ||
fireEvent.click(prev2); | ||
expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 0, 1), 'prev2'); | ||
}); | ||
expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 0, 1), 'prev2'); | ||
}); | ||
it('jumps 1 month back on prev button click for month view', () => { | ||
const prev = monthViewArrows.at(1); | ||
it('jumps 1 month back on prev button click for month view', () => { | ||
const prev = monthViewArrows[1]; | ||
prev.simulate('click'); | ||
fireEvent.click(prev); | ||
expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 11, 1), 'prev'); | ||
}); | ||
expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 11, 1), 'prev'); | ||
}); | ||
it('jumps 1 month forward on next button click for month view', () => { | ||
const next = monthViewArrows.at(2); | ||
it('jumps 1 month forward on next button click for month view', () => { | ||
const next = monthViewArrows[2]; | ||
next.simulate('click'); | ||
fireEvent.click(next); | ||
expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2017, 1, 1), 'next'); | ||
}); | ||
expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2017, 1, 1), 'next'); | ||
}); | ||
it('jumps 12 months forward on next2 button click for month view', () => { | ||
const next2 = monthViewArrows.at(3); | ||
it('jumps 12 months forward on next2 button click for month view', () => { | ||
const next2 = monthViewArrows[3]; | ||
next2.simulate('click'); | ||
fireEvent.click(next2); | ||
expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2018, 0, 1), 'next2'); | ||
expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2018, 0, 1), 'next2'); | ||
}); | ||
}); | ||
const yearSetActiveStartDateFn = jest.fn(); | ||
describe('year navigation', () => { | ||
const yearSetActiveStartDateFn = jest.fn(); | ||
let yearViewArrows; | ||
const yearViewComponent = shallow( | ||
<Navigation {...defaultProps} setActiveStartDate={yearSetActiveStartDateFn} view="year" />, | ||
); | ||
beforeEach(() => { | ||
const { container: yearContainer } = render( | ||
<Navigation {...defaultProps} setActiveStartDate={yearSetActiveStartDateFn} view="year" />, | ||
); | ||
const yearViewArrows = yearViewComponent.find('button.react-calendar__navigation__arrow'); | ||
yearViewArrows = yearContainer.querySelectorAll('button.react-calendar__navigation__arrow'); | ||
}); | ||
it('jumps 10 years back on prev2 button click for year view', () => { | ||
const prev2 = yearViewArrows.at(0); | ||
it('jumps 10 years back on prev2 button click for year view', () => { | ||
const prev2 = yearViewArrows[0]; | ||
prev2.simulate('click'); | ||
fireEvent.click(prev2); | ||
expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2007, 0, 1), 'prev2'); | ||
}); | ||
expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2007, 0, 1), 'prev2'); | ||
}); | ||
it('jumps 1 year back on prev button click for year view', () => { | ||
const prev2 = yearViewArrows.at(1); | ||
it('jumps 1 year back on prev button click for year view', () => { | ||
const prev2 = yearViewArrows[1]; | ||
prev2.simulate('click'); | ||
fireEvent.click(prev2); | ||
expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 0, 1), 'prev'); | ||
}); | ||
expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 0, 1), 'prev'); | ||
}); | ||
it('jumps 1 year forward on next button click for year view', () => { | ||
const next = yearViewArrows.at(2); | ||
it('jumps 1 year forward on next button click for year view', () => { | ||
const next = yearViewArrows[2]; | ||
next.simulate('click'); | ||
fireEvent.click(next); | ||
expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2018, 0, 1), 'next'); | ||
}); | ||
expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2018, 0, 1), 'next'); | ||
}); | ||
it('jumps 10 years forward on next2 button click for year view', () => { | ||
const next2 = yearViewArrows.at(3); | ||
it('jumps 10 years forward on next2 button click for year view', () => { | ||
const next2 = yearViewArrows[3]; | ||
next2.simulate('click'); | ||
fireEvent.click(next2); | ||
expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2027, 0, 1), 'next2'); | ||
expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2027, 0, 1), 'next2'); | ||
}); | ||
}); | ||
const decadeSetActiveStartDateFn = jest.fn(); | ||
describe('decade navigation', () => { | ||
const decadeSetActiveStartDateFn = jest.fn(); | ||
let decadeViewArrows; | ||
const decadeViewComponent = shallow( | ||
<Navigation {...defaultProps} setActiveStartDate={decadeSetActiveStartDateFn} view="decade" />, | ||
); | ||
beforeEach(() => { | ||
const { container: decadeContainer } = render( | ||
<Navigation | ||
{...defaultProps} | ||
setActiveStartDate={decadeSetActiveStartDateFn} | ||
view="decade" | ||
/>, | ||
); | ||
const decadeViewArrows = decadeViewComponent.find('button.react-calendar__navigation__arrow'); | ||
decadeViewArrows = decadeContainer.querySelectorAll( | ||
'button.react-calendar__navigation__arrow', | ||
); | ||
}); | ||
it('jumps 10 decades back on prev2 button click for decade view', () => { | ||
const prev2 = decadeViewArrows.at(0); | ||
it('jumps 10 decades back on prev2 button click for decade view', () => { | ||
const prev2 = decadeViewArrows[0]; | ||
prev2.simulate('click'); | ||
fireEvent.click(prev2); | ||
expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(1911, 0, 1), 'prev2'); | ||
}); | ||
expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(1911, 0, 1), 'prev2'); | ||
}); | ||
it('jumps 1 decade back on prev button click for decade view', () => { | ||
const prev = decadeViewArrows.at(1); | ||
it('jumps 1 decade back on prev button click for decade view', () => { | ||
const prev = decadeViewArrows[1]; | ||
prev.simulate('click'); | ||
fireEvent.click(prev); | ||
expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2001, 0, 1), 'prev'); | ||
}); | ||
expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2001, 0, 1), 'prev'); | ||
}); | ||
it('jumps 1 decade forward on next button click for decade view', () => { | ||
const next = decadeViewArrows.at(2); | ||
it('jumps 1 decade forward on next button click for decade view', () => { | ||
const next = decadeViewArrows[2]; | ||
next.simulate('click'); | ||
fireEvent.click(next); | ||
expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2021, 0, 1), 'next'); | ||
}); | ||
expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2021, 0, 1), 'next'); | ||
}); | ||
it('jumps 10 decades forward on next2 button click for decade view', () => { | ||
const next2 = decadeViewArrows.at(3); | ||
it('jumps 10 decades forward on next2 button click for decade view', () => { | ||
const next2 = decadeViewArrows[3]; | ||
next2.simulate('click'); | ||
fireEvent.click(next2); | ||
expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2111, 0, 1), 'next2'); | ||
expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2111, 0, 1), 'next2'); | ||
}); | ||
}); | ||
const centurySetActiveStartDateFn = jest.fn(); | ||
describe('century navigation', () => { | ||
const centurySetActiveStartDateFn = jest.fn(); | ||
let centuryViewArrows; | ||
const centuryViewComponent = shallow( | ||
<Navigation | ||
{...defaultProps} | ||
setActiveStartDate={centurySetActiveStartDateFn} | ||
view="century" | ||
/>, | ||
); | ||
beforeEach(() => { | ||
const { container: centuryContainer } = render( | ||
<Navigation | ||
{...defaultProps} | ||
setActiveStartDate={centurySetActiveStartDateFn} | ||
view="century" | ||
/>, | ||
); | ||
const centuryViewArrows = centuryViewComponent.find('button.react-calendar__navigation__arrow'); | ||
centuryViewArrows = centuryContainer.querySelectorAll( | ||
'button.react-calendar__navigation__arrow', | ||
); | ||
}); | ||
it('jumps 1 century back on prev button click for century view', () => { | ||
const prev = centuryViewArrows.at(0); | ||
it('jumps 1 century back on prev button click for century view', () => { | ||
const prev = centuryViewArrows[0]; | ||
prev.simulate('click'); | ||
fireEvent.click(prev); | ||
expect(centurySetActiveStartDateFn).toHaveBeenCalledWith(new Date(1901, 0, 1), 'prev'); | ||
}); | ||
expect(centurySetActiveStartDateFn).toHaveBeenCalledWith(new Date(1901, 0, 1), 'prev'); | ||
}); | ||
it('jumps 1 century forward on next button click for century view', () => { | ||
const next = centuryViewArrows.at(1); | ||
it('jumps 1 century forward on next button click for century view', () => { | ||
const next = centuryViewArrows[1]; | ||
next.simulate('click'); | ||
fireEvent.click(next); | ||
expect(centurySetActiveStartDateFn).toHaveBeenCalledWith(new Date(2101, 0, 1), 'next'); | ||
expect(centurySetActiveStartDateFn).toHaveBeenCalledWith(new Date(2101, 0, 1), 'next'); | ||
}); | ||
}); | ||
it('correctly marks drillUp button as disabled when already on top allowed view', () => { | ||
const component = shallow(<Navigation {...defaultProps} view="century" />); | ||
const { container } = render(<Navigation {...defaultProps} view="century" />); | ||
const button = component.find('button.react-calendar__navigation__label'); | ||
const button = container.querySelector('button.react-calendar__navigation__label'); | ||
expect(button.prop('disabled')).toBeTruthy(); | ||
expect(button).toBeDisabled(); | ||
}); | ||
it('disallows navigating before minDate', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} minDate={new Date(2017, 0, 1)} view="month" />, | ||
); | ||
const arrows = component.find('button.react-calendar__navigation__arrow'); | ||
const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow'); | ||
const prev2 = arrows.at(0); | ||
const prev = arrows.at(1); | ||
const prev2 = arrows[0]; | ||
const prev = arrows[1]; | ||
expect(prev2.prop('disabled')).toBeTruthy(); | ||
expect(prev.prop('disabled')).toBeTruthy(); | ||
expect(prev2).toBeDisabled(); | ||
expect(prev).toBeDisabled(); | ||
}); | ||
it('disallows navigating before dynamically set minDate', () => { | ||
const component = shallow(<Navigation {...defaultProps} view="month" />); | ||
const { container, rerender } = render(<Navigation {...defaultProps} view="month" />); | ||
component.setProps({ | ||
minDate: new Date(2017, 0, 1), | ||
}); | ||
rerender(<Navigation {...defaultProps} minDate={new Date(2017, 0, 1)} view="month" />); | ||
const arrows = component.find('button.react-calendar__navigation__arrow'); | ||
const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow'); | ||
const prev2 = arrows.at(0); | ||
const prev = arrows.at(1); | ||
const prev2 = arrows[0]; | ||
const prev = arrows[1]; | ||
expect(prev2.prop('disabled')).toBeTruthy(); | ||
expect(prev.prop('disabled')).toBeTruthy(); | ||
expect(prev2).toBeDisabled(); | ||
expect(prev).toBeDisabled(); | ||
}); | ||
it('disallows navigating after maxDate', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} maxDate={new Date(2017, 0, 31)} view="month" />, | ||
); | ||
const arrows = component.find('button.react-calendar__navigation__arrow'); | ||
const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow'); | ||
const next = arrows.at(2); | ||
const next2 = arrows.at(3); | ||
const next = arrows[2]; | ||
const next2 = arrows[3]; | ||
expect(next.prop('disabled')).toBeTruthy(); | ||
expect(next2.prop('disabled')).toBeTruthy(); | ||
expect(next).toBeDisabled(); | ||
expect(next2).toBeDisabled(); | ||
}); | ||
it('does not disallow navigating to next month when maxDate is set to first day of the next month', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} maxDate={new Date(2017, 1, 1)} view="month" />, | ||
); | ||
const arrows = component.find('button.react-calendar__navigation__arrow'); | ||
const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow'); | ||
const next = arrows.at(2); | ||
const next2 = arrows.at(3); | ||
const next = arrows[2]; | ||
const next2 = arrows[3]; | ||
expect(next.prop('disabled')).toBeFalsy(); | ||
expect(next2.prop('disabled')).toBeTruthy(); | ||
expect(next).toBeEnabled(); | ||
expect(next2).toBeDisabled(); | ||
}); | ||
it('does not disallow navigating to next year when maxDate is set to first day of the next year', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} maxDate={new Date(2018, 0, 1)} view="month" />, | ||
); | ||
const arrows = component.find('button.react-calendar__navigation__arrow'); | ||
const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow'); | ||
const next = arrows.at(2); | ||
const next2 = arrows.at(3); | ||
const next = arrows[2]; | ||
const next2 = arrows[3]; | ||
expect(next.prop('disabled')).toBeFalsy(); | ||
expect(next2.prop('disabled')).toBeFalsy(); | ||
expect(next).toBeEnabled(); | ||
expect(next2).toBeEnabled(); | ||
}); | ||
it('disallows navigating after dynamically set maxDate', () => { | ||
const component = shallow(<Navigation {...defaultProps} view="month" />); | ||
const { container, rerender } = render(<Navigation {...defaultProps} view="month" />); | ||
component.setProps({ | ||
maxDate: new Date(2017, 0, 31), | ||
}); | ||
rerender(<Navigation {...defaultProps} maxDate={new Date(2017, 0, 31)} view="month" />); | ||
const arrows = component.find('button.react-calendar__navigation__arrow'); | ||
const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow'); | ||
const next = arrows.at(2); | ||
const next2 = arrows.at(3); | ||
const next = arrows[2]; | ||
const next2 = arrows[3]; | ||
expect(next.prop('disabled')).toBeTruthy(); | ||
expect(next2.prop('disabled')).toBeTruthy(); | ||
expect(next).toBeDisabled(); | ||
expect(next2).toBeDisabled(); | ||
}); | ||
@@ -424,13 +454,13 @@ | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} activeStartDate={activeStartDate} view="year" />, | ||
); | ||
const arrows = component.find('button.react-calendar__navigation__arrow'); | ||
const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow'); | ||
const prev2 = arrows.at(0); | ||
const prev = arrows.at(1); | ||
const prev2 = arrows[0]; | ||
const prev = arrows[1]; | ||
expect(prev2.prop('disabled')).toBeTruthy(); | ||
expect(prev.prop('disabled')).toBeTruthy(); | ||
expect(prev2).toBeDisabled(); | ||
expect(prev).toBeDisabled(); | ||
}); | ||
@@ -446,3 +476,3 @@ | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation | ||
@@ -457,3 +487,3 @@ {...defaultProps} | ||
const drillUp = component.find('.react-calendar__navigation__label'); | ||
const drillUp = container.querySelector('.react-calendar__navigation__label'); | ||
@@ -466,3 +496,3 @@ expect(navigationLabel).toHaveBeenCalledWith({ | ||
}); | ||
expect(drillUp.text()).toBe(label); | ||
expect(drillUp).toHaveTextContent(label); | ||
}); | ||
@@ -472,41 +502,41 @@ | ||
it('displays calendar with custom month year navigation label', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} formatMonthYear={() => 'MonthYear'} view="month" />, | ||
); | ||
const navigationLabel = component.find('.react-calendar__navigation__label').first(); | ||
const navigationLabel = container.querySelector('.react-calendar__navigation__label'); | ||
expect(navigationLabel.text()).toBe('MonthYear'); | ||
expect(navigationLabel).toHaveTextContent('MonthYear'); | ||
}); | ||
it('displays calendar with custom year navigation label', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} formatYear={() => 'Year'} view="year" />, | ||
); | ||
const navigationLabel = component.find('.react-calendar__navigation__label').first(); | ||
const navigationLabel = container.querySelector('.react-calendar__navigation__label'); | ||
expect(navigationLabel.text()).toBe('Year'); | ||
expect(navigationLabel).toHaveTextContent('Year'); | ||
}); | ||
it('displays calendar with custom decade navigation label', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} formatYear={() => 'Year'} view="decade" />, | ||
); | ||
const navigationLabel = component.find('.react-calendar__navigation__label').first(); | ||
const navigationLabel = container.querySelector('.react-calendar__navigation__label'); | ||
expect(navigationLabel.text()).toBe('Year – Year'); | ||
expect(navigationLabel).toHaveTextContent('Year – Year'); | ||
}); | ||
it('displays calendar with custom century navigation label', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Navigation {...defaultProps} formatYear={() => 'Year'} view="century" />, | ||
); | ||
const navigationLabel = component.find('.react-calendar__navigation__label').first(); | ||
const navigationLabel = container.querySelector('.react-calendar__navigation__label'); | ||
expect(navigationLabel.text()).toBe('Year – Year'); | ||
expect(navigationLabel).toHaveTextContent('Year – Year'); | ||
}); | ||
}); | ||
}); |
import React from 'react'; | ||
import { mount, shallow } from 'enzyme'; | ||
import { render } from '@testing-library/react'; | ||
import { getDecadeStart, getDecadeEnd } from '@wojtekmaj/date-utils'; | ||
@@ -14,3 +14,4 @@ | ||
const activeStartDate = new Date(2001, 0, 1); | ||
const component = mount( | ||
const { container } = render( | ||
<CenturyView | ||
@@ -23,5 +24,5 @@ {...defaultProps} | ||
const firstDayTile = component.find('.react-calendar__tile').first(); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
expect(firstDayTile.text()).toBe( | ||
expect(firstDayTile).toHaveTextContent( | ||
`${getDecadeStart(activeStartDate).getFullYear()} – ${getDecadeEnd( | ||
@@ -35,10 +36,10 @@ activeStartDate, | ||
const tileClassName = 'testClassName'; | ||
const component = mount( | ||
const { container } = render( | ||
<CenturyView {...defaultProps} showNeighboringMonth={false} tileClassName={tileClassName} />, | ||
); | ||
const firstDayTile = component.find('.react-calendar__tile').first(); | ||
const firstDayTileClassName = firstDayTile.prop('className'); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
expect(firstDayTileClassName.includes(tileClassName)).toBe(true); | ||
expect(firstDayTile).toHaveClass(tileClassName); | ||
}); | ||
@@ -55,3 +56,4 @@ | ||
}; | ||
const component = mount( | ||
const { container } = render( | ||
<CenturyView | ||
@@ -65,11 +67,7 @@ {...defaultProps} | ||
const tiles = component.find('.react-calendar__tile'); | ||
const tiles = container.querySelectorAll('.react-calendar__tile'); | ||
const [firstDayTile, secondDayTile] = tiles; | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileClassName = firstDayTile.prop('className'); | ||
const secondDayTile = tiles.at(1); | ||
const secondDayTileClassName = secondDayTile.prop('className'); | ||
expect(firstDayTileClassName.includes('firstDayOfTheMonth')).toBe(true); | ||
expect(secondDayTileClassName.includes('firstDayOfTheMonth')).toBe(false); | ||
expect(firstDayTile).toHaveClass('firstDayOfTheMonth'); | ||
expect(secondDayTile).not.toHaveClass('firstDayOfTheMonth'); | ||
}); | ||
@@ -79,12 +77,13 @@ | ||
const tileContent = <div className="testContent" />; | ||
const component = mount( | ||
const { container } = render( | ||
<CenturyView {...defaultProps} showNeighboringMonth={false} tileContent={tileContent} />, | ||
); | ||
const tiles = component.find('.react-calendar__tile'); | ||
const tiles = container.querySelectorAll('.react-calendar__tile'); | ||
const [firstDayTile] = tiles; | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileContent = firstDayTile.find('.testContent'); | ||
const firstDayTileContent = firstDayTile.querySelector('.testContent'); | ||
expect(firstDayTileContent).toHaveLength(1); | ||
expect(firstDayTileContent).toBeInTheDocument(); | ||
}); | ||
@@ -101,3 +100,4 @@ | ||
}; | ||
const component = mount( | ||
const { container } = render( | ||
<CenturyView | ||
@@ -111,22 +111,21 @@ {...defaultProps} | ||
const tiles = component.find('.react-calendar__tile'); | ||
const tiles = container.querySelectorAll('.react-calendar__tile'); | ||
const [firstDayTile, secondDayTile] = tiles; | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileContent = firstDayTile.find('.testContent'); | ||
const secondDayTile = tiles.at(1); | ||
const secondDayTileContent = secondDayTile.find('.testContent'); | ||
const firstDayTileContent = firstDayTile.querySelector('.testContent'); | ||
const secondDayTileContent = secondDayTile.querySelector('.testContent'); | ||
expect(firstDayTileContent).toHaveLength(1); | ||
expect(secondDayTileContent).toHaveLength(0); | ||
expect(firstDayTileContent).toBeInTheDocument(); | ||
expect(secondDayTileContent).not.toBeInTheDocument(); | ||
}); | ||
it('passes formatYear flag to Decades component', () => { | ||
it('displays century view with custom year formatting', () => { | ||
const formatYear = () => 'Year'; | ||
const component = shallow(<CenturyView {...defaultProps} formatYear={formatYear} />); | ||
const { container } = render(<CenturyView {...defaultProps} formatYear={formatYear} />); | ||
const years = component.find('Decades'); | ||
const year = container.querySelector('.react-calendar__century-view__decades'); | ||
expect(years.prop('formatYear')).toBe(formatYear); | ||
expect(year).toHaveTextContent('Year'); | ||
}); | ||
}); |
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { fireEvent, render } from '@testing-library/react'; | ||
@@ -15,3 +15,3 @@ import Decade from './Decade'; | ||
it('applies given classNames properly', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Decade | ||
@@ -24,49 +24,59 @@ {...tileProps} | ||
const wrapperClassName = component.find('.react-calendar__tile').prop('className'); | ||
const wrapper = container.querySelector('.react-calendar__tile'); | ||
expect(wrapperClassName.includes('react-calendar__tile')).toBe(true); | ||
expect(wrapperClassName.includes('react-calendar__tile--flag')).toBe(true); | ||
expect(wrapperClassName.includes('react-calendar__century-view__decades__decade')).toBe(true); | ||
expect(wrapperClassName.includes('testFunctionClassName')).toBe(true); | ||
expect(wrapper).toHaveClass('react-calendar__tile'); | ||
expect(wrapper).toHaveClass('react-calendar__tile--flag'); | ||
expect(wrapper).toHaveClass('react-calendar__century-view__decades__decade'); | ||
expect(wrapper).toHaveClass('testFunctionClassName'); | ||
}); | ||
it('renders component without abbreviation', () => { | ||
const component = mount(<Decade {...tileProps} date={new Date(2018, 0, 1)} decade={2011} />); | ||
const { container } = render( | ||
<Decade {...tileProps} date={new Date(2018, 0, 1)} decade={2011} />, | ||
); | ||
const abbr = component.find('abbr'); | ||
const abbr = container.querySelector('abbr'); | ||
expect(abbr).toHaveLength(0); | ||
expect(component.text()).toBe('2011 – 2020'); | ||
expect(abbr).not.toBeInTheDocument(); | ||
expect(container).toHaveTextContent('2011 – 2020'); | ||
}); | ||
it("is disabled when date is before beginning of minDate's decade", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Decade {...tileProps} date={new Date(2010, 0, 1)} minDate={new Date(2020, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeDisabled(); | ||
}); | ||
it("is not disabled when date is after beginning of minDate's decade", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Decade {...tileProps} date={new Date(2010, 0, 1)} minDate={new Date(2010, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeEnabled(); | ||
}); | ||
it("is disabled when date is after end of maxDate's decade", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Decade {...tileProps} date={new Date(2020, 0, 1)} maxDate={new Date(2010, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeDisabled(); | ||
}); | ||
it("is not disabled when date is before end of maxDate's decade", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Decade {...tileProps} date={new Date(2010, 0, 1)} maxDate={new Date(2010, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeEnabled(); | ||
}); | ||
@@ -78,5 +88,5 @@ | ||
const component = mount(<Decade {...tileProps} date={date} onClick={onClick} />); | ||
const { container } = render(<Decade {...tileProps} date={date} onClick={onClick} />); | ||
component.find('.react-calendar__tile').simulate('click'); | ||
fireEvent.click(container.querySelector('.react-calendar__tile')); | ||
@@ -91,5 +101,6 @@ expect(onClick).toHaveBeenCalled(); | ||
const component = mount(<Decade {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
const { container } = render(<Decade {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
component.find('.react-calendar__tile').simulate('mouseOver'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
fireEvent.mouseOver(tile); | ||
@@ -104,5 +115,6 @@ expect(onMouseOver).toHaveBeenCalled(); | ||
const component = mount(<Decade {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
const { container } = render(<Decade {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
component.find('.react-calendar__tile').simulate('focus'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
fireEvent.focus(tile); | ||
@@ -114,9 +126,9 @@ expect(onMouseOver).toHaveBeenCalled(); | ||
it('renders tileContent properly', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Decade {...tileProps} tileContent={<div className="testContent" />} />, | ||
); | ||
const testContent = component.find('.testContent'); | ||
const testContent = container.querySelector('.testContent'); | ||
expect(testContent).toHaveLength(1); | ||
expect(testContent).toBeInTheDocument(); | ||
}); | ||
@@ -129,5 +141,5 @@ | ||
const component = mount(<Decade {...tileProps} date={date} tileContent={tileContent} />); | ||
const { container } = render(<Decade {...tileProps} date={date} tileContent={tileContent} />); | ||
const testContent = component.find('.testContent'); | ||
const testContent = container.querySelector('.testContent'); | ||
@@ -140,3 +152,3 @@ expect(tileContent).toHaveBeenCalled(); | ||
}); | ||
expect(testContent).toHaveLength(1); | ||
expect(testContent).toBeInTheDocument(); | ||
}); | ||
@@ -150,12 +162,12 @@ | ||
const component = mount( | ||
const { container } = render( | ||
<Decade {...tileProps} date={date} formatYear={formatYear} locale={locale} />, | ||
); | ||
const tile = component.find('Tile'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(formatYear).toHaveBeenCalledTimes(2); | ||
expect(formatYear).toHaveBeenCalledWith(locale, new Date(2011, 0, 1)); | ||
expect(tile.text()).toBe('Mock format – Mock format'); | ||
expect(tile).toHaveTextContent('Mock format – Mock format'); | ||
}); | ||
}); |
import React from 'react'; | ||
import { mount, shallow } from 'enzyme'; | ||
import { render } from '@testing-library/react'; | ||
@@ -13,3 +13,4 @@ import DecadeView from './DecadeView'; | ||
const activeStartDate = new Date(2011, 0, 1); | ||
const component = mount( | ||
const { container } = render( | ||
<DecadeView | ||
@@ -22,5 +23,5 @@ {...defaultProps} | ||
const firstDayTile = component.find('.react-calendar__tile').first(); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
expect(firstDayTile.text()).toBe(`${activeStartDate.getFullYear()}`); | ||
expect(firstDayTile).toHaveTextContent(`${activeStartDate.getFullYear()}`); | ||
}); | ||
@@ -30,10 +31,10 @@ | ||
const tileClassName = 'testClassName'; | ||
const component = mount( | ||
const { container } = render( | ||
<DecadeView {...defaultProps} showNeighboringMonth={false} tileClassName={tileClassName} />, | ||
); | ||
const firstDayTile = component.find('.react-calendar__tile').first(); | ||
const firstDayTileClassName = firstDayTile.prop('className'); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
expect(firstDayTileClassName.includes(tileClassName)).toBe(true); | ||
expect(firstDayTile).toHaveClass(tileClassName); | ||
}); | ||
@@ -50,3 +51,4 @@ | ||
}; | ||
const component = mount( | ||
const { container } = render( | ||
<DecadeView | ||
@@ -60,11 +62,7 @@ {...defaultProps} | ||
const tiles = component.find('.react-calendar__tile'); | ||
const tiles = container.querySelectorAll('.react-calendar__tile'); | ||
const [firstDayTile, secondDayTile] = tiles; | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileClassName = firstDayTile.prop('className'); | ||
const secondDayTile = tiles.at(1); | ||
const secondDayTileClassName = secondDayTile.prop('className'); | ||
expect(firstDayTileClassName.includes('firstDayOfTheMonth')).toBe(true); | ||
expect(secondDayTileClassName.includes('firstDayOfTheMonth')).toBe(false); | ||
expect(firstDayTile).toHaveClass('firstDayOfTheMonth'); | ||
expect(secondDayTile).not.toHaveClass('firstDayOfTheMonth'); | ||
}); | ||
@@ -74,12 +72,11 @@ | ||
const tileContent = <div className="testContent" />; | ||
const component = mount( | ||
const { container } = render( | ||
<DecadeView {...defaultProps} showNeighboringMonth={false} tileContent={tileContent} />, | ||
); | ||
const tiles = component.find('.react-calendar__tile'); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileContent = firstDayTile.querySelector('.testContent'); | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileContent = firstDayTile.find('.testContent'); | ||
expect(firstDayTileContent).toHaveLength(1); | ||
expect(firstDayTileContent).toBeInTheDocument(); | ||
}); | ||
@@ -96,3 +93,4 @@ | ||
}; | ||
const component = mount( | ||
const { container } = render( | ||
<DecadeView | ||
@@ -106,22 +104,21 @@ {...defaultProps} | ||
const tiles = component.find('.react-calendar__tile'); | ||
const tiles = container.querySelectorAll('.react-calendar__tile'); | ||
const [firstDayTile, secondDayTile] = tiles; | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileContent = firstDayTile.find('.testContent'); | ||
const secondDayTile = tiles.at(1); | ||
const secondDayTileContent = secondDayTile.find('.testContent'); | ||
const firstDayTileContent = firstDayTile.querySelector('.testContent'); | ||
const secondDayTileContent = secondDayTile.querySelector('.testContent'); | ||
expect(firstDayTileContent).toHaveLength(1); | ||
expect(secondDayTileContent).toHaveLength(0); | ||
expect(firstDayTileContent).toBeInTheDocument(); | ||
expect(secondDayTileContent).not.toBeInTheDocument(); | ||
}); | ||
it('passes formatYear flag to Years component', () => { | ||
it('passes decade view with custom year formatting', () => { | ||
const formatYear = () => 'Year'; | ||
const component = shallow(<DecadeView {...defaultProps} formatYear={formatYear} />); | ||
const { container } = render(<DecadeView {...defaultProps} formatYear={formatYear} />); | ||
const years = component.find('Years'); | ||
const year = container.querySelector('.react-calendar__decade-view__years__year'); | ||
expect(years.prop('formatYear')).toBe(formatYear); | ||
expect(year).toHaveTextContent('Year'); | ||
}); | ||
}); |
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { fireEvent, render } from '@testing-library/react'; | ||
@@ -15,3 +15,3 @@ import Year from './Year'; | ||
it('applies given classNames properly', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Year | ||
@@ -24,49 +24,57 @@ {...tileProps} | ||
const wrapperClassName = component.find('.react-calendar__tile').prop('className'); | ||
const wrapper = container.querySelector('.react-calendar__tile'); | ||
expect(wrapperClassName.includes('react-calendar__tile')).toBe(true); | ||
expect(wrapperClassName.includes('react-calendar__tile--flag')).toBe(true); | ||
expect(wrapperClassName.includes('react-calendar__decade-view__years__year')).toBe(true); | ||
expect(wrapperClassName.includes('testFunctionClassName')).toBe(true); | ||
expect(wrapper).toHaveClass('react-calendar__tile'); | ||
expect(wrapper).toHaveClass('react-calendar__tile--flag'); | ||
expect(wrapper).toHaveClass('react-calendar__decade-view__years__year'); | ||
expect(wrapper).toHaveClass('testFunctionClassName'); | ||
}); | ||
it('renders component without abbreviation', () => { | ||
const component = mount(<Year {...tileProps} date={new Date(2018, 0, 1)} year={2018} />); | ||
const { container } = render(<Year {...tileProps} date={new Date(2018, 0, 1)} year={2018} />); | ||
const abbr = component.find('abbr'); | ||
const abbr = container.querySelector('abbr'); | ||
expect(abbr).toHaveLength(0); | ||
expect(component.text()).toBe('2018'); | ||
expect(abbr).not.toBeInTheDocument(); | ||
expect(container).toHaveTextContent('2018'); | ||
}); | ||
it("is disabled when date is before beginning of minDate's year", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Year {...tileProps} date={new Date(2018, 0, 1)} minDate={new Date(2019, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeDisabled(); | ||
}); | ||
it("is not disabled when date is after beginning of minDate's year", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Year {...tileProps} date={new Date(2018, 0, 1)} minDate={new Date(2018, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeEnabled(); | ||
}); | ||
it("is disabled when date is after end of maxDate's year", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Year {...tileProps} date={new Date(2018, 0, 1)} maxDate={new Date(2017, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeDisabled(); | ||
}); | ||
it("is not disabled when date is before end of maxDate's year", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Year {...tileProps} date={new Date(2018, 0, 1)} maxDate={new Date(2018, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeEnabled(); | ||
}); | ||
@@ -78,5 +86,5 @@ | ||
const component = mount(<Year {...tileProps} date={date} onClick={onClick} />); | ||
const { container } = render(<Year {...tileProps} date={date} onClick={onClick} />); | ||
component.find('.react-calendar__tile').simulate('click'); | ||
fireEvent.click(container.querySelector('.react-calendar__tile')); | ||
@@ -91,5 +99,6 @@ expect(onClick).toHaveBeenCalled(); | ||
const component = mount(<Year {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
const { container } = render(<Year {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
component.find('.react-calendar__tile').simulate('mouseOver'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
fireEvent.mouseOver(tile); | ||
@@ -104,5 +113,6 @@ expect(onMouseOver).toHaveBeenCalled(); | ||
const component = mount(<Year {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
const { container } = render(<Year {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
component.find('.react-calendar__tile').simulate('focus'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
fireEvent.focus(tile); | ||
@@ -114,7 +124,9 @@ expect(onMouseOver).toHaveBeenCalled(); | ||
it('renders tileContent properly', () => { | ||
const component = mount(<Year {...tileProps} tileContent={<div className="testContent" />} />); | ||
const { container } = render( | ||
<Year {...tileProps} tileContent={<div className="testContent" />} />, | ||
); | ||
const testContent = component.find('.testContent'); | ||
const testContent = container.querySelector('.testContent'); | ||
expect(testContent).toHaveLength(1); | ||
expect(testContent).toBeInTheDocument(); | ||
}); | ||
@@ -127,5 +139,5 @@ | ||
const component = mount(<Year {...tileProps} date={date} tileContent={tileContent} />); | ||
const { container } = render(<Year {...tileProps} date={date} tileContent={tileContent} />); | ||
const testContent = component.find('.testContent'); | ||
const testContent = container.querySelector('.testContent'); | ||
@@ -138,3 +150,3 @@ expect(tileContent).toHaveBeenCalled(); | ||
}); | ||
expect(testContent).toHaveLength(1); | ||
expect(testContent).toBeInTheDocument(); | ||
}); | ||
@@ -148,12 +160,12 @@ | ||
const component = mount( | ||
const { container } = render( | ||
<Year {...tileProps} date={date} formatYear={formatYear} locale={locale} />, | ||
); | ||
const tile = component.find('Tile'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(formatYear).toHaveBeenCalled(); | ||
expect(formatYear).toHaveBeenCalledWith(locale, date); | ||
expect(tile.text()).toBe('Mock format'); | ||
expect(tile).toHaveTextContent('Mock format'); | ||
}); | ||
}); |
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
import { render } from '@testing-library/react'; | ||
@@ -8,3 +8,3 @@ import Flex from './Flex'; | ||
it('styles itself properly with wrap flag set to false', () => { | ||
const noWrapComponent = shallow( | ||
const { container } = render( | ||
<Flex count={3} wrap={false}> | ||
@@ -17,8 +17,10 @@ <div>Hey</div> | ||
expect(noWrapComponent.prop('style').display).toBe('flex'); | ||
expect(noWrapComponent.prop('style').flexWrap).toBe('no-wrap'); | ||
const wrapper = container.firstChild; | ||
expect(wrapper).toHaveStyle('display: flex'); | ||
expect(wrapper).toHaveStyle('flex-wrap: no-wrap'); | ||
}); | ||
it('styles itself properly with wrap flag set to true', () => { | ||
const wrapComponent = shallow( | ||
const { container } = render( | ||
<Flex count={3} wrap> | ||
@@ -31,8 +33,10 @@ <div>Hey</div> | ||
expect(wrapComponent.prop('style').display).toBe('flex'); | ||
expect(wrapComponent.prop('style').flexWrap).toBe('wrap'); | ||
const wrapper = container.firstChild; | ||
expect(wrapper).toHaveStyle('display: flex'); | ||
expect(wrapper).toHaveStyle('flex-wrap: wrap'); | ||
}); | ||
it('renders all given children', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Flex count={3}> | ||
@@ -45,12 +49,12 @@ <div>Hey</div> | ||
const children = component.children(); | ||
const children = [...container.firstChild.children]; | ||
expect(children).toHaveLength(3); | ||
expect(children.at(0).text()).toBe('Hey'); | ||
expect(children.at(1).text()).toBe('Hi'); | ||
expect(children.at(2).text()).toBe('Hello'); | ||
expect(children[0]).toHaveTextContent('Hey'); | ||
expect(children[1]).toHaveTextContent('Hi'); | ||
expect(children[2]).toHaveTextContent('Hello'); | ||
}); | ||
it('properly sizes and positions all the elements', () => { | ||
const component = shallow( | ||
const { container } = render( | ||
<Flex count={3} offset={1}> | ||
@@ -62,9 +66,7 @@ <div>Hey</div> | ||
const children = component.children(); | ||
const children = [...container.firstChild.children]; | ||
children.forEach((child) => | ||
expect(parseFloat(child.prop('style').flexBasis)).toBeCloseTo(33.33), | ||
); | ||
expect(parseFloat(children.first().prop('style').marginLeft)).toBeCloseTo(33.33); | ||
children.forEach((child) => expect(child).toHaveStyle('flex-basis: 33.333333333333336%')); | ||
expect(children[0]).toHaveStyle('margin-left: 33.333333333333336%'); | ||
}); | ||
}); |
import React from 'react'; | ||
import { mount, shallow } from 'enzyme'; | ||
import { render } from '@testing-library/react'; | ||
import MonthView from './MonthView'; | ||
import { formatShortWeekday } from './shared/dateFormatter'; | ||
@@ -19,3 +20,4 @@ const { format } = new Intl.DateTimeFormat('en-US', { | ||
const activeStartDate = new Date(2017, 0, 1); | ||
const component = mount( | ||
const { container } = render( | ||
<MonthView | ||
@@ -28,6 +30,6 @@ {...defaultProps} | ||
const firstDayTile = component.find('.react-calendar__tile').first(); | ||
const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label'); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
expect(firstDayTileTimeAbbr).toBe(format(activeStartDate)); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(activeStartDate)); | ||
}); | ||
@@ -37,10 +39,10 @@ | ||
const tileClassName = 'testClassName'; | ||
const component = mount( | ||
const { container } = render( | ||
<MonthView {...defaultProps} showNeighboringMonth={false} tileClassName={tileClassName} />, | ||
); | ||
const firstDayTile = component.find('.react-calendar__tile').first(); | ||
const firstDayTileClassName = firstDayTile.prop('className'); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
expect(firstDayTileClassName.includes(tileClassName)).toBe(true); | ||
expect(firstDayTile).toHaveClass(tileClassName); | ||
}); | ||
@@ -57,3 +59,4 @@ | ||
}; | ||
const component = mount( | ||
const { container } = render( | ||
<MonthView | ||
@@ -67,11 +70,7 @@ {...defaultProps} | ||
const tiles = component.find('.react-calendar__tile'); | ||
const tiles = container.querySelectorAll('.react-calendar__tile'); | ||
const [firstDayTile, secondDayTile] = tiles; | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileClassName = firstDayTile.prop('className'); | ||
const secondDayTile = tiles.at(1); | ||
const secondDayTileClassName = secondDayTile.prop('className'); | ||
expect(firstDayTileClassName.includes('firstDayOfTheMonth')).toBe(true); | ||
expect(secondDayTileClassName.includes('firstDayOfTheMonth')).toBe(false); | ||
expect(firstDayTile).toHaveClass('firstDayOfTheMonth'); | ||
expect(secondDayTile).not.toHaveClass('firstDayOfTheMonth'); | ||
}); | ||
@@ -81,12 +80,11 @@ | ||
const tileContent = <div className="testContent" />; | ||
const component = mount( | ||
const { container } = render( | ||
<MonthView {...defaultProps} showNeighboringMonth={false} tileContent={tileContent} />, | ||
); | ||
const tiles = component.find('.react-calendar__tile'); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileContent = firstDayTile.querySelector('.testContent'); | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileContent = firstDayTile.find('.testContent'); | ||
expect(firstDayTileContent).toHaveLength(1); | ||
expect(firstDayTileContent).toBeInTheDocument(); | ||
}); | ||
@@ -104,3 +102,3 @@ | ||
const component = mount( | ||
const { container } = render( | ||
<MonthView | ||
@@ -114,23 +112,26 @@ {...defaultProps} | ||
const tiles = component.find('.react-calendar__tile'); | ||
const tiles = container.querySelectorAll('.react-calendar__tile'); | ||
const [firstDayTile, secondDayTile] = tiles; | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileContent = firstDayTile.find('.testContent'); | ||
const secondDayTile = tiles.at(1); | ||
const secondDayTileContent = secondDayTile.find('.testContent'); | ||
const firstDayTileContent = firstDayTile.querySelector('.testContent'); | ||
const secondDayTileContent = secondDayTile.querySelector('.testContent'); | ||
expect(firstDayTileContent).toHaveLength(1); | ||
expect(secondDayTileContent).toHaveLength(0); | ||
expect(firstDayTileContent).toBeInTheDocument(); | ||
expect(secondDayTileContent).not.toBeInTheDocument(); | ||
}); | ||
it('does not render WeekNumbers component by default', () => { | ||
const component = mount(<MonthView {...defaultProps} />); | ||
const { container } = render(<MonthView {...defaultProps} />); | ||
expect(component.find('WeekNumbers')).toHaveLength(0); | ||
const weekNumbers = container.querySelector('.react-calendar__month-view__weekNumbers'); | ||
expect(weekNumbers).not.toBeInTheDocument(); | ||
}); | ||
it('renders WeekNumbers component by given showWeekNumbers flag', () => { | ||
const component = mount(<MonthView {...defaultProps} showWeekNumbers />); | ||
const { container } = render(<MonthView {...defaultProps} showWeekNumbers />); | ||
expect(component.find('WeekNumbers')).toHaveLength(1); | ||
const weekNumbers = container.querySelector('.react-calendar__month-view__weekNumbers'); | ||
expect(weekNumbers).toBeInTheDocument(); | ||
}); | ||
@@ -141,7 +142,8 @@ | ||
const component = shallow(<MonthView {...defaultProps} calendarType={calendarType} />); | ||
const { container } = render(<MonthView {...defaultProps} calendarType={calendarType} />); | ||
const weekdays = component.find('Weekdays'); | ||
const firstWeekday = container.querySelector('.react-calendar__month-view__weekdays__weekday'); | ||
expect(weekdays.prop('calendarType')).toBe(calendarType); | ||
// ISO 8601 calendar week starts on Monday | ||
expect(firstWeekday).toHaveTextContent('Mon'); | ||
}); | ||
@@ -152,19 +154,20 @@ | ||
const component = shallow(<MonthView {...defaultProps} locale={locale} />); | ||
const { container } = render(<MonthView {...defaultProps} locale={locale} />); | ||
const weekdays = component.find('Weekdays'); | ||
const firstWeekday = container.querySelector('.react-calendar__month-view__weekdays__weekday'); | ||
expect(weekdays.prop('calendarType')).toBe('US'); | ||
// US calendar week starts on Sunday | ||
expect(firstWeekday).toHaveTextContent('Sun'); | ||
}); | ||
it('passes formatShortWeekday flag to Weekdays component', () => { | ||
it('passes formatShortWeekday to Weekdays component', () => { | ||
const formatShortWeekday = () => 'Weekday'; | ||
const component = shallow( | ||
const { container } = render( | ||
<MonthView {...defaultProps} formatShortWeekday={formatShortWeekday} />, | ||
); | ||
const weekdays = component.find('Weekdays'); | ||
const weekdays = container.querySelector('.react-calendar__month-view__weekdays'); | ||
expect(weekdays.prop('formatShortWeekday')).toBe(formatShortWeekday); | ||
expect(weekdays).toHaveTextContent('Weekday'); | ||
}); | ||
@@ -175,7 +178,15 @@ | ||
const component = shallow(<MonthView {...defaultProps} calendarType={calendarType} />); | ||
const { container } = render( | ||
<MonthView | ||
{...defaultProps} | ||
calendarType={calendarType} | ||
formatDay={formatShortWeekday} | ||
showNeighboringMonth | ||
/>, | ||
); | ||
const days = component.find('Days'); | ||
const firstDay = container.querySelector('.react-calendar__month-view__days__day'); | ||
expect(days.prop('calendarType')).toBe(calendarType); | ||
// ISO 8601 calendar week starts on Monday | ||
expect(firstDay).toHaveTextContent('Mon'); | ||
}); | ||
@@ -186,28 +197,26 @@ | ||
const component = shallow(<MonthView {...defaultProps} locale={locale} />); | ||
const { container } = render( | ||
<MonthView | ||
{...defaultProps} | ||
formatDay={formatShortWeekday} | ||
locale={locale} | ||
showNeighboringMonth | ||
/>, | ||
); | ||
const days = component.find('Days'); | ||
const firstDay = container.querySelector('.react-calendar__month-view__days__day'); | ||
expect(days.prop('calendarType')).toBe('US'); | ||
// US calendar week starts on Sunday | ||
expect(firstDay).toHaveTextContent('Sun'); | ||
}); | ||
it('passes formatDay flag to Days component', () => { | ||
it('displays month view with custom day formatting', () => { | ||
const formatDay = () => 'Day'; | ||
const component = shallow(<MonthView {...defaultProps} formatDay={formatDay} />); | ||
const { container } = render(<MonthView {...defaultProps} formatDay={formatDay} />); | ||
const days = component.find('Days'); | ||
const day = container.querySelector('.react-calendar__month-view__days__day'); | ||
expect(days.prop('formatDay')).toBe(formatDay); | ||
expect(day).toHaveTextContent('Day'); | ||
}); | ||
it('passes formatLongDate flag to Days component', () => { | ||
const formatLongDate = () => 'Long date'; | ||
const component = shallow(<MonthView {...defaultProps} formatLongDate={formatLongDate} />); | ||
const days = component.find('Days'); | ||
expect(days.prop('formatLongDate')).toBe(formatLongDate); | ||
}); | ||
}); |
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { fireEvent, render } from '@testing-library/react'; | ||
@@ -15,3 +15,3 @@ import Day from './Day'; | ||
it('applies given classNames properly', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Day | ||
@@ -24,12 +24,12 @@ {...tileProps} | ||
const wrapperClassName = component.find('.react-calendar__tile').prop('className'); | ||
const wrapper = container.querySelector('.react-calendar__tile'); | ||
expect(wrapperClassName.includes('react-calendar__tile')).toBe(true); | ||
expect(wrapperClassName.includes('react-calendar__tile--flag')).toBe(true); | ||
expect(wrapperClassName.includes('react-calendar__month-view__days__day')).toBe(true); | ||
expect(wrapperClassName.includes('testFunctionClassName')).toBe(true); | ||
expect(wrapper).toHaveClass('react-calendar__tile'); | ||
expect(wrapper).toHaveClass('react-calendar__tile--flag'); | ||
expect(wrapper).toHaveClass('react-calendar__month-view__days__day'); | ||
expect(wrapper).toHaveClass('testFunctionClassName'); | ||
}); | ||
it('applies additional classNames for weekends', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Day | ||
@@ -41,57 +41,63 @@ {...tileProps} | ||
const wrapperClassName = component.find('.react-calendar__tile').prop('className'); | ||
const wrapper = container.querySelector('.react-calendar__tile'); | ||
expect(wrapperClassName.includes('react-calendar__month-view__days__day--weekend')).toBe(true); | ||
expect(wrapper).toHaveClass('react-calendar__month-view__days__day--weekend'); | ||
}); | ||
it('applies additional classNames for neighboring months', () => { | ||
const component = mount(<Day {...tileProps} date={new Date(2018, 1, 2)} />); | ||
const { container } = render(<Day {...tileProps} date={new Date(2018, 1, 2)} />); | ||
const wrapperClassName = component.find('.react-calendar__tile').prop('className'); | ||
const wrapper = container.querySelector('.react-calendar__tile'); | ||
expect( | ||
wrapperClassName.includes('react-calendar__month-view__days__day--neighboringMonth'), | ||
).toBe(true); | ||
expect(wrapper).toHaveClass('react-calendar__month-view__days__day--neighboringMonth'); | ||
}); | ||
it('renders component with proper abbreviation', () => { | ||
const component = mount(<Day {...tileProps} date={new Date(2018, 0, 1)} />); | ||
const { container } = render(<Day {...tileProps} date={new Date(2018, 0, 1)} />); | ||
const abbr = component.find('abbr'); | ||
const abbr = container.querySelector('abbr'); | ||
expect(abbr).toHaveLength(1); | ||
expect(abbr.prop('aria-label')).toBe('January 1, 2018'); | ||
expect(component.text()).toBe('1'); | ||
expect(abbr).toBeInTheDocument(); | ||
expect(abbr).toHaveAccessibleName('January 1, 2018'); | ||
expect(container).toHaveTextContent('1'); | ||
}); | ||
it("is disabled when date is before beginning of minDate's day", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Day {...tileProps} date={new Date(2018, 0, 1)} minDate={new Date(2018, 0, 2)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeDisabled(); | ||
}); | ||
it("is not disabled when date is after beginning of minDate's day", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Day {...tileProps} date={new Date(2018, 0, 1)} minDate={new Date(2018, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeEnabled(); | ||
}); | ||
it("is disabled when date is after end of maxDate's day", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Day {...tileProps} date={new Date(2018, 0, 2)} maxDate={new Date(2018, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeDisabled(); | ||
}); | ||
it("is not disabled when date is before end of maxDate's day", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Day {...tileProps} date={new Date(2018, 0, 1)} maxDate={new Date(2018, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeEnabled(); | ||
}); | ||
@@ -103,5 +109,5 @@ | ||
const component = mount(<Day {...tileProps} date={date} onClick={onClick} />); | ||
const { container } = render(<Day {...tileProps} date={date} onClick={onClick} />); | ||
component.find('.react-calendar__tile').simulate('click'); | ||
fireEvent.click(container.querySelector('.react-calendar__tile')); | ||
@@ -116,5 +122,6 @@ expect(onClick).toHaveBeenCalled(); | ||
const component = mount(<Day {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
const { container } = render(<Day {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
component.find('.react-calendar__tile').simulate('mouseOver'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
fireEvent.mouseOver(tile); | ||
@@ -129,5 +136,6 @@ expect(onMouseOver).toHaveBeenCalled(); | ||
const component = mount(<Day {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
const { container } = render(<Day {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
component.find('.react-calendar__tile').simulate('focus'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
fireEvent.focus(tile); | ||
@@ -139,7 +147,9 @@ expect(onMouseOver).toHaveBeenCalled(); | ||
it('renders tileContent properly', () => { | ||
const component = mount(<Day {...tileProps} tileContent={<div className="testContent" />} />); | ||
const { container } = render( | ||
<Day {...tileProps} tileContent={<div className="testContent" />} />, | ||
); | ||
const testContent = component.find('.testContent'); | ||
const testContent = container.querySelector('.testContent'); | ||
expect(testContent).toHaveLength(1); | ||
expect(testContent).toBeInTheDocument(); | ||
}); | ||
@@ -152,5 +162,5 @@ | ||
const component = mount(<Day {...tileProps} date={date} tileContent={tileContent} />); | ||
const { container } = render(<Day {...tileProps} date={date} tileContent={tileContent} />); | ||
const testContent = component.find('.testContent'); | ||
const testContent = container.querySelector('.testContent'); | ||
@@ -163,3 +173,3 @@ expect(tileContent).toHaveBeenCalled(); | ||
}); | ||
expect(testContent).toHaveLength(1); | ||
expect(testContent).toBeInTheDocument(); | ||
}); | ||
@@ -173,11 +183,11 @@ | ||
const component = mount( | ||
const { container } = render( | ||
<Day {...tileProps} date={date} formatDay={formatDay} locale={locale} />, | ||
); | ||
const tile = component.find('Tile'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(formatDay).toHaveBeenCalled(); | ||
expect(formatDay).toHaveBeenCalledWith(locale, date); | ||
expect(tile.text()).toBe('Mock format'); | ||
expect(tile).toHaveTextContent('Mock format'); | ||
}); | ||
@@ -191,12 +201,12 @@ | ||
const component = mount( | ||
const { container } = render( | ||
<Day {...tileProps} date={date} formatLongDate={formatLongDate} locale={locale} />, | ||
); | ||
const abbr = component.find('abbr'); | ||
const abbr = container.querySelector('abbr'); | ||
expect(formatLongDate).toHaveBeenCalled(); | ||
expect(formatLongDate).toHaveBeenCalledWith(locale, date); | ||
expect(abbr.prop('aria-label')).toBe('Mock format'); | ||
expect(abbr).toHaveAccessibleName('Mock format'); | ||
}); | ||
}); |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import mergeClassNames from 'merge-class-names'; | ||
import { getYear, getMonth, getMonthStart } from '@wojtekmaj/date-utils'; | ||
@@ -7,3 +8,3 @@ | ||
import { getDayOfWeek } from '../shared/dates'; | ||
import { getDayOfWeek, isWeekend } from '../shared/dates'; | ||
import { | ||
@@ -16,2 +17,3 @@ formatWeekday, | ||
const className = 'react-calendar__month-view__weekdays'; | ||
const weekdayClassName = `${className}__weekday`; | ||
@@ -43,3 +45,9 @@ export default function Weekdays(props) { | ||
weekdays.push( | ||
<div key={weekday} className={`${className}__weekday`}> | ||
<div | ||
key={weekday} | ||
className={mergeClassNames( | ||
weekdayClassName, | ||
isWeekend(weekdayDate, calendarType) && `${weekdayClassName}--weekend`, | ||
)} | ||
> | ||
<abbr aria-label={abbr} title={abbr}> | ||
@@ -46,0 +54,0 @@ {formatShortWeekday(locale, weekdayDate).replace('.', '')} |
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { render } from '@testing-library/react'; | ||
@@ -12,33 +12,35 @@ import Weekdays from './Weekdays'; | ||
it('renders proper weekdays (ISO 8601)', () => { | ||
const component = mount(<Weekdays {...defaultProps} calendarType="ISO 8601" />); | ||
const { container } = render(<Weekdays {...defaultProps} calendarType="ISO 8601" />); | ||
const weekdays = component.find('.react-calendar__month-view__weekdays__weekday'); | ||
const firstWeekday = weekdays.first(); | ||
const firstWeekdayAbbr = firstWeekday.find('abbr'); | ||
const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday'); | ||
const firstWeekday = weekdays[0]; | ||
const firstWeekdayAbbr = firstWeekday.querySelector('abbr'); | ||
expect(weekdays).toHaveLength(7); | ||
expect(firstWeekday.text()).toBe('Mon'); | ||
expect(firstWeekdayAbbr.prop('aria-label')).toBe('Monday'); | ||
expect(firstWeekday).toHaveTextContent('Mon'); | ||
expect(firstWeekdayAbbr).toHaveAccessibleName('Monday'); | ||
}); | ||
it('renders proper weekdays (US)', () => { | ||
const component = mount(<Weekdays {...defaultProps} calendarType="US" />); | ||
const { container } = render(<Weekdays {...defaultProps} calendarType="US" />); | ||
const weekdays = component.find('.react-calendar__month-view__weekdays__weekday'); | ||
const firstWeekday = weekdays.first(); | ||
const firstWeekdayAbbr = firstWeekday.find('abbr'); | ||
const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday'); | ||
const firstWeekday = weekdays[0]; | ||
const firstWeekdayAbbr = firstWeekday.querySelector('abbr'); | ||
expect(weekdays).toHaveLength(7); | ||
expect(firstWeekday.text()).toBe('Sun'); | ||
expect(firstWeekdayAbbr.prop('aria-label')).toBe('Sunday'); | ||
expect(firstWeekday).toHaveTextContent('Sun'); | ||
expect(firstWeekdayAbbr).toHaveAccessibleName('Sunday'); | ||
}); | ||
it('renders weekdays with custom weekdays formatting', () => { | ||
const component = mount(<Weekdays {...defaultProps} formatShortWeekday={() => 'Weekday'} />); | ||
const { container } = render( | ||
<Weekdays {...defaultProps} formatShortWeekday={() => 'Weekday'} />, | ||
); | ||
const weekdays = component.find('.react-calendar__month-view__weekdays__weekday'); | ||
const firstWeekday = weekdays.first(); | ||
const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday'); | ||
const firstWeekday = weekdays[0]; | ||
expect(firstWeekday.text()).toBe('Weekday'); | ||
expect(firstWeekday).toHaveTextContent('Weekday'); | ||
}); | ||
}); |
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
import { render } from '@testing-library/react'; | ||
@@ -13,5 +13,5 @@ import WeekNumber from './WeekNumber'; | ||
it('renders div by default', () => { | ||
const component = shallow(<WeekNumber {...defaultProps} />); | ||
const { container } = render(<WeekNumber {...defaultProps} />); | ||
expect(component.find('div')).toHaveLength(1); | ||
expect(container.querySelector('div')).toBeInTheDocument(); | ||
}); | ||
@@ -22,7 +22,7 @@ | ||
const component = shallow( | ||
const { container } = render( | ||
<WeekNumber {...defaultProps} onClickWeekNumber={onClickWeekNumber} />, | ||
); | ||
expect(component.find('button')).toHaveLength(1); | ||
expect(container.querySelector('button')).toBeInTheDocument(); | ||
}); | ||
@@ -33,6 +33,6 @@ | ||
const component = shallow(<WeekNumber {...defaultProps} weekNumber={weekNumber} />); | ||
const { container } = render(<WeekNumber {...defaultProps} weekNumber={weekNumber} />); | ||
expect(component.text()).toBe(weekNumber); | ||
expect(container).toHaveTextContent(weekNumber); | ||
}); | ||
}); |
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { fireEvent, render } from '@testing-library/react'; | ||
import WeekNumbers from './WeekNumbers'; | ||
describe('WeekNumbers', () => { | ||
describe('.react-calendar__month-view__weekNumbers', () => { | ||
const defaultProps = { | ||
@@ -12,3 +12,3 @@ activeStartDate: new Date(2017, 0, 1), | ||
it('renders proper weekNumbers for a year that starts in week 1 (ISO 8601)', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<WeekNumbers | ||
@@ -21,10 +21,10 @@ {...defaultProps} | ||
const weekNumbers = component.find('WeekNumber'); | ||
const weekNumbers = container.querySelectorAll('.react-calendar__tile'); | ||
expect(weekNumbers).toHaveLength(5); | ||
expect(weekNumbers.first().text()).toBe('1'); | ||
expect(weekNumbers[0]).toHaveTextContent('1'); | ||
}); | ||
it('renders proper weekNumbers for a year that starts on week 52 (ISO 8601)', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<WeekNumbers | ||
@@ -37,10 +37,10 @@ {...defaultProps} | ||
const weekNumbers = component.find('WeekNumber'); | ||
const weekNumbers = container.querySelectorAll('.react-calendar__tile'); | ||
expect(weekNumbers).toHaveLength(6); | ||
expect(weekNumbers.first().text()).toBe('52'); | ||
expect(weekNumbers[0]).toHaveTextContent('52'); | ||
}); | ||
it('renders proper weekNumbers for a year that starts on week 53 (ISO 8601)', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<WeekNumbers | ||
@@ -53,17 +53,17 @@ {...defaultProps} | ||
const weekNumbers = component.find('WeekNumber'); | ||
const weekNumbers = container.querySelectorAll('.react-calendar__tile'); | ||
expect(weekNumbers).toHaveLength(5); | ||
expect(weekNumbers.first().text()).toBe('53'); | ||
expect(weekNumbers[0]).toHaveTextContent('53'); | ||
}); | ||
it('renders proper weekNumbers for a year that starts in week 1 (US)', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<WeekNumbers {...defaultProps} activeStartDate={new Date(2017, 0, 1)} calendarType="US" />, | ||
); | ||
const weekNumbers = component.find('WeekNumber'); | ||
const weekNumbers = container.querySelectorAll('.react-calendar__tile'); | ||
expect(weekNumbers).toHaveLength(5); | ||
expect(weekNumbers.first().text()).toBe('1'); | ||
expect(weekNumbers[0]).toHaveTextContent('1'); | ||
}); | ||
@@ -73,3 +73,3 @@ | ||
// Same config as in first test which gives 5 weeks, except for the flag | ||
const component = mount( | ||
const { container } = render( | ||
<WeekNumbers | ||
@@ -83,12 +83,12 @@ {...defaultProps} | ||
const weekNumbers = component.find('WeekNumber'); | ||
const weekNumbers = container.querySelectorAll('.react-calendar__tile'); | ||
expect(weekNumbers).toHaveLength(6); | ||
expect(weekNumbers.first().text()).toBe('1'); | ||
expect(weekNumbers[0]).toHaveTextContent('1'); | ||
}); | ||
it('renders static divs as children when not given onClickWeekNumber', () => { | ||
const component = mount(<WeekNumbers {...defaultProps} calendarType="ISO 8601" />); | ||
const { container } = render(<WeekNumbers {...defaultProps} calendarType="ISO 8601" />); | ||
const children = component.find('div.react-calendar__tile'); | ||
const children = container.querySelectorAll('div.react-calendar__tile'); | ||
@@ -99,7 +99,7 @@ expect(children).toHaveLength(6); | ||
it('renders buttons as children when given onClickWeekNumber', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<WeekNumbers {...defaultProps} calendarType="ISO 8601" onClickWeekNumber={jest.fn()} />, | ||
); | ||
const children = component.find('button.react-calendar__tile'); | ||
const children = container.querySelectorAll('button.react-calendar__tile'); | ||
@@ -111,3 +111,3 @@ expect(children).toHaveLength(6); | ||
const onClickWeekNumber = jest.fn(); | ||
const component = mount( | ||
const { container } = render( | ||
<WeekNumbers | ||
@@ -120,5 +120,5 @@ {...defaultProps} | ||
const children = component.find('button.react-calendar__tile'); | ||
const children = container.querySelectorAll('button.react-calendar__tile'); | ||
children.first().simulate('click'); | ||
fireEvent.click(children[0]); | ||
expect(onClickWeekNumber).toHaveBeenCalledWith(52, new Date(2016, 11, 26), expect.any(Object)); | ||
@@ -129,11 +129,11 @@ }); | ||
const onClickWeekNumber = jest.fn(); | ||
const component = mount( | ||
const { container } = render( | ||
<WeekNumbers {...defaultProps} calendarType="US" onClickWeekNumber={onClickWeekNumber} />, | ||
); | ||
const children = component.find('button.react-calendar__tile'); | ||
const children = container.querySelectorAll('button.react-calendar__tile'); | ||
children.first().simulate('click'); | ||
fireEvent.click(children[0]); | ||
expect(onClickWeekNumber).toHaveBeenCalledWith(1, new Date(2017, 0, 1), expect.any(Object)); | ||
}); | ||
}); |
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
import { fireEvent, render } from '@testing-library/react'; | ||
@@ -17,5 +17,5 @@ import Tile from './Tile'; | ||
it('renders button properly', () => { | ||
const component = shallow(<Tile {...defaultProps} />); | ||
const { container } = render(<Tile {...defaultProps} />); | ||
expect(component.find('button')).toHaveLength(1); | ||
expect(container.querySelector('button')).toBeInTheDocument(); | ||
}); | ||
@@ -26,7 +26,7 @@ | ||
const component = shallow(<Tile {...defaultProps} onClick={onClick} />); | ||
const { container } = render(<Tile {...defaultProps} onClick={onClick} />); | ||
const button = component.find('button'); | ||
const button = container.querySelector('button'); | ||
button.simulate('click'); | ||
fireEvent.click(button); | ||
@@ -39,8 +39,8 @@ expect(onClick).toHaveBeenCalledTimes(1); | ||
const component = shallow(<Tile {...defaultProps} classes={classes} />); | ||
const { container } = render(<Tile {...defaultProps} classes={classes} />); | ||
const button = component.find('button'); | ||
const button = container.querySelector('button'); | ||
classes.forEach((className) => { | ||
expect(button.prop('className')).toMatch(className); | ||
expect(button).toHaveClass(className); | ||
}); | ||
@@ -52,11 +52,11 @@ }); | ||
const component = shallow(<Tile {...defaultProps}>{children}</Tile>); | ||
const { container } = render(<Tile {...defaultProps}>{children}</Tile>); | ||
expect(component.text()).toBe(children); | ||
expect(container).toHaveTextContent(children); | ||
}); | ||
it('does not render abbr by default', () => { | ||
const component = shallow(<Tile {...defaultProps} />); | ||
const { container } = render(<Tile {...defaultProps} />); | ||
expect(component.find('abbr')).toHaveLength(0); | ||
expect(container.querySelector('abbr')).not.toBeInTheDocument(); | ||
}); | ||
@@ -69,3 +69,3 @@ | ||
shallow(<Tile {...defaultProps} date={date} formatAbbr={formatAbbr} locale={locale} />); | ||
render(<Tile {...defaultProps} date={date} formatAbbr={formatAbbr} locale={locale} />); | ||
@@ -81,3 +81,3 @@ expect(formatAbbr).toHaveBeenCalledTimes(1); | ||
const component = shallow( | ||
const { container } = render( | ||
<Tile {...defaultProps} formatAbbr={formatAbbr}> | ||
@@ -88,7 +88,7 @@ {children} | ||
const abbr = component.find('abbr'); | ||
const abbr = container.querySelector('abbr'); | ||
expect(abbr).toHaveLength(1); | ||
expect(abbr.text()).toBe(children); | ||
expect(abbr.prop('aria-label')).toBe(ariaLabel); | ||
expect(abbr).toBeInTheDocument(); | ||
expect(abbr).toHaveTextContent(children); | ||
expect(abbr).toHaveAccessibleName(ariaLabel); | ||
}); | ||
@@ -102,3 +102,3 @@ | ||
const component = shallow( | ||
const { rerender } = render( | ||
<Tile | ||
@@ -114,5 +114,12 @@ {...defaultProps} | ||
// Trigger any unrelated prop change | ||
component.setProps({ | ||
tileContent: 'a', | ||
}); | ||
rerender( | ||
<Tile | ||
{...defaultProps} | ||
activeStartDate={activeStartDate} | ||
date={date} | ||
tileClassName={tileClassName} | ||
tileContent="a" | ||
view={view} | ||
/>, | ||
); | ||
@@ -131,7 +138,7 @@ expect(tileClassName).toHaveBeenCalledTimes(1); | ||
const component = shallow(<Tile {...defaultProps} tileClassName={tileClassName} />); | ||
const { container } = render(<Tile {...defaultProps} tileClassName={tileClassName} />); | ||
const button = component.find('button'); | ||
const button = container.querySelector('button'); | ||
expect(button.prop('className')).toMatch(className); | ||
expect(button).toHaveClass(className); | ||
}); | ||
@@ -142,7 +149,7 @@ | ||
const component = shallow(<Tile {...defaultProps} tileClassName={className} />); | ||
const { container } = render(<Tile {...defaultProps} tileClassName={className} />); | ||
const button = component.find('button'); | ||
const button = container.querySelector('button'); | ||
expect(button.prop('className')).toMatch(className); | ||
expect(button).toHaveClass(className); | ||
}); | ||
@@ -156,3 +163,3 @@ | ||
const component = shallow( | ||
const { rerender } = render( | ||
<Tile | ||
@@ -168,5 +175,12 @@ {...defaultProps} | ||
// Trigger any unrelated prop change | ||
component.setProps({ | ||
tileClassName: 'a', | ||
}); | ||
rerender( | ||
<Tile | ||
{...defaultProps} | ||
activeStartDate={activeStartDate} | ||
date={date} | ||
tileClassName="a" | ||
tileContent={tileContent} | ||
view={view} | ||
/>, | ||
); | ||
@@ -185,7 +199,7 @@ expect(tileContent).toHaveBeenCalledTimes(1); | ||
const component = shallow(<Tile {...defaultProps} tileContent={tileContent} />); | ||
const { container } = render(<Tile {...defaultProps} tileContent={tileContent} />); | ||
const button = component.find('button'); | ||
const button = container.querySelector('button'); | ||
expect(button.text()).toMatch(content); | ||
expect(button).toHaveTextContent(content); | ||
}); | ||
@@ -196,7 +210,7 @@ | ||
const component = shallow(<Tile {...defaultProps} tileContent={content} />); | ||
const { container } = render(<Tile {...defaultProps} tileContent={content} />); | ||
const button = component.find('button'); | ||
const button = container.querySelector('button'); | ||
expect(button.text()).toMatch(content); | ||
expect(button).toHaveTextContent(content); | ||
}); | ||
@@ -210,3 +224,3 @@ | ||
shallow( | ||
render( | ||
<Tile | ||
@@ -232,8 +246,8 @@ {...defaultProps} | ||
const component = shallow(<Tile {...defaultProps} tileDisabled={tileDisabled} />); | ||
const { container } = render(<Tile {...defaultProps} tileDisabled={tileDisabled} />); | ||
const button = component.find('button'); | ||
const button = container.querySelector('button'); | ||
expect(button.prop('disabled')).toBeTruthy(); | ||
expect(button).toBeDisabled(); | ||
}); | ||
}); |
import React from 'react'; | ||
import { mount, shallow } from 'enzyme'; | ||
import { render } from '@testing-library/react'; | ||
@@ -15,10 +15,11 @@ import YearView from './YearView'; | ||
const activeStartDate = new Date(2017, 0, 1); | ||
const component = mount( | ||
const { container } = render( | ||
<YearView {...defaultProps} activeStartDate={activeStartDate} showNeighboringMonth={false} />, | ||
); | ||
const firstDayTile = component.find('.react-calendar__tile').first(); | ||
const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label'); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr'); | ||
expect(firstDayTileTimeAbbr).toBe(format(activeStartDate)); | ||
expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(activeStartDate)); | ||
}); | ||
@@ -28,10 +29,10 @@ | ||
const tileClassName = 'testClassName'; | ||
const component = mount( | ||
const { container } = render( | ||
<YearView {...defaultProps} showNeighboringMonth={false} tileClassName={tileClassName} />, | ||
); | ||
const firstDayTile = component.find('.react-calendar__tile').first(); | ||
const firstDayTileClassName = firstDayTile.prop('className'); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
expect(firstDayTileClassName.includes(tileClassName)).toBe(true); | ||
expect(firstDayTile).toHaveClass(tileClassName); | ||
}); | ||
@@ -48,3 +49,4 @@ | ||
}; | ||
const component = mount( | ||
const { container } = render( | ||
<YearView | ||
@@ -58,11 +60,7 @@ {...defaultProps} | ||
const tiles = component.find('.react-calendar__tile'); | ||
const tiles = container.querySelectorAll('.react-calendar__tile'); | ||
const [firstDayTile, secondDayTile] = tiles; | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileClassName = firstDayTile.prop('className'); | ||
const secondDayTile = tiles.at(1); | ||
const secondDayTileClassName = secondDayTile.prop('className'); | ||
expect(firstDayTileClassName.includes('firstDayOfTheMonth')).toBe(true); | ||
expect(secondDayTileClassName.includes('firstDayOfTheMonth')).toBe(false); | ||
expect(firstDayTile).toHaveClass('firstDayOfTheMonth'); | ||
expect(secondDayTile).not.toHaveClass('firstDayOfTheMonth'); | ||
}); | ||
@@ -72,12 +70,11 @@ | ||
const tileContent = <div className="testContent" />; | ||
const component = mount( | ||
const { container } = render( | ||
<YearView {...defaultProps} showNeighboringMonth={false} tileContent={tileContent} />, | ||
); | ||
const tiles = component.find('.react-calendar__tile'); | ||
const firstDayTile = container.querySelector('.react-calendar__tile'); | ||
const firstDayTileContent = firstDayTile.querySelector('.testContent'); | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileContent = firstDayTile.find('.testContent'); | ||
expect(firstDayTileContent).toHaveLength(1); | ||
expect(firstDayTileContent).toBeInTheDocument(); | ||
}); | ||
@@ -94,3 +91,4 @@ | ||
}; | ||
const component = mount( | ||
const { container } = render( | ||
<YearView | ||
@@ -104,30 +102,19 @@ {...defaultProps} | ||
const tiles = component.find('.react-calendar__tile'); | ||
const tiles = container.querySelectorAll('.react-calendar__tile'); | ||
const [firstDayTile, secondDayTile] = tiles; | ||
const firstDayTile = tiles.first(); | ||
const firstDayTileContent = firstDayTile.find('.testContent'); | ||
const secondDayTile = tiles.at(1); | ||
const secondDayTileContent = secondDayTile.find('.testContent'); | ||
const firstDayTileContent = firstDayTile.querySelector('.testContent'); | ||
const secondDayTileContent = secondDayTile.querySelector('.testContent'); | ||
expect(firstDayTileContent).toHaveLength(1); | ||
expect(secondDayTileContent).toHaveLength(0); | ||
expect(firstDayTileContent).toBeInTheDocument(); | ||
expect(secondDayTileContent).not.toBeInTheDocument(); | ||
}); | ||
it('displays year view with custom month formatting', () => { | ||
const component = mount(<YearView {...defaultProps} formatMonth={() => 'Month'} />); | ||
const { container } = render(<YearView {...defaultProps} formatMonth={() => 'Month'} />); | ||
const month = component.find('.react-calendar__year-view__months__month').first(); | ||
const month = container.querySelector('.react-calendar__year-view__months__month'); | ||
expect(month.text()).toBe('Month'); | ||
expect(month).toHaveTextContent('Month'); | ||
}); | ||
it('passes formatMonth flag to Days component', () => { | ||
const formatMonth = () => 'Month'; | ||
const component = shallow(<YearView {...defaultProps} formatMonth={formatMonth} />); | ||
const months = component.find('Months'); | ||
expect(months.prop('formatMonth')).toBe(formatMonth); | ||
}); | ||
}); |
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { fireEvent, render } from '@testing-library/react'; | ||
@@ -14,3 +14,3 @@ import Month from './Month'; | ||
it('applies given classNames properly', () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Month | ||
@@ -23,50 +23,58 @@ {...tileProps} | ||
const wrapperClassName = component.find('.react-calendar__tile').prop('className'); | ||
const wrapper = container.querySelector('.react-calendar__tile'); | ||
expect(wrapperClassName.includes('react-calendar__tile')).toBe(true); | ||
expect(wrapperClassName.includes('react-calendar__tile--flag')).toBe(true); | ||
expect(wrapperClassName.includes('react-calendar__year-view__months__month')).toBe(true); | ||
expect(wrapperClassName.includes('testFunctionClassName')).toBe(true); | ||
expect(wrapper).toHaveClass('react-calendar__tile'); | ||
expect(wrapper).toHaveClass('react-calendar__tile--flag'); | ||
expect(wrapper).toHaveClass('react-calendar__year-view__months__month'); | ||
expect(wrapper).toHaveClass('testFunctionClassName'); | ||
}); | ||
it('renders component with proper abbreviation', () => { | ||
const component = mount(<Month {...tileProps} date={new Date(2018, 0, 1)} month={2018} />); | ||
const { container } = render(<Month {...tileProps} date={new Date(2018, 0, 1)} month={2018} />); | ||
const abbr = component.find('abbr'); | ||
const abbr = container.querySelector('abbr'); | ||
expect(abbr).toHaveLength(1); | ||
expect(abbr.prop('aria-label')).toBe('January 2018'); | ||
expect(component.text()).toBe('January'); | ||
expect(abbr).toBeInTheDocument(); | ||
expect(abbr).toHaveAccessibleName('January 2018'); | ||
expect(container).toHaveTextContent('January'); | ||
}); | ||
it("is disabled when date is before beginning of minDate's month", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Month {...tileProps} date={new Date(2018, 6, 1)} minDate={new Date(2018, 7, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeDisabled(); | ||
}); | ||
it("is not disabled when date is after beginning of minDate's month", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Month {...tileProps} date={new Date(2018, 0, 1)} minDate={new Date(2018, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeEnabled(); | ||
}); | ||
it("is disabled when date is after end of maxDate's month", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Month {...tileProps} date={new Date(2018, 6, 1)} maxDate={new Date(2018, 5, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeDisabled(); | ||
}); | ||
it("is not disabled when date is before end of maxDate's month", () => { | ||
const component = mount( | ||
const { container } = render( | ||
<Month {...tileProps} date={new Date(2018, 0, 1)} maxDate={new Date(2018, 0, 1)} />, | ||
); | ||
expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy(); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(tile).toBeEnabled(); | ||
}); | ||
@@ -78,5 +86,5 @@ | ||
const component = mount(<Month {...tileProps} date={date} onClick={onClick} />); | ||
const { container } = render(<Month {...tileProps} date={date} onClick={onClick} />); | ||
component.find('.react-calendar__tile').simulate('click'); | ||
fireEvent.click(container.querySelector('.react-calendar__tile')); | ||
@@ -91,5 +99,6 @@ expect(onClick).toHaveBeenCalled(); | ||
const component = mount(<Month {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
const { container } = render(<Month {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
component.find('.react-calendar__tile').simulate('mouseOver'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
fireEvent.mouseOver(tile); | ||
@@ -104,5 +113,6 @@ expect(onMouseOver).toHaveBeenCalled(); | ||
const component = mount(<Month {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
const { container } = render(<Month {...tileProps} date={date} onMouseOver={onMouseOver} />); | ||
component.find('.react-calendar__tile').simulate('focus'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
fireEvent.focus(tile); | ||
@@ -114,7 +124,9 @@ expect(onMouseOver).toHaveBeenCalled(); | ||
it('renders tileContent properly', () => { | ||
const component = mount(<Month {...tileProps} tileContent={<div className="testContent" />} />); | ||
const { container } = render( | ||
<Month {...tileProps} tileContent={<div className="testContent" />} />, | ||
); | ||
const testContent = component.find('.testContent'); | ||
const testContent = container.querySelector('.testContent'); | ||
expect(testContent).toHaveLength(1); | ||
expect(testContent).toBeInTheDocument(); | ||
}); | ||
@@ -127,5 +139,5 @@ | ||
const component = mount(<Month {...tileProps} date={date} tileContent={tileContent} />); | ||
const { container } = render(<Month {...tileProps} date={date} tileContent={tileContent} />); | ||
const testContent = component.find('.testContent'); | ||
const testContent = container.querySelector('.testContent'); | ||
@@ -138,3 +150,3 @@ expect(tileContent).toHaveBeenCalled(); | ||
}); | ||
expect(testContent).toHaveLength(1); | ||
expect(testContent).toBeInTheDocument(); | ||
}); | ||
@@ -148,11 +160,11 @@ | ||
const component = mount( | ||
const { container } = render( | ||
<Month {...tileProps} date={date} formatMonth={formatMonth} locale={locale} />, | ||
); | ||
const tile = component.find('Tile'); | ||
const tile = container.querySelector('.react-calendar__tile'); | ||
expect(formatMonth).toHaveBeenCalled(); | ||
expect(formatMonth).toHaveBeenCalledWith(locale, date); | ||
expect(tile.text()).toBe('Mock format'); | ||
expect(tile).toHaveTextContent('Mock format'); | ||
}); | ||
@@ -166,12 +178,12 @@ | ||
const component = mount( | ||
const { container } = render( | ||
<Month {...tileProps} date={date} formatMonthYear={formatMonthYear} locale={locale} />, | ||
); | ||
const abbr = component.find('abbr'); | ||
const abbr = container.querySelector('abbr'); | ||
expect(formatMonthYear).toHaveBeenCalled(); | ||
expect(formatMonthYear).toHaveBeenCalledWith(locale, date); | ||
expect(abbr.prop('aria-label')).toBe('Mock format'); | ||
expect(abbr).toHaveAccessibleName('Mock format'); | ||
}); | ||
}); |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
515841
10217
202
17