Fix not selectable last year

.circleci/config.yml

@@ -10,8 +10,6 @@ defaults: &js_defaults
   working_directory: ~/material-ui-pickers
 
 version: 2.1
-orbs:
-  cypress: cypress-io/cypress@1
 
 ####################
 # Custom jobs
@@ -92,7 +90,12 @@ jobs:
 
   cypress_tests:
     description: Run cypress tests
-    executor: cypress/browsers-chrome78-ff70
+    docker:
+      - image: cypress/browsers:node12.8.1-chrome80-ff72
+        environment:
+          ## this enables colors in the output
+          TERM: xterm
+    working_directory: ~/material-ui-pickers
     steps:
       - attach_workspace:
           at: .
@@ -120,13 +123,14 @@ jobs:
 # Workflow
 ####################
 workflows:
+  version: 2.1
   build_and_test:
     jobs:
       - checkout_code
       - install_deps:
           name: 'Install deps'
           requires:
-            - checkout_code
+            - 'checkout_code'
       - build:
           name: 'Build and analyze bundlesize'
           requires:

.vscode/launch.json

@@ -9,7 +9,15 @@
       "request": "launch",
       "name": "Jest Current File",
       "program": "${workspaceFolder}/lib/node_modules/.bin/jest",
-      "args": ["--config", "${workspaceFolder}/lib/jest.config.js", "${fileBasenameNoExtension}"],
+      "args": [
+        "--runInBand",
+        "--config",
+        "${workspaceFolder}/lib/jest.config.js",
+        "${fileBasenameNoExtension}"
+      ],
+      "sourceMaps": true,
+      "preLaunchTask": "npm: test:typescript - lib",
+      "outFiles": [ "${workspaceFolder}/lib/src/__tests__/dist/**/*.js"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,

.vscode/tasks.json

@@ -0,0 +1,13 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+    {
+      "type": "npm",
+      "script": "test:typescript",
+      "path": "lib/",
+      "problemMatcher": [],
+      "label": "npm: test:typescript - lib",
+      "detail": "rimraf src/__tests__/dist && tsc -p src/__tests__/tsconfig.json"
+    }
+  ]
+}

docs/pages/guides/FormikOurValidation.example.tsx

