From 06c3b74356da2930e61ff87d591cc70cc21e0ea2 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Sun, 31 May 2020 17:03:56 +0300 Subject: [PATCH 01/10] FINALLY setup vscode debugger properly for jest component tests --- .vscode/launch.json | 10 +++++++++- .vscode/tasks.json | 13 +++++++++++++ lib/package.json | 3 ++- lib/src/__tests__/tsconfig.json | 5 ++++- 4 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 .vscode/tasks.json diff --git a/.vscode/launch.json b/.vscode/launch.json index a8d18875c..1ddc5510c 100644 --- a/.vscode/launch.json +++ b/.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, diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 000000000..271954f92 --- /dev/null +++ b/.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" + } + ] +} diff --git a/lib/package.json b/lib/package.json index 36fccf6d2..90129b570 100644 --- a/lib/package.json +++ b/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", diff --git a/lib/src/__tests__/tsconfig.json b/lib/src/__tests__/tsconfig.json index 56648f53a..2bc556d40 100644 --- a/lib/src/__tests__/tsconfig.json +++ b/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 } } From b36374a8c6bea1b49a511ed5c2016328d39ff87c Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Sun, 31 May 2020 17:24:41 +0300 Subject: [PATCH 02/10] Disable year if it cannot be selected by shifting date --- .../datepicker/BasicDatePicker.example.jsx | 5 +- lib/jest.config.js | 3 +- lib/src/__tests__/DatePicker.test.tsx | 1 + .../__tests__/DatePickerTestingLib.test.tsx | 24 ++++++ lib/src/__tests__/{setup.js => setup.ts} | 6 +- lib/src/__tests__/test-utils.tsx | 69 ++++++++++++--- lib/src/views/Calendar/YearSelection.tsx | 12 ++- yarn.lock | 85 ++++++++++++++++++- 8 files changed, 182 insertions(+), 23 deletions(-) create mode 100644 lib/src/__tests__/DatePickerTestingLib.test.tsx rename lib/src/__tests__/{setup.js => setup.ts} (89%) diff --git a/docs/pages/demo/datepicker/BasicDatePicker.example.jsx b/docs/pages/demo/datepicker/BasicDatePicker.example.jsx index 863463b2a..d34f2f376 100644 --- a/docs/pages/demo/datepicker/BasicDatePicker.example.jsx +++ b/docs/pages/demo/datepicker/BasicDatePicker.example.jsx @@ -3,7 +3,7 @@ import { TextField } from '@material-ui/core'; import { DatePicker } from '@material-ui/pickers'; function BasicDatePicker() { - const [selectedDate, handleDateChange] = useState(new Date()); + const [selectedDate, handleDateChange] = useState(null); return ( handleDateChange(date)} renderInput={props => } + views={['year']} + minDate={new Date('2000-01-01')} + maxDate={new Date('2010-01-01')} /> ); } diff --git a/lib/jest.config.js b/lib/jest.config.js index 570a5fab8..297810b61 100644 --- a/lib/jest.config.js +++ b/lib/jest.config.js @@ -1,13 +1,14 @@ const path = require('path'); module.exports = { - setupFilesAfterEnv: ['/src/__tests__/setup.js'], + setupFilesAfterEnv: ['/src/__tests__/setup.ts'], testRegex: './src/__tests__/.*\\.test\\.(js|tsx|ts)$', testURL: 'http://localhost/', collectCoverage: true, transform: { '^.+\\.(ts|tsx)?$': 'ts-jest', }, + modulePathIgnorePatterns: ["/src/__tests__/dist/"], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], coveragePathIgnorePatterns: ['/src/__tests__/'], globals: { diff --git a/lib/src/__tests__/DatePicker.test.tsx b/lib/src/__tests__/DatePicker.test.tsx index 996c70442..28dac5e3a 100644 --- a/lib/src/__tests__/DatePicker.test.tsx +++ b/lib/src/__tests__/DatePicker.test.tsx @@ -248,3 +248,4 @@ it('Should not add to loading queue when synchronous', () => { 'Enter Date' ); }); + diff --git a/lib/src/__tests__/DatePickerTestingLib.test.tsx b/lib/src/__tests__/DatePickerTestingLib.test.tsx new file mode 100644 index 000000000..0f33ba816 --- /dev/null +++ b/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 testing lib', () => { + const render = createClientRender({ strict: false }); + it('Allows to select edge years from list', () => { + render( + } + /> + ); + + expect(screen.getByText('2010').parentElement).toBeDisabled(); + }); +}); diff --git a/lib/src/__tests__/setup.js b/lib/src/__tests__/setup.ts similarity index 89% rename from lib/src/__tests__/setup.js rename to lib/src/__tests__/setup.ts index d1754915c..bfb28cbca 100644 --- a/lib/src/__tests__/setup.js +++ b/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 { diff --git a/lib/src/__tests__/test-utils.tsx b/lib/src/__tests__/test-utils.tsx index a02dd186f..e78fc8161 100644 --- a/lib/src/__tests__/test-utils.tsx +++ b/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): 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; @@ -39,25 +71,40 @@ export const shallow =

