react-calendar - npm Package Compare versions

Comparing version 3.0.0-beta.2 to 3.0.0-beta.3

dist/esm/Calendar.js

@@ -155,2 +155,5 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
   var activeStartDate = props.activeStartDate,
+      defaultActiveStartDate = props.defaultActiveStartDate,
+      defaultValue = props.defaultValue,
+      defaultView = props.defaultView,
       maxDate = props.maxDate,
@@ -162,4 +165,4 @@ maxDetail = props.maxDetail,
       view = props.view;
-  var rangeType = getView(view, minDetail, maxDetail);
-  var valueFrom = (activeStartDate, getDetailValueFrom(value, minDate, maxDate, maxDetail) || new Date());
+  var rangeType = getView(view || defaultView, minDetail, maxDetail);
+  var valueFrom = activeStartDate || defaultActiveStartDate || getDetailValueFrom(value || defaultValue, minDate, maxDate, maxDetail) || new Date();
   return getBegin(rangeType, valueFrom);
@@ -192,3 +195,3 @@ };
       /* eslint-disable react/destructuring-assignment */
-      activeStartDate: _this.props.defaultActiveStartDate || getActiveStartDate(_this.props),
+      activeStartDate: getActiveStartDate(_this.props),
       view: _this.props.defaultView,
@@ -195,0 +198,0 @@ value: _this.props.defaultValue

dist/esm/MonthView.js

@@ -75,3 +75,4 @@ 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); }
 
-  var calendarTypeProps = props.calendarType,
+  var _props$calendarType = props.calendarType,
+      calendarType = _props$calendarType === void 0 ? getCalendarTypeFromLocale(locale) : _props$calendarType,
       formatShortWeekday = props.formatShortWeekday,
@@ -82,4 +83,2 @@ onClickWeekNumber = props.onClickWeekNumber,
 