@@ -13,7 +13,7 @@ interface DatePickerFieldProps extends FieldProps, DatePickerProps {
 function DatePickerField({
   form,
   field: { value, name },
-  maxDate = new Date('2100-01-01'),
+  maxDate = new Date('2099-12-31'),
   minDate = new Date('1900-01-01'),
   getShouldDisableDateError,
   ...other

docs/pages/guides/FormikValidationSchema.example.tsx

@@ -13,7 +13,7 @@ interface DatePickerFieldProps extends FieldProps, BaseDatePickerProps {
 function DatePickerField({
   field,
   form,
-  maxDate = new Date('2100-01-01'),
+  maxDate = new Date('2099-12-31'),
   minDate = new Date('1900-01-01'),
   getShouldDisableDateError,
   ...other

docs/pages/localization/calendar-systems.mdx

@@ -44,7 +44,7 @@ To use it with Arabic locale, make sure to import `moment/locale/ar-sa`
 import 'moment/locale/ar-sa';
 ```
 
-By default, the `DatePicker` uses `1900-01-01` for minDate and `2100-01-01` for maxDate.
+By default, the `DatePicker` uses `1900-01-01` for minDate and `2099-31-12` for maxDate.
 `moment-hijri` only supports dates from `1356-01-01` H (1937-03-14) to `1499-12-29` H (2076-11-26)
 so you will need to set `minDate` and `maxDate` on your `DatePicker` component otherwise your component will not work properly.
 

lib/jest.config.js

@@ -1,13 +1,14 @@
 const path = require('path');
 
 module.exports = {
-  setupFilesAfterEnv: ['<rootDir>/src/__tests__/setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/__tests__/setup.ts'],
   testRegex: './src/__tests__/.*\\.test\\.(js|tsx|ts)$',
   testURL: 'http://localhost/',
   collectCoverage: true,
   transform: {
     '^.+\\.(ts|tsx)?$': 'ts-jest',
   },
+  modulePathIgnorePatterns: ["<rootDir>/src/__tests__/dist/"],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   coveragePathIgnorePatterns: ['<rootDir>/src/__tests__/'],
   globals: {

lib/package.json

@@ -58,7 +58,7 @@
   },
   "scripts": {
     "test": "jest",
-    "test:typescript": "tsc -p src/__tests__/tsconfig.json",
+    "test:typescript": "rimraf src/__tests__/dist && tsc -p src/__tests__/tsconfig.json",
     "test:date-fns": "UTILS=date-fns yarn test",
     "test:luxon": "UTILS=luxon yarn test",
     "test:moment": "UTILS=moment yarn test",
@@ -87,6 +87,7 @@
     "@rollup/plugin-babel": "^5.0.2",
     "@rollup/plugin-commonjs": "^12.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
+    "@testing-library/jest-dom": "^5.9.0",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/fs-extra": "^8.1.0",

lib/src/DateRangePicker/DateRangePickerView.tsx

@@ -11,6 +11,7 @@ import { useParsedDate } from '../_shared/hooks/date-helpers-hooks';
 import { useCalendarState } from '../views/Calendar/useCalendarState';
 import { FORCE_FINISH_PICKER } from '../_shared/hooks/usePickerState';
 import { DateRangePickerViewMobile } from './DateRangePickerViewMobile';
+import { defaultMaxDate, defaultMinDate } from '../constants/prop-types';
 import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
 import { MobileKeyboardInputView } from '../views/MobileKeyboardInputView';
 import { DateRangePickerInput, DateRangeInputProps } from './DateRangePickerInput';
@@ -52,8 +53,8 @@ export const DateRangePickerView: React.FC<DateRangePickerViewProps> = ({
   disableFuture,
   disableHighlightToday,
   disablePast,
-  maxDate: unparsedMaxDate = new Date('2100-01-01'),
-  minDate: unparsedMinDate = new Date('1900-01-01'),
+  maxDate: unparsedMaxDate = defaultMaxDate,
+  minDate: unparsedMinDate = defaultMinDate,
   onDateChange,
   onMonthChange,
   reduceAnimations = defaultReduceAnimations,

lib/src/__tests__/DatePicker.test.tsx

@@ -248,3 +248,4 @@ it('Should not add to loading queue when synchronous', () => {
     'Enter Date'
   );
 });
+

lib/src/__tests__/DatePickerRoot.test.tsx

@@ -42,7 +42,7 @@ describe('e2e - DatePicker', () => {
   it('Should render year selection', () => {
     component.find('button[data-mui-test="calendar-view-switcher"]').simulate('click');
 
-    expect(component.find('[data-mui-test="year"]').length).toBe(201);
+    expect(component.find('[data-mui-test="year"]').length).toBe(200);
 
     component
       .find('[data-mui-test="year"]')
@@ -74,7 +74,7 @@ describe('e2e -- DatePicker views year', () => {
   });
 
   it('Should render year selection and select year', () => {
-    expect(component.find('[data-mui-test="year"]').length).toBe(201);
+    expect(component.find('[data-mui-test="year"]').length).toBe(200);
 
     component
       .find('[data-mui-test="year"]')
@@ -121,7 +121,7 @@ describe('e2e -- DatePicker views year and month', () => {
     component.find('button[data-mui-test="calendar-view-switcher"]').simulate('click');
 
     const year = component.find('[data-mui-test="year"]');
-    expect(component.find('[data-mui-test="year"]').length).toBe(201);
+    expect(component.find('[data-mui-test="year"]').length).toBe(200);
 
     year.first().simulate('click');
     expect(component.find('Month').length).toBe(12);
@@ -147,6 +147,6 @@ describe('e2e -- DatePicker views year and month open from year', () => {
   });
 
   it('Should render year selection', () => {
-    expect(component.find('[data-mui-test="year"]').length).toBe(201);
+    expect(component.find('[data-mui-test="year"]').length).toBe(200);
   });
 });

lib/src/__tests__/DatePickerTestingLib.test.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { DatePicker } from '../DatePicker';
+import { TextField } from '@material-ui/core';
+import { screen } from '@testing-library/react';
+import { createClientRender } from './createClientRender';
+
+describe('<DatePicker />', () => {
+  const render = createClientRender({ strict: false });
+  it('Allows to select edge years from list', () => {
+    render(
+      <DatePicker
+        open
+        value={null}
+        onChange={jest.fn()}
+        views={['year']}
+        minDate={new Date('2000-01-01')}
+        maxDate={new Date('2010-01-01')}
+        renderInput={props => <TextField {...props} />}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: '2010' })).toBeDisabled();
+  });
+});

lib/src/__tests__/DateTimePickerRoot.test.tsx

@@ -37,7 +37,7 @@ describe('e2e - DateTimePicker', () => {
       .first()
       .simulate('click');
 
-    expect(component.find('[data-mui-test="year"]').length).toBe(201);
+    expect(component.find('[data-mui-test="year"]').length).toBe(200);
     component
       .find('[data-mui-test="year"]')
       .at(1)

lib/src/__tests__/DateTimePickerTestingLib.test.tsx

@@ -5,7 +5,7 @@ import { DesktopDateTimePicker } from '../DateTimePicker';
 import { createClientRender } from './createClientRender';
 import { fireEvent, screen } from '@testing-library/react';
 
-describe('DateTimePicker testing lib', () => {
+describe('<DateTimePicker />', () => {
   const render = createClientRender({ strict: false });
 
   it('prop: mask – should take the mask prop into account', () => {
@@ -46,7 +46,6 @@ describe('DateTimePicker testing lib', () => {
   });
 
   it('prop: minDateTime – hours is disabled by date part', () => {
-    screen.debug();
     render(
       <DesktopDateTimePicker
         open

lib/src/__tests__/setup.js → lib/src/__tests__/setup.ts

@@ -1,3 +1,5 @@
+import '@testing-library/jest-dom';
+
 const Enzyme = require('enzyme');
 const EnzymeAdapter = require('enzyme-adapter-react-16');
 
@@ -18,8 +20,8 @@ document.createRange = () => ({
 
 // Convert any console error into a thrown error
 const error = console.error;
-console.error = (...args) => {
-  error.apply(console, args);
+console.error = (...args: any[]) => {
+  error.apply(console, args as any);
   if (args[0] instanceof Error) {
     throw args[0];
   } else {

lib/src/__tests__/test-utils.tsx

@@ -9,6 +9,38 @@ import { IUtils } from '@date-io/core/IUtils';
 import { DatePickerProps } from '../DatePicker';
 import { MaterialUiPickersDate } from '../typings/date';
 import { BasePickerProps } from '../typings/BasePicker';
+import { createClientRender } from './createClientRender';
+import { queryHelpers, Matcher, MatcherOptions } from '@testing-library/react/pure';
+
+export const queryByMuiTest = queryHelpers.queryByAttribute.bind(null, 'data-mui-test');
+export const queryAllByMuiTest = queryHelpers.queryAllByAttribute.bind(null, 'data-mui-test');
+
+export function getAllByMuiTest(
+  id: Matcher,
+  container: HTMLElement = document.body,
+  options?: MatcherOptions
+): Element[] {
+  const els = queryAllByMuiTest(container, id, options);
+  if (!els.length) {
+    throw queryHelpers.getElementError(
+      `Unable to find an element by: [data-mui-test="${id}"]`,
+      container
+    );
+  }
+  return els;
+}
+
+export function getByMuiTest(...args: Parameters<typeof getAllByMuiTest>): Element {
+  const result = getAllByMuiTest(...args);
+  if (result.length > 0) {
+    return result[0];
+  }
+
+  throw queryHelpers.getElementError(
+    `Unable to find an element by: [data-mui-test="${args[0]}"]`,
+    document.body
+  );
+}
 
 interface WithUtilsProps {
   utils: IUtils<MaterialUiPickersDate>;
@@ -39,25 +71,40 @@ export const shallow = <P extends WithUtilsProps>(element: React.ReactElement<P>
 export const mount = <P extends WithUtilsProps>(element: React.ReactElement<P>) =>
   enzyme.mount(<LocalizationProvider dateAdapter={UtilClassToUse}>{element}</LocalizationProvider>);
 
-export function mountPickerWithState<TValue>(
-  defaultValue: TValue,
-  render: (
-    props: Pick<BasePickerProps<TValue, TValue>, 'onChange' | 'value'> & {
-      renderInput: DatePickerProps['renderInput'];
-    }
-  ) => React.ReactElement
-) {
-  const PickerMountComponent = () => {
+type RenderPicker<TValue> = (
+  props: Pick<BasePickerProps<TValue, TValue>, 'onChange' | 'value'> & {
+    renderInput: DatePickerProps['renderInput'];
+  }
+) => React.ReactElement;
+
+function createPickerWithState<TValue>(defaultValue: TValue, renderFn: RenderPicker<TValue>) {
+  const PickerWithState = () => {
     const [value, setDate] = React.useState(defaultValue);
 
-    return render({
+    return renderFn({
       value,
       onChange: date => setDate(date),
       renderInput: props => <TextField {...props} />,
     });
   };
 
-  return mount(<PickerMountComponent />);
+  return <PickerWithState />;
+}
+
+export function mountPickerWithState<TValue>(
+  defaultValue: TValue,
+  renderPicker: RenderPicker<TValue>
+) {
+  return mount(createPickerWithState(defaultValue, renderPicker));
+}
+
+export function renderPickerWithState<TValue>(
+  defaultValue: TValue,
+  renderPicker: RenderPicker<TValue>,
+  clientRenderOptions?: { strict?: boolean }
+) {
+  const render = createClientRender(clientRenderOptions);
+  return render(createPickerWithState(defaultValue, renderPicker));
 }
 
 export const shallowRender = (render: (props: any) => React.ReactElement<any>) => {

lib/src/__tests__/tsconfig.json

@@ -3,6 +3,9 @@
   "exclude": [],
   "include": ["../../typings.d.ts", "./typings.d.ts", "./**/*.tsx", "./**/*.ts", "./typescript/*"],
   "compilerOptions": {
-    // "baseUrl": ".",
+    "emitDeclarationOnly": false,
+    "noEmit": false,
+    "outDir": "./dist",
+    "sourceMap": true
   }
 }

lib/src/_helpers/date-utils.ts

@@ -156,7 +156,7 @@ export interface DateValidationProps {
   minDate?: MaterialUiPickersDate;
   /**
    * Max selectable date.
-   * @default Date(2100-01-01)
+   * @default Date(2099-31-12)
    */
   maxDate?: MaterialUiPickersDate;
   /**

lib/src/constants/prop-types.ts

@@ -16,4 +16,4 @@ export const DomainPropTypes = { date, datePickerView };
 
 export const defaultMinDate = new Date('1900-01-01') as any;
 
-export const defaultMaxDate = new Date('2100-01-01') as any;
+export const defaultMaxDate = new Date('2099-12-31') as any;