(element: React.ReactElement

export const mount =

(element: React.ReactElement

) => enzyme.mount({element}); -export function mountPickerWithState( - defaultValue: TValue, - render: ( - props: Pick, 'onChange' | 'value'> & { - renderInput: DatePickerProps['renderInput']; - } - ) => React.ReactElement -) { - const PickerMountComponent = () => { +type RenderPicker = ( + props: Pick, 'onChange' | 'value'> & { + renderInput: DatePickerProps['renderInput']; + } +) => React.ReactElement; + +function createPickerWithState(defaultValue: TValue, renderFn: RenderPicker) { + const PickerWithState = () => { const [value, setDate] = React.useState(defaultValue); - return render({ + return renderFn({ value, onChange: date => setDate(date), renderInput: props => , }); }; - return mount(); + return ; +} + +export function mountPickerWithState( + defaultValue: TValue, + renderPicker: RenderPicker +) { + return mount(createPickerWithState(defaultValue, renderPicker)); +} + +export function renderPickerWithState( + defaultValue: TValue, + renderPicker: RenderPicker, + clientRenderOptions?: { strict?: boolean } +) { + const render = createClientRender(clientRenderOptions); + return render(createPickerWithState(defaultValue, renderPicker)); } export const shallowRender = (render: (props: any) => React.ReactElement) => { diff --git a/lib/src/views/Calendar/YearSelection.tsx b/lib/src/views/Calendar/YearSelection.tsx index f18ba03f4..dd08d4289 100644 --- a/lib/src/views/Calendar/YearSelection.tsx +++ b/lib/src/views/Calendar/YearSelection.tsx @@ -49,8 +49,6 @@ export const YearSelection: React.FC = ({ onYearChange, minDate, maxDate, - disablePast, - disableFuture, isDateDisabled, shouldDisableYear, changeFocusedDay, @@ -129,11 +127,11 @@ export const YearSelection: React.FC = ({ allowKeyboardControl={allowKeyboardControl} focused={yearNumber === focusedYear} ref={selected ? selectedYearRef : undefined} - disabled={Boolean( - (disablePast && utils.isBeforeYear(year, now)) || - (disableFuture && utils.isAfterYear(year, now)) || - (shouldDisableYear && shouldDisableYear(year)) - )} + disabled={ + // Make sure that final date will be enabled + isDateDisabled(utils.setYear(date || now, yearNumber)) || + (shouldDisableYear && shouldDisableYear(year)) + } > {utils.format(year, 'year')} diff --git a/yarn.lock b/yarn.lock index b08a8c773..4ebda551e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1842,6 +1842,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.9.2": + version "7.10.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839" + integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.1.2", "@babel/template@^7.6.0": version "7.7.0" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.0.tgz#4fadc1b8e734d97f56de39c77de76f2562e597d0" @@ -2727,6 +2734,21 @@ dom-accessibility-api "^0.4.4" pretty-format "^25.5.0" +"@testing-library/jest-dom@^5.9.0": + version "5.9.0" + resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.9.0.tgz#86464c66cbe75e632b8adb636f539bfd0efc2c9c" + integrity sha512-uZ68dyILuM2VL13lGz4ehFEAgxzvLKRu8wQxyAZfejWnyMhmipJ60w4eG81NQikJHBfaYXx+Or8EaPQTDwGfPA== + dependencies: + "@babel/runtime" "^7.9.2" + "@types/testing-library__jest-dom" "^5.0.2" + chalk "^3.0.0" + css "^2.2.4" + css.escape "^1.5.1" + jest-diff "^25.1.0" + jest-matcher-utils "^25.1.0" + lodash "^4.17.15" + redent "^3.0.0" + "@testing-library/react@^10.0.4": version "10.0.4" resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.0.4.tgz#8e0e299cd91acc626d81ed8489fdc13df864c31d" @@ -2900,6 +2922,14 @@ "@types/istanbul-lib-coverage" "*" "@types/istanbul-lib-report" "*" +"@types/jest@*": + version "25.2.3" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.2.3.tgz#33d27e4c4716caae4eced355097a47ad363fdcaf" + integrity sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw== + dependencies: + jest-diff "^25.2.1" + pretty-format "^25.2.1" + "@types/jest@^25.2.1": version "25.2.1" resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.2.1.tgz#9544cd438607955381c1bdbdb97767a249297db5" @@ -3102,6 +3132,13 @@ dependencies: pretty-format "^25.1.0" +"@types/testing-library__jest-dom@^5.0.2": + version "5.9.1" + resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.1.tgz#aba5ee062b7880f69c212ef769389f30752806e5" + integrity sha512-yYn5EKHO3MPEMSOrcAb1dLWY+68CG29LiXKsWmmpVHqoP5+ZRiAVLyUHvPNrO2dABDdUGZvavMsaGpWNjM6N2g== + dependencies: + "@types/jest" "*" + "@types/testing-library__react@^10.0.1": version "10.0.1" resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-10.0.1.tgz#92bb4a02394bf44428e35f1da2970ed77f803593" @@ -4006,7 +4043,7 @@ at-least-node@^1.0.0: resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2" integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg== -atob@^2.1.1: +atob@^2.1.1, atob@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== @@ -5558,6 +5595,21 @@ css-what@2.1: resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2" integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg== +css.escape@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" + integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s= + +css@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929" + integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw== + dependencies: + inherits "^2.0.3" + source-map "^0.6.1" + source-map-resolve "^0.5.2" + urix "^0.1.0" + cssesc@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4" @@ -9883,6 +9935,11 @@ mimic-fn@^2.1.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== +min-indent@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" + integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== + mini-css-extract-plugin@0.4.3: version "0.4.3" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz#98d60fcc5d228c3e36a9bd15a1d6816d6580beb8" @@ -11725,6 +11782,14 @@ recursive-copy@2.0.6: promise "^7.0.1" slash "^1.0.0" +redent@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f" + integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg== + dependencies: + indent-string "^4.0.0" + strip-indent "^3.0.0" + redeyed@~2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-2.1.1.tgz#8984b5815d99cb220469c99eeeffe38913e6cc0b" @@ -12668,6 +12733,17 @@ source-map-resolve@^0.5.0: source-map-url "^0.4.0" urix "^0.1.0" +source-map-resolve@^0.5.2: + version "0.5.3" + resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a" + integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw== + dependencies: + atob "^2.1.2" + decode-uri-component "^0.2.0" + resolve-url "^0.2.1" + source-map-url "^0.4.0" + urix "^0.1.0" + source-map-support@^0.5.16: version "0.5.19" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61" @@ -13066,6 +13142,13 @@ strip-final-newline@^2.0.0: resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad" integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA== +strip-indent@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" + integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== + dependencies: + min-indent "^1.0.0" + strip-json-comments@^2.0.1, strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" From f2ddbc56e3dfdd47fc70faaa64a04f50040b0547 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Sun, 31 May 2020 17:26:11 +0300 Subject: [PATCH 03/10] Rename top level describes for new tests --- lib/src/__tests__/DatePickerTestingLib.test.tsx | 2 +- lib/src/__tests__/DateTimePickerTestingLib.test.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/src/__tests__/DatePickerTestingLib.test.tsx b/lib/src/__tests__/DatePickerTestingLib.test.tsx index 0f33ba816..a352616cf 100644 --- a/lib/src/__tests__/DatePickerTestingLib.test.tsx +++ b/lib/src/__tests__/DatePickerTestingLib.test.tsx @@ -4,7 +4,7 @@ import { TextField } from '@material-ui/core'; import { screen } from '@testing-library/react'; import { createClientRender } from './createClientRender'; -describe('DatePicker testing lib', () => { +describe('', () => { const render = createClientRender({ strict: false }); it('Allows to select edge years from list', () => { render( diff --git a/lib/src/__tests__/DateTimePickerTestingLib.test.tsx b/lib/src/__tests__/DateTimePickerTestingLib.test.tsx index 9533b9285..7a8fbfb00 100644 --- a/lib/src/__tests__/DateTimePickerTestingLib.test.tsx +++ b/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('', () => { 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( Date: Sun, 31 May 2020 17:29:58 +0300 Subject: [PATCH 04/10] Revert BasicDatePicker.example --- docs/pages/demo/datepicker/BasicDatePicker.example.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/pages/demo/datepicker/BasicDatePicker.example.jsx b/docs/pages/demo/datepicker/BasicDatePicker.example.jsx index d34f2f376..863463b2a 100644 --- a/docs/pages/demo/datepicker/BasicDatePicker.example.jsx +++ b/docs/pages/demo/datepicker/BasicDatePicker.example.jsx @@ -3,7 +3,7 @@ import { TextField } from '@material-ui/core'; import { DatePicker } from '@material-ui/pickers'; function BasicDatePicker() { - const [selectedDate, handleDateChange] = useState(null); + const [selectedDate, handleDateChange] = useState(new Date()); return ( handleDateChange(date)} renderInput={props => } - views={['year']} - minDate={new Date('2000-01-01')} - maxDate={new Date('2010-01-01')} /> ); } From 3a3a1c2798413fe7be02c2a7e16541729173269c Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Mon, 1 Jun 2020 12:07:20 +0300 Subject: [PATCH 05/10] Fix moment and luxon issue when mounting year selection view --- .../demo/datepicker/BasicDatePicker.example.jsx | 6 +++++- lib/src/views/Calendar/YearSelection.tsx | 16 +++++++++------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/docs/pages/demo/datepicker/BasicDatePicker.example.jsx b/docs/pages/demo/datepicker/BasicDatePicker.example.jsx index 863463b2a..3e3278894 100644 --- a/docs/pages/demo/datepicker/BasicDatePicker.example.jsx +++ b/docs/pages/demo/datepicker/BasicDatePicker.example.jsx @@ -3,12 +3,16 @@ import { TextField } from '@material-ui/core'; import { DatePicker } from '@material-ui/pickers'; function BasicDatePicker() { - const [selectedDate, handleDateChange] = useState(new Date()); + const [selectedDate, handleDateChange] = useState(null); return ( handleDateChange(date)} renderInput={props => } /> diff --git a/lib/src/views/Calendar/YearSelection.tsx b/lib/src/views/Calendar/YearSelection.tsx index dd08d4289..f6ae0a70a 100644 --- a/lib/src/views/Calendar/YearSelection.tsx +++ b/lib/src/views/Calendar/YearSelection.tsx @@ -44,7 +44,7 @@ export const useStyles = makeStyles( ); export const YearSelection: React.FC = ({ - date, + date: __dateOrNull, onChange, onYearChange, minDate, @@ -58,7 +58,9 @@ export const YearSelection: React.FC = ({ const theme = useTheme(); const utils = useUtils(); const classes = useStyles(); - const currentYear = utils.getYear(date); + + const selectedDate = __dateOrNull || now; + const currentYear = utils.getYear(selectedDate); const wrapperVariant = React.useContext(WrapperVariantContext); const selectedYearRef = React.useRef(null); const [focusedYear, setFocusedYear] = React.useState(currentYear); @@ -78,7 +80,7 @@ export const YearSelection: React.FC = ({ const handleYearSelection = React.useCallback( (year: number, isFinish = true) => { - const newDate = utils.setYear(date || now, year); + const newDate = utils.setYear(selectedDate, year); if (isDateDisabled(newDate)) { return; } @@ -90,16 +92,16 @@ export const YearSelection: React.FC = ({ onChange(newDate, isFinish); changeFocusedDay(newDate); }, - [changeFocusedDay, date, isDateDisabled, now, onChange, onYearChange, utils] + [changeFocusedDay, selectedDate, isDateDisabled, onChange, onYearChange, utils] ); const focusYear = React.useCallback( (year: number) => { - if (!isDateDisabled(utils.setYear(date, year))) { + if (!isDateDisabled(utils.setYear(selectedDate, year))) { setFocusedYear(year); } }, - [date, isDateDisabled, utils] + [selectedDate, isDateDisabled, utils] ); const yearsInRow = wrapperVariant === 'desktop' ? 4 : 3; @@ -129,7 +131,7 @@ export const YearSelection: React.FC = ({ ref={selected ? selectedYearRef : undefined} disabled={ // Make sure that final date will be enabled - isDateDisabled(utils.setYear(date || now, yearNumber)) || + isDateDisabled(utils.setYear(selectedDate, yearNumber)) || (shouldDisableYear && shouldDisableYear(year)) } > From e61e681a7f0b81bcc077ef82562f91aef6eb65c0 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Mon, 1 Jun 2020 12:07:33 +0300 Subject: [PATCH 06/10] Improve testing lib selector --- lib/src/__tests__/DatePickerTestingLib.test.tsx | 6 +++--- lib/src/views/Calendar/YearSelection.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/src/__tests__/DatePickerTestingLib.test.tsx b/lib/src/__tests__/DatePickerTestingLib.test.tsx index a352616cf..9112d705c 100644 --- a/lib/src/__tests__/DatePickerTestingLib.test.tsx +++ b/lib/src/__tests__/DatePickerTestingLib.test.tsx @@ -13,12 +13,12 @@ describe('', () => { value={null} onChange={jest.fn()} views={['year']} - minDate="2000-01-01" - maxDate="2010-01-01" + minDate={new Date('2000-01-01')} + maxDate={new Date('2010-01-01')} renderInput={props => } /> ); - expect(screen.getByText('2010').parentElement).toBeDisabled(); + expect(screen.getByRole('button', { name: '2010' })).toBeDisabled(); }); }); diff --git a/lib/src/views/Calendar/YearSelection.tsx b/lib/src/views/Calendar/YearSelection.tsx index f6ae0a70a..3f59eda6c 100644 --- a/lib/src/views/Calendar/YearSelection.tsx +++ b/lib/src/views/Calendar/YearSelection.tsx @@ -130,7 +130,7 @@ export const YearSelection: React.FC = ({ focused={yearNumber === focusedYear} ref={selected ? selectedYearRef : undefined} disabled={ - // Make sure that final date will be enabled + // Make sure that final date (with month and day included) will be enabled isDateDisabled(utils.setYear(selectedDate, yearNumber)) || (shouldDisableYear && shouldDisableYear(year)) } From d9cef63c0b57216e776d921d16e2cc45abce6338 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Mon, 1 Jun 2020 12:20:50 +0300 Subject: [PATCH 07/10] Revert BasicDatePicker changes --- docs/pages/demo/datepicker/BasicDatePicker.example.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/pages/demo/datepicker/BasicDatePicker.example.jsx b/docs/pages/demo/datepicker/BasicDatePicker.example.jsx index 3e3278894..863463b2a 100644 --- a/docs/pages/demo/datepicker/BasicDatePicker.example.jsx +++ b/docs/pages/demo/datepicker/BasicDatePicker.example.jsx @@ -3,16 +3,12 @@ import { TextField } from '@material-ui/core'; import { DatePicker } from '@material-ui/pickers'; function BasicDatePicker() { - const [selectedDate, handleDateChange] = useState(null); + const [selectedDate, handleDateChange] = useState(new Date()); return ( handleDateChange(date)} renderInput={props => } /> From cfb5b8cb2d1cdbd3cd5761d6300ef9d4d11419a9 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Tue, 2 Jun 2020 11:37:20 +0300 Subject: [PATCH 08/10] Make default max date to 31.12.2099 to impove year navigation expirience --- docs/pages/guides/FormikOurValidation.example.tsx | 2 +- docs/pages/guides/FormikValidationSchema.example.tsx | 2 +- docs/pages/localization/calendar-systems.mdx | 2 +- lib/src/DateRangePicker/DateRangePickerView.tsx | 5 +++-- lib/src/_helpers/date-utils.ts | 2 +- lib/src/constants/prop-types.ts | 2 +- 6 files changed, 8 insertions(+), 7 deletions(-) diff --git a/docs/pages/guides/FormikOurValidation.example.tsx b/docs/pages/guides/FormikOurValidation.example.tsx index 5d58c5655..96f5c7cba 100644 --- a/docs/pages/guides/FormikOurValidation.example.tsx +++ b/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 diff --git a/docs/pages/guides/FormikValidationSchema.example.tsx b/docs/pages/guides/FormikValidationSchema.example.tsx index f97b4da26..ccf325fac 100644 --- a/docs/pages/guides/FormikValidationSchema.example.tsx +++ b/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 diff --git a/docs/pages/localization/calendar-systems.mdx b/docs/pages/localization/calendar-systems.mdx index 0a13739de..0d9fc6d4d 100644 --- a/docs/pages/localization/calendar-systems.mdx +++ b/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. diff --git a/lib/src/DateRangePicker/DateRangePickerView.tsx b/lib/src/DateRangePicker/DateRangePickerView.tsx index eda98ca70..f0d726c63 100644 --- a/lib/src/DateRangePicker/DateRangePickerView.tsx +++ b/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 = ({ 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, diff --git a/lib/src/_helpers/date-utils.ts b/lib/src/_helpers/date-utils.ts index 61971c2df..eaa9bd3f9 100644 --- a/lib/src/_helpers/date-utils.ts +++ b/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; /** diff --git a/lib/src/constants/prop-types.ts b/lib/src/constants/prop-types.ts index 6fd47fb19..7a163311c 100644 --- a/lib/src/constants/prop-types.ts +++ b/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; From 4f68f68f7952e9125cb248c79b19be164139a4c7 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Tue, 2 Jun 2020 11:59:20 +0300 Subject: [PATCH 09/10] Remove buggy cypress orb from cirleci config --- .circleci/config.yml | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 5d576386d..c8f66cb77 100644 --- a/.circleci/config.yml +++ b/.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: From b975e7d3356807969259c42fd5d176a0f6f87002 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Tue, 2 Jun 2020 12:11:24 +0300 Subject: [PATCH 10/10] Fix total year number tests --- lib/src/__tests__/DatePickerRoot.test.tsx | 8 ++++---- lib/src/__tests__/DateTimePickerRoot.test.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/src/__tests__/DatePickerRoot.test.tsx b/lib/src/__tests__/DatePickerRoot.test.tsx index 9fee7c899..750719b1a 100644 --- a/lib/src/__tests__/DatePickerRoot.test.tsx +++ b/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); }); }); diff --git a/lib/src/__tests__/DateTimePickerRoot.test.tsx b/lib/src/__tests__/DateTimePickerRoot.test.tsx index 072d11380..f2545a8f0 100644 --- a/lib/src/__tests__/DateTimePickerRoot.test.tsx +++ b/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)