-  var calendarType = calendarTypeProps || getCalendarTypeFromLocale(locale);
-
   function renderWeekdays() {
@@ -86,0 +85,0 @@ return React.createElement(Weekdays, {

dist/umd/Calendar.js

@@ -177,2 +177,5 @@ "use strict";
   var activeStartDate = props.activeStartDate,
+      defaultActiveStartDate = props.defaultActiveStartDate,
+      defaultValue = props.defaultValue,
+      defaultView = props.defaultView,
       maxDate = props.maxDate,
@@ -184,4 +187,4 @@ maxDetail = props.maxDetail,
       view = props.view;
-  var rangeType = getView(view, minDetail, maxDetail);
-  var valueFrom = (activeStartDate, getDetailValueFrom(value, minDate, maxDate, maxDetail) || new Date());
+  var rangeType = getView(view || defaultView, minDetail, maxDetail);
+  var valueFrom = activeStartDate || defaultActiveStartDate || getDetailValueFrom(value || defaultValue, minDate, maxDate, maxDetail) || new Date();
   return (0, _dates.getBegin)(rangeType, valueFrom);
@@ -214,3 +217,3 @@ };
       /* eslint-disable react/destructuring-assignment */
-      activeStartDate: _this.props.defaultActiveStartDate || getActiveStartDate(_this.props),
+      activeStartDate: getActiveStartDate(_this.props),
       view: _this.props.defaultView,
@@ -217,0 +220,0 @@ value: _this.props.defaultValue

dist/umd/MonthView.js

@@ -90,3 +90,4 @@ "use strict";
 
-  var calendarTypeProps = props.calendarType,
+  var _props$calendarType = props.calendarType,
+      calendarType = _props$calendarType === void 0 ? getCalendarTypeFromLocale(locale) : _props$calendarType,
       formatShortWeekday = props.formatShortWeekday,
@@ -97,4 +98,2 @@ onClickWeekNumber = props.onClickWeekNumber,
 
-  var calendarType = calendarTypeProps || getCalendarTypeFromLocale(locale);
-
   function renderWeekdays() {
@@ -101,0 +100,0 @@ return _react["default"].createElement(_Weekdays["default"], {

package.json

 {
   "name": "react-calendar",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "description": "Ultimate calendar for your React app.",
@@ -12,4 +12,4 @@ "main": "dist/umd/entry.js",
     "build-js-all": "yarn build-js-esm && yarn build-js-umd",
-    "build-js-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore **/*.spec.js,**/*.spec.jsx",
-    "build-js-umd": "BABEL_ENV=production-umd babel src -d dist/umd --ignore **/*.spec.js,**/*.spec.jsx",
+    "build-js-esm": "cross-env BABEL_ENV=production-esm babel src -d dist/esm --ignore **/*.spec.js,**/*.spec.jsx",
+    "build-js-umd": "cross-env BABEL_ENV=production-umd babel src -d dist/umd --ignore **/*.spec.js,**/*.spec.jsx",
     "build-styles": "yarn build-styles-esm && yarn build-styles-umd",
@@ -90,2 +90,3 @@ "build-styles-esm": "lessc ./dist/esm/Calendar.less ./dist/esm/Calendar.css",
     "babel-jest": "^24.0.0",
+    "cross-env": "^6.0.3",
     "enzyme": "^3.10.0",
@@ -92,0 +93,0 @@ "enzyme-adapter-react-16": "^1.14.0",

README.md

@@ -31,3 +31,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) ![build](https://img.shields.io/travis/wojtekmaj/react-calendar/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-calendar.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-calendar.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 
-* [v2.x](https://github.com/wojtekmaj/react-pdf/blob/v2.x/README.md)
+* [v2.x](https://github.com/wojtekmaj/react-calendar/blob/v2.x/README.md)
 
@@ -34,0 +34,0 @@ ## Getting started

src/Calendar.jsx

@@ -133,2 +133,5 @@ import React, { Component } from 'react';
     activeStartDate,
+    defaultActiveStartDate,
+    defaultValue,
+    defaultView,
     maxDate,
@@ -142,6 +145,6 @@ maxDetail,
 
-  const rangeType = getView(view, minDetail, maxDetail);
+  const rangeType = getView(view || defaultView, minDetail, maxDetail);
   const valueFrom = (
-    activeStartDate,
-    getDetailValueFrom(value, minDate, maxDate, maxDetail)
+    activeStartDate || defaultActiveStartDate
+    || getDetailValueFrom(value || defaultValue, minDate, maxDate, maxDetail)
     || new Date()
@@ -157,3 +160,3 @@ );
     /* eslint-disable react/destructuring-assignment */
-    activeStartDate: this.props.defaultActiveStartDate || getActiveStartDate(this.props),
+    activeStartDate: getActiveStartDate(this.props),
     view: this.props.defaultView,
@@ -160,0 +163,0 @@ value: this.props.defaultValue,

src/Calendar.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { getMonthStart } from '@wojtekmaj/date-utils';
@@ -7,13 +7,9 @@
 
-/* eslint-disable comma-dangle */
-
-const { format } = new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', year: 'numeric' });
-
 describe('Calendar', () => {
-  it('renders navigation', () => {
-    const component = mount(
-      <Calendar />
+  it('renders Navigation by default', () => {
+    const component = shallow(
+      <Calendar />,
     );
 
-    const navigation = component.find('.react-calendar__navigation');
+    const navigation = component.find('Navigation');
 
@@ -23,8 +19,8 @@ expect(navigation).toHaveLength(1);
 
-  it('does not render navigation when showNavigation flag is set to false', () => {
-    const component = mount(
-      <Calendar showNavigation={false} />
+  it('does not render Navigation when showNavigation flag is set to false', () => {
+    const component = shallow(
+      <Calendar showNavigation={false} />,
     );
 
-    const navigation = component.find('.react-calendar__navigation');
+    const navigation = component.find('Navigation');
 
@@ -34,134 +30,199 @@ expect(navigation).toHaveLength(0);
 
-  it('renders month view by default', () => {
-    const component = mount(
-      <Calendar />
-    );
+  describe('renders views properly', () => {
+    it('renders MonthView by default', () => {
+      const component = shallow(
+        <Calendar />,
+      );
 
-    const monthView = component.find('.react-calendar__month-view');
+      const monthView = component.find('MonthView');
 
-    expect(monthView).toHaveLength(1);
-  });
+      expect(monthView).toHaveLength(1);
+    });
 
-  it('renders maximum allowed view when given maxDetail', () => {
-    const component = mount(
-      <Calendar maxDetail="year" />
-    );
+    it('renders MonthView when given view = "month"', () => {
+      const component = shallow(
+        <Calendar view="month" />,
+      );
 
-    const yearView = component.find('.react-calendar__year-view');
+      const monthView = component.find('MonthView');
 
-    expect(yearView).toHaveLength(1);
-  });
+      expect(monthView).toHaveLength(1);
+    });
 
-  it('renders maximum allowed view when given view that is not allowed', () => {
-    const component = mount(
-      <Calendar
-        maxDetail="year"
-        view="month"
-      />
-    );
+    it('renders YearView when given view = "year"', () => {
+      const component = mount(
+        <Calendar view="year" />,
+      );
 
-    const yearView = component.find('.react-calendar__year-view');
+      const yearView = component.find('YearView');
 
-    expect(yearView).toHaveLength(1);
-  });
+      expect(yearView).toHaveLength(1);
+    });
 
-  it('renders maximum allowed view when attempting to externally switch to a view that is not allowed', () => {
-    const component = mount(
-      <Calendar
-        maxDetail="year"
-        view="year"
-      />
-    );
+    it('renders DecadeView when given view = "decade"', () => {
+      const component = mount(
+        <Calendar view="decade" />,
+      );
 
-    component.setProps({ view: 'month' });
-    component.update();
+      const decadeView = component.find('DecadeView');
 
-    const yearView = component.find('.react-calendar__year-view');
+      expect(decadeView).toHaveLength(1);
+    });
 
-    expect(yearView).toHaveLength(1);
+    it('renders CenturyView when given view = "century"', () => {
+      const component = mount(
+        <Calendar view="century" />,
+      );
+
+      const centuryView = component.find('CenturyView');
+
+      expect(centuryView).toHaveLength(1);
+    });
+
+    it('renders maximum allowed view when given maxDetail', () => {
+      const component = shallow(
+        <Calendar maxDetail="year" />,
+      );
+
+      const yearView = component.find('YearView');
+
+      expect(yearView).toHaveLength(1);
+    });
+
+    it('renders maximum allowed view when given view that is not allowed', () => {
+      const component = shallow(
+        <Calendar
+          maxDetail="year"
+          view="month"
+        />,
+      );
+
+      const yearView = component.find('YearView');
+
+      expect(yearView).toHaveLength(1);
+    });
+
+    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"
+        />,
+      );
+
+      component.setProps({ view: 'month' });
+      component.update();
+
+      const yearView = component.find('YearView');
+
+      expect(yearView).toHaveLength(1);
+    });
+
+    it('renders maximum allowed view when given changed maxDetail', () => {
+      const component = shallow(
+        <Calendar
+          maxDetail="month"
+          view="month"
+        />,
+      );
+
+      component.setProps({ maxDetail: 'year' });
+      component.update();
+
+      const yearView = component.find('YearView');
+
+      expect(yearView).toHaveLength(1);
+    });
   });
 
-  it('renders maximum allowed view when given changed maxDetail', () => {
-    const component = mount(
+  it('does not pass showWeekNumbers flag to MonthView component by default', () => {
+    const component = shallow(
       <Calendar
-        maxDetail="month"
         view="month"
-      />
+      />,
     );
 
-    component.setProps({ maxDetail: 'year' });
-    component.update();
+    const monthView = component.find('MonthView');
 
-    const yearView = component.find('.react-calendar__year-view');
-
-    expect(yearView).toHaveLength(1);
+    expect(monthView.prop('showWeekNumbers')).toBeFalsy();
   });
 
-  it('renders month view when given view = "month"', () => {
-    const component = mount(
-      <Calendar view="month" />
+  it('passes showWeekNumbers flag to MonthView component given showWeekNumbers flag', () => {
+    const component = shallow(
+      <Calendar
+        showWeekNumbers
+        view="month"
+      />,
     );
 
-    const monthView = component.find('.react-calendar__month-view');
+    const monthView = component.find('MonthView');
 
-    expect(monthView).toHaveLength(1);
+    expect(monthView.prop('showWeekNumbers')).toBeTruthy();
   });
 
-  it('renders month view with week numbers when given view = "month" and showWeekNumbers flag set to true', () => {
-    const component = mount(
+  it('passes showNeighboringMonth flag to MonthView component given showNeighboringMonth flag', () => {
+    const component = shallow(
       <Calendar
-        showWeekNumbers
+        showNeighboringMonth
         view="month"
-      />
+      />,
     );
 
-    const monthView = component.find('.react-calendar__month-view--weekNumbers');
+    const monthView = component.find('MonthView');
 
-    expect(monthView).toHaveLength(1);
+    expect(monthView.prop('showNeighboringMonth')).toBeTruthy();
   });
 
-  it('renders year view when given view = "year"', () => {
-    const component = mount(
-      <Calendar view="year" />
+  it('displays a view with a given value when defaultValue is given', () => {
+    const defaultValue = new Date(2017, 0, 15);
+    const component = shallow(
+      <Calendar
+        defaultValue={defaultValue}
+      />,
     );
 
-    const yearView = component.find('.react-calendar__year-view');
+    const monthView = component.find('MonthView');
 
-    expect(yearView).toHaveLength(1);
+    expect(monthView.prop('activeStartDate')).toEqual(new Date(2017, 0, 1));
   });
 
-  it('renders decade view when given view = "decade"', () => {
-    const component = mount(
-      <Calendar view="decade" />
+  it('displays a view with a given value when value is given', () => {
+    const value = new Date(2017, 0, 15);
+    const component = shallow(
+      <Calendar
+        value={value}
+      />,
     );
 
-    const decadeView = component.find('.react-calendar__decade-view');
+    const monthView = component.find('MonthView');
 
-    expect(decadeView).toHaveLength(1);
+    expect(monthView.prop('activeStartDate')).toEqual(new Date(2017, 0, 1));
   });
 
-  it('renders century view when given view = "century"', () => {
-    const component = mount(
-      <Calendar view="century" />
+  it('displays a view with defaultActiveStartDate when value is given and defaultActiveStartDate is given', () => {
+    const defaultActiveStartDate = new Date(2017, 0, 1);
+    const value = new Date(2018, 0, 15);
+    const component = shallow(
+      <Calendar
+        defaultActiveStartDate={defaultActiveStartDate}
+        value={value}
+      />,
     );
 
-    const centuryView = component.find('.react-calendar__century-view');
+    const monthView = component.find('MonthView');
 
-    expect(centuryView).toHaveLength(1);
+    expect(monthView.prop('activeStartDate')).toEqual(defaultActiveStartDate);
   });
 
-  it('displays a view with a given value when value is given', () => {
-    const value = new Date(2017, 0, 1);
-    const component = mount(
+  it('displays a view with defaultActiveStartDate when no value is given and defaultActiveStartDate is given', () => {
+    const defaultActiveStartDate = new Date(2017, 0, 1);
+    const component = shallow(
       <Calendar
-        showNeighboringMonth={false}
-        value={value}
-      />
+        defaultActiveStartDate={defaultActiveStartDate}
+      />,
     );
 
-    const monthView = component.find('.react-calendar__month-view');
-    const firstDayTile = monthView.find('.react-calendar__tile').first();
-    const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label');
+    const monthView = component.find('MonthView');
 
-    expect(firstDayTileTimeAbbr).toBe(format(value));
+    expect(monthView.prop('activeStartDate')).toEqual(defaultActiveStartDate);
   });
@@ -171,14 +232,11 @@
     const activeStartDate = new Date(2017, 0, 1);
-    const component = mount(
+    const component = shallow(
       <Calendar
         activeStartDate={activeStartDate}
-        showNeighboringMonth={false}
-      />
+      />,
     );
 
-    const monthView = component.find('.react-calendar__month-view');
-    const firstDayTile = monthView.find('.react-calendar__tile').first();
-    const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label');
+    const monthView = component.find('MonthView');
 
-    expect(firstDayTileTimeAbbr).toBe(format(activeStartDate));
+    expect(monthView.prop('activeStartDate')).toEqual(activeStartDate);
   });
@@ -189,99 +247,101 @@
     const beginOfCurrentMonth = getMonthStart(today);
-    const component = mount(
-      <Calendar showNeighboringMonth={false} />
+    const component = shallow(
+      <Calendar />,
     );
 
-    const monthView = component.find('.react-calendar__month-view');
-    const firstDayTile = monthView.find('.react-calendar__tile').first();
-    const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label');
+    const monthView = component.find('MonthView');
 
-    expect(firstDayTileTimeAbbr).toBe(format(beginOfCurrentMonth));
+    expect(monthView.prop('activeStartDate')).toEqual(beginOfCurrentMonth);
   });
 
-  it('drills up when allowed', () => {
-    const component = mount(
-      <Calendar view="month" />
-    );
+  describe('handles drill up properly', () => {
+    it('drills up when allowed', () => {
+      const component = mount(
+        <Calendar view="month" />,
+      );
 
-    component.instance().drillUp();
+      component.instance().drillUp();
 
-    expect(component.state().view).toBe('year');
-  });
+      expect(component.state().view).toBe('year');
+    });
 
-  it('calls onDrillUp on drill up', () => {
-    const onDrillUp = jest.fn();
+    it('calls onDrillUp on drill up', () => {
+      const onDrillUp = jest.fn();
 
-    const component = mount(
-      <Calendar
-        activeStartDate={new Date(2017, 6, 1)}
-        onDrillUp={onDrillUp}
-        view="month"
-      />
-    );
+      const component = mount(
+        <Calendar
+          activeStartDate={new Date(2017, 6, 1)}
+          onDrillUp={onDrillUp}
+          view="month"
+        />,
+      );
 
-    component.instance().drillUp();
+      component.instance().drillUp();
 
-    expect(onDrillUp).toHaveBeenCalledWith({
-      activeStartDate: new Date(2017, 0, 1),
-      view: 'year',
+      expect(onDrillUp).toHaveBeenCalledWith({
+        activeStartDate: new Date(2017, 0, 1),
+        view: 'year',
+      });
     });
-  });
 
-  it('refuses to drill up when already on minimum allowed detail', () => {
-    const onDrillUp = jest.fn();
+    it('refuses to drill up when already on minimum allowed detail', () => {
+      const onDrillUp = jest.fn();
 
-    const component = mount(
-      <Calendar
-        onDrillUp={onDrillUp}
-        view="century"
-      />
-    );
+      const component = mount(
+        <Calendar
+          onDrillUp={onDrillUp}
+          view="century"
+        />,
+      );
 
-    component.instance().drillUp();
+      component.instance().drillUp();
 
-    expect(onDrillUp).not.toHaveBeenCalled();
+      expect(onDrillUp).not.toHaveBeenCalled();
+    });
   });
 
-  it('drills down when allowed', () => {
-    const component = mount(
-      <Calendar view="century" />
-    );
+  describe('handles drill down properly', () => {
+    it('drills down when allowed', () => {
+      const component = mount(
+        <Calendar view="century" />,
+      );
 
-    component.instance().drillDown(new Date(2011, 0, 1));
+      component.instance().drillDown(new Date(2011, 0, 1));
 
-    expect(component.state().view).toBe('decade');
-  });
+      expect(component.state().view).toBe('decade');
+    });
 
-  it('calls onDrillDown on drill down', () => {
-    const onDrillDown = jest.fn();
+    it('calls onDrillDown on drill down', () => {
+      const onDrillDown = jest.fn();
 
-    const component = mount(
-      <Calendar
-        activeStartDate={new Date(2001, 0, 1)}
-        onDrillDown={onDrillDown}
-        view="century"
-      />
-    );
+      const component = mount(
+        <Calendar
+          activeStartDate={new Date(2001, 0, 1)}
+          onDrillDown={onDrillDown}
+          view="century"
+        />,
+      );
 
-    component.instance().drillDown(new Date(2011, 0, 1));
+      component.instance().drillDown(new Date(2011, 0, 1));
 
-    expect(onDrillDown).toHaveBeenCalledWith({
-      activeStartDate: new Date(2011, 0, 1),
-      view: 'decade',
+      expect(onDrillDown).toHaveBeenCalledWith({
+        activeStartDate: new Date(2011, 0, 1),
+        view: 'decade',
+      });
     });
-  });
 
-  it('refuses to drill down when already on minimum allowed detail', () => {
-    const onDrillDown = jest.fn();
+    it('refuses to drill down when already on minimum allowed detail', () => {
+      const onDrillDown = jest.fn();
 
-    const component = mount(
-      <Calendar
-        onDrillDown={onDrillDown}
-        view="month"
-      />
-    );
+      const component = mount(
+        <Calendar
+          onDrillDown={onDrillDown}
+          view="month"
+        />,
+      );
 
-    component.instance().drillUp();
+      component.instance().drillUp();
 
-    expect(onDrillDown).not.toHaveBeenCalled();
+      expect(onDrillDown).not.toHaveBeenCalled();
+    });
   });
@@ -296,3 +356,3 @@
           view="month"
-        />
+        />,
       );
@@ -312,3 +372,3 @@
           view="month"
-        />
+        />,
       );
@@ -328,3 +388,3 @@
           view="month"
-        />
+        />,
       );
@@ -344,3 +404,3 @@
           view="month"
-        />
+        />,
       );
@@ -360,3 +420,3 @@
           view="month"
-        />
+        />,
       );
@@ -380,3 +440,3 @@
           view="month"
-        />
+        />,
       );
@@ -397,3 +457,3 @@
           view="month"
-        />
+        />,
       );
@@ -414,3 +474,3 @@
           view="month"
-        />
+        />,
       );
@@ -431,3 +491,3 @@
           view="month"
-        />
+        />,
       );
@@ -447,3 +507,3 @@
           view="month"
-        />
+        />,
       );
@@ -468,3 +528,3 @@
           view="month"
-        />
+        />,
       );
@@ -492,3 +552,3 @@
         view="year"
-      />
+      />,
     );
@@ -508,3 +568,3 @@
     const component = mount(
-      <Calendar activeStartDate={activeStartDate} />
+      <Calendar activeStartDate={activeStartDate} />,
     );
@@ -514,118 +574,100 @@
 
-    const monthView = component.find('.react-calendar__month-view');
-    const firstDayTile = monthView.find('.react-calendar__tile').first();
-    const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label');
+    const monthView = component.find('MonthView');
 
-    expect(firstDayTileTimeAbbr).toBe(format(newActiveStartDate));
+    expect(monthView.prop('activeStartDate')).toEqual(newActiveStartDate);
   });
 
-  it('displays calendar with custom weekdays formatting', () => {
-    const component = mount(
+  it('passes formatMonthYear to Navigation component', () => {
+    const formatMonthYear = () => 'Month year';
+    const component = shallow(
       <Calendar
-        formatShortWeekday={() => 'Weekday'}
-      />
+        formatMonthYear={formatMonthYear}
+      />,
     );
 
-    const monthView = component.find('.react-calendar__month-view');
-    const firstWeekdayTile = monthView.find('.react-calendar__month-view__weekdays__weekday').first();
+    const navigation = component.find('Navigation');
 
-    expect(firstWeekdayTile.text()).toBe('Weekday');
+    expect(navigation.prop('formatMonthYear')).toBe(formatMonthYear);
   });
 
-  describe('formats tiles properly', () => {
-    it('displays calendar with custom month formatting', () => {
-      const component = mount(
-        <Calendar
-          formatMonth={() => 'Month'}
-          view="year"
-        />
-      );
+  it('passes formatYear to Navigation component', () => {
+    const formatYear = () => 'Year';
+    const component = shallow(
+      <Calendar
+        formatYear={formatYear}
+      />,
+    );
 
-      const yearView = component.find('.react-calendar__year-view');
-      const firstMonthTile = yearView.find('.react-calendar__year-view__months__month').first();
+    const navigation = component.find('Navigation');
 
-      expect(firstMonthTile.text()).toBe('Month');
-    });
+    expect(navigation.prop('formatYear')).toBe(formatYear);
+  });
 
-    it('displays calendar with custom year formatting on decade view', () => {
-      const component = mount(
-        <Calendar
-          formatYear={() => 'Year'}
-          view="decade"
-        />
-      );
+  it('passes formatLongDate to MonthView component', () => {
+    const formatLongDate = () => 'Long date';
+    const component = shallow(
+      <Calendar
+        formatLongDate={formatLongDate}
+      />,
+    );
 
-      const decadeView = component.find('.react-calendar__decade-view');
-      const firstYearTile = decadeView.find('.react-calendar__decade-view__years__year').first();
+    const monthView = component.find('MonthView');
 
-      expect(firstYearTile.text()).toBe('Year');
-    });
+    expect(monthView.prop('formatLongDate')).toBe(formatLongDate);
+  });
 
-    it('displays calendar with custom year formatting on century view', () => {
-      const component = mount(
-        <Calendar
-          formatYear={() => 'Year'}
-          view="century"
-        />
-      );
+  it('passes formatShortWeekday to MonthView component', () => {
+    const formatShortWeekday = () => 'Weekday';
+    const component = shallow(
+      <Calendar
+        formatShortWeekday={formatShortWeekday}
+      />,
+    );
 
-      const centuryView = component.find('.react-calendar__century-view');
-      const firstDecadeTile = centuryView.find('.react-calendar__century-view__decades__decade').first();
+    const monthView = component.find('MonthView');
 
-      expect(firstDecadeTile.text()).toBe('Year – Year');
-    });
+    expect(monthView.prop('formatShortWeekday')).toBe(formatShortWeekday);
   });
 
-  describe('formats navigation label properly', () => {
-    it('displays calendar with custom month year navigation label', () => {
-      const component = mount(
-        <Calendar
-          formatMonthYear={() => 'MonthYear'}
-        />
-      );
+  it('passes formatMonth to YearView component', () => {
+    const formatMonth = () => 'Month';
+    const component = shallow(
+      <Calendar
+        formatMonth={formatMonth}
+        view="year"
+      />,
+    );
 
-      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+    const yearView = component.find('YearView');
 
-      expect(navigationLabel.text()).toBe('MonthYear');
-    });
+    expect(yearView.prop('formatMonth')).toBe(formatMonth);
+  });
 
-    it('displays calendar with custom year navigation label', () => {
-      const component = mount(
-        <Calendar
-          formatYear={() => 'Year'}
-          view="year"
-        />
-      );
+  it('passes formatYear to DecadeView component', () => {
+    const formatYear = () => 'Year';
+    const component = shallow(
+      <Calendar
+        formatYear={formatYear}
+        view="decade"
+      />,
+    );
 
-      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+    const decadeView = component.find('DecadeView');
 
-      expect(navigationLabel.text()).toBe('Year');
-    });
+    expect(decadeView.prop('formatYear')).toBe(formatYear);
+  });
 
-    it('displays calendar with custom decade navigation label', () => {
-      const component = mount(
-        <Calendar
-          formatYear={() => 'Year'}
-          view="decade"
-        />
-      );
+  it('passes formatYear to CenturyView component', () => {
+    const formatYear = () => 'Year';
+    const component = shallow(
+      <Calendar
+        formatYear={formatYear}
+        view="century"
+      />,
+    );
 
-      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+    const centuryView = component.find('CenturyView');
 
-      expect(navigationLabel.text()).toBe('Year – Year');
-    });
-
-    it('displays calendar with custom century navigation label', () => {
-      const component = mount(
-        <Calendar
-          formatYear={() => 'Year'}
-          view="century"
-        />
-      );
-
-      const navigationLabel = component.find('.react-calendar__navigation__label').first();
-
-      expect(navigationLabel.text()).toBe('Year – Year');
-    });
+    expect(centuryView.prop('formatYear')).toBe(formatYear);
   });
 });

src/Calendar/Navigation.spec.jsx

@@ -8,14 +8,16 @@ import React from 'react';
 
-/* eslint-disable comma-dangle */
+describe('Navigation', () => {
+  const defaultProps = {
+    activeStartDate: new Date(2017, 0, 1),
+    drillUp: () => {},
+    setActiveStartDate: () => {},
+    views: allViews,
+  };
 
-describe('Navigation', () => {
   it('renders prev2, prev, drill up, next and next2 buttons', () => {
     const component = shallow(
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
+        {...defaultProps}
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -38,8 +40,5 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
+        {...defaultProps}
         view="century"
-        views={allViews}
-      />
+      />,
     );
@@ -60,8 +59,5 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
+        {...defaultProps}
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -77,8 +73,5 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
+        {...defaultProps}
         view="year"
-        views={allViews}
-      />
+      />,
     );
@@ -94,8 +87,5 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
+        {...defaultProps}
         view="decade"
-        views={allViews}
-      />
+      />,
     );
@@ -111,8 +101,5 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
+        {...defaultProps}
         view="century"
-        views={allViews}
-      />
+      />,
     );
@@ -128,9 +115,6 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
+        {...defaultProps}
         showDoubleView
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -146,4 +130,3 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
+        {...defaultProps}
         next2Label="next2Label"
@@ -153,6 +136,4 @@ nextLabel="nextLabel"
         prevLabel="prevLabel"
-        setActiveStartDate={jest.fn()}
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -171,4 +152,3 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
+        {...defaultProps}
         navigationAriaLabel="navigationAriaLabel"
@@ -179,6 +159,4 @@ next2AriaLabel="next2AriaLabel"
         prevAriaLabel="prevAriaLabel"
-        setActiveStartDate={jest.fn()}
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -199,8 +177,6 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
+        {...defaultProps}
         drillUp={drillUpFn}
-        setActiveStartDate={jest.fn()}
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -219,8 +195,6 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
+        {...defaultProps}
         setActiveStartDate={setActiveStartDateFn}
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -247,8 +221,6 @@
     <Navigation
-      activeStartDate={new Date(2017, 0, 1)}
-      drillUp={jest.fn()}
+      {...defaultProps}
       setActiveStartDate={monthSetActiveStartDateFn}
       view="month"
-      views={allViews}
-    />
+    />,
   );
@@ -294,8 +266,6 @@
     <Navigation
-      activeStartDate={new Date(2017, 0, 1)}
-      drillUp={jest.fn()}
+      {...defaultProps}
       setActiveStartDate={yearSetActiveStartDateFn}
       view="year"
-      views={allViews}
-    />
+    />,
   );
@@ -341,8 +311,6 @@
     <Navigation
-      activeStartDate={new Date(2017, 0, 1)}
-      drillUp={jest.fn()}
+      {...defaultProps}
       setActiveStartDate={decadeSetActiveStartDateFn}
       view="decade"
-      views={allViews}
-    />
+    />,
   );
@@ -388,8 +356,6 @@
     <Navigation
-      activeStartDate={new Date(2017, 0, 1)}
-      drillUp={jest.fn()}
+      {...defaultProps}
       setActiveStartDate={centurySetActiveStartDateFn}
       view="century"
-      views={allViews}
-    />
+    />,
   );
@@ -418,8 +384,5 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
+        {...defaultProps}
         view="century"
-        views={allViews}
-      />
+      />,
     );
@@ -435,9 +398,6 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
+        {...defaultProps}
         minDate={new Date(2017, 0, 1)}
-        setActiveStartDate={jest.fn()}
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -457,8 +417,5 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
+        {...defaultProps}
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -482,9 +439,6 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
+        {...defaultProps}
         maxDate={new Date(2017, 0, 31)}
-        setActiveStartDate={jest.fn()}
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -504,8 +458,5 @@
       <Navigation
-        activeStartDate={new Date(2017, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
+        {...defaultProps}
         view="month"
-        views={allViews}
-      />
+      />,
     );
@@ -529,8 +480,6 @@
       <Navigation
+        {...defaultProps}
         activeStartDate={new Date(1000, 0, 1)}
-        drillUp={jest.fn()}
-        setActiveStartDate={jest.fn()}
         view="year"
-        views={allViews}
-      />
+      />,
     );
@@ -556,9 +505,7 @@
       <Navigation
+        {...defaultProps}
         activeStartDate={date}
-        drillUp={jest.fn()}
         navigationLabel={navigationLabel}
-        setActiveStartDate={jest.fn()}
         view={view}
-        views={allViews}
-      />
+      />,
     );
@@ -571,2 +518,60 @@
   });
+
+  describe('formats navigation label properly', () => {
+    it('displays calendar with custom month year navigation label', () => {
+      const component = shallow(
+        <Navigation
+          {...defaultProps}
+          formatMonthYear={() => 'MonthYear'}
+          view="month"
+        />,
+      );
+
+      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+
+      expect(navigationLabel.text()).toBe('MonthYear');
+    });
+
+    it('displays calendar with custom year navigation label', () => {
+      const component = shallow(
+        <Navigation
+          {...defaultProps}
+          formatYear={() => 'Year'}
+          view="year"
+        />,
+      );
+
+      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+
+      expect(navigationLabel.text()).toBe('Year');
+    });
+
+    it('displays calendar with custom decade navigation label', () => {
+      const component = shallow(
+        <Navigation
+          {...defaultProps}
+          formatYear={() => 'Year'}
+          view="decade"
+        />,
+      );
+
+      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+
+      expect(navigationLabel.text()).toBe('Year – Year');
+    });
+
+    it('displays calendar with custom century navigation label', () => {
+      const component = shallow(
+        <Navigation
+          {...defaultProps}
+          formatYear={() => 'Year'}
+          view="century"
+        />,
+      );
+
+      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+
+      expect(navigationLabel.text()).toBe('Year – Year');
+    });
+  });
 });

src/CenturyView.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { getDecadeStart, getDecadeEnd } from '@wojtekmaj/date-utils';
@@ -7,5 +7,9 @@
 
-/* eslint-disable comma-dangle, react/prop-types */
+/* eslint-disable react/prop-types */
 
 describe('CenturyView', () => {
+  const defaultProps = {
+    activeStartDate: new Date(2017, 0, 1),
+  };
+
   it('renders proper view when given activeStartDate', () => {
@@ -15,5 +19,6 @@ const activeStartDate = new Date(2001, 0, 1);
       <CenturyView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
-      />
+      />,
     );
@@ -27,10 +32,9 @@
   it('applies tileClassName to its tiles when given a string', () => {
-    const activeStartDate = new Date(2001, 0, 1);
     const tileClassName = 'testClassName';
     const component = mount(
       <CenturyView
-        activeStartDate={activeStartDate}
+        {...defaultProps}
         showNeighboringMonth={false}
         tileClassName={tileClassName}
-      />
+      />,
     );
@@ -55,6 +59,7 @@
       <CenturyView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
         tileClassName={tileClassNameFn}
-      />
+      />,
     );
@@ -74,3 +79,2 @@
   it('renders tileContent in its tiles when given a node', () => {
-    const activeStartDate = new Date(2001, 0, 1);
     const tileContent = (
@@ -81,6 +85,6 @@ <div className="testContent" />
       <CenturyView
-        activeStartDate={activeStartDate}
+        {...defaultProps}
         showNeighboringMonth={false}
         tileContent={tileContent}
-      />
+      />,
     );
@@ -109,6 +113,7 @@
       <CenturyView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
         tileContent={tileContentFn}
-      />
+      />,
     );
@@ -126,2 +131,17 @@
   });
+
+  it('passes formatYear flag to Decades component', () => {
+    const formatYear = () => 'Year';
+
+    const component = shallow(
+      <CenturyView
+        {...defaultProps}
+        formatYear={formatYear}
+      />,
+    );
+
+    const years = component.find('Decades');
+
+    expect(years.prop('formatYear')).toBe(formatYear);
+  });
 });

src/CenturyView/Decade.spec.jsx

@@ -6,3 +6,3 @@ import React from 'react';
 
-/* eslint-disable comma-dangle, jsx-a11y/mouse-events-have-key-events */
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 
@@ -23,3 +23,3 @@ const tileProps = {
         tileClassName={() => 'testFunctionClassName'}
-      />
+      />,
     );
@@ -41,3 +41,3 @@
         decade={2011}
-      />
+      />,
     );
@@ -57,3 +57,3 @@
         minDate={new Date(2020, 0, 1)}
-      />
+      />,
     );
@@ -70,3 +70,3 @@
         minDate={new Date(2010, 0, 1)}
-      />
+      />,
     );
@@ -83,3 +83,3 @@
         maxDate={new Date(2010, 0, 1)}
-      />
+      />,
     );
@@ -96,3 +96,3 @@
         maxDate={new Date(2010, 0, 1)}
-      />
+      />,
     );
@@ -112,3 +112,3 @@
         onClick={onClick}
-      />
+      />,
     );
@@ -131,3 +131,3 @@
         onMouseOver={onMouseOver}
-      />
+      />,
     );
@@ -150,3 +150,3 @@
         onMouseOver={onMouseOver}
-      />
+      />,
     );
@@ -165,3 +165,3 @@
         tileContent={<div className="testContent" />}
-      />
+      />,
     );
@@ -184,3 +184,3 @@
         tileContent={tileContent}
-      />
+      />,
     );
@@ -211,3 +211,3 @@
         locale={locale}
-      />
+      />,
     );
@@ -214,0 +214,0 @@

src/DecadeView.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
 import DecadeView from './DecadeView';
 
-/* eslint-disable comma-dangle, react/prop-types */
+/* eslint-disable react/prop-types */
 
 describe('DecadeView', () => {
+  const defaultProps = {
+    activeStartDate: new Date(2017, 0, 1),
+  };
+
   it('renders proper view when given activeStartDate', () => {
@@ -13,5 +17,6 @@ const activeStartDate = new Date(2011, 0, 1);
       <DecadeView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
-      />
+      />,
     );
@@ -25,10 +30,9 @@
   it('applies tileClassName to its tiles when given a string', () => {
-    const activeStartDate = new Date(2011, 0, 1);
     const tileClassName = 'testClassName';
     const component = mount(
       <DecadeView
-        activeStartDate={activeStartDate}
+        {...defaultProps}
         showNeighboringMonth={false}
         tileClassName={tileClassName}
-      />
+      />,
     );
@@ -53,6 +57,7 @@
       <DecadeView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
         tileClassName={tileClassNameFn}
-      />
+      />,
     );
@@ -72,3 +77,2 @@
   it('renders tileContent in its tiles when given a node', () => {
-    const activeStartDate = new Date(2011, 0, 1);
     const tileContent = (
@@ -79,6 +83,6 @@ <div className="testContent" />
       <DecadeView
-        activeStartDate={activeStartDate}
+        {...defaultProps}
         showNeighboringMonth={false}
         tileContent={tileContent}
-      />
+      />,
     );
@@ -107,6 +111,7 @@
       <DecadeView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
         tileContent={tileContentFn}
-      />
+      />,
     );
@@ -124,2 +129,17 @@
   });
+
+  it('passes formatYear flag to Years component', () => {
+    const formatYear = () => 'Year';
+
+    const component = shallow(
+      <DecadeView
+        {...defaultProps}
+        formatYear={formatYear}
+      />,
+    );
+
+    const years = component.find('Years');
+
+    expect(years.prop('formatYear')).toBe(formatYear);
+  });
 });

src/DecadeView/Year.spec.jsx

@@ -6,3 +6,3 @@ import React from 'react';
 
-/* eslint-disable comma-dangle, jsx-a11y/mouse-events-have-key-events */
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 
@@ -23,3 +23,3 @@ const tileProps = {
         tileClassName={() => 'testFunctionClassName'}
-      />
+      />,
     );
@@ -41,3 +41,3 @@
         year={2018}
-      />
+      />,
     );
@@ -57,3 +57,3 @@
         minDate={new Date(2019, 0, 1)}
-      />
+      />,
     );
@@ -70,3 +70,3 @@
         minDate={new Date(2018, 0, 1)}
-      />
+      />,
     );
@@ -83,3 +83,3 @@
         maxDate={new Date(2017, 0, 1)}
-      />
+      />,
     );
@@ -96,3 +96,3 @@
         maxDate={new Date(2018, 0, 1)}
-      />
+      />,
     );
@@ -112,3 +112,3 @@
         onClick={onClick}
-      />
+      />,
     );
@@ -131,3 +131,3 @@
         onMouseOver={onMouseOver}
-      />
+      />,
     );
@@ -150,3 +150,3 @@
         onMouseOver={onMouseOver}
-      />
+      />,
     );
@@ -165,3 +165,3 @@
         tileContent={<div className="testContent" />}
-      />
+      />,
     );
@@ -184,3 +184,3 @@
         tileContent={tileContent}
-      />
+      />,
     );
@@ -211,3 +211,3 @@
         locale={locale}
-      />
+      />,
     );
@@ -214,0 +214,0 @@

src/Flex.spec.jsx

@@ -6,4 +6,2 @@ import React from 'react';
 
-/* eslint-disable comma-dangle */
-
 describe('Flex', () => {
@@ -22,3 +20,3 @@ it('styles itself properly with wrap flag set to false', () => {
         </div>
-      </Flex>
+      </Flex>,
     );
@@ -42,3 +40,3 @@
         </div>
-      </Flex>
+      </Flex>,
     );
@@ -62,3 +60,3 @@
         </div>
-      </Flex>
+      </Flex>,
     );
@@ -83,3 +81,3 @@
         </div>
-      </Flex>
+      </Flex>,
     );
@@ -86,0 +84,0 @@

src/MonthView.jsx

@@ -75,3 +75,3 @@ import React from 'react';
   const {
-    calendarType: calendarTypeProps,
+    calendarType = getCalendarTypeFromLocale(locale),
     formatShortWeekday,
@@ -83,4 +83,2 @@ onClickWeekNumber,
 
-  const calendarType = calendarTypeProps || getCalendarTypeFromLocale(locale);
-
   function renderWeekdays() {
@@ -87,0 +85,0 @@ return (

src/MonthView.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
 import MonthView from './MonthView';
 
-/* eslint-disable comma-dangle, react/prop-types */
+/* eslint-disable react/prop-types */
 
@@ -11,2 +11,6 @@ const { format } = new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', year: 'numeric' });
 describe('MonthView', () => {
+  const defaultProps = {
+    activeStartDate: new Date(2017, 0, 1),
+  };
+
   it('renders proper view when given activeStartDate', () => {
@@ -16,5 +20,6 @@ const activeStartDate = new Date(2017, 0, 1);
       <MonthView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
-      />
+      />,
     );
@@ -29,10 +34,9 @@
   it('applies tileClassName to its tiles when given a string', () => {
-    const activeStartDate = new Date(2017, 0, 1);
     const tileClassName = 'testClassName';
     const component = mount(
       <MonthView
-        activeStartDate={activeStartDate}
+        {...defaultProps}
         showNeighboringMonth={false}
         tileClassName={tileClassName}
-      />
+      />,
     );
@@ -57,6 +61,7 @@
       <MonthView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
         tileClassName={tileClassNameFn}
-      />
+      />,
     );
@@ -76,3 +81,2 @@
   it('renders tileContent in its tiles when given a node', () => {
-    const activeStartDate = new Date(2017, 0, 1);
     const tileContent = (
@@ -83,6 +87,6 @@ <div className="testContent" />
       <MonthView
-        activeStartDate={activeStartDate}
+        {...defaultProps}
         showNeighboringMonth={false}
         tileContent={tileContent}
-      />
+      />,
     );
@@ -112,6 +116,7 @@
       <MonthView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
         tileContent={tileContentFn}
-      />
+      />,
     );
@@ -131,6 +136,6 @@
   it('does not render WeekNumbers component by default', () => {
-    const activeStartDate = new Date(2017, 0, 1);
-
     const component = mount(
-      <MonthView activeStartDate={activeStartDate} />
+      <MonthView
+        {...defaultProps}
+      />,
     );
@@ -142,9 +147,7 @@
   it('renders WeekNumbers component by given showWeekNumbers flag', () => {
-    const activeStartDate = new Date(2017, 0, 1);
-
     const component = mount(
       <MonthView
-        activeStartDate={activeStartDate}
+        {...defaultProps}
         showWeekNumbers
-      />
+      />,
     );
@@ -154,2 +157,92 @@
   });
+
+  it('passes calendarType to Weekdays component', () => {
+    const calendarType = 'ISO 8601';
+
+    const component = shallow(
+      <MonthView
+        {...defaultProps}
+        calendarType={calendarType}
+      />,
+    );
+
+    const weekdays = component.find('Weekdays');
+
+    expect(weekdays.prop('calendarType')).toBe(calendarType);
+  });
+
+  it('passes derived calendarType to Weekdays component if calendarType is not given', () => {
+    const locale = 'en-US';
+
+    const component = shallow(
+      <MonthView
+        {...defaultProps}
+        locale={locale}
+      />,
+    );
+
+    const weekdays = component.find('Weekdays');
+
+    expect(weekdays.prop('calendarType')).toBe('US');
+  });
+
+  it('passes formatShortWeekday flag to Weekdays component', () => {
+    const formatShortWeekday = () => 'Weekday';
+
+    const component = shallow(
+      <MonthView
+        {...defaultProps}
+        formatShortWeekday={formatShortWeekday}
+      />,
+    );
+
+    const weekdays = component.find('Weekdays');
+
+    expect(weekdays.prop('formatShortWeekday')).toBe(formatShortWeekday);
+  });
+
+  it('passes calendarType to Days component', () => {
+    const calendarType = 'ISO 8601';
+
+    const component = shallow(
+      <MonthView
+        {...defaultProps}
+        calendarType={calendarType}
+      />,
+    );
+
+    const days = component.find('Days');
+
+    expect(days.prop('calendarType')).toBe(calendarType);
+  });
+
+  it('passes derived calendarType to Days component if calendarType is not given', () => {
+    const locale = 'en-US';
+
+    const component = shallow(
+      <MonthView
+        {...defaultProps}
+        locale={locale}
+      />,
+    );
+
+    const days = component.find('Days');
+
+    expect(days.prop('calendarType')).toBe('US');
+  });
+
+  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);
+  });
 });

src/MonthView/Day.spec.jsx

@@ -6,3 +6,3 @@ import React from 'react';
 
-/* eslint-disable comma-dangle, jsx-a11y/mouse-events-have-key-events */
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 
@@ -23,3 +23,3 @@ const tileProps = {
         tileClassName={() => 'testFunctionClassName'}
-      />
+      />,
     );
@@ -40,3 +40,3 @@
         date={new Date(2018, 0, 6)} // Saturday
-      />
+      />,
     );
@@ -54,3 +54,3 @@
         date={new Date(2018, 1, 2)}
-      />
+      />,
     );
@@ -68,3 +68,3 @@
         date={new Date(2018, 0, 1)}
-      />
+      />,
     );
@@ -85,3 +85,3 @@
         minDate={new Date(2018, 0, 2)}
-      />
+      />,
     );
@@ -98,3 +98,3 @@
         minDate={new Date(2018, 0, 1)}
-      />
+      />,
     );
@@ -111,3 +111,3 @@
         maxDate={new Date(2018, 0, 1)}
-      />
+      />,
     );
@@ -124,3 +124,3 @@
         maxDate={new Date(2018, 0, 1)}
-      />
+      />,
     );
@@ -140,3 +140,3 @@
         onClick={onClick}
-      />
+      />,
     );
@@ -159,3 +159,3 @@
         onMouseOver={onMouseOver}
-      />
+      />,
     );
@@ -178,3 +178,3 @@
         onMouseOver={onMouseOver}
-      />
+      />,
     );
@@ -193,3 +193,3 @@
         tileContent={<div className="testContent" />}
-      />
+      />,
     );
@@ -212,3 +212,3 @@
         tileContent={tileContent}
-      />
+      />,
     );
@@ -239,3 +239,3 @@
         locale={locale}
-      />
+      />,
     );
@@ -242,0 +242,0 @@

src/MonthView/Weekdays.spec.jsx

@@ -6,10 +6,13 @@ import React from 'react';
 
-/* eslint-disable comma-dangle */
+describe('Weekdays', () => {
+  const defaultProps = {
+    calendarType: 'ISO 8601',
+  };
 
-describe('Weekdays', () => {
   it('renders proper weekdays (ISO 8601)', () => {
     const component = mount(
       <Weekdays
+        {...defaultProps}
         calendarType="ISO 8601"
-      />
+      />,
     );
@@ -29,4 +32,5 @@
       <Weekdays
+        {...defaultProps}
         calendarType="US"
-      />
+      />,
     );
@@ -42,2 +46,16 @@
   });
+
+  it('renders weekdays with custom weekdays formatting', () => {
+    const component = mount(
+      <Weekdays
+        {...defaultProps}
+        formatShortWeekday={() => 'Weekday'}
+      />,
+    );
+
+    const weekdays = component.find('.react-calendar__month-view__weekdays__weekday');
+    const firstWeekday = weekdays.first();
+
+    expect(firstWeekday.text()).toBe('Weekday');
+  });
 });

src/MonthView/WeekNumbers.spec.jsx

@@ -6,11 +6,14 @@ import React from 'react';
 
-/* eslint-disable comma-dangle */
+describe('WeekNumbers', () => {
+  const defaultProps = {
+    activeStartDate: new Date(2017, 0, 1),
+  };
 
-describe('WeekNumbers', () => {
   it('renders proper weekNumbers for a year that starts in week 1 (ISO 8601)', () => {
     const component = mount(
       <WeekNumbers
+        {...defaultProps}
         activeStartDate={new Date(2018, 0, 1)}
         calendarType="ISO 8601"
-      />
+      />,
     );
@@ -27,5 +30,6 @@
       <WeekNumbers
+        {...defaultProps}
         activeStartDate={new Date(2017, 0, 1)}
         calendarType="ISO 8601"
-      />
+      />,
     );
@@ -42,5 +46,6 @@
       <WeekNumbers
+        {...defaultProps}
         activeStartDate={new Date(2016, 0, 1)}
         calendarType="ISO 8601"
-      />
+      />,
     );
@@ -57,5 +62,6 @@
       <WeekNumbers
+        {...defaultProps}
         activeStartDate={new Date(2017, 0, 1)}
         calendarType="US"
-      />
+      />,
     );
@@ -73,6 +79,7 @@
       <WeekNumbers
+        {...defaultProps}
         activeStartDate={new Date(2018, 0, 1)}
         calendarType="ISO 8601"
         showFixedNumberOfWeeks
-      />
+      />,
     );
@@ -89,5 +96,5 @@
       <WeekNumbers
-        activeStartDate={new Date(2017, 0, 1)}
+        {...defaultProps}
         calendarType="ISO 8601"
-      />
+      />,
     );
@@ -103,6 +110,6 @@
       <WeekNumbers
-        activeStartDate={new Date(2017, 0, 1)}
+        {...defaultProps}
         calendarType="ISO 8601"
         onClickWeekNumber={jest.fn()}
-      />
+      />,
     );
@@ -119,6 +126,6 @@
       <WeekNumbers
-        activeStartDate={new Date(2017, 0, 1)}
+        {...defaultProps}
         calendarType="ISO 8601"
         onClickWeekNumber={onClickWeekNumber}
-      />
+      />,
     );
@@ -136,6 +143,6 @@
       <WeekNumbers
-        activeStartDate={new Date(2017, 0, 1)}
+        {...defaultProps}
         calendarType="US"
         onClickWeekNumber={onClickWeekNumber}
-      />
+      />,
     );
@@ -142,0 +149,0 @@

src/YearView.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
 import YearView from './YearView';
 
-/* eslint-disable comma-dangle, react/prop-types */
+/* eslint-disable react/prop-types */
 
@@ -11,2 +11,6 @@ const { format } = new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' });
 describe('YearView', () => {
+  const defaultProps = {
+    activeStartDate: new Date(2017, 0, 1),
+  };
+
   it('renders proper view when given activeStartDate', () => {
@@ -16,5 +20,6 @@ const activeStartDate = new Date(2017, 0, 1);
       <YearView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
-      />
+      />,
     );
@@ -29,10 +34,9 @@
   it('applies tileClassName to its tiles when given a string', () => {
-    const activeStartDate = new Date(2017, 0, 1);
     const tileClassName = 'testClassName';
     const component = mount(
       <YearView
-        activeStartDate={activeStartDate}
+        {...defaultProps}
         showNeighboringMonth={false}
         tileClassName={tileClassName}
-      />
+      />,
     );
@@ -57,6 +61,7 @@
       <YearView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
         tileClassName={tileClassNameFn}
-      />
+      />,
     );
@@ -76,3 +81,2 @@
   it('renders tileContent in its tiles when given a node', () => {
-    const activeStartDate = new Date(2017, 0, 1);
     const tileContent = (
@@ -83,6 +87,6 @@ <div className="testContent" />
       <YearView
-        activeStartDate={activeStartDate}
+        {...defaultProps}
         showNeighboringMonth={false}
         tileContent={tileContent}
-      />
+      />,
     );
@@ -111,6 +115,7 @@
       <YearView
+        {...defaultProps}
         activeStartDate={activeStartDate}
         showNeighboringMonth={false}
         tileContent={tileContentFn}
-      />
+      />,
     );
@@ -130,9 +135,7 @@
   it('displays year view with custom month formatting', () => {
-    const activeStartDate = new Date(2017, 0, 1);
-
     const component = mount(
       <YearView
-        activeStartDate={activeStartDate}
+        {...defaultProps}
         formatMonth={() => 'Month'}
-      />
+      />,
     );
@@ -144,2 +147,17 @@
   });
+
+  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);
+  });
 });

src/YearView/Month.spec.jsx

@@ -6,3 +6,3 @@ import React from 'react';
 
-/* eslint-disable comma-dangle, jsx-a11y/mouse-events-have-key-events */
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 
@@ -22,3 +22,3 @@ const tileProps = {
         tileClassName={() => 'testFunctionClassName'}
-      />
+      />,
     );
@@ -40,3 +40,3 @@
         month={2018}
-      />
+      />,
     );
@@ -57,3 +57,3 @@
         minDate={new Date(2018, 7, 1)}
-      />
+      />,
     );
@@ -70,3 +70,3 @@
         minDate={new Date(2018, 0, 1)}
-      />
+      />,
     );
@@ -83,3 +83,3 @@
         maxDate={new Date(2018, 5, 1)}
-      />
+      />,
     );
@@ -96,3 +96,3 @@
         maxDate={new Date(2018, 0, 1)}
-      />
+      />,
     );
@@ -112,3 +112,3 @@
         onClick={onClick}
-      />
+      />,
     );
@@ -131,3 +131,3 @@
         onMouseOver={onMouseOver}
-      />
+      />,
     );
@@ -150,3 +150,3 @@
         onMouseOver={onMouseOver}
-      />
+      />,
     );
@@ -165,3 +165,3 @@
         tileContent={<div className="testContent" />}
-      />
+      />,
     );
@@ -184,3 +184,3 @@
         tileContent={tileContent}
-      />
+      />,
     );
@@ -211,3 +211,3 @@
         locale={locale}
-      />
+      />,
     );
@@ -234,3 +234,3 @@
         locale={locale}
-      />
+      />,
     );
@@ -237,0 +237,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

432724

increased by0.94%

Lines of code

10132

increased by1.69%

Worsened metrics

Dev dependency count

22

increased by4.76%

No dependency changes