diff --git a/jest.config.js b/jest.config.js index d0ab101..722f353 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,5 +1,4 @@ module.exports = { setupFiles: ['./tests/setup.js'], - snapshotSerializers: [require.resolve('enzyme-to-json/serializer')], coveragePathIgnorePatterns: ['src/locale/'], }; diff --git a/package.json b/package.json index 6ac0daf..deafd63 100644 --- a/package.json +++ b/package.json @@ -37,12 +37,14 @@ "coverage": "father test --coverage", "now-build": "npm run build" }, + "optionalDependencies": { + "date-fns": "2.x", + "dayjs": "1.x", + "moment": "^2.24.0" + }, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "^2.2.1", - "date-fns": "2.x", - "dayjs": "1.x", - "moment": "^2.24.0", "rc-trigger": "^5.0.4", "rc-util": "^5.4.0", "shallowequal": "^1.1.0" @@ -54,7 +56,6 @@ "@rc-component/father-plugin": "^1.0.0", "@testing-library/react": "^12", "@types/classnames": "^2.2.9", - "@types/enzyme": "^3.10.3", "@types/jest": "^26.0.0", "@types/react": "^17.0.11", "@types/react-dom": "^17.0.8", @@ -62,9 +63,6 @@ "coveralls": "^3.0.6", "cross-env": "^7.0.2", "dumi": "^1.1.37", - "enzyme": "^3.0.0", - "enzyme-adapter-react-16": "^1.0.1", - "enzyme-to-json": "^3.4.0", "eslint": "~7.32.0", "eslint-plugin-eslint-comments": "^3.1.2", "eslint-plugin-jest": "^26.8.2", @@ -79,7 +77,10 @@ "rc-test": "^7.0.9", "react": "^17.0.0", "react-dom": "^17.0.0", - "typescript": "^4.0.3" + "typescript": "^4.0.3", + "date-fns": "2.x", + "dayjs": "1.x", + "moment": "^2.24.0" }, "peerDependencies": { "react": ">=16.9.0", diff --git a/tests/__snapshots__/panel.spec.tsx.snap b/tests/__snapshots__/panel.spec.tsx.snap index 769478e..e8c1346 100644 --- a/tests/__snapshots__/panel.spec.tsx.snap +++ b/tests/__snapshots__/panel.spec.tsx.snap @@ -86,1865 +86,1869 @@ exports[`Picker.Panel monthCellRender 1`] = ` `; exports[`Picker.Panel should render correctly in rtl 1`] = ` -
+
- -
+ +
+ + +
+
- - -
-
- - - - - - - - - - - - - - - + + + + + + + + + + + + + - + - + - + - + - + - + - - - + + + - + - + - + - + - + - + - - - + + + - + - + - + - + - + - + - - - + + + - + - + - + - + - + - + - - - + + + - + - + - + - + - + - + - - - + + + - + - + - + - + - + - + - - -
- Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
+
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
- 26 - - -
+ 26 +
+ 		- 27 - - -
+ 27 +
+ 		- 28 - - -
+ 28 +
+ 		- 29 - - -
+ 29 +
+ 		- 30 - - -
+ 30 +
+ 		- 31 - - -
+ 31 +
+ 		- 1 - -
-
+ 1 +
+
- 2 - - -
+ 2 +
+ 		- 3 - - -
+ 3 +
+ 		- 4 - - -
+ 4 +
+ 		- 5 - - -
+ 5 +
+ 		- 6 - - -
+ 6 +
+ 		- 7 - - -
+ 7 +
+ 		- 8 - -
-
+ 8 +
+
- 9 - - -
+ 9 +
+ 		- 10 - - -
+ 10 +
+ 		- 11 - - -
+ 11 +
+ 		- 12 - - -
+ 12 +
+ 		- 13 - - -
+ 13 +
+ 		- 14 - - -
+ 14 +
+ 		- 15 - -
-
+ 15 +
+
- 16 - - -
+ 16 +
+ 		- 17 - - -
+ 17 +
+ 		- 18 - - -
+ 18 +
+ 		- 19 - - -
+ 19 +
+ 		- 20 - - -
+ 20 +
+ 		- 21 - - -
+ 21 +
+ 		- 22 - -
-
+ 22 +
+
- 23 - - -
+ 23 +
+ 		- 24 - - -
+ 24 +
+ 		- 25 - - -
+ 25 +
+ 		- 26 - - -
+ 26 +
+ 		- 27 - - -
+ 27 +
+ 		- 28 - - -
+ 28 +
+ 		- 29 - -
-
+ 29 +
+
- 30 - - -
+ 30 +
+ 		- 1 - - -
+ 1 +
+ 		- 2 - - -
+ 2 +
+ 		- 3 - - -
+ 3 +
+ 		- 4 - - -
+ 4 +
+ 		- 5 - - -
+ 5 +
+ 		- 6 - -
+
+ 6 +
+ + + + +
`; exports[`Picker.Panel time disabled columns basic 1`] = ` -
+
-   -
-
-
-
    -
  • -
    - 00 -
    -
    • -
  • -
    - 01 -
    -
    • -
  • -
    - 02 -
    -
    • -
  • -
    - 03 -
    -
    • -
  • -
    - 04 -
    -
    • -
  • -
    - 05 -
    -
    • -
  • -
    - 06 -
    -
    • -
  • -
    - 07 -
    -
    • -
  • -
    - 08 -
    -
    • -
  • -
    - 09 -
    -
    • -
  • -
    - 10 -
    -
    • -
  • -
    - 11 -
    -
    • -
  • -
    - 12 -
    -
    • -
  • -
    - 13 -
    -
    • -
  • -
    - 14 -
    -
    • -
  • -
    - 15 -
    -
    • -
  • -
    - 16 -
    -
    • -
  • -
    - 17 -
    -
    • -
  • -
    - 18 -
    -
    • -
  • -
    - 19 -
    -
    • -
  • -
    - 20 -
    -
    • -
  • -
    - 21 -
    -
    • -
  • -
    - 22 -
    -
    • -
  • -
    - 23 -
    -
    • -
-
    -
  • -
    - 00 -
    -
    • -
  • -
    - 01 -
    -
    • -
  • -
    - 02 -
    -
    • -
  • -
    - 03 -
    -
    • -
  • -
    - 04 -
    -
    • -
  • -
    - 05 -
    -
    • -
  • -
    - 06 -
    -
    • -
  • -
    - 07 -
    -
    • -
  • -
    - 08 -
    -
    • -
  • -
    - 09 -
    -
    • -
  • -
    - 10 -
    -
    • -
  • -
    - 11 -
    -
    • -
  • -
    - 12 -
    -
    • -
  • -
    - 13 -
    -
    • -
  • -
    - 14 -
    -
    • -
  • -
    - 15 -
    -
    • -
  • -
    - 16 -
    -
    • -
  • -
    - 17 -
    -
    • -
  • -
    - 18 -
    -
    • -
  • -
    - 19 -
    -
    • -
  • -
    - 20 -
    -
    • -
  • -
    - 21 -
    -
    • -
  • -
    - 22 -
    -
    • -
  • -
    - 23 -
    -
    • -
  • -
    - 24 -
    -
    • -
  • -
    - 25 -
    -
    • -
  • -
    - 26 -
    -
    • -
  • -
    - 27 -
    -
    • -
  • -
    - 28 -
    -
    • -
  • -
    - 29 -
    -
    • -
  • -
    - 30 -
    -
    • -
  • -
    - 31 -
    -
    • -
  • -
    - 32 -
    -
    • -
  • -
    - 33 -
    -
    • -
  • -
    - 34 -
    -
    • -
  • -
    - 35 -
    -
    • -
  • -
    - 36 -
    -
    • -
  • -
    - 37 -
    -
    • -
  • -
    - 38 -
    -
    • -
  • -
    - 39 -
    -
    • -
  • -
    - 40 -
    -
    • -
  • -
    - 41 -
    -
    • -
  • -
    - 42 -
    -
    • -
  • -
    - 43 -
    -
    • -
  • -
    - 44 -
    -
    • -
  • -
    - 45 -
    -
    • -
  • -
    - 46 -
    -
    • -
  • -
    - 47 -
    -
    • -
  • -
    - 48 -
    -
    • -
  • -
    - 49 -
    -
    • -
  • -
    - 50 -
    -
    • -
  • -
    - 51 -
    -
    • -
  • -
    - 52 -
    -
    • -
  • -
    - 53 -
    -
    • -
  • -
    - 54 -
    -
    • -
  • -
    - 55 -
    -
    • -
  • -
    - 56 -
    -
    • -
  • -
    - 57 -
    -
    • -
  • -
    - 58 -
    -
    • -
  • -
    - 59 -
    -
    • -
-
    +
+
-
  • -
    - 00 -
    -
    • -
  • -
    - 01 -
    -
    • -
  • -
    - 02 -
    -
    • -
  • -
    - 03 -
    -
    • -
  • -
    - 04 -
    -
    • -
  • -
    - 05 -
    -
    • -
  • -
    - 06 -
    -
    • -
  • -
    - 07 -
    -
    • -
  • -
    - 08 -
    -
    • -
  • -
    - 09 -
    -
    • -
  • -
    - 10 -
    -
    • -
  • -
    - 11 -
    -
    • -
  • -
    - 12 -
    -
    • -
  • -
    - 13 -
    -
    • -
  • -
    - 14 -
    -
    • -
  • -
    - 15 -
    -
    • -
  • -
    - 16 -
    -
    • -
  • -
    - 17 -
    -
    • -
  • -
    - 18 -
    -
    • -
  • -
    - 19 -
    -
    • -
  • -
    - 20 -
    -
    • -
  • -
    - 21 -
    -
    • -
  • -
    - 22 -
    -
    • -
  • -
    - 23 -
    -
    • -
  • -
    - 24 -
    -
    • -
  • -
    - 25 -
    -
    • -
  • -
    - 26 -
    -
    • -
  • -
    - 27 -
    -
    • -
  • -
    - 28 -
    -
    • -
  • -
    - 29 -
    -
    • -
  • -
    - 30 -
    -
    • -
  • -
    - 31 -
    -
    • -
  • -
    - 32 -
    -
    • -
  • -
    - 33 -
    -
    • -
  • -
    - 34 -
    -
    • -
  • -
    - 35 -
    -
    • -
  • -
    - 36 -
    -
    • -
  • -
    - 37 -
    -
    • -
  • -
    - 38 -
    -
    • -
  • -
    - 39 -
    -
    • -
  • -
    - 40 -
    -
    • -
  • -
    - 41 -
    -
    • -
  • -
    - 42 -
    -
    • -
  • -
    - 43 -
    -
    • -
  • -
    - 44 -
    -
    • -
  • -
    - 45 -
    -
    • -
  • -
    - 46 -
    -
    • -
  • -
    - 47 -
    -
    • -
  • -
    - 48 -
    -
    • -
  • -
    - 49 -
    -
    • -
  • -
    - 50 -
    -
    • -
  • -
    - 51 -
    -
    • -
  • -
    - 52 -
    -
    • -
  • -
    - 53 -
    -
    • -
  • -
    - 54 -
    -
    • -
  • -
    - 55 -
    -
    • -
  • -
    - 56 -
    -
    • -
  • -
    - 57 -
    -
    • -
  • -
    - 58 -
    -
    • -
  • -
    - 59 -
    -
    • - +
    + 00 +
    + +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 21 +
    +
    • +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • + +
      +
    • +
      + 00 +
      +
      • +
    • +
      + 01 +
      +
      • +
    • +
      + 02 +
      +
      • +
    • +
      + 03 +
      +
      • +
    • +
      + 04 +
      +
      • +
    • +
      + 05 +
      +
      • +
    • +
      + 06 +
      +
      • +
    • +
      + 07 +
      +
      • +
    • +
      + 08 +
      +
      • +
    • +
      + 09 +
      +
      • +
    • +
      + 10 +
      +
      • +
    • +
      + 11 +
      +
      • +
    • +
      + 12 +
      +
      • +
    • +
      + 13 +
      +
      • +
    • +
      + 14 +
      +
      • +
    • +
      + 15 +
      +
      • +
    • +
      + 16 +
      +
      • +
    • +
      + 17 +
      +
      • +
    • +
      + 18 +
      +
      • +
    • +
      + 19 +
      +
      • +
    • +
      + 20 +
      +
      • +
    • +
      + 21 +
      +
      • +
    • +
      + 22 +
      +
      • +
    • +
      + 23 +
      +
      • +
    • +
      + 24 +
      +
      • +
    • +
      + 25 +
      +
      • +
    • +
      + 26 +
      +
      • +
    • +
      + 27 +
      +
      • +
    • +
      + 28 +
      +
      • +
    • +
      + 29 +
      +
      • +
    • +
      + 30 +
      +
      • +
    • +
      + 31 +
      +
      • +
    • +
      + 32 +
      +
      • +
    • +
      + 33 +
      +
      • +
    • +
      + 34 +
      +
      • +
    • +
      + 35 +
      +
      • +
    • +
      + 36 +
      +
      • +
    • +
      + 37 +
      +
      • +
    • +
      + 38 +
      +
      • +
    • +
      + 39 +
      +
      • +
    • +
      + 40 +
      +
      • +
    • +
      + 41 +
      +
      • +
    • +
      + 42 +
      +
      • +
    • +
      + 43 +
      +
      • +
    • +
      + 44 +
      +
      • +
    • +
      + 45 +
      +
      • +
    • +
      + 46 +
      +
      • +
    • +
      + 47 +
      +
      • +
    • +
      + 48 +
      +
      • +
    • +
      + 49 +
      +
      • +
    • +
      + 50 +
      +
      • +
    • +
      + 51 +
      +
      • +
    • +
      + 52 +
      +
      • +
    • +
      + 53 +
      +
      • +
    • +
      + 54 +
      +
      • +
    • +
      + 55 +
      +
      • +
    • +
      + 56 +
      +
      • +
    • +
      + 57 +
      +
      • +
    • +
      + 58 +
      +
      • +
    • +
      + 59 +
      +
      • +
    +
      +
    • +
      + 00 +
      +
      • +
    • +
      + 01 +
      +
      • +
    • +
      + 02 +
      +
      • +
    • +
      + 03 +
      +
      • +
    • +
      + 04 +
      +
      • +
    • +
      + 05 +
      +
      • +
    • +
      + 06 +
      +
      • +
    • +
      + 07 +
      +
      • +
    • +
      + 08 +
      +
      • +
    • +
      + 09 +
      +
      • +
    • +
      + 10 +
      +
      • +
    • +
      + 11 +
      +
      • +
    • +
      + 12 +
      +
      • +
    • +
      + 13 +
      +
      • +
    • +
      + 14 +
      +
      • +
    • +
      + 15 +
      +
      • +
    • +
      + 16 +
      +
      • +
    • +
      + 17 +
      +
      • +
    • +
      + 18 +
      +
      • +
    • +
      + 19 +
      +
      • +
    • +
      + 20 +
      +
      • +
    • +
      + 21 +
      +
      • +
    • +
      + 22 +
      +
      • +
    • +
      + 23 +
      +
      • +
    • +
      + 24 +
      +
      • +
    • +
      + 25 +
      +
      • +
    • +
      + 26 +
      +
      • +
    • +
      + 27 +
      +
      • +
    • +
      + 28 +
      +
      • +
    • +
      + 29 +
      +
      • +
    • +
      + 30 +
      +
      • +
    • +
      + 31 +
      +
      • +
    • +
      + 32 +
      +
      • +
    • +
      + 33 +
      +
      • +
    • +
      + 34 +
      +
      • +
    • +
      + 35 +
      +
      • +
    • +
      + 36 +
      +
      • +
    • +
      + 37 +
      +
      • +
    • +
      + 38 +
      +
      • +
    • +
      + 39 +
      +
      • +
    • +
      + 40 +
      +
      • +
    • +
      + 41 +
      +
      • +
    • +
      + 42 +
      +
      • +
    • +
      + 43 +
      +
      • +
    • +
      + 44 +
      +
      • +
    • +
      + 45 +
      +
      • +
    • +
      + 46 +
      +
      • +
    • +
      + 47 +
      +
      • +
    • +
      + 48 +
      +
      • +
    • +
      + 49 +
      +
      • +
    • +
      + 50 +
      +
      • +
    • +
      + 51 +
      +
      • +
    • +
      + 52 +
      +
      • +
    • +
      + 53 +
      +
      • +
    • +
      + 54 +
      +
      • +
    • +
      + 55 +
      +
      • +
    • +
      + 56 +
      +
      • +
    • +
      + 57 +
      +
      • +
    • +
      + 58 +
      +
      • +
    • +
      + 59 +
      +
      • +
    +
    diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index 0ad1a3a..1178057 100644 --- a/tests/__snapshots__/picker.spec.tsx.snap +++ b/tests/__snapshots__/picker.spec.tsx.snap @@ -44,7 +44,25 @@ exports[`Picker.Basic inputRender 1`] = ` `; exports[`Picker.Basic panelRender 1`] = ` -[ +
    +
    + +
    +
    +`; + +exports[`Picker.Basic pass data- & aria- & role 1`] = ` +
    @@ -52,66 +70,36 @@ exports[`Picker.Basic panelRender 1`] = ` class="rc-picker-input" >
    -
    , -
    -
    -
    -

    - Light -

    -
    -
    -
    , -] -`; - -exports[`Picker.Basic pass data- & aria- & role 1`] = ` -
    -
    -
    `; exports[`Picker.Basic should render correctly in rtl 1`] = ` -
    +
    - +
    + +
    `; diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index 3f5f428..8584845 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -1,99 +1,63 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Picker.Range icon 1`] = ` -
    +
    - -
    -
    - ~ -
    -
    - + +
    +
    + ~ +
    +
    + +
    +
    -
    -
    - - - + class="rc-picker-suffix" + > + + - -
    -`; - -exports[`Picker.Range onPanelChange is array args should render correctly in rtl 1`] = ` -
    -
    - -
    -
    - ~ -
    -
    - + class="rc-picker-clear" + > + +
    -
    `; -exports[`Picker.Range panelRender 1`] = ` -[ +exports[`Picker.Range onPanelChange is array args should render correctly in rtl 1`] = ` +
    -
    , +
    +
    +`; + +exports[`Picker.Range panelRender 1`] = ` +
    -
    +
    +
    + ~ +
    +
    + +
    +
    +
    +
    +
    +
    +
    -

    - Light -

    +
    +
    +

    + Light +

    +
    -
    , -] +
    + `; diff --git a/tests/components.spec.tsx b/tests/components.spec.tsx index 9f638b2..5945442 100644 --- a/tests/components.spec.tsx +++ b/tests/components.spec.tsx @@ -1,12 +1,7 @@ -import React from 'react'; +import { render } from '@testing-library/react'; import MockDate from 'mockdate'; -import { - mount, - getMoment, - MomentRangePicker, - MomentPicker, - MomentPickerPanel, -} from './util/commonUtil'; +import React from 'react'; +import { getMoment, MomentPicker, MomentPickerPanel, MomentRangePicker } from './util/commonUtil'; describe('Picker.Components', () => { beforeAll(() => { @@ -27,7 +22,7 @@ describe('Picker.Components', () => { const Button: React.FC = (props) =>

    ; const Item: React.FC = (props) =>

    ; - const wrapper = mount( + render( { />, ); - expect(wrapper.find('.rc-picker-footer').find('h1')).toHaveLength(1); + expect(document.querySelector('.rc-picker-footer').querySelectorAll('h1')).toHaveLength(1); }); }); }); diff --git a/tests/disabledTime.spec.tsx b/tests/disabledTime.spec.tsx index a48c619..fee2540 100644 --- a/tests/disabledTime.spec.tsx +++ b/tests/disabledTime.spec.tsx @@ -1,11 +1,19 @@ -import React from 'react'; +import { fireEvent, render } from '@testing-library/react'; import type { Moment } from 'moment'; import { resetWarned } from 'rc-util/lib/warning'; -import { mount, getMoment, isSame, MomentPicker, MomentRangePicker } from './util/commonUtil'; +import React from 'react'; +import { + closePicker, + getMoment, + isSame, + MomentPicker, + MomentRangePicker, + openPicker, +} from './util/commonUtil'; describe('Picker.DisabledTime', () => { it('disabledTime on TimePicker', () => { - const wrapper = mount( + render( { ); expect( - wrapper.find('ul.rc-picker-time-panel-column li.rc-picker-time-panel-cell-disabled'), + document.querySelectorAll( + 'ul.rc-picker-time-panel-column li.rc-picker-time-panel-cell-disabled', + ), ).toHaveLength(59); }); it('disabledTime on TimeRangePicker', () => { - const wrapper = mount( + const { container } = render( { ); expect( - wrapper.find('ul.rc-picker-time-panel-column li.rc-picker-time-panel-cell-disabled'), + document.querySelectorAll( + 'ul.rc-picker-time-panel-column li.rc-picker-time-panel-cell-disabled', + ), ).toHaveLength(3); // Click another one - wrapper.find('input').last().simulate('mouseDown'); + fireEvent.mouseDown(container.querySelectorAll('input')[1]); expect( - wrapper.find('ul.rc-picker-time-panel-column li.rc-picker-time-panel-cell-disabled'), + document.querySelectorAll( + 'ul.rc-picker-time-panel-column li.rc-picker-time-panel-cell-disabled', + ), ).toHaveLength(2); }); @@ -48,7 +62,7 @@ describe('Picker.DisabledTime', () => { disabledHours: () => [11], })); - const wrapper = mount( + const { container } = render( { ); // Start - wrapper.openPicker(); + openPicker(container); expect( - wrapper - .find('PickerPanel') - .first() - .find('.rc-picker-time-panel-column') - .first() - .find('li') - .at(11) - .hasClass('rc-picker-time-panel-cell-disabled'), - ).toBeTruthy(); + document + .querySelector('.rc-picker-time-panel-column') + .querySelectorAll('li')[11], + ).toHaveClass('rc-picker-time-panel-cell-disabled'); expect(isSame(disabledTime.mock.calls[0][0], '1989-11-28')).toBeTruthy(); expect(disabledTime.mock.calls[0][1]).toEqual('start'); - wrapper.closePicker(); + closePicker(container); // End disabledTime.mockClear(); - wrapper.openPicker(1); + openPicker(container, 1); expect( - wrapper - .find('PickerPanel') - .last() - .find('.rc-picker-time-panel-column') - .first() - .find('li') - .at(11) - .hasClass('rc-picker-time-panel-cell-disabled'), - ).toBeTruthy(); + document.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[11], + ).toHaveClass('rc-picker-time-panel-cell-disabled'); + expect(isSame(disabledTime.mock.calls[0][0], '1990-09-03')).toBeTruthy(); expect(disabledTime.mock.calls[0][1]).toEqual('end'); - wrapper.closePicker(1); + closePicker(container, 1); }); describe('warning for legacy props', () => { @@ -95,7 +98,7 @@ describe('Picker.DisabledTime', () => { resetWarned(); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - mount( []} />); + render( []} />); expect(errSpy).toHaveBeenCalledWith( "Warning: 'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.", ); @@ -107,7 +110,7 @@ describe('Picker.DisabledTime', () => { resetWarned(); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - mount( []} />); + render( []} />); expect(errSpy).toHaveBeenCalledWith( "Warning: 'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.", ); diff --git a/tests/keyboard.spec.tsx b/tests/keyboard.spec.tsx index 531b04d..808145f 100644 --- a/tests/keyboard.spec.tsx +++ b/tests/keyboard.spec.tsx @@ -1,21 +1,44 @@ +import { act, createEvent, fireEvent, render } from '@testing-library/react'; import KeyCode from 'rc-util/lib/KeyCode'; -import { act } from 'react-dom/test-utils'; +import React from 'react'; import { + closePicker, getMoment, + isOpen, isSame, MomentPicker, MomentPickerPanel, MomentRangePicker, - mount, - Wrapper, + openPicker, } from './util/commonUtil'; describe('Picker.Keyboard', () => { - function panelKeyDown(wrapper: Wrapper, keyCode: number, info?: object) { - wrapper.find('.rc-picker-panel').simulate('keyDown', { which: keyCode, ...info }); + function keyDown(keyCode: number, info?: object, index = 0) { + const input = document.querySelectorAll('input')[index]; + const event = createEvent.keyDown(input, { + keyCode, + which: keyCode, + charCode: keyCode, + ...info, + }); + + fireEvent(input, event); + + return event; + } + + function panelKeyDown(keyCode: number, info?: object) { + fireEvent.keyDown(document.querySelector('.rc-picker-panel') as HTMLElement, { + keyCode, + which: keyCode, + charCode: keyCode, + ...info, + }); + // document.querySelector('.rc-picker-panel').simulate('keyDown', { which: keyCode, ...info }); } beforeEach(() => { + document.body.innerHTML = ''; jest.useFakeTimers().setSystemTime(getMoment('1990-09-03 00:00:00').valueOf()); }); @@ -27,143 +50,146 @@ describe('Picker.Keyboard', () => { it('open to select', () => { const onChange = jest.fn(); const onSelect = jest.fn(); - const wrapper = mount(); - wrapper.find('input').simulate('focus'); - wrapper.keyDown(KeyCode.ENTER); - expect(wrapper.isOpen()).toBeTruthy(); + const { container } = render(); + fireEvent.focus(container.querySelector('input')); + fireEvent.keyDown(container.querySelector('input'), { + keyCode: KeyCode.ENTER, + which: KeyCode.ENTER, + charCode: KeyCode.ENTER, + }); + expect(isOpen()).toBeTruthy(); // Tab to operate popup panel - wrapper.keyDown(KeyCode.TAB); - expect(wrapper.find('.rc-picker-panel-focused').length).toBeTruthy(); + keyDown(KeyCode.TAB); + expect(document.querySelector('.rc-picker-panel-focused')).toBeTruthy(); // Down - wrapper.keyDown(KeyCode.DOWN); + keyDown(KeyCode.DOWN); expect(isSame(onSelect.mock.calls[0][0], '1990-09-10')).toBeTruthy(); // UP onSelect.mockReset(); - wrapper.keyDown(KeyCode.UP); + keyDown(KeyCode.UP); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy(); // LEFT onSelect.mockReset(); - wrapper.keyDown(KeyCode.LEFT); + keyDown(KeyCode.LEFT); expect(isSame(onSelect.mock.calls[0][0], '1990-09-02')).toBeTruthy(); // RIGHT onSelect.mockReset(); - wrapper.keyDown(KeyCode.RIGHT); + keyDown(KeyCode.RIGHT); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy(); expect(onChange).not.toHaveBeenCalled(); // Control + Left onSelect.mockReset(); - wrapper.keyDown(KeyCode.LEFT, { ctrlKey: true }); + keyDown(KeyCode.LEFT, { ctrlKey: true }); expect(isSame(onSelect.mock.calls[0][0], '1989-09-03')).toBeTruthy(); expect(onChange).not.toHaveBeenCalled(); // Control + RIGHT onSelect.mockReset(); - wrapper.keyDown(KeyCode.RIGHT, { ctrlKey: true }); + keyDown(KeyCode.RIGHT, { ctrlKey: true }); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy(); expect(onChange).not.toHaveBeenCalled(); // PageUp onSelect.mockReset(); - wrapper.keyDown(KeyCode.PAGE_UP); + keyDown(KeyCode.PAGE_UP); expect(isSame(onSelect.mock.calls[0][0], '1990-08-03')).toBeTruthy(); expect(onChange).not.toHaveBeenCalled(); // PageDown onSelect.mockReset(); - wrapper.keyDown(KeyCode.PAGE_DOWN); + keyDown(KeyCode.PAGE_DOWN); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy(); expect(onChange).not.toHaveBeenCalled(); // Other key onSelect.mockReset(); - wrapper.keyDown(KeyCode.B); + keyDown(KeyCode.B); expect(onSelect).not.toHaveBeenCalled(); // Double RIGHT - wrapper.keyDown(KeyCode.RIGHT); + keyDown(KeyCode.RIGHT); // ENTER - wrapper.keyDown(KeyCode.ENTER); - expect(wrapper.isOpen()).toBeFalsy(); + keyDown(KeyCode.ENTER); + expect(isOpen()).toBeFalsy(); expect(onChange.mock.calls[0][1]).toEqual('1990-09-04'); }); it('ESC to cancel', () => { const onChange = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); // Change value - wrapper.keyDown(KeyCode.TAB); - wrapper.keyDown(KeyCode.DOWN); + keyDown(KeyCode.TAB); + keyDown(KeyCode.DOWN); // ESC - wrapper.keyDown(KeyCode.ESC); + keyDown(KeyCode.ESC); expect(onChange).not.toHaveBeenCalled(); }); it('any key to open', () => { - const wrapper = mount(); - wrapper.keyDown(KeyCode.A); - expect(wrapper.isOpen()).toBeTruthy(); + render(); + keyDown(KeyCode.A); + expect(isOpen()).toBeTruthy(); }); it('not change focus to panel', () => { - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); // Not change focus - wrapper.keyDown(KeyCode.B); - expect(wrapper.isOpen()).toBeTruthy(); + keyDown(KeyCode.B); + expect(isOpen()).toBeTruthy(); - expect(wrapper.find('.rc-picker-panel-focused').length).toBeFalsy(); + expect(document.querySelector('.rc-picker-panel-focused')).toBeFalsy(); }); it('Tab into Panel and back to input', () => { - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); // Focus Panel - wrapper.keyDown(KeyCode.TAB); - expect(wrapper.find('.rc-picker-panel-focused').length).toBeTruthy(); + keyDown(KeyCode.TAB); + expect(document.querySelector('.rc-picker-panel-focused')).toBeTruthy(); // Focus Back - wrapper.keyDown(KeyCode.TAB, { shiftKey: true }); - expect(wrapper.find('.rc-picker-panel-focused').length).toBeFalsy(); + keyDown(KeyCode.TAB, { shiftKey: true }); + expect(document.querySelector('.rc-picker-panel-focused')).toBeFalsy(); }); describe('datetime Tab control', () => { it('Picker', () => { jest.useFakeTimers(); - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); // Focus Panel - wrapper.keyDown(KeyCode.TAB); - expect(wrapper.find('.rc-picker-panel-focused').length).toBeTruthy(); + keyDown(KeyCode.TAB); + expect(document.querySelector('.rc-picker-panel-focused')).toBeTruthy(); // Focus Date Panel - wrapper.keyDown(KeyCode.TAB); - expect(wrapper.find('.rc-picker-date-panel-active').length).toBeTruthy(); + keyDown(KeyCode.TAB); + expect(document.querySelector('.rc-picker-date-panel-active')).toBeTruthy(); // Focus Time Panel - wrapper.keyDown(KeyCode.TAB); - expect(wrapper.find('.rc-picker-time-panel-active').length).toBeTruthy(); + keyDown(KeyCode.TAB); + expect(document.querySelector('.rc-picker-time-panel-active')).toBeTruthy(); // Close should not focus - wrapper.closePicker(); + closePicker(container); act(() => { jest.runAllTimers(); }); - wrapper.update(); - expect(wrapper.find('.rc-picker-time-panel-active').length).toBeFalsy(); + expect(document.querySelector('.rc-picker-time-panel-active')).toBeFalsy(); jest.useRealTimers(); }); @@ -173,93 +199,94 @@ describe('Picker.Keyboard', () => { [ { name: 'Tab switch first', - operate: (wrapper: Wrapper) => { - panelKeyDown(wrapper, KeyCode.TAB); + operate: () => { + panelKeyDown(KeyCode.TAB); }, }, { name: 'Arrow switch first', - operate: (wrapper: Wrapper) => { + operate: () => { // Nothing happen - panelKeyDown(wrapper, KeyCode.A); + panelKeyDown(KeyCode.A); // Switch - panelKeyDown(wrapper, KeyCode.DOWN); + panelKeyDown(KeyCode.DOWN); }, }, ].forEach(({ name, operate }) => { it(name, () => { const onSelect = jest.fn(); - const wrapper = mount(); + render(); // Focus Panel - wrapper.find('.rc-picker-panel').simulate('focus'); + fireEvent.focus(document.querySelector('.rc-picker-panel')); + // document.querySelector('.rc-picker-panel').simulate('focus'); // Focus Date Panel - operate(wrapper); - expect(wrapper.find('.rc-picker-date-panel-active').length).toBeTruthy(); + operate(); + expect(document.querySelector('.rc-picker-date-panel-active')).toBeTruthy(); // Select - panelKeyDown(wrapper, KeyCode.DOWN); + panelKeyDown(KeyCode.DOWN); expect(isSame(onSelect.mock.calls[0][0], '1990-09-10')).toBeTruthy(); // Focus Time Panel - panelKeyDown(wrapper, KeyCode.TAB); - expect(wrapper.find('.rc-picker-time-panel-active').length).toBeTruthy(); + panelKeyDown(KeyCode.TAB); + expect(document.querySelector('.rc-picker-time-panel-active')).toBeTruthy(); // Select onSelect.mockReset(); - panelKeyDown(wrapper, KeyCode.UP); - panelKeyDown(wrapper, KeyCode.DOWN); + panelKeyDown(KeyCode.UP); + panelKeyDown(KeyCode.DOWN); expect(isSame(onSelect.mock.calls[0][0], '1990-09-10 01:00:00', 'second')).toBeTruthy(); // Next column select onSelect.mockReset(); - panelKeyDown(wrapper, KeyCode.RIGHT); - panelKeyDown(wrapper, KeyCode.UP); + panelKeyDown(KeyCode.RIGHT); + panelKeyDown(KeyCode.UP); expect(isSame(onSelect.mock.calls[0][0], '1990-09-10 01:59:00', 'second')).toBeTruthy(); // Enter to exit column edit onSelect.mockReset(); - expect(wrapper.find('.rc-picker-time-panel-column-active').length).toBeTruthy(); - panelKeyDown(wrapper, KeyCode.ENTER); - expect(wrapper.find('.rc-picker-time-panel-column-active').length).toBeFalsy(); + expect(document.querySelector('.rc-picker-time-panel-column-active')).toBeTruthy(); + panelKeyDown(KeyCode.ENTER); + expect(document.querySelector('.rc-picker-time-panel-column-active')).toBeFalsy(); expect(isSame(onSelect.mock.calls[0][0], '1990-09-10 01:59:00', 'second')).toBeTruthy(); // Close should not focus - wrapper.find('.rc-picker-panel').simulate('blur'); - expect(wrapper.find('.rc-picker-time-panel-active').length).toBeFalsy(); + fireEvent.blur(document.querySelector('.rc-picker-panel')); + expect(document.querySelector('.rc-picker-time-panel-active')).toBeFalsy(); }); }); }); it('Enter to next view', () => { - const wrapper = mount(); - wrapper.find('.rc-picker-year-btn').simulate('click'); - wrapper.find('.rc-picker-decade-btn').simulate('click'); + render(); + fireEvent.click(document.querySelector('.rc-picker-year-btn')); + fireEvent.click(document.querySelector('.rc-picker-decade-btn')); // Decade - expect(wrapper.find('.rc-picker-decade-panel').length).toBeTruthy(); + expect(document.querySelector('.rc-picker-decade-panel')).toBeTruthy(); // Year - panelKeyDown(wrapper, KeyCode.ENTER); - expect(wrapper.find('.rc-picker-year-panel').length).toBeTruthy(); + panelKeyDown(KeyCode.ENTER); + expect(document.querySelector('.rc-picker-year-panel')).toBeTruthy(); // Month - panelKeyDown(wrapper, KeyCode.ENTER); - expect(wrapper.find('.rc-picker-month-panel').length).toBeTruthy(); + panelKeyDown(KeyCode.ENTER); + expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy(); // Date - panelKeyDown(wrapper, KeyCode.ENTER); - expect(wrapper.find('.rc-picker-date-panel').length).toBeTruthy(); + panelKeyDown(KeyCode.ENTER); + expect(document.querySelector('.rc-picker-date-panel')).toBeTruthy(); }); }); }); it('time enter will trigger onSelect', () => { const onSelect = jest.fn(); - const wrapper = mount(); - panelKeyDown(wrapper, KeyCode.ENTER); + render(); + panelKeyDown(KeyCode.ENTER); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03 00:00:00', 'second')).toBeTruthy(); }); @@ -267,7 +294,7 @@ describe('Picker.Keyboard', () => { // Same as 'open to select' test. But with other panel it('month', () => { const onSelect = jest.fn(); - const wrapper = mount( + render( { ); // Left - panelKeyDown(wrapper, KeyCode.LEFT); + panelKeyDown(KeyCode.LEFT); expect(isSame(onSelect.mock.calls[0][0], '1990-08-03')).toBeTruthy(); // Control + Right onSelect.mockReset(); - panelKeyDown(wrapper, KeyCode.RIGHT, { ctrlKey: true }); + panelKeyDown(KeyCode.RIGHT, { ctrlKey: true }); expect(isSame(onSelect.mock.calls[0][0], '1991-08-03')).toBeTruthy(); // Down onSelect.mockReset(); - panelKeyDown(wrapper, KeyCode.DOWN); + panelKeyDown(KeyCode.DOWN); expect(isSame(onSelect.mock.calls[0][0], '1991-11-03')).toBeTruthy(); }); it('quarter', () => { const onSelect = jest.fn(); - const wrapper = mount( + render( { ); // Left - panelKeyDown(wrapper, KeyCode.LEFT); + panelKeyDown(KeyCode.LEFT); expect(isSame(onSelect.mock.calls[0][0], '1990-06-03')).toBeTruthy(); // Control + Right onSelect.mockReset(); - panelKeyDown(wrapper, KeyCode.RIGHT, { ctrlKey: true }); + panelKeyDown(KeyCode.RIGHT, { ctrlKey: true }); expect(isSame(onSelect.mock.calls[0][0], '1991-06-03')).toBeTruthy(); // Down onSelect.mockReset(); - panelKeyDown(wrapper, KeyCode.DOWN); + panelKeyDown(KeyCode.DOWN); expect(isSame(onSelect.mock.calls[0][0], '1992-06-03')).toBeTruthy(); }); it('year', () => { const onSelect = jest.fn(); - const wrapper = mount( + render( { ); // Left - panelKeyDown(wrapper, KeyCode.LEFT); + panelKeyDown(KeyCode.LEFT); expect(isSame(onSelect.mock.calls[0][0], '1989-09-03')).toBeTruthy(); // Control + Right onSelect.mockReset(); - panelKeyDown(wrapper, KeyCode.RIGHT, { ctrlKey: true }); + panelKeyDown(KeyCode.RIGHT, { ctrlKey: true }); expect(isSame(onSelect.mock.calls[0][0], '1999-09-03')).toBeTruthy(); // Down onSelect.mockReset(); - panelKeyDown(wrapper, KeyCode.DOWN); + panelKeyDown(KeyCode.DOWN); expect(isSame(onSelect.mock.calls[0][0], '2002-09-03')).toBeTruthy(); }); it('decade', () => { const onPanelChange = jest.fn(); - const wrapper = mount( + render( { ); // Left - panelKeyDown(wrapper, KeyCode.LEFT); - panelKeyDown(wrapper, KeyCode.ENTER); + panelKeyDown(KeyCode.LEFT); + panelKeyDown(KeyCode.ENTER); expect(isSame(onPanelChange.mock.calls[0][0], '1980', 'year')).toBeTruthy(); // Control + Right onPanelChange.mockReset(); - panelKeyDown(wrapper, KeyCode.RIGHT, { ctrlKey: true }); - panelKeyDown(wrapper, KeyCode.ENTER); + panelKeyDown(KeyCode.RIGHT, { ctrlKey: true }); + panelKeyDown(KeyCode.ENTER); expect(isSame(onPanelChange.mock.calls[0][0], '2080', 'year')).toBeTruthy(); // Down onPanelChange.mockReset(); - panelKeyDown(wrapper, KeyCode.DOWN); - panelKeyDown(wrapper, KeyCode.ENTER); + panelKeyDown(KeyCode.DOWN); + panelKeyDown(KeyCode.ENTER); expect(isSame(onPanelChange.mock.calls[0][0], '2110', 'year')).toBeTruthy(); }); }); @@ -374,19 +401,16 @@ describe('Picker.Keyboard', () => { jest.useFakeTimers(); const onCalendarChange = jest.fn(); const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( , ); // Start Date - wrapper.openPicker(); - wrapper - .find('input') - .first() - .simulate('change', { target: { value: '1990-01-01' } }); - wrapper.keyDown(KeyCode.TAB); - wrapper.keyDown(KeyCode.DOWN); - wrapper.keyDown(KeyCode.ENTER); + openPicker(container); + fireEvent.change(container.querySelector('input'), { target: { value: '1990-01-01' } }); + keyDown(KeyCode.TAB); + keyDown(KeyCode.DOWN); + keyDown(KeyCode.ENTER); expect(onCalendarChange.mock.calls[0][1]).toEqual(['1990-01-08', '']); expect(onChange).not.toHaveBeenCalled(); @@ -394,18 +418,17 @@ describe('Picker.Keyboard', () => { act(() => { jest.runAllTimers(); }); - expect( - wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-active'), - ).toBeTruthy(); + expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass( + 'rc-picker-input-active', + ); onCalendarChange.mockReset(); - wrapper - .find('input') - .last() - .simulate('change', { target: { value: '2000-01-01' } }); - wrapper.keyDown(KeyCode.TAB, {}, 1); - wrapper.keyDown(KeyCode.DOWN, {}, 1); - wrapper.keyDown(KeyCode.ENTER, {}, 1); + fireEvent.change(document.querySelectorAll('input')[1], { + target: { value: '2000-01-01' }, + }); + keyDown(KeyCode.TAB, {}, 1); + keyDown(KeyCode.DOWN, {}, 1); + keyDown(KeyCode.ENTER, {}, 1); expect(onCalendarChange.mock.calls[0][1]).toEqual(['1990-01-08', '2000-01-08']); expect(onChange.mock.calls[0][1]).toEqual(['1990-01-08', '2000-01-08']); @@ -416,7 +439,7 @@ describe('Picker.Keyboard', () => { const onCalendarChange = jest.fn(); const onChange = jest.fn(); const onFocus = jest.fn(); - const wrapper = mount( + const { container } = render( { />, ); - wrapper.openPicker(); + openPicker(container); expect(onFocus).toHaveBeenCalled(); - wrapper - .find('input') - .first() - .simulate('change', { target: { value: '2000-01-01' } }); - wrapper.keyDown(KeyCode.ESC); - expect(wrapper.find('input').first().props().value).toEqual(''); + fireEvent.change(container.querySelector('input'), { target: { value: '1990-01-01' } }); + keyDown(KeyCode.ESC); + expect(container.querySelector('input').value).toEqual(''); }); it('move based on current date on first keyboard event', () => { const onCalendarChange = jest.fn(); const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( , ); // Start Date - wrapper.openPicker(); - wrapper - .find('input') - .first() - .simulate('change', { target: { value: '' } }); - wrapper.keyDown(KeyCode.TAB); - wrapper.keyDown(KeyCode.RIGHT); - wrapper.keyDown(KeyCode.ENTER); + openPicker(container); + // wrapper + // .find('input') + // .first() + // .simulate('change', { target: { value: '' } }); + fireEvent.change(container.querySelector('input'), { target: { value: '' } }); + keyDown(KeyCode.TAB); + keyDown(KeyCode.RIGHT); + keyDown(KeyCode.ENTER); expect(onCalendarChange.mock.calls[0][1]).toEqual(['1990-09-04', '']); expect(onChange).not.toHaveBeenCalled(); }); }); it('enter should prevent default to avoid form submit', () => { - const wrapper = mount(); - const preventDefault = jest.fn(); - wrapper.find('input').simulate('keyDown', { - which: KeyCode.ENTER, - preventDefault, - }); + render(); + const event = keyDown(KeyCode.ENTER); - expect(preventDefault).toHaveBeenCalled(); + expect(event.defaultPrevented).toBeTruthy(); }); describe('keyboard should not trigger on disabledDate', () => { it('picker', () => { const onChange = jest.fn(); const onSelect = jest.fn(); - const wrapper = mount( + const { container } = render( { disabledDate={(date) => date.date() % 2 === 0} />, ); - wrapper.find('input').simulate('focus'); - wrapper.keyDown(KeyCode.ENTER); - wrapper.keyDown(KeyCode.TAB); - wrapper.keyDown(KeyCode.TAB); - wrapper.keyDown(KeyCode.DOWN); + // document.querySelector('input').simulate('focus'); + fireEvent.focus(container.querySelector('input')); + keyDown(KeyCode.ENTER); + keyDown(KeyCode.TAB); + keyDown(KeyCode.TAB); + keyDown(KeyCode.DOWN); expect(isSame(onSelect.mock.calls[0][0], '1990-09-10')).toBeTruthy(); // Not enter to change - wrapper.keyDown(KeyCode.ENTER); + keyDown(KeyCode.ENTER); expect(onChange).not.toHaveBeenCalled(); // Not button enabled - expect(wrapper.find('.rc-picker-ok button').props().disabled).toBeTruthy(); + expect( + document.querySelector('.rc-picker-ok button').disabled, + ).toBeTruthy(); // Another can be enter - wrapper.keyDown(KeyCode.RIGHT); - expect(wrapper.find('.rc-picker-ok button').props().disabled).toBeFalsy(); - wrapper.keyDown(KeyCode.ENTER); + keyDown(KeyCode.RIGHT); + expect( + document.querySelector('.rc-picker-ok button').disabled, + ).toBeFalsy(); + keyDown(KeyCode.ENTER); expect(onChange).toHaveBeenCalled(); }); it('panel', () => { const onChange = jest.fn(); const onSelect = jest.fn(); - const wrapper = mount( + render( { />, ); - wrapper.find('.rc-picker-panel').simulate('focus'); + fireEvent.focus(document.querySelector('.rc-picker-panel')); // 9-10 is disabled - wrapper.keyDown(KeyCode.DOWN); + panelKeyDown(KeyCode.DOWN); expect(isSame(onSelect.mock.calls[0][0], '1990-09-10')).toBeTruthy(); expect(onChange).not.toHaveBeenCalled(); // 9-17 is enabled - wrapper.keyDown(KeyCode.DOWN); + panelKeyDown(KeyCode.DOWN); expect(isSame(onSelect.mock.calls[1][0], '1990-09-17')).toBeTruthy(); expect(isSame(onChange.mock.calls[0][0], '1990-09-17')).toBeTruthy(); }); diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index 09d7fa4..19f15ef 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -1,9 +1,18 @@ +import { fireEvent, render } from '@testing-library/react'; import moment from 'moment'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; +import React from 'react'; import enUS from '../src/locale/en_US'; import zhCN from '../src/locale/zh_CN'; -import { getMoment, isSame, MomentPickerPanel, mount } from './util/commonUtil'; +import { + clickButton, + confirmOK, + getMoment, + isSame, + MomentPickerPanel, + selectCell, +} from './util/commonUtil'; jest.mock('../src/utils/uiUtil', () => { const origin = jest.requireActual('../src/utils/uiUtil'); @@ -21,6 +30,7 @@ describe('Picker.Panel', () => { beforeEach(() => { global.scrollCalled = false; jest.useFakeTimers().setSystemTime(getMoment('1990-09-03 00:00:00').valueOf()); + document.body.innerHTML = ''; }); afterAll(() => { @@ -30,57 +40,57 @@ describe('Picker.Panel', () => { describe('value', () => { it('defaultValue', () => { - const wrapper = mount(); + render(); - expect(wrapper.find('.rc-picker-cell-selected').text()).toEqual('1'); + expect(document.querySelector('.rc-picker-cell-selected').textContent).toEqual('1'); }); it('controlled', () => { const onChange = jest.fn(); - const wrapper = mount( + const { rerender } = render( , ); - wrapper.selectCell(23); + selectCell(23); expect(isSame(onChange.mock.calls[0][0], '2000-01-23')).toBeTruthy(); onChange.mockReset(); // Trigger again since value is controlled - wrapper.selectCell(23); + selectCell(23); expect(isSame(onChange.mock.calls[0][0], '2000-01-23')).toBeTruthy(); onChange.mockReset(); // Not trigger - wrapper.setProps({ value: getMoment('2000-01-23') }); - wrapper.selectCell(23); + rerender(); + selectCell(23); expect(onChange).not.toHaveBeenCalled(); }); it('uncontrolled', () => { const onChange = jest.fn(); - const wrapper = mount(); + render(); - wrapper.selectCell(23); + selectCell(23); expect(isSame(onChange.mock.calls[0][0], '1990-09-23')).toBeTruthy(); onChange.mockReset(); // Not trigger - wrapper.selectCell(23); + selectCell(23); expect(onChange).not.toHaveBeenCalled(); }); }); describe('Panel switch by picker', () => { it('year', () => { - const wrapper = mount(); - wrapper.find('.rc-picker-decade-btn').simulate('click'); - expect(wrapper.find('.rc-picker-decade-panel').length).toBeTruthy(); + render(); + fireEvent.click(document.querySelector('.rc-picker-decade-btn')); + expect(document.querySelector('.rc-picker-decade-panel')).toBeTruthy(); - wrapper.selectCell('1990-1999'); - expect(wrapper.find('.rc-picker-year-panel').length).toBeTruthy(); + selectCell('1990-1999'); + expect(document.querySelector('.rc-picker-year-panel')).toBeTruthy(); - wrapper.selectCell('1999'); - expect(wrapper.find('.rc-picker-year-panel').length).toBeTruthy(); + selectCell('1999'); + expect(document.querySelector('.rc-picker-year-panel')).toBeTruthy(); }); [ @@ -88,19 +98,19 @@ describe('Picker.Panel', () => { ['quarter', 'Q3'], ].forEach(([picker, cell]) => { it(picker, () => { - const wrapper = mount(); - wrapper.find('.rc-picker-year-btn').simulate('click'); - wrapper.find('.rc-picker-decade-btn').simulate('click'); - expect(wrapper.find('.rc-picker-decade-panel').length).toBeTruthy(); + const { container } = render(); + fireEvent.click(container.querySelector('.rc-picker-year-btn')); + fireEvent.click(container.querySelector('.rc-picker-decade-btn')); + expect(document.querySelector('.rc-picker-decade-panel')).toBeTruthy(); - wrapper.selectCell('1990-1999'); - expect(wrapper.find('.rc-picker-year-panel').length).toBeTruthy(); + selectCell('1990-1999'); + expect(document.querySelector('.rc-picker-year-panel')).toBeTruthy(); - wrapper.selectCell('1999'); - expect(wrapper.find(`.rc-picker-${picker}-panel`).length).toBeTruthy(); + selectCell('1999'); + expect(document.querySelector(`.rc-picker-${picker}-panel`)).toBeTruthy(); - wrapper.selectCell(cell); - expect(wrapper.find(`.rc-picker-${picker}-panel`).length).toBeTruthy(); + selectCell(cell); + expect(document.querySelector(`.rc-picker-${picker}-panel`)).toBeTruthy(); }); }); }); @@ -118,12 +128,12 @@ describe('Picker.Panel', () => { }); jest.useFakeTimers(); - const wrapper = mount(); + const { container } = render(); // Multiple times should only one work - wrapper.find('ul').first().find('li').at(3).simulate('click'); + fireEvent.click(container.querySelector('ul').querySelectorAll('li')[3]); - wrapper.find('ul').first().find('li').at(11).simulate('click'); + fireEvent.click(container.querySelector('ul').querySelectorAll('li')[11]); jest.runAllTimers(); expect(global.scrollCalled).toBeTruthy(); @@ -134,64 +144,58 @@ describe('Picker.Panel', () => { describe('click button to switch', () => { it('date', () => { - const wrapper = mount(); + render(); - wrapper.clickButton('prev'); - expect(wrapper.find('.rc-picker-header-view').text()).toEqual('Aug1990'); + clickButton('prev'); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('Aug1990'); - wrapper.clickButton('next'); - expect(wrapper.find('.rc-picker-header-view').text()).toEqual('Sep1990'); + clickButton('next'); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('Sep1990'); - wrapper.clickButton('super-prev'); - expect(wrapper.find('.rc-picker-header-view').text()).toEqual('Sep1989'); + clickButton('super-prev'); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('Sep1989'); - wrapper.clickButton('super-next'); - expect(wrapper.find('.rc-picker-header-view').text()).toEqual('Sep1990'); + clickButton('super-next'); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('Sep1990'); }); ['month', 'quarter'].forEach((picker) => { it(picker, () => { - const wrapper = mount( - , - ); + render(); - wrapper.clickButton('super-prev'); - expect(wrapper.find('.rc-picker-header-view').text()).toEqual('1989'); + clickButton('super-prev'); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('1989'); - wrapper.clickButton('super-next'); - expect(wrapper.find('.rc-picker-header-view').text()).toEqual('1990'); + clickButton('super-next'); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('1990'); }); }); it('year', () => { - const wrapper = mount( - , - ); + render(); - wrapper.clickButton('super-prev'); - expect(wrapper.find('.rc-picker-header-view').text()).toEqual('1980-1989'); + clickButton('super-prev'); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('1980-1989'); - wrapper.clickButton('super-next'); - expect(wrapper.find('.rc-picker-header-view').text()).toEqual('1990-1999'); + clickButton('super-next'); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('1990-1999'); }); it('decade', () => { - const wrapper = mount( - , - ); + render(); - wrapper.clickButton('super-prev'); - expect(wrapper.find('.rc-picker-header-view').text()).toEqual('1800-1899'); + clickButton('super-prev'); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('1800-1899'); - wrapper.clickButton('super-next'); - expect(wrapper.find('.rc-picker-header-view').text()).toEqual('1900-1999'); + clickButton('super-next'); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('1900-1999'); }); }); // This test is safe to remove it('showtime', () => { const onSelect = jest.fn(); - const wrapper = mount( + render( { />, ); - expect(wrapper.find('.rc-picker-time-panel-column')).toHaveLength(2); - expect(wrapper.find('.rc-picker-time-panel-column').first().find('li').first().text()).toEqual( - '04', - ); + expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(2); + expect( + document.querySelector('.rc-picker-time-panel-column').querySelector('li').textContent, + ).toEqual('04'); // Click on date - wrapper.selectCell(5); + selectCell(5); expect(isSame(onSelect.mock.calls[0][0], '1990-09-05 01:03:07')).toBeTruthy(); // Click on time onSelect.mockReset(); - wrapper.find('ul').first().find('li').at(11).simulate('click'); + fireEvent.click(document.querySelector('ul').querySelectorAll('li')[11]); expect(isSame(onSelect.mock.calls[0][0], '2001-01-02 11:00:00')).toBeTruthy(); }); it('showTime.defaultValue only works at first render', () => { const onSelect = jest.fn(); - const wrapper = mount( + render( { />, ); - wrapper.selectCell(5); + selectCell(5); // use showTime.defaultValue expect(isSame(onSelect.mock.calls[0][0], '1990-09-05 01:03:07')).toBeTruthy(); // set hour to 10 - wrapper.find('ul').first().find('li').at(10).simulate('click'); + fireEvent.click(document.querySelector('ul').querySelectorAll('li')[10]); // expect hour changed expect(isSame(onSelect.mock.calls[1][0], '1990-09-05 10:03:07')).toBeTruthy(); - wrapper.selectCell(20); + selectCell(20); // expect using last selection time expect(isSame(onSelect.mock.calls[2][0], '1990-09-20 10:03:07')).toBeTruthy(); }); - it('datepicker has defaultValue and showTime.defaultValue ', () => { + it('DatePicker has defaultValue and showTime.defaultValue ', () => { const onSelect = jest.fn(); - const wrapper = mount( + render( { />, ); - wrapper.selectCell(5); + selectCell(5); // showTime.defaultValue not used expect(isSame(onSelect.mock.calls[0][0], '2001-01-05 10:10:10')).toBeTruthy(); }); @@ -266,22 +270,22 @@ describe('Picker.Panel', () => { describe('not trigger onSelect when cell disabled', () => { it('time', () => { const onSelect = jest.fn(); - const wrapper = mount( + const { container } = render( [0]} />, ); // Disabled - wrapper.find('li').first().simulate('click'); + fireEvent.click(container.querySelectorAll('li')[0]); expect(onSelect).not.toHaveBeenCalled(); // Enabled - wrapper.find('li').at(1).simulate('click'); + fireEvent.click(container.querySelectorAll('li')[1]); expect(onSelect).toHaveBeenCalled(); }); it('month', () => { const onSelect = jest.fn(); - const wrapper = mount( + render( { />, ); - wrapper.selectCell('Jan'); + selectCell('Jan'); expect(onSelect).not.toHaveBeenCalled(); - wrapper.selectCell('Feb'); + selectCell('Feb'); expect(onSelect).toHaveBeenCalled(); }); it('year', () => { const onSelect = jest.fn(); - const wrapper = mount( + render( { />, ); - wrapper.selectCell(1990); + selectCell(1990); expect(onSelect).not.toHaveBeenCalled(); - wrapper.selectCell(1993); + selectCell(1993); expect(onSelect).toHaveBeenCalled(); }); describe('decade', () => { it('mode', () => { const onPanelChange = jest.fn(); - const wrapper = mount( + render( { ); // no picker is decade, it means alway can click - wrapper.selectCell('1900-1909'); + selectCell('1900-1909'); expect(onPanelChange).toHaveBeenCalled(); onPanelChange.mockReset(); - wrapper.selectCell('1910-1919'); + selectCell('1910-1919'); expect(onPanelChange).toHaveBeenCalled(); }); it('not trigger when same panel', () => { const onPanelChange = jest.fn(); - const wrapper = mount(); + render(); - wrapper.selectCell('23'); + selectCell('23'); expect(onPanelChange).not.toHaveBeenCalled(); }); }); @@ -346,7 +350,7 @@ describe('Picker.Panel', () => { describe('time with use12Hours', () => { it('should work', () => { const onChange = jest.fn(); - const wrapper = mount( + render( { />, ); - wrapper.find('.rc-picker-time-panel-column').last().find('li').last().simulate('click'); + const ulList = document.querySelectorAll('.rc-picker-time-panel-column'); + const liList = ulList[ulList.length - 1].querySelectorAll('li'); + fireEvent.click(liList[liList.length - 1]); expect(isSame(onChange.mock.calls[0][0], '2000-01-01 12:01:02', 'second')).toBeTruthy(); }); it('should display hour from 12 at AM', () => { - const wrapper = mount( + render( { />, ); - const startHour = wrapper - .find('.rc-picker-time-panel-column') - .first() - .find('li') - .first() - .text(); + const startHour = document + .querySelector('.rc-picker-time-panel-column') + .querySelectorAll('li')[0].textContent; expect(startHour).toEqual('12'); }); it('should display hour from 12 at AM', () => { - const wrapper = mount( + render( { />, ); - const startHour = wrapper - .find('.rc-picker-time-panel-column') - .first() - .find('li') - .first() - .text(); + const startHour = document + .querySelector('.rc-picker-time-panel-column') + .querySelectorAll('li')[0].textContent; + expect(startHour).toEqual('12'); }); it('should disable AM when 00 ~ 11 is disabled', () => { - const wrapper = mount( + render( { />, ); - const disabledAMItem = wrapper - .find('.rc-picker-time-panel-column') - .last() - .find('li') - .first() - .find('.rc-picker-time-panel-cell-disabled'); - expect(disabledAMItem.length).toEqual(1); + expect(document.querySelector('.rc-picker-time-panel-cell-disabled').textContent).toEqual( + 'AM', + ); }); it('should disable PM when 12 ~ 23 is disabled', () => { - const wrapper = mount( + render( { />, ); - const disabledPMItem = wrapper - .find('.rc-picker-time-panel-column') - .last() - .find('li') - .last() - .find('.rc-picker-time-panel-cell-disabled'); - expect(disabledPMItem.length).toEqual(1); + const disabledCells = document.querySelectorAll('.rc-picker-time-panel-cell-disabled'); + + expect(disabledCells[disabledCells.length - 1].textContent).toEqual('PM'); }); }); describe('time disabled columns', () => { it('basic', () => { - const wrapper = mount( + const { container } = render( [0, 1, 2, 3, 4, 5, 6, 7]} @@ -445,14 +438,14 @@ describe('Picker.Panel', () => { />, ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); it('use12Hour', () => { const disabledMinutes = jest.fn(() => []); const disabledSeconds = jest.fn(() => []); - mount( + render( { const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const invalidateDate = moment('notValidate', 'YYYY', true); - mount(); + render(); expect(errSpy).toHaveBeenCalledWith('Warning: Invalidate date pass to `value`.'); - mount(); + render(); expect(errSpy).toHaveBeenCalledWith('Warning: Invalidate date pass to `defaultValue`.'); errSpy.mockRestore(); }); it('should render correctly in rtl', () => { - const wrapper = mount(); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(); + expect(container).toMatchSnapshot(); }); describe('hideHeader', () => { ['decade', 'year', 'month', 'quarter', 'date', 'time'].forEach((mode) => { it(mode, () => { - const wrapper = mount(); - expect(wrapper.find('.rc-picker-header')).toHaveLength(0); + render(); + expect(document.querySelector('.rc-picker-header')).toBeFalsy(); }); }); }); it('onOk to trigger', () => { const onOk = jest.fn(); - const wrapper = mount(); - wrapper - .find('.rc-picker-time-panel-column') - .first() - .find('.rc-picker-time-panel-cell') - .at(3) - .simulate('click'); + const { container } = render(); + fireEvent.click( + container.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[3], + ); expect(onOk).not.toHaveBeenCalled(); - wrapper.confirmOK(); + confirmOK(); expect(isSame(onOk.mock.calls[0][0], '1990-09-03 03:00:00')).toBeTruthy(); }); it('monthCellRender', () => { - const wrapper = mount( + const { container } = render( date.format('YYYY-MM')} />, ); - expect(wrapper.find('tbody').render()).toMatchSnapshot(); + expect(container.querySelector('tbody')).toMatchSnapshot(); }); describe('start weekday should be correct', () => { @@ -524,11 +514,11 @@ describe('Picker.Panel', () => { { locale: enUS, startDate: '29' }, ].forEach(({ locale, startDate }) => { it(locale.locale, () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('td').first().text()).toEqual(startDate); + expect(container.querySelector('td').textContent).toEqual(startDate); }); }); @@ -537,11 +527,11 @@ describe('Picker.Panel', () => { { locale: enUS, startDate: '1' }, ].forEach(({ locale, startDate }) => { it(`another align test of ${locale.locale}`, () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('td').first().text()).toEqual(startDate); + expect(container.querySelector('td').textContent).toEqual(startDate); }); }); @@ -554,11 +544,11 @@ describe('Picker.Panel', () => { }); expect(defaultFirstDay).toEqual(0); - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('td').first().text()).toEqual('27'); + expect(container.querySelector('td').textContent).toEqual('27'); moment.updateLocale(enUS.locale, { week: { diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index a931625..901cb14 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -1,13 +1,23 @@ -import { fireEvent, render } from '@testing-library/react'; -import type { Moment } from 'moment'; -import moment from 'moment'; +/* eslint-disable @typescript-eslint/no-loop-func */ +import { act, createEvent, fireEvent, render } from '@testing-library/react'; +import moment, { Moment } from 'moment'; import KeyCode from 'rc-util/lib/KeyCode'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; -import { act } from 'react-dom/test-utils'; import type { PanelMode, PickerMode } from '../src/interface'; -import { getMoment, isSame, MomentPicker, mount } from './util/commonUtil'; +import { + clearValue, + closePicker, + confirmOK, + findCell, + getMoment, + isOpen, + isSame, + MomentPicker, + openPicker, + selectCell, +} from './util/commonUtil'; const fakeTime = getMoment('1990-09-03 00:00:00').valueOf(); @@ -21,82 +31,86 @@ describe('Picker.Basic', () => { jest.useRealTimers(); }); + function keyDown(keyCode: number) { + fireEvent.keyDown(document.querySelector('input'), { + keyCode, + which: keyCode, + charCode: keyCode, + }); + } + describe('mode', () => { - const modeList: { mode: PanelMode; componentNames: string[] }[] = [ + const modeList: { mode: PanelMode; className: string }[] = [ { mode: 'decade', - componentNames: ['DecadePanel', 'DecadeHeader', 'DecadeBody'], + className: '.rc-picker-decade-panel', }, { mode: 'year', - componentNames: ['YearPanel', 'YearHeader', 'YearBody'], + className: '.rc-picker-year-panel', }, { mode: 'quarter', - componentNames: ['QuarterPanel', 'QuarterHeader', 'QuarterBody'], + className: '.rc-picker-quarter-panel', }, { mode: 'month', - componentNames: ['MonthPanel', 'MonthHeader', 'MonthBody'], + className: '.rc-picker-month-panel', }, { mode: 'week', - componentNames: ['WeekPanel'], + className: '.rc-picker-week-panel', }, { mode: 'date', - componentNames: ['DatePanel', 'DateHeader', 'DateBody'], + className: '.rc-picker-date-panel', }, { mode: 'time' as any, - componentNames: ['TimePanel', 'TimeHeader', 'TimeBody'], + className: '.rc-picker-time-panel', }, ]; - modeList.forEach(({ mode, componentNames }) => { + modeList.forEach(({ mode, className }) => { it(mode, () => { - const wrapper = mount(); - componentNames.forEach((componentName) => { - expect(wrapper.find(componentName).length).toBeTruthy(); - }); + render(); + expect(document.querySelector(className)).toBeTruthy(); }); }); }); describe('picker', () => { - const modeList: { picker: PickerMode; componentNames: string[] }[] = [ + const modeList: { picker: PickerMode; className: string }[] = [ { picker: 'year', - componentNames: ['YearPanel', 'YearHeader', 'YearBody'], + className: '.rc-picker-year-panel', }, { picker: 'quarter', - componentNames: ['QuarterPanel', 'QuarterHeader', 'QuarterBody'], + className: '.rc-picker-quarter-panel', }, { picker: 'month', - componentNames: ['MonthPanel', 'MonthHeader', 'MonthBody'], + className: '.rc-picker-month-panel', }, { picker: 'week', - componentNames: ['WeekPanel'], + className: '.rc-picker-week-panel', }, { picker: 'date', - componentNames: ['DatePanel', 'DateHeader', 'DateBody'], + className: '.rc-picker-date-panel', }, { picker: 'time', - componentNames: ['TimePanel', 'TimeHeader', 'TimeBody'], + className: '.rc-picker-time-panel', }, ]; - modeList.forEach(({ picker, componentNames }) => { + modeList.forEach(({ picker, className }) => { it(picker, () => { - const wrapper = mount(); - componentNames.forEach((componentName) => { - expect(wrapper.find(componentName).length).toBeTruthy(); - }); + render(); + expect(document.querySelector(className)).toBeTruthy(); }); }); }); @@ -104,25 +118,24 @@ describe('Picker.Basic', () => { describe('open', () => { it('should work', () => { const onOpenChange = jest.fn(); - const wrapper = mount(); + const { container } = render(); - wrapper.openPicker(); - expect(wrapper.isOpen()).toBeTruthy(); + openPicker(container); + expect(isOpen()).toBeTruthy(); expect(onOpenChange).toHaveBeenCalledWith(true); onOpenChange.mockReset(); - wrapper.closePicker(); - expect(wrapper.isOpen()).toBeFalsy(); + closePicker(container); + expect(isOpen()).toBeFalsy(); expect(onOpenChange).toHaveBeenCalledWith(false); }); it('controlled', () => { - const wrapper = mount(); - expect(wrapper.isOpen()).toBeTruthy(); + const { rerender } = render(); + expect(isOpen()).toBeTruthy(); - wrapper.setProps({ open: false }); - wrapper.update(); - expect(wrapper.isOpen()).toBeFalsy(); + rerender(); + expect(isOpen()).toBeFalsy(); }); it('fixed open need repeat trigger onOpenChange', () => { @@ -144,49 +157,50 @@ describe('Picker.Basic', () => { }); it('disabled should not open', () => { - const wrapper = mount(); - expect(wrapper.isOpen()).toBeFalsy(); + render(); + expect(isOpen()).toBeFalsy(); }); }); describe('value', () => { it('defaultValue', () => { - const wrapper = mount(); - expect(wrapper.find('input').prop('value')).toEqual('1989-11-28'); + const { container } = render(); + expect(container.querySelector('input').value).toEqual('1989-11-28'); }); it('uncontrolled', () => { const onChange = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); - wrapper.selectCell(11); - wrapper.closePicker(); + const { container } = render(); + openPicker(container); + selectCell(11); + closePicker(container); expect(isSame(onChange.mock.calls[0][0], '1990-09-11')).toBeTruthy(); expect(onChange.mock.calls[0][1]).toEqual('1990-09-11'); - expect(wrapper.find('input').prop('value')).toEqual('1990-09-11'); + expect(container.querySelector('input').value).toEqual('1990-09-11'); }); it('controlled', () => { const onChange = jest.fn(); - const wrapper = mount(); + const { container, rerender } = render( + , + ); - wrapper.openPicker(); - wrapper.selectCell(3); - wrapper.closePicker(); - wrapper.update(); + openPicker(container); + selectCell(3); + closePicker(container); expect(isSame(onChange.mock.calls[0][0], '2011-11-03')).toBeTruthy(); - expect(wrapper.find('input').prop('value')).toEqual('2011-11-11'); + expect(document.querySelector('input').value).toEqual('2011-11-11'); + + rerender(); - wrapper.setProps({ value: onChange.mock.calls[0][0] }); - wrapper.update(); - expect(wrapper.find('input').prop('value')).toEqual('2011-11-03'); + expect(document.querySelector('input').value).toEqual('2011-11-03'); // Raw change value - wrapper.setProps({ value: getMoment('1999-09-09') }); - wrapper.update(); - expect(wrapper.find('input').prop('value')).toEqual('1999-09-09'); + rerender(); + + expect(document.querySelector('input').value).toEqual('1999-09-09'); }); }); @@ -208,39 +222,51 @@ describe('Picker.Basic', () => { ].forEach(({ name, picker, value, matchDate, selected }) => { it(name, () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); - wrapper.find('input').simulate('focus'); + openPicker(container); + // document.querySelector('input').simulate('focus'); + fireEvent.focus(container.querySelector('input')); // Invalidate value - wrapper.find('input').simulate('change', { + // document.querySelector('input').simulate('change', { + // target: { + // value: 'abc', + // }, + // }); + fireEvent.change(container.querySelector('input'), { target: { value: 'abc', }, }); // Validate value - wrapper.find('input').simulate('change', { + // document.querySelector('input').simulate('change', { + // target: { + // value, + // }, + // }); + fireEvent.change(container.querySelector('input'), { target: { value, }, }); - expect(wrapper.find('input').prop('value')).toEqual(value); + expect(document.querySelector('input').value).toEqual(value); expect(onChange).not.toHaveBeenCalled(); - wrapper.keyDown(KeyCode.ENTER); + keyDown(KeyCode.ENTER); + expect(isSame(onChange.mock.calls[0][0], matchDate, picker as any)).toBeTruthy(); - expect(wrapper.find(selected).length).toBeTruthy(); + expect(document.querySelector(selected)).toBeTruthy(); onChange.mockReset(); - wrapper.clearValue(); + clearValue(); expect(onChange).toHaveBeenCalledWith(null, ''); - expect(wrapper.isOpen()).toBeFalsy(); + expect(isOpen()).toBeFalsy(); - wrapper.openPicker(); - expect(wrapper.find(selected).length).toBeFalsy(); + openPicker(container); + expect(document.querySelector(selected)).toBeFalsy(); }); }); }); @@ -272,7 +298,7 @@ describe('Picker.Basic', () => { it('function call', () => { const ref = React.createRef(); - mount( + render(
    , @@ -289,30 +315,30 @@ describe('Picker.Basic', () => { const onFocus = jest.fn(); const onBlur = jest.fn(); - const wrapper = mount( + const { container } = render(
    , ); - wrapper.find('input').simulate('focus'); + fireEvent.focus(container.querySelector('input')); expect(onFocus).toHaveBeenCalled(); - expect(wrapper.find('.rc-picker-focused').length).toBeTruthy(); + expect(document.querySelector('.rc-picker-focused')).toBeTruthy(); - wrapper.find('input').simulate('blur'); + fireEvent.blur(container.querySelector('input')); expect(onBlur).toHaveBeenCalled(); - expect(wrapper.find('.rc-picker-focused').length).toBeFalsy(); + expect(document.querySelector('.rc-picker-focused')).toBeFalsy(); }); }); it('block native mouseDown in panel to prevent focus changed', () => { - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); - const preventDefault = jest.fn(); - wrapper.find('td').first().simulate('mouseDown', { preventDefault }); + const mouseDownEvent = createEvent.mouseDown(document.querySelector('td')); + fireEvent(document.querySelector('td'), mouseDownEvent); - expect(preventDefault).toHaveBeenCalled(); + expect(mouseDownEvent.defaultPrevented).toBeTruthy(); }); describe('full steps', () => { @@ -320,20 +346,20 @@ describe('Picker.Basic', () => { { name: 'date', yearBtn: '.rc-picker-year-btn', - finalPanel: 'DatePanel', + finalPanel: '.rc-picker-date-panel', finalMode: 'date', }, { name: 'datetime', yearBtn: '.rc-picker-year-btn', - finalPanel: 'DatetimePanel', + finalPanel: '.rc-picker-datetime-panel', finalMode: 'date', showTime: true, }, { name: 'week', yearBtn: '.rc-picker-year-btn', - finalPanel: 'WeekPanel', + finalPanel: '.rc-picker-week-panel', finalMode: 'week', picker: 'week', }, @@ -341,7 +367,7 @@ describe('Picker.Basic', () => { it(name, () => { const onChange = jest.fn(); const onPanelChange = jest.fn(); - const wrapper = mount( + const { container } = render( { />, ); - wrapper.openPicker(); + openPicker(container); function expectPanelChange(dateStr: string, mode: PanelMode) { expect(isSame(onPanelChange.mock.calls[0][0], dateStr)).toBeTruthy(); @@ -360,60 +386,60 @@ describe('Picker.Basic', () => { // Year onPanelChange.mockReset(); - wrapper.find(yearBtn).simulate('click'); + fireEvent.click(document.querySelector(yearBtn)); expectPanelChange('1990-09-03', 'year'); // Decade onPanelChange.mockReset(); - wrapper.find('.rc-picker-decade-btn').simulate('click'); + fireEvent.click(document.querySelector('.rc-picker-decade-btn')); expectPanelChange('1990-09-03', 'decade'); // Next page - wrapper.find('.rc-picker-header-super-next-btn').simulate('click'); + fireEvent.click(document.querySelector('.rc-picker-header-super-next-btn')); expectPanelChange('2090-09-03', 'decade'); // Select decade - wrapper.selectCell('2010-2019'); + selectCell('2010-2019'); expectPanelChange('2010-09-03', 'year'); // Select year - wrapper.selectCell('2019'); + selectCell('2019'); expectPanelChange('2019-09-03', 'month'); // Select month - wrapper.selectCell('Aug'); + selectCell('Aug'); expectPanelChange('2019-08-03', finalMode as any); // Select date - wrapper.selectCell('18'); + selectCell('18'); expect(onPanelChange).not.toHaveBeenCalled(); - expect(wrapper.find(finalPanel).length).toBeTruthy(); + expect(document.querySelector(finalPanel)).toBeTruthy(); if (showTime) { - wrapper.confirmOK(); + confirmOK(); } - wrapper.closePicker(); + closePicker(container); expect(isSame(onChange.mock.calls[0][0], '2019-08-18')).toBeTruthy(); }); }); it('date -> year -> date', () => { - const wrapper = mount(); - wrapper.openPicker(); - wrapper.find('.rc-picker-year-btn').simulate('click'); - wrapper.selectCell(1990); - expect(wrapper.find('DatePanel')).toHaveLength(1); + const { container } = render(); + openPicker(container); + fireEvent.click(document.querySelector('.rc-picker-year-btn')); + selectCell(1990); + expect(document.querySelector('.rc-picker-date-panel')).toBeTruthy(); }); it('time', () => { const onChange = jest.fn(); const onOk = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); function selectColumn(colIndex: number, rowIndex: number) { - wrapper.find('ul').at(colIndex).find('li').at(rowIndex).simulate('click'); + fireEvent.click(document.querySelectorAll('ul')[colIndex].querySelectorAll('li')[rowIndex]); } selectColumn(0, 13); @@ -421,7 +447,7 @@ describe('Picker.Basic', () => { selectColumn(2, 33); expect(onOk).not.toHaveBeenCalled(); - wrapper.confirmOK(); + confirmOK(); expect(onOk).toHaveBeenCalled(); expect(isSame(onChange.mock.calls[0][0], '1990-09-03 13:22:33', 'second')).toBeTruthy(); }); @@ -429,63 +455,63 @@ describe('Picker.Basic', () => { it('renderExtraFooter', () => { const renderExtraFooter = jest.fn((mode) =>
    {mode}
    ); - const wrapper = mount(); + const { container } = render(); function matchFooter(mode: string) { - expect(wrapper.find('.rc-picker-footer').text()).toEqual(mode); + expect(document.querySelector('.rc-picker-footer').textContent).toEqual(mode); expect(renderExtraFooter.mock.calls[renderExtraFooter.mock.calls.length - 1][0]).toEqual( mode, ); } // Date - wrapper.openPicker(); + openPicker(container); matchFooter('date'); // Month - wrapper.find('.rc-picker-month-btn').simulate('click'); - wrapper.update(); + fireEvent.click(document.querySelector('.rc-picker-month-btn')); + matchFooter('month'); // Year - wrapper.find('.rc-picker-year-btn').simulate('click'); - wrapper.update(); + fireEvent.click(document.querySelector('.rc-picker-year-btn')); + matchFooter('year'); }); describe('showToday', () => { it('only works on date', () => { const onSelect = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); - wrapper.find('.rc-picker-today-btn').simulate('click'); + const { container } = render(); + openPicker(container); + fireEvent.click(document.querySelector('.rc-picker-today-btn')); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy(); }); it('disabled when in disabledDate', () => { const onSelect = jest.fn(); - const wrapper = mount( + const { container } = render( true} showToday />, ); - wrapper.openPicker(); - expect( - wrapper.find('.rc-picker-today-btn').hasClass('rc-picker-today-btn-disabled'), - ).toBeTruthy(); - wrapper.find('.rc-picker-today-btn').simulate('click'); + openPicker(container); + expect(document.querySelector('.rc-picker-today-btn')).toHaveClass( + 'rc-picker-today-btn-disabled', + ); + fireEvent.click(document.querySelector('.rc-picker-today-btn')); expect(onSelect).not.toHaveBeenCalled(); }); ['decade', 'year', 'quarter', 'month', 'week'].forEach((name) => { it(`not works on ${name}`, () => { - const wrapper = mount(); - wrapper.openPicker(); - expect(wrapper.find('.rc-picker-today-btn').length).toBeFalsy(); + const { container } = render(); + openPicker(container); + expect(document.querySelector('.rc-picker-today-btn')).toBeFalsy(); }); }); }); it('icon', () => { - const wrapper = mount( + render( } @@ -494,89 +520,97 @@ describe('Picker.Basic', () => { />, ); - expect(wrapper.find('.rc-picker-input').render()).toMatchSnapshot(); + expect(document.querySelector('.rc-picker-input')).toMatchSnapshot(); }); it('inputRender', () => { - const wrapper = mount( } />); + render( } />); - expect(wrapper.find('.rc-picker-input').render()).toMatchSnapshot(); + expect(document.querySelector('.rc-picker-input')).toMatchSnapshot(); }); describe('showNow', () => { it('datetime should display now', () => { const onSelect = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); - wrapper.find('.rc-picker-now > a').simulate('click'); + const { container } = render(); + openPicker(container); + fireEvent.click(document.querySelector('.rc-picker-now > a')); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03 00:00:00', 'second')).toBeTruthy(); }); it("date shouldn't display now", () => { const onSelect = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); - expect(wrapper.find('.rc-picker-now > a').length).toEqual(0); + const { container } = render(); + openPicker(container); + expect(document.querySelector('.rc-picker-now > a')).toBeFalsy(); }); it("datetime shouldn't display now when showNow is false", () => { const onSelect = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); - expect(wrapper.find('.rc-picker-now > a').length).toEqual(0); + const { container } = render(); + openPicker(container); + expect(document.querySelector('.rc-picker-now > a')).toBeFalsy(); }); it('time should display now', () => { const onSelect = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); - wrapper.find('.rc-picker-now > a').simulate('click'); + const { container } = render(); + openPicker(container); + fireEvent.click(document.querySelector('.rc-picker-now > a')); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03 00:00:00', 'second')).toBeTruthy(); }); it("time shouldn't display now when showNow is false", () => { const onSelect = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); - expect(wrapper.find('.rc-picker-now > a').length).toEqual(0); + const { container } = render( + , + ); + openPicker(container); + expect(document.querySelector('.rc-picker-now > a')).toBeFalsy(); }); }); describe('time step', () => { it('work with now', () => { - jest.setSystemTime(getMoment('1990-09-03 00:09:00').valueOf()) + jest.setSystemTime(getMoment('1990-09-03 00:09:00').valueOf()); const onSelect = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); - wrapper.find('.rc-picker-now > a').simulate('click'); + const { container } = render( + , + ); + openPicker(container); + // document.querySelector('.rc-picker-now > a').simulate('click'); + fireEvent.click(document.querySelector('.rc-picker-now > a')); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03 00:00:59', 'second')).toBeTruthy(); - jest.setSystemTime(getMoment('1990-09-03 00:00:00').valueOf()) + jest.setSystemTime(getMoment('1990-09-03 00:00:00').valueOf()); }); + it('should show warning when hour step is invalid', () => { const spy = jest.spyOn(console, 'error').mockImplementation(() => {}); expect(spy).not.toBeCalled(); - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); expect(spy).toBeCalledWith('Warning: `hourStep` 9 is invalid. It should be a factor of 24.'); spy.mockRestore(); }); + it('should show warning when minute step is invalid', () => { const spy = jest.spyOn(console, 'error').mockImplementation(() => {}); expect(spy).not.toBeCalled(); - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); expect(spy).toBeCalledWith( 'Warning: `minuteStep` 9 is invalid. It should be a factor of 60.', ); spy.mockRestore(); }); + it('should show warning when second step is invalid', () => { const spy = jest.spyOn(console, 'error').mockImplementation(() => {}); expect(spy).not.toBeCalled(); - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); expect(spy).toBeCalledWith( 'Warning: `secondStep` 9 is invalid. It should be a factor of 60.', ); @@ -585,70 +619,74 @@ describe('Picker.Basic', () => { }); it('pass data- & aria- & role', () => { - const wrapper = mount(); + const { container } = render(); - expect(wrapper.render()).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); it('support name & autoComplete prop', () => { - const wrapper = mount(); + const { container } = render(); - expect(wrapper.find('input').props()).toMatchObject({ name: 'bamboo', autoComplete: 'off' }); + expect(container.querySelector('input')).toHaveAttribute('name', 'bamboo'); + expect(container.querySelector('input')).toHaveAttribute('autoComplete', 'off'); }); it('blur should reset invalidate text', () => { - const wrapper = mount(); - wrapper.openPicker(); - wrapper.find('input').simulate('change', { + const { container } = render(); + openPicker(container); + fireEvent.change(container.querySelector('input'), { target: { value: 'Invalidate', }, }); - wrapper.closePicker(); - expect(wrapper.find('input').props().value).toEqual(''); + closePicker(container); + expect(document.querySelector('input').value).toEqual(''); }); it('should render correctly in rtl', () => { - const wrapper = mount(); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(); + expect(container).toMatchSnapshot(); }); it('week picker show correct year', () => { - const wrapper = mount(); + const { container } = render(); - expect(wrapper.find('input').prop('value')).toEqual('2020-1st'); + expect(container.querySelector('input').value).toEqual('2020-1st'); }); it('Picker should open when click inside', () => { const onClick = jest.fn(); - const wrapper = mount(); - const inputElement = wrapper.find('input').instance() as any as HTMLInputElement; + render(); + const inputElement = document.querySelector('input'); inputElement.focus = jest.fn(); - wrapper.find('.rc-picker').simulate('click'); + fireEvent.click(document.querySelector('.rc-picker')); expect(inputElement.focus).toHaveBeenCalled(); - expect(wrapper.isOpen()).toBeTruthy(); + expect(isOpen()).toBeTruthy(); expect(onClick).toHaveBeenCalled(); }); it('not open when disabled', () => { - const wrapper = mount(); - wrapper.find('.rc-picker').simulate('click'); - expect(wrapper.isOpen()).toBeFalsy(); + const { rerender } = render(); + // document.querySelector('.rc-picker').simulate('click'); + fireEvent.click(document.querySelector('.rc-picker')); + expect(isOpen()).toBeFalsy(); - wrapper.setProps({ disabled: false }); - expect(wrapper.isOpen()).toBeFalsy(); + // wrapper.setProps({ disabled: false }); + rerender(); + expect(isOpen()).toBeFalsy(); }); it('not open when mouseup', () => { - const wrapper = mount(); - const inputElement = wrapper.find('input').instance() as any as HTMLInputElement; + render(); + const inputElement = document.querySelector('input'); inputElement.focus = jest.fn(); - wrapper.find('.rc-picker').simulate('mouseup'); + // document.querySelector('.rc-picker').simulate('mouseup'); + fireEvent.mouseUp(document.querySelector('.rc-picker')); expect(inputElement.focus).toHaveBeenCalledTimes(0); - expect(wrapper.isOpen()).toBeFalsy(); + expect(isOpen()).toBeFalsy(); }); it('defaultOpenValue in timePicker', () => { @@ -656,7 +694,7 @@ describe('Picker.Basic', () => { const onChange = jest.fn(); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - const wrapper = mount( + const { container } = render( { 'Warning: `defaultOpenValue` may confuse user for the current value status. Please use `defaultValue` instead.', ); - wrapper.openPicker(); - wrapper.find('.rc-picker-ok button').simulate('click'); + openPicker(container); + // document.querySelector('.rc-picker-ok button').simulate('click'); + fireEvent.click(document.querySelector('.rc-picker-ok button')); expect(isSame(onChange.mock.calls[0][0], '2000-01-01 00:10:23')).toBeTruthy(); @@ -677,25 +716,25 @@ describe('Picker.Basic', () => { }); it('close to reset', () => { - const wrapper = mount(); + const { container } = render(); - wrapper.openPicker(); - wrapper.find('input').simulate('change', { + openPicker(container); + fireEvent.change(document.querySelector('input'), { target: { value: 'aaaaa', }, }); - expect(wrapper.find('input').props().value).toEqual('aaaaa'); + expect(document.querySelector('input').value).toEqual('aaaaa'); - wrapper.closePicker(); - expect(wrapper.find('input').props().value).toEqual('2000-01-01'); + closePicker(container); + expect(document.querySelector('input').value).toEqual('2000-01-01'); }); it('switch picker should change format', () => { - const wrapper = mount( + const { rerender } = render( , ); - expect(wrapper.find('input').props().value).toEqual('1999-09-03 00:00:00'); + expect(document.querySelector('input').value).toEqual('1999-09-03 00:00:00'); [ ['date', '1999-09-03'], @@ -703,128 +742,146 @@ describe('Picker.Basic', () => { ['quarter', '1999-Q3'], ['year', '1999'], ].forEach(([picker, text]) => { - wrapper.setProps({ picker, showTime: false }); - wrapper.update(); - expect(wrapper.find('input').props().value).toEqual(text); + rerender( + , + ); + + expect(document.querySelector('input').value).toEqual(text); }); }); it('id', () => { - const wrapper = mount(); - expect(wrapper.find('input').props().id).toEqual('light'); + const { container } = render(); + expect(container.querySelector('input').id).toEqual('light'); }); it('dateRender', () => { - const wrapper = mount( date.format('YYYY-MM-DD')} />); - expect(wrapper.find('tbody td').last().text()).toEqual('1990-10-06'); + render( date.format('YYYY-MM-DD')} />); + const tdList = document.querySelectorAll('tbody td'); + expect(tdList[tdList.length - 1].textContent).toEqual('1990-10-06'); }); it('format', () => { - const wrapper = mount(); - wrapper.openPicker(); - wrapper.find('input').simulate('change', { + const { container } = render(); + openPicker(container); + fireEvent.change(container.querySelector('input'), { target: { value: '2000-01-01', }, }); - wrapper.closePicker(); - expect(wrapper.find('input').prop('value')).toEqual('20000101'); + closePicker(container); + expect(document.querySelector('input').value).toEqual('20000101'); }); it('custom format', () => { - const wrapper = mount( + const { container } = render( `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']} />, ); - expect(wrapper.find('input').prop('readOnly')).toBeTruthy(); - wrapper.openPicker(); - wrapper.selectCell(24); - wrapper.closePicker(); - expect(wrapper.find('input').prop('value')).toEqual('custom format:20200924'); + expect(document.querySelector('input')).toHaveAttribute('readOnly'); + openPicker(container); + selectCell(24); + closePicker(container); + expect(document.querySelector('input').value).toEqual('custom format:20200924'); // clear - const clearNode = wrapper.find('.rc-picker-clear'); - expect(clearNode.simulate.bind(clearNode, 'mouseUp')).not.toThrow(); - expect(wrapper.find('input').prop('value')).toEqual(''); + clearValue(); + expect(document.querySelector('input').value).toEqual(''); }); it('panelRender', () => { - const wrapper = mount(

    Light

    } />); - expect(wrapper.render()).toMatchSnapshot(); + render(

    Light

    } />); + expect(document.querySelector('.rc-picker')).toMatchSnapshot(); }); it('change panel when `picker` changed', () => { - const wrapper = mount(); - expect(wrapper.find('.rc-picker-week-panel').length).toEqual(1); - wrapper.setProps({ picker: 'month' }); - wrapper.update(); - expect(wrapper.find('.rc-picker-week-panel').length).toEqual(0); - expect(wrapper.find('.rc-picker-month-panel').length).toEqual(1); + const { rerender } = render(); + expect(document.querySelector('.rc-picker-week-panel')).toBeTruthy(); + rerender(); + + expect(document.querySelector('.rc-picker-week-panel')).toBeFalsy(); + expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy(); }); describe('hover value', () => { beforeEach(() => { jest.useFakeTimers(); }); + afterEach(() => { jest.useRealTimers(); }); + it('should restore when leave', () => { - const wrapper = mount(); - const cell = wrapper.findCell(24); - cell.simulate('mouseEnter'); + render(); + const cell = findCell(24); + fireEvent.mouseEnter(cell); jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('input').prop('value')).toBe('2020-07-24'); - expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy(); - cell.simulate('mouseLeave'); + expect(document.querySelector('input').value).toBe('2020-07-24'); + expect(document.querySelector('.rc-picker-input')).toHaveClass('rc-picker-input-placeholder'); + + fireEvent.mouseLeave(cell); jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('input').prop('value')).toBe('2020-07-22'); - expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy(); + + expect(document.querySelector('input').value).toBe('2020-07-22'); + expect(document.querySelector('.rc-picker-input')).not.toHaveClass( + 'rc-picker-input-placeholder', + ); }); it('should restore after selecting cell', () => { - const wrapper = mount(); - wrapper.openPicker(); - const cell = wrapper.findCell(24); - cell.simulate('mouseEnter'); + const { container } = render(); + openPicker(container); + const cell = findCell(24); + // cell.simulate('mouseEnter'); + fireEvent.mouseEnter(cell); jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('input').prop('value')).toBe('2020-07-24'); - expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy(); - wrapper.selectCell(24); - expect(wrapper.find('input').prop('value')).toBe('2020-07-24'); - expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy(); + expect(document.querySelector('input').value).toBe('2020-07-24'); + expect(document.querySelector('.rc-picker-input')).toHaveClass('rc-picker-input-placeholder'); + + selectCell(24); + expect(document.querySelector('input').value).toBe('2020-07-24'); + expect(document.querySelector('.rc-picker-input')).not.toHaveClass( + 'rc-picker-input-placeholder', + ); }); it('change value when hovering', () => { - const wrapper = mount(); - wrapper.openPicker(); - const cell = wrapper.findCell(24); - cell.simulate('mouseEnter'); + const { container } = render(); + openPicker(container); + const cell = findCell(24); + // cell.simulate('mouseEnter'); + fireEvent.mouseEnter(cell); jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('input').prop('value')).toBe('2020-07-24'); - expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy(); - wrapper.find('input').simulate('change', { + expect(document.querySelector('input').value).toBe('2020-07-24'); + expect(document.querySelector('.rc-picker-input')).toHaveClass('rc-picker-input-placeholder'); + + fireEvent.change(container.querySelector('input'), { target: { value: '2020-07-23', }, }); - expect(wrapper.find('input').prop('value')).toBe('2020-07-23'); - expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy(); + expect(document.querySelector('input').value).toBe('2020-07-23'); + expect(document.querySelector('.rc-picker-input')).not.toHaveClass( + 'rc-picker-input-placeholder', + ); - wrapper.closePicker(); - expect(wrapper.find('input').prop('value')).toBe('2020-07-23'); - expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy(); + closePicker(container); + expect(document.querySelector('input').value).toBe('2020-07-23'); + expect(document.querySelector('.rc-picker-input')).not.toHaveClass( + 'rc-picker-input-placeholder', + ); }); }); @@ -859,7 +916,7 @@ describe('Picker.Basic', () => { it('work', () => { jest.useFakeTimers(); - const wrapper = mount( + const { unmount } = render( , ); jest.runAllTimers(); @@ -867,126 +924,49 @@ describe('Picker.Basic', () => { expect(triggered).toBeTruthy(); jest.useRealTimers(); - wrapper.unmount(); + unmount(); }); }); describe('prevent default on keydown', () => { it('should open picker panel if no prevent default', () => { - const keyDown = jest.fn(); - const wrapper = mount(); + const { container } = render(); - wrapper.closePicker(); - wrapper.keyDown(KeyCode.ENTER); - expect(wrapper.isOpen()).toBeTruthy(); + closePicker(container); + keyDown(KeyCode.ENTER); + expect(isOpen()).toBeTruthy(); }); it('should not open if prevent default is called', () => { - const keyDown = jest.fn(({ which }, preventDefault) => { + const onKeyDown = jest.fn(({ which }, preventDefault) => { if (which === 13) preventDefault(); }); - const wrapper = mount(); + const { container } = render(); - wrapper.openPicker(); - expect(wrapper.isOpen()).toBeTruthy(); + openPicker(container); + expect(isOpen()).toBeTruthy(); - wrapper.keyDown(KeyCode.ESC); - expect(wrapper.isOpen()).toBeFalsy(); + keyDown(KeyCode.ESC); + expect(isOpen()).toBeFalsy(); - wrapper.keyDown(KeyCode.ENTER); - expect(wrapper.isOpen()).toBeFalsy(); - }); - }); - - describe('disabledDate', () => { - function disabledDate(current: Moment) { - return current <= getMoment('2020-12-28 00:00:00').endOf('day'); - } - const wrapper = mount( - , - ); - // Date Panel - Array.from({ - length: 31, - }).forEach((v, i) => { - const cell = wrapper.findCell(`${i + 1}`); - // >= 29 - if (i >= 28) { - expect(cell.hasClass('rc-picker-cell-disabled')).toBeFalsy(); - } else { - expect(cell.hasClass('rc-picker-cell-disabled')).toBeTruthy(); - } - }); - wrapper.find('.rc-picker-month-btn').simulate('click'); - // Month Panel - Array.from({ - length: 12, - }).forEach((v, i) => { - const cell = wrapper.find('.rc-picker-cell-in-view').at(i); - // >= 12 - if (i >= 11) { - expect(cell.hasClass('rc-picker-cell-disabled')).toBeFalsy(); - } else { - expect(cell.hasClass('rc-picker-cell-disabled')).toBeTruthy(); - } - }); - wrapper.find('.rc-picker-year-btn').simulate('click'); - // Year Panel - Array.from({ - length: 10, - }).forEach((v, i) => { - const cell = wrapper.find('.rc-picker-cell-in-view').at(i); - // >= 2020 - expect(cell.hasClass('rc-picker-cell-disabled')).toBeFalsy(); - }); - // Decade Panel - Array.from({ - length: 8, - }).forEach((v, i) => { - const cell = wrapper.find('.rc-picker-cell-in-view').at(i); - // >= 2020 - expect(cell.hasClass('rc-picker-cell-disabled')).toBeFalsy(); - }); - - const quarterWrapper = mount( - , - ); - // quarter Panel - Array.from({ - length: 4, - }).forEach((v, i) => { - const cell = quarterWrapper.find('.rc-picker-cell-in-view').at(i); - // >= 4 - if (i >= 3) { - expect(cell.hasClass('rc-picker-cell-disabled')).toBeFalsy(); - } else { - expect(cell.hasClass('rc-picker-cell-disabled')).toBeTruthy(); - } + keyDown(KeyCode.ENTER); + expect(isOpen()).toBeFalsy(); }); }); it('disabledDate should not crash', () => { - const wrapper = mount( d.isAfter(Date.now())} />); - wrapper - .find('input') - .simulate('change', { target: { value: moment().add(1, 'year').format('YYYY-MM-DD') } }); + const { container } = render( d.isAfter(Date.now())} />); + fireEvent.change(container.querySelector('input'), { + target: { value: moment().add(1, 'year').format('YYYY-MM-DD') }, + }); - wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER }); + keyDown(KeyCode.ENTER); }); it('presets', () => { const onChange = jest.fn(); - const wrapper = mount( + render( { />, ); - expect(wrapper.find('.rc-picker-presets li').text()).toBe('Bamboo'); - wrapper.find('.rc-picker-presets li').simulate('click'); + expect(document.querySelector('.rc-picker-presets li').textContent).toBe('Bamboo'); + // document.querySelector('.rc-picker-presets li').simulate('click'); + fireEvent.click(document.querySelector('.rc-picker-presets li')); expect(onChange.mock.calls[0][0].format('YYYY-MM-DD')).toEqual('2000-09-03'); }); diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 6f5a2d8..1e8eb6d 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1,19 +1,33 @@ -import { fireEvent, render } from '@testing-library/react'; -import type { Moment } from 'moment'; -import moment from 'moment'; +import { act, createEvent, fireEvent, render } from '@testing-library/react'; +import moment, { Moment } from 'moment'; import KeyCode from 'rc-util/lib/KeyCode'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import React from 'react'; -import { act } from 'react-dom/test-utils'; import type { PickerMode } from '../src/interface'; import zhCN from '../src/locale/zh_CN'; -import type { Wrapper } from './util/commonUtil'; -import { getMoment, isSame, MomentRangePicker, mount } from './util/commonUtil'; +import { + clearValue, + clickButton, + closePicker, + findCell, + getMoment, + inputValue, + isOpen, + isSame, + MomentRangePicker, + openPicker, + selectCell, +} from './util/commonUtil'; describe('Picker.Range', () => { - function matchValues(wrapper: Wrapper, value1: string, value2: string) { - expect(wrapper.find('input').first().props().value).toEqual(value1); - expect(wrapper.find('input').last().props().value).toEqual(value2); + function matchValues(container: HTMLElement, value1: string, value2: string) { + expect(container.querySelectorAll('input')[0].value).toEqual(value1); + expect(container.querySelectorAll('input')[1].value).toEqual(value2); + } + + function findLast(container: HTMLElement | Document, selector: string) { + const list = container.querySelectorAll(selector); + return list[list.length - 1]; } beforeEach(() => { @@ -26,42 +40,48 @@ describe('Picker.Range', () => { jest.useRealTimers(); }); + function keyDown(container: HTMLElement, index: number, keyCode: number) { + fireEvent.keyDown(container.querySelectorAll('input')[0], { + keyCode, + which: keyCode, + charCode: keyCode, + }); + } + describe('value', () => { it('defaultValue', () => { - const wrapper = mount( + const { container } = render( , ); - matchValues(wrapper, '1989-11-28', '1990-09-03'); + matchValues(container, '1989-11-28', '1990-09-03'); }); it('controlled', () => { - const wrapper = mount( + const { container, rerender } = render( , ); - matchValues(wrapper, '1989-11-28', '1990-09-03'); + matchValues(container, '1989-11-28', '1990-09-03'); // Update - wrapper.setProps({ - value: [getMoment('2000-01-01'), getMoment('2011-12-12')], - }); - wrapper.update(); - matchValues(wrapper, '2000-01-01', '2011-12-12'); + rerender(); + + matchValues(container, '2000-01-01', '2011-12-12'); }); it('uncontrolled', () => { const onChange = jest.fn(); const onCalendarChange = jest.fn(); - const wrapper = mount( + const { container } = render( , ); // Start date - wrapper.openPicker(); + openPicker(container); expect(onChange).not.toHaveBeenCalled(); - wrapper.selectCell(13); + selectCell(13); expect(onChange).not.toHaveBeenCalled(); expect(isSame(onCalendarChange.mock.calls[0][0][0], '1990-09-13')).toBeTruthy(); @@ -70,7 +90,7 @@ describe('Picker.Range', () => { // End date onCalendarChange.mockReset(); - wrapper.selectCell(14); + selectCell(14); expect(isSame(onChange.mock.calls[0][0][0], '1990-09-13')).toBeTruthy(); expect(isSame(onChange.mock.calls[0][0][1], '1990-09-14')).toBeTruthy(); @@ -83,38 +103,45 @@ describe('Picker.Range', () => { }); it('exchanged value should re-order', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.update(); - matchValues(wrapper, '1989-11-28', '1990-09-03'); + matchValues(container, '1989-11-28', '1990-09-03'); }); describe('view is closed', () => { it('year', () => { - const wrapper = mount(); - wrapper.openPicker(); - expect(wrapper.exists('.rc-picker-footer')).toBeFalsy(); - expect(wrapper.find('.rc-picker-header-view').first().text()).toEqual('1990-1999'); - expect(wrapper.find('.rc-picker-header-view').last().text()).toEqual('2000-2009'); + const { container } = render(); + openPicker(container); + expect(document.querySelector('.rc-picker-footer')).toBeFalsy(); + expect(document.querySelectorAll('.rc-picker-header-view')[0].textContent).toEqual( + '1990-1999', + ); + expect(document.querySelectorAll('.rc-picker-header-view')[1].textContent).toEqual( + '2000-2009', + ); }); it('year with footer', () => { - const wrapper = mount( + const { container } = render(

    footer

    } picker="year" />, ); - wrapper.openPicker(); - expect(wrapper.find('.rc-picker-footer').text()).toEqual('footer'); - expect(wrapper.find('.rc-picker-header-view').first().text()).toEqual('1990-1999'); - expect(wrapper.find('.rc-picker-header-view').last().text()).toEqual('2000-2009'); + openPicker(container); + expect(document.querySelector('.rc-picker-footer').textContent).toEqual('footer'); + expect(document.querySelectorAll('.rc-picker-header-view')[0].textContent).toEqual( + '1990-1999', + ); + expect(document.querySelectorAll('.rc-picker-header-view')[1].textContent).toEqual( + '2000-2009', + ); }); }); it('endDate can not click before startDate', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( date.date() === 28} @@ -122,103 +149,103 @@ describe('Picker.Range', () => { />, ); - let cellNode: Wrapper; + let cellNode: HTMLElement; // Start date - wrapper.openPicker(); - wrapper.selectCell(23); + openPicker(container); + selectCell(23); // End date - cellNode = wrapper.selectCell(11); - expect(cellNode.hasClass('rc-picker-cell-disabled')).toBeTruthy(); + cellNode = selectCell(11); + expect(cellNode).toHaveClass('rc-picker-cell-disabled'); expect(onChange).not.toHaveBeenCalled(); // Click origin disabled date - cellNode = wrapper.selectCell(28); - expect(cellNode.hasClass('rc-picker-cell-disabled')).toBeTruthy(); + cellNode = selectCell(28); + expect(cellNode).toHaveClass('rc-picker-cell-disabled'); expect(onChange).not.toHaveBeenCalled(); }); it('week picker can not click before start week', () => { - const wrapper = mount(); - wrapper.openPicker(); - wrapper.selectCell(11); + const { container } = render(); + openPicker(container); + selectCell(11); - expect(wrapper.findCell(4).hasClass('rc-picker-cell-disabled')).toBeTruthy(); - expect(wrapper.findCell(11).hasClass('rc-picker-cell-disabled')).toBeFalsy(); + expect(findCell(4)).toHaveClass('rc-picker-cell-disabled'); + expect(findCell(11)).not.toHaveClass('rc-picker-cell-disabled'); }); describe('Can not select when start or end first selected', () => { it('select end', () => { - const wrapper = mount(); + const { container } = render(); - wrapper.openPicker(1); - wrapper.selectCell(7); + openPicker(container, 1); + selectCell(7); - expect(wrapper.findCell(23).hasClass('rc-picker-cell-disabled')).toBeTruthy(); + expect(findCell(23)).toHaveClass('rc-picker-cell-disabled'); }); it('select start', () => { - const wrapper = mount(); + const { container } = render(); - wrapper.openPicker(0); - wrapper.selectCell('Q3'); + openPicker(container, 0); + selectCell('Q3'); - expect(wrapper.findCell('Q1').hasClass('rc-picker-cell-disabled')).toBeTruthy(); + expect(findCell('Q1')).toHaveClass('rc-picker-cell-disabled'); }); it('select end', () => { - const wrapper = mount(); + const { container } = render(); - wrapper.openPicker(1); - wrapper.selectCell('May'); + openPicker(container, 1); + selectCell('May'); - expect(wrapper.findCell('Dec').hasClass('rc-picker-cell-disabled')).toBeTruthy(); + expect(findCell('Dec')).toHaveClass('rc-picker-cell-disabled'); }); it('disabled start', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(1); - expect(wrapper.findCell(14).hasClass('rc-picker-cell-disabled')).toBeTruthy(); + openPicker(container, 1); + expect(findCell(14)).toHaveClass('rc-picker-cell-disabled'); }); }); it('allowEmpty', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); - wrapper.selectCell(11); + openPicker(container); + selectCell(11); expect(onChange).toHaveBeenCalledWith([expect.anything(), null], ['1990-09-11', '']); - wrapper.clearValue(); + clearValue(); onChange.mockReset(); // Not allow empty with startDate - wrapper.openPicker(1); - wrapper.selectCell(23); - wrapper.closePicker(1); + openPicker(container, 1); + selectCell(23); + closePicker(container, 1); expect(onChange).not.toHaveBeenCalled(); }); describe('disabled', () => { it('basic disabled check', () => { - const wrapper = mount(); - expect(wrapper.find('input').at(0).props().disabled).toBeTruthy(); - expect(wrapper.find('input').at(1).props().disabled).toBeFalsy(); + const { container } = render(); + expect(container.querySelectorAll('input')[0].disabled).toBeTruthy(); + expect(container.querySelectorAll('input')[1].disabled).toBeFalsy(); }); it('startDate will have disabledDate when endDate is not selectable', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( { />, ); - let cellNode: Wrapper; + let cellNode: HTMLElement; // Disabled date - wrapper.openPicker(); - cellNode = wrapper.selectCell(25); - expect(cellNode.hasClass('rc-picker-cell-disabled')).toBeTruthy(); + openPicker(container); + cellNode = selectCell(25); + expect(cellNode).toHaveClass('rc-picker-cell-disabled'); expect(onChange).not.toHaveBeenCalled(); // Enabled date - wrapper.openPicker(); - cellNode = wrapper.selectCell(7); - expect(cellNode.hasClass('rc-picker-cell-disabled')).toBeFalsy(); + openPicker(container); + cellNode = selectCell(7); + expect(cellNode).not.toHaveClass('rc-picker-cell-disabled'); expect(onChange).toHaveBeenCalledWith( [expect.anything(), expect.anything()], ['1990-09-07', '1990-09-22'], @@ -246,7 +273,7 @@ describe('Picker.Range', () => { it('null value with disabled', () => { const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - mount(); + render(); expect(errSpy).toHaveBeenCalledWith( 'Warning: `disabled` should not set with empty `value`. You should set `allowEmpty` or `value` instead.', @@ -256,7 +283,7 @@ describe('Picker.Range', () => { it('clear should trigger change', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( { />, ); - wrapper.openPicker(); - wrapper.clearValue(); - expect(wrapper.isOpen()).toBeFalsy(); + openPicker(container); + clearValue(); + expect(isOpen()).toBeFalsy(); expect(onChange.mock.calls[0][1]).toEqual(['', '2000-11-11']); }); // https://github.com/ant-design/ant-design/issues/23726 it('not fill when all disabled and no value', () => { - const wrapper = mount(); - expect(wrapper.find('input').first().props().value).toEqual(''); - expect(wrapper.find('input').last().props().value).toEqual(''); + const { container } = render(); + expect(container.querySelectorAll('input')[0].value).toEqual(''); + expect(container.querySelectorAll('input')[1].value).toEqual(''); }); }); describe('ranges', () => { it('work', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( { />, ); - let testNode; + let testNode: HTMLElement; // Basic - wrapper.openPicker(); - testNode = wrapper.find('.rc-picker-presets li').first(); - expect(testNode.text()).toEqual('test'); - testNode.simulate('click'); + openPicker(container); + testNode = document.querySelector('.rc-picker-presets li'); + expect(testNode.textContent).toEqual('test'); + // testNode.simulate('click'); + fireEvent.click(testNode); expect(onChange).toHaveBeenCalledWith( [expect.anything(), expect.anything()], ['1989-11-28', '1990-09-03'], ); - expect(wrapper.isOpen()).toBeFalsy(); + expect(isOpen()).toBeFalsy(); // Function - wrapper.openPicker(); - testNode = wrapper.find('.rc-picker-presets li').last(); - expect(testNode.text()).toEqual('func'); - testNode.simulate('click'); + openPicker(container); + testNode = document.querySelector('.rc-picker-presets li:last-child'); + expect(testNode.textContent).toEqual('func'); + // testNode.simulate('click'); + fireEvent.click(testNode); expect(onChange).toHaveBeenCalledWith( [expect.anything(), expect.anything()], ['2000-01-01', '2010-11-11'], ); - expect(wrapper.isOpen()).toBeFalsy(); + expect(isOpen()).toBeFalsy(); }); it('hover className', () => { - const wrapper = mount( + const { container } = render( { />, ); - wrapper.openPicker(); - wrapper.find('.rc-picker-presets li').simulate('mouseEnter'); - expect(wrapper.findCell(11).hasClass('rc-picker-cell-range-start')).toBeTruthy(); - expect(wrapper.findCell(12).hasClass('rc-picker-cell-in-range')).toBeTruthy(); - expect(wrapper.findCell(13).hasClass('rc-picker-cell-range-end')).toBeTruthy(); + openPicker(container); + fireEvent.mouseEnter(document.querySelector('.rc-picker-presets li')); + expect(findCell(11)).toHaveClass('rc-picker-cell-range-start'); + expect(findCell(12)).toHaveClass('rc-picker-cell-in-range'); + expect(findCell(13)).toHaveClass('rc-picker-cell-range-end'); - wrapper.find('.rc-picker-presets li').simulate('mouseLeave'); - expect(wrapper.findCell(11).hasClass('rc-picker-cell-range-start')).toBeFalsy(); - expect(wrapper.findCell(12).hasClass('rc-picker-cell-in-range')).toBeFalsy(); - expect(wrapper.findCell(13).hasClass('rc-picker-cell-range-end')).toBeFalsy(); + fireEvent.mouseLeave(document.querySelector('.rc-picker-presets li')); + expect(findCell(11)).not.toHaveClass('rc-picker-cell-range-start'); + expect(findCell(12)).not.toHaveClass('rc-picker-cell-in-range'); + expect(findCell(13)).not.toHaveClass('rc-picker-cell-range-end'); }); }); it('placeholder', () => { - const wrapper = mount(); - expect(wrapper.find('input').first().props().placeholder).toEqual('light'); - expect(wrapper.find('input').last().props().placeholder).toEqual('bamboo'); + const { container } = render(); + expect(container.querySelectorAll('input')[0].placeholder).toEqual('light'); + expect(container.querySelectorAll('input')[1].placeholder).toEqual('bamboo'); }); describe('defaultPickerValue', () => { it('defaultPickerValue works', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); - expect(wrapper.find('PickerPanel').first().find('.rc-picker-header-view').text()).toEqual( - 'Nov1989', - ); - wrapper.closePicker(); + openPicker(container); + expect(document.querySelectorAll('.rc-picker-header-view')[0].textContent).toEqual('Nov1989'); + closePicker(container); - wrapper.openPicker(1); - expect(wrapper.find('PickerPanel').last().find('.rc-picker-header-view').text()).toEqual( - 'Oct1990', - ); - wrapper.closePicker(1); + openPicker(container, 1); + expect(document.querySelectorAll('.rc-picker-header-view')[1].textContent).toEqual('Oct1990'); + closePicker(container, 1); }); it('defaultPickerValue with showTime', () => { const startDate = getMoment('1982-02-12'); const endDate = getMoment('1982-02-12'); - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); - expect(wrapper.find('.rc-picker-year-btn').first().text()).toEqual(startDate.format('YYYY')); + openPicker(container); + expect(document.querySelector('.rc-picker-year-btn').textContent).toEqual( + startDate.format('YYYY'), + ); }); it('defaultPickerValue with showTime should works when open panel', () => { const startDate = getMoment('1982-02-12'); const endDate = getMoment('1982-02-12'); - const wrapper = mount( + const { container } = render( { />, ); expect(() => { - wrapper.openPicker(); + openPicker(container); }).not.toThrow(); - expect(wrapper.find('.rc-picker-year-btn').first().text()).toEqual(startDate.format('YYYY')); + expect(document.querySelector('.rc-picker-year-btn').textContent).toEqual( + startDate.format('YYYY'), + ); }); }); @@ -422,7 +451,7 @@ describe('Picker.Range', () => { it('function call', () => { const ref = React.createRef(); - mount( + render(
    , @@ -436,7 +465,7 @@ describe('Picker.Range', () => { }); it('not crash with showTime defaultValue', () => { - const wrapper = mount( + const { container } = render( { />, ); - wrapper.openPicker(); - wrapper.selectCell(13); - wrapper.find('.rc-picker-ok button').simulate('click'); - wrapper.selectCell(23); + openPicker(container); + selectCell(13); + // document.querySelector('.rc-picker-ok button').simulate('click'); + fireEvent.click(document.querySelector('.rc-picker-ok button')); + selectCell(23); - matchValues(wrapper, '1990-09-13 01:02:03', '1990-09-23 05:06:07'); + matchValues(container, '1990-09-13 01:02:03', '1990-09-23 05:06:07'); }); }); it('mode is array', () => { - const wrapper = mount(); - wrapper.openPicker(); - expect(wrapper.find('.rc-picker-year-panel')).toHaveLength(1); + const { container } = render(); + openPicker(container); + expect(document.querySelector('.rc-picker-year-panel')).toBeTruthy(); - wrapper.openPicker(1); - expect(wrapper.find('.rc-picker-month-panel')).toHaveLength(1); + openPicker(container, 1); + expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy(); }); describe('onPanelChange is array args', () => { it('mode', () => { const onPanelChange = jest.fn(); - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); - wrapper.selectCell('Feb'); + openPicker(container); + selectCell('Feb'); expect(isSame(onPanelChange.mock.calls[0][0][0], '1990-02-03')); expect(onPanelChange.mock.calls[0][1]).toEqual(['date', 'year']); - wrapper.closePicker(); + closePicker(container); onPanelChange.mockReset(); - wrapper.openPicker(1); - wrapper.selectCell(1993); + openPicker(container, 1); + selectCell(1993); expect(isSame(onPanelChange.mock.calls[0][0][1], '1993-02-03')); expect(onPanelChange.mock.calls[0][1]).toEqual(['month', 'month']); }); it('picker', () => { const onPanelChange = jest.fn(); - const wrapper = mount(); + const { container } = render( + , + ); // First go to year panel - wrapper.openPicker(); - wrapper.find('.rc-picker-year-btn').first().simulate('click'); + openPicker(container); + // document.querySelector('.rc-picker-year-btn').first().simulate('click'); + fireEvent.click(document.querySelector('.rc-picker-year-btn')); expect(isSame(onPanelChange.mock.calls[0][0][0], '1990-09-03')); expect(onPanelChange.mock.calls[0][1]).toEqual(['year', 'month']); // First nack to month panel onPanelChange.mockReset(); - wrapper.selectCell(1993); + selectCell(1993); expect(onPanelChange).toHaveBeenCalled(); expect(isSame(onPanelChange.mock.calls[0][0][0], '1993-09-03')); expect(onPanelChange.mock.calls[0][1]).toEqual(['month', 'month']); // Last go to year panel - wrapper.closePicker(); - wrapper.openPicker(1); - wrapper.find('.rc-picker-year-btn').first().simulate('click'); + closePicker(container); + openPicker(container, 1); + // document.querySelector('.rc-picker-year-btn').first().simulate('click'); + fireEvent.click(document.querySelector('.rc-picker-year-btn')); onPanelChange.mockReset(); // Last nack to month panel - wrapper.selectCell(1998); + selectCell(1998); expect(isSame(onPanelChange.mock.calls[0][0][1], '1998-09-03')); expect(onPanelChange.mock.calls[0][1]).toEqual(['month', 'month']); }); it('should render correctly in rtl', () => { - const wrapper = mount(); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(); + expect(container).toMatchSnapshot(); }); }); it('type can not change before start time', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( , ); - wrapper - .find('input') - .last() - .simulate('change', { - target: { - value: '2000-01-11', - }, - }); - wrapper.find('input').last().simulate('keyDown', { - which: KeyCode.ENTER, + // wrapper + // .find('input') + // .last() + // .simulate('change', { + // target: { + // value: '2000-01-11', + // }, + // }); + fireEvent.change(container.querySelectorAll('input')[1], { + target: { + value: '2000-01-11', + }, }); + // document.querySelector('input').last().simulate('keyDown', { + // which: KeyCode.ENTER, + // }); + keyDown(container, 1, KeyCode.ENTER); expect(onChange).not.toHaveBeenCalled(); }); @@ -545,20 +585,17 @@ describe('Picker.Range', () => { it('should open last when first selected', () => { jest.useFakeTimers(); const onOpenChange = jest.fn(); - const wrapper = mount(); - expect(wrapper.find('PickerPanel')).toHaveLength(0); + const { container, unmount } = render(); - wrapper.openPicker(); - expect( - wrapper.find('.rc-picker-input').first().hasClass('rc-picker-input-active'), - ).toBeTruthy(); + openPicker(container); + expect(document.querySelectorAll('.rc-picker-input')[0]).toHaveClass('rc-picker-input-active'); // Select to active next - wrapper.selectCell(11); + selectCell(11); jest.runAllTimers(); - expect(wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-active')).toBeTruthy(); + expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass('rc-picker-input-active'); - wrapper.unmount(); + unmount(); jest.useRealTimers(); }); @@ -570,58 +607,65 @@ describe('Picker.Range', () => { { picker: 'date', start: 11, end: 22, mid: 15 }, ].forEach(({ picker, start, end, mid }) => { it('year', () => { - const wrapper = mount(); - wrapper.openPicker(); - wrapper.selectCell(start); + const { container } = render(); + openPicker(container); + selectCell(start); // Hover it - wrapper.findCell(end).simulate('mouseEnter'); + // findCell(end).simulate('mouseEnter'); + fireEvent.mouseEnter(findCell(end)); - expect(wrapper.findCell(start).hasClass('rc-picker-cell-range-hover-start')).toBeTruthy(); - expect(wrapper.findCell(mid).hasClass('rc-picker-cell-range-hover')).toBeTruthy(); - expect(wrapper.findCell(end).hasClass('rc-picker-cell-range-hover-end')).toBeTruthy(); + expect(findCell(start)).toHaveClass('rc-picker-cell-range-hover-start'); + expect(findCell(mid)).toHaveClass('rc-picker-cell-range-hover'); + expect(findCell(end)).toHaveClass('rc-picker-cell-range-hover-end'); // Leave - wrapper.findCell(end).simulate('mouseLeave'); - expect(wrapper.findCell(start).hasClass('rc-picker-cell-range-hover-start')).toBeFalsy(); - expect(wrapper.findCell(mid).hasClass('rc-picker-cell-range-hover')).toBeFalsy(); - expect(wrapper.findCell(end).hasClass('rc-picker-cell-range-hover-end')).toBeFalsy(); + // findCell(end).simulate('mouseLeave'); + fireEvent.mouseLeave(findCell(end)); + expect(findCell(start)).not.toHaveClass('rc-picker-cell-range-hover-start'); + expect(findCell(mid)).not.toHaveClass('rc-picker-cell-range-hover'); + expect(findCell(end)).not.toHaveClass('rc-picker-cell-range-hover-end'); }); }); it('range edge className', () => { - const wrapper = mount( + const { container } = render( , ); // End edge - wrapper.openPicker(); - wrapper.findCell(10).simulate('mouseEnter'); - expect(wrapper.findCell(19).hasClass('rc-picker-cell-range-hover-edge-end')).toBeTruthy(); - expect(wrapper.findCell(20).hasClass('rc-picker-cell-range-start-near-hover')).toBeTruthy(); - wrapper.findCell(10).simulate('mouseOut'); + openPicker(container); + // findCell(10).simulate('mouseEnter'); + fireEvent.mouseEnter(findCell(10)); + expect(findCell(19)).toHaveClass('rc-picker-cell-range-hover-edge-end'); + expect(findCell(20)).toHaveClass('rc-picker-cell-range-start-near-hover'); + // findCell(10).simulate('mouseOut'); + fireEvent.mouseOut(findCell(10)); // Start edge - wrapper.openPicker(1); - wrapper.findCell(28).simulate('mouseEnter'); - expect(wrapper.findCell(21).hasClass('rc-picker-cell-range-hover-edge-start')).toBeTruthy(); - expect(wrapper.findCell(20).hasClass('rc-picker-cell-range-end-near-hover')).toBeTruthy(); - wrapper.findCell(28).simulate('mouseOut'); + openPicker(container, 1); + // findCell(28).simulate('mouseEnter'); + fireEvent.mouseEnter(findCell(28)); + expect(findCell(21)).toHaveClass('rc-picker-cell-range-hover-edge-start'); + expect(findCell(20)).toHaveClass('rc-picker-cell-range-end-near-hover'); + // findCell(28).simulate('mouseOut'); + fireEvent.mouseOut(findCell(28)); }); }); it('should close when user focus out', () => { - const wrapper = mount(); - wrapper.openPicker(); - wrapper.selectCell(11); - expect(wrapper.isOpen()).toBeTruthy(); - - wrapper.find('input').last().simulate('blur'); - expect(wrapper.isOpen()).toBeFalsy(); + const { container } = render(); + openPicker(container); + selectCell(11); + expect(isOpen()).toBeTruthy(); + + // document.querySelector('input').last().simulate('blur'); + fireEvent.blur(container.querySelectorAll('input')[1]); + expect(isOpen()).toBeFalsy(); }); it('icon', () => { - const wrapper = mount( + const { container } = render( } @@ -630,17 +674,20 @@ describe('Picker.Range', () => { />, ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); it('block native mouseDown in panel to prevent focus changed', () => { - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); - const preventDefault = jest.fn(); - wrapper.find('td').first().simulate('mouseDown', { preventDefault }); + // const preventDefault = jest.fn(); + // document.querySelector('td').first().simulate('mouseDown', { preventDefault }); + const cell = document.querySelector('td'); + const mouseDownEvent = createEvent.mouseDown(cell); + fireEvent(cell, mouseDownEvent); - expect(preventDefault).toHaveBeenCalled(); + expect(mouseDownEvent.defaultPrevented).toBeTruthy(); }); describe('arrow position', () => { @@ -659,12 +706,15 @@ describe('Picker.Range', () => { }); it('end date arrow should move panel left', () => { - const wrapper = mount(); - wrapper.openPicker(1); - wrapper.update(); - expect((wrapper.find('.rc-picker-panel-container').props() as any).style.marginLeft).toEqual( - 200, - ); + const { container } = render(); + openPicker(container, 1); + + // expect((document.querySelector('.rc-picker-panel-container').props() as any).style.marginLeft).toEqual( + // 200, + // ); + expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ + marginLeft: 200, + }); }); }); @@ -672,18 +722,14 @@ describe('Picker.Range', () => { jest.useFakeTimers(); const onOpenChange = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); onOpenChange.mockReset(); - const clickEvent = new Event('mousedown'); - Object.defineProperty(clickEvent, 'target', { - get: () => wrapper.find('input').last().instance(), - }); act(() => { - window.dispatchEvent(clickEvent); - wrapper.find('input').first().simulate('blur'); - wrapper.find('input').last().simulate('focus'); + fireEvent.mouseDown(container.querySelectorAll('input')[1]); + fireEvent.blur(container.querySelectorAll('input')[0]); + fireEvent.focus(container.querySelectorAll('input')[1]); jest.runAllTimers(); }); @@ -714,20 +760,20 @@ describe('Picker.Range', () => { it('datetime display ok button', () => { const onCalendarChange = jest.fn(); const onOk = jest.fn(); - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); + openPicker(container); // Not trigger when not value - expect(wrapper.find('.rc-picker-ok button').props().disabled).toBeTruthy(); + expect(document.querySelector('.rc-picker-ok button').disabled).toBeTruthy(); expect(onCalendarChange).not.toHaveBeenCalled(); // Trigger when start Ok'd onCalendarChange.mockReset(); - wrapper.selectCell(11); + selectCell(11); expect(onCalendarChange).not.toHaveBeenCalled(); - wrapper.find('.rc-picker-ok button').simulate('click'); + fireEvent.click(document.querySelector('.rc-picker-ok button')); expect(onCalendarChange).toHaveBeenCalledWith( [expect.anything(), null], ['1990-09-11 00:00:00', ''], @@ -737,9 +783,9 @@ describe('Picker.Range', () => { // Trigger when end Ok'd onCalendarChange.mockReset(); - wrapper.selectCell(23); + selectCell(23); expect(onCalendarChange).not.toHaveBeenCalled(); - wrapper.find('.rc-picker-ok button').simulate('click'); + fireEvent.click(document.querySelector('.rc-picker-ok button')); expect(onCalendarChange).toHaveBeenCalledWith( [expect.anything(), expect.anything()], ['1990-09-11 00:00:00', '1990-09-23 00:00:00'], @@ -751,24 +797,23 @@ describe('Picker.Range', () => { it('datetime will reset by blur', () => { jest.useFakeTimers(); - const wrapper = mount(); - wrapper.openPicker(); - wrapper.selectCell(11); - wrapper.closePicker(); + const { container } = render(); + openPicker(container); + selectCell(11); + closePicker(container); act(() => { jest.runAllTimers(); }); - wrapper.update(); - expect(wrapper.isOpen()).toBeFalsy(); - expect(wrapper.find('input').first().props().value).toEqual(''); + expect(isOpen()).toBeFalsy(); + expect(document.querySelector('input').value).toEqual(''); jest.useRealTimers(); }); describe('viewDate', () => { - function matchTitle(wrapper: Wrapper, title: string) { - expect(wrapper.find('.rc-picker-header-view').first().text()).toEqual(title); + function matchTitle(title: string) { + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual(title); } [ @@ -820,50 +865,50 @@ describe('Picker.Range', () => { }) => { describe(picker, () => { it('defaultPickerValue', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); - matchTitle(wrapper, defaultPickerValueTitle[0]); - wrapper.openPicker(1); - matchTitle(wrapper, defaultPickerValueTitle[1]); + openPicker(container); + matchTitle(defaultPickerValueTitle[0]); + openPicker(container, 1); + matchTitle(defaultPickerValueTitle[1]); }); it('with closing value', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); - matchTitle(wrapper, closingValueTitle); - wrapper.openPicker(1); - matchTitle(wrapper, closingValueTitle); + openPicker(container); + matchTitle(closingValueTitle); + openPicker(container, 1); + matchTitle(closingValueTitle); }); it('with far value', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); - matchTitle(wrapper, farValueTitle[0]); - wrapper.openPicker(1); - matchTitle(wrapper, farValueTitle[1]); + openPicker(container); + matchTitle(farValueTitle[0]); + openPicker(container, 1); + matchTitle(farValueTitle[1]); }); it('no end date', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); - matchTitle(wrapper, farValueTitle[0]); - wrapper.openPicker(1); - matchTitle(wrapper, farValueTitle[0]); + openPicker(container); + matchTitle(farValueTitle[0]); + openPicker(container, 1); + matchTitle(farValueTitle[0]); }); }); }, @@ -871,39 +916,40 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/22991 it('click switch 1 offset', () => { - const wrapper = mount(); - wrapper.openPicker(); - expect(wrapper.find('.rc-picker-header-view').first().text()).toEqual('Sep1990'); - wrapper.find('.rc-picker-header-next-btn').last().simulate('click'); - expect(wrapper.find('.rc-picker-header-view').first().text()).toEqual('Oct1990'); + const { container } = render(); + openPicker(container); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('Sep1990'); + const nextBtns = document.querySelectorAll('.rc-picker-header-next-btn'); + fireEvent.click(nextBtns[nextBtns.length - 1]); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('Oct1990'); }); }); // https://github.com/ant-design/ant-design/issues/20868 it('change picker should reset mode', () => { - const wrapper = mount(); - wrapper.openPicker(); - expect(wrapper.find('DatePanel').length).toBeTruthy(); - - wrapper.setProps({ picker: 'month' }); - wrapper.update(); - expect(wrapper.find('DatePanel').length).toBeFalsy(); - expect(wrapper.find('MonthPanel').length).toBeTruthy(); + const { container, rerender } = render(); + openPicker(container); + expect(document.querySelector('.rc-picker-date-panel')).toBeTruthy(); + + rerender(); + + expect(document.querySelector('.rc-picker-date-panel')).toBeFalsy(); + expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy(); }); describe('reorder onChange logic', () => { it('datetime should reorder in onChange if start is after end in same date', () => { const onChange = jest.fn(); - const wrapper = mount(); - wrapper.openPicker(); - wrapper.selectCell(15); - wrapper.find('ul').first().find('li').last().simulate('click'); - wrapper.find('.rc-picker-ok button').simulate('click'); + const { container } = render(); + openPicker(container); + selectCell(15); + fireEvent.click(findLast(document.querySelector('ul'), 'li')); + fireEvent.click(document.querySelector('.rc-picker-ok button')); - wrapper.selectCell(15); - wrapper.find('ul').first().find('li').first().simulate('click'); - wrapper.find('.rc-picker-ok button').simulate('click'); + selectCell(15); + fireEvent.click(document.querySelector('ul').querySelector('li')); + fireEvent.click(document.querySelector('.rc-picker-ok button')); expect(onChange).toHaveBeenCalledWith(expect.anything(), [ '1990-09-15 00:00:00', @@ -918,15 +964,15 @@ describe('Picker.Range', () => { it(`order: ${String(order)} when picker is time`, () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); - wrapper.find('ul').first().find('li').last().simulate('click'); - wrapper.find('.rc-picker-ok button').simulate('click'); + openPicker(container); + fireEvent.click(findLast(document.querySelector('ul'), 'li')); + fireEvent.click(document.querySelector('.rc-picker-ok button')); - wrapper.find('ul').first().find('li').at(2).simulate('click'); - wrapper.find('.rc-picker-ok button').simulate('click'); + fireEvent.click(document.querySelector('ul').querySelectorAll('li')[2]); + fireEvent.click(document.querySelector('.rc-picker-ok button')); expect(onChange).toHaveBeenCalledWith(expect.anything(), [start, end]); @@ -940,14 +986,14 @@ describe('Picker.Range', () => { }); it('id', () => { - const wrapper = mount(); - expect(wrapper.find('input').first().props().id).toEqual('bamboo'); + const { container } = render(); + expect(container.querySelector('input').id).toEqual('bamboo'); }); it('dateRender', () => { let range = 'start'; - const wrapper = mount( + const { container } = render( { @@ -956,20 +1002,20 @@ describe('Picker.Range', () => { }} />, ); - expect(wrapper.find('tbody td').last().text()).toEqual('1990-11-10'); + expect(findLast(document, 'tbody td').textContent).toEqual('1990-11-10'); range = 'end'; - wrapper.openPicker(1); + openPicker(container, 1); }); // https://github.com/ant-design/ant-design/issues/21084 it('should not jump back to current date after select', () => { - const wrapper = mount(); - wrapper.openPicker(); - wrapper.clickButton('super-prev'); - wrapper.selectCell(3); - wrapper.selectCell(4); - matchValues(wrapper, '1989-09-03', '1989-09-04'); + const { container } = render(); + openPicker(container); + clickButton('super-prev'); + selectCell(3); + selectCell(4); + matchValues(container, '1989-09-03', '1989-09-04'); }); describe('can select endDate when in same level', () => { @@ -980,27 +1026,27 @@ describe('Picker.Range', () => { const list: { picker: PickerMode; defaultValue: string[]; - selectCell: string; + targetCell: string; match: string[]; }[] = [ { picker: 'week', defaultValue: ['2020-06-13'], - selectCell: '9', + targetCell: '9', match: ['2020-24th'], }, { picker: 'quarter', defaultValue: ['2020-03-30', '2020-05-20'], - selectCell: 'Q1', + targetCell: 'Q1', match: ['2020-Q1'], }, ]; - list.forEach(({ picker, defaultValue, match, selectCell }) => { + list.forEach(({ picker, defaultValue, match, targetCell }) => { it(picker, () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( { ]} />, ); - wrapper.openPicker(1); - wrapper.selectCell(selectCell); + openPicker(container, 1); + selectCell(targetCell); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith(expect.anything(), [match[0], match[1] || match[0]]); }); @@ -1019,19 +1065,19 @@ describe('Picker.Range', () => { }); it('should not disabled when week picker in diff year', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(1); - expect(wrapper.findCell('15').hasClass('rc-picker-cell-disabled')).toBeFalsy(); + openPicker(container, 1); + expect(findCell('15')).not.toHaveClass('rc-picker-cell-disabled'); }); it('format', () => { - const wrapper = mount( + const { container } = render( { ); // Start date - wrapper.openPicker(); - wrapper - .find('input') - .first() - .simulate('change', { - target: { - value: '1989-09-03', - }, - }); - wrapper.closePicker(); + openPicker(container); + + fireEvent.change(container.querySelector('input'), { + target: { + value: '1989-09-03', + }, + }); + closePicker(container); // end date - wrapper.openPicker(1); - wrapper - .find('input') - .last() - .simulate('change', { - target: { - value: '1990-11-28', - }, - }); - wrapper.closePicker(1); + openPicker(container, 1); + act(() => { + jest.runAllTimers(); + }); + fireEvent.change(container.querySelectorAll('input')[1], { + target: { + value: '1990-11-28', + }, + }); + + // Force blur since fireEvent blur will not change document.activeElement + container.querySelectorAll('input')[1].blur(); + closePicker(container, 1); - expect(wrapper.find('input').first().prop('value')).toEqual('19890903'); - expect(wrapper.find('input').last().prop('value')).toEqual('19901128'); + expect(document.querySelectorAll('input')[0].value).toEqual('19890903'); + expect(document.querySelectorAll('input')[1].value).toEqual('19901128'); }); it('custom format', () => { - const wrapper = mount( + const { container } = render( `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']} @@ -1075,127 +1122,128 @@ describe('Picker.Range', () => { />, ); - expect(wrapper.find('input').first().prop('readOnly')).toBeTruthy(); - expect(wrapper.find('input').last().prop('readOnly')).toBeTruthy(); + expect(document.querySelectorAll('input')[0]).toHaveAttribute('readOnly'); + expect(document.querySelectorAll('input')[1]).toHaveAttribute('readOnly'); // Start date - wrapper.openPicker(); - wrapper.selectCell(24); - wrapper.closePicker(); + openPicker(container); + selectCell(24); + closePicker(container); // end date - wrapper.openPicker(1); - wrapper.selectCell(24, 1); - wrapper.closePicker(1); + openPicker(container, 1); + selectCell(24, 1); + closePicker(container, 1); - expect(wrapper.find('input').first().prop('value')).toEqual('custom format:20200924'); - expect(wrapper.find('input').last().prop('value')).toEqual('custom format:20201024'); + expect(document.querySelectorAll('input')[0].value).toEqual('custom format:20200924'); + expect(document.querySelectorAll('input')[1].value).toEqual('custom format:20201024'); // clear - const clearNode = wrapper.find('.rc-picker-clear'); - expect(clearNode.simulate.bind(clearNode, 'mouseUp')).not.toThrow(); - expect(wrapper.find('input').first().prop('value')).toEqual(''); - expect(wrapper.find('input').last().prop('value')).toEqual(''); + const clearNode = document.querySelector('.rc-picker-clear'); + // expect(clearNode.simulate.bind(clearNode, 'mouseUp')).not.toThrow(); + fireEvent.mouseUp(clearNode); + expect(document.querySelectorAll('input')[0].value).toEqual(''); + expect(document.querySelectorAll('input')[1].value).toEqual(''); }); describe('auto open', () => { it('empty: start -> end -> close', () => { - const wrapper = mount(); + const { container } = render(); - wrapper.openPicker(0); - wrapper.inputValue('1990-11-28'); - wrapper.closePicker(0); - expect(wrapper.isOpen()).toBeTruthy(); + openPicker(container, 0); + inputValue('1990-11-28'); + closePicker(container, 0); + expect(isOpen()).toBeTruthy(); - wrapper.inputValue('1991-01-01'); - wrapper.closePicker(1); - expect(wrapper.isOpen()).toBeFalsy(); + inputValue('1991-01-01'); + closePicker(container, 1); + expect(isOpen()).toBeFalsy(); }); describe('valued: start -> end -> close', () => { it('in range', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(0); - wrapper.inputValue('1990-11-28'); - wrapper.closePicker(0); - expect(wrapper.isOpen()).toBeTruthy(); + openPicker(container, 0); + inputValue('1990-11-28'); + closePicker(container, 0); + expect(isOpen()).toBeTruthy(); - wrapper.inputValue('1990-12-23'); - wrapper.closePicker(1); - expect(wrapper.isOpen()).toBeFalsy(); + inputValue('1990-12-23'); + closePicker(container, 1); + expect(isOpen()).toBeFalsy(); }); it('new start is after end', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(0); - wrapper.inputValue('1989-01-20'); - wrapper.closePicker(0); - expect(wrapper.isOpen()).toBeTruthy(); + openPicker(container, 0); + inputValue('1989-01-20'); + closePicker(container, 0); + expect(isOpen()).toBeTruthy(); - wrapper.inputValue('1989-01-25'); - wrapper.closePicker(1); - expect(wrapper.isOpen()).toBeFalsy(); + inputValue('1989-01-25'); + closePicker(container, 1); + expect(isOpen()).toBeFalsy(); }); }); it('empty: end -> start -> close', () => { - const wrapper = mount(); + const { container } = render(); - wrapper.openPicker(1); - wrapper.inputValue('1990-11-28', 1); - wrapper.closePicker(1); - expect(wrapper.isOpen()).toBeTruthy(); + openPicker(container, 1); + inputValue('1990-11-28', 1); + closePicker(container, 1); + expect(isOpen()).toBeTruthy(); - wrapper.inputValue('1989-01-01'); - wrapper.closePicker(0); - expect(wrapper.isOpen()).toBeFalsy(); + inputValue('1989-01-01'); + closePicker(container, 0); + expect(isOpen()).toBeFalsy(); }); describe('valued: end -> start -> close', () => { it('in range', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(1); - wrapper.inputValue('1990-11-28', 1); - wrapper.closePicker(1); - expect(wrapper.isOpen()).toBeTruthy(); + openPicker(container, 1); + inputValue('1990-11-28', 1); + closePicker(container, 1); + expect(isOpen()).toBeTruthy(); - wrapper.inputValue('1989-01-01'); - wrapper.closePicker(0); - expect(wrapper.isOpen()).toBeFalsy(); + inputValue('1989-01-01'); + closePicker(container, 0); + expect(isOpen()).toBeFalsy(); }); it('new end is before start', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(1); - wrapper.inputValue('1989-01-07', 1); - wrapper.closePicker(1); - expect(wrapper.isOpen()).toBeTruthy(); + openPicker(container, 1); + inputValue('1989-01-07', 1); + closePicker(container, 1); + expect(isOpen()).toBeTruthy(); - wrapper.inputValue('1989-01-01'); - wrapper.closePicker(0); - expect(wrapper.isOpen()).toBeFalsy(); + inputValue('1989-01-01'); + closePicker(container, 0); + expect(isOpen()).toBeFalsy(); }); }); it('not change: start not to end', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(0); - wrapper.closePicker(0); - expect(wrapper.isOpen()).toBeFalsy(); + openPicker(container, 0); + closePicker(container, 0); + expect(isOpen()).toBeFalsy(); }); }); @@ -1221,42 +1269,47 @@ describe('Picker.Range', () => { }); it("shouldn't let mousedown blur the input", () => { jest.useFakeTimers(); - const preventDefault = jest.fn(); - const wrapper = mount(, { - attachTo: document.body, - }); - wrapper.find('.rc-picker').simulate('click'); - jest.runAllTimers(); - wrapper.find('.rc-picker').simulate('mousedown', { - preventDefault, + // const preventDefault = jest.fn(); + const { container } = render(); + const node = container.querySelector('.rc-picker'); + // document.querySelector('.rc-picker').simulate('click'); + fireEvent.click(node); + act(() => { + jest.runAllTimers(); }); - expect(wrapper.isOpen()).toBeTruthy(); - expect(preventDefault).toHaveBeenCalled(); + // document.querySelector('.rc-picker').simulate('mousedown', { + // preventDefault, + // }); + const mouseDownEvent = createEvent.mouseDown(node); + fireEvent(node, mouseDownEvent); + expect(isOpen()).toBeTruthy(); + // expect(preventDefault).toHaveBeenCalled(); + expect(mouseDownEvent.defaultPrevented).toBeTruthy(); jest.useRealTimers(); }); }); it('panelRender', () => { - const wrapper = mount(

    Light

    } />); - expect(wrapper.render()).toMatchSnapshot(); + render(

    Light

    } />); + expect(document.body).toMatchSnapshot(); }); describe('Selection callbacks', () => { it('selection provide info for onCalendarChange', () => { const onCalendarChange = jest.fn(); - const wrapper = mount(); + const { container } = render(); - wrapper.openPicker(); + openPicker(container); // Start date - wrapper.selectCell(11); + selectCell(11); expect(onCalendarChange).toHaveBeenCalledWith([expect.anything(), null], ['1990-09-11', ''], { range: 'start', }); // End date - wrapper.selectCell(23); + selectCell(23); expect(onCalendarChange).toHaveBeenCalledWith( [expect.anything(), expect.anything()], ['1990-09-11', '1990-09-23'], @@ -1276,131 +1329,152 @@ describe('Picker.Range', () => { const defaultValue: [Moment, Moment] = [getMoment('2020-07-22'), getMoment('2020-08-22')]; it('should restore when leave', () => { - const wrapper = mount(); + const { container } = render(); // left - wrapper.openPicker(0); - const leftCell = wrapper.findCell(24); - leftCell.simulate('mouseEnter'); + openPicker(container, 0); + const leftCell = findCell(24); + // leftCell.simulate('mouseEnter'); + fireEvent.mouseEnter(leftCell); jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('input').first().prop('value')).toBe('2020-07-24'); - expect(wrapper.find('input').last().prop('value')).toBe('2020-08-22'); - expect( - wrapper.find('.rc-picker-input').first().hasClass('rc-picker-input-placeholder'), - ).toBeTruthy(); - expect( - wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); - - leftCell.simulate('mouseLeave'); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('input').first().prop('value')).toBe('2020-07-22'); - expect(wrapper.find('input').last().prop('value')).toBe('2020-08-22'); - expect( - wrapper.find('.rc-picker-input').first().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); - expect( - wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); - - wrapper.closePicker(0); + + expect(document.querySelectorAll('input')[0].value).toBe('2020-07-24'); + expect(document.querySelectorAll('input')[1].value).toBe('2020-08-22'); + expect(document.querySelectorAll('.rc-picker-input')[0]).toHaveClass( + 'rc-picker-input-placeholder', + ); + expect(document.querySelectorAll('.rc-picker-input')[1]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + + // leftCell.simulate('mouseLeave'); + fireEvent.mouseLeave(leftCell); + act(() => { + jest.runAllTimers(); + }); + + expect(document.querySelectorAll('input')[0].value).toBe('2020-07-22'); + expect(document.querySelectorAll('input')[1].value).toBe('2020-08-22'); + expect(document.querySelectorAll('.rc-picker-input')[0]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + expect(document.querySelectorAll('.rc-picker-input')[1]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + + closePicker(container, 0); // right - wrapper.openPicker(1); - const rightCell = wrapper.findCell(24, 1); - rightCell.simulate('mouseEnter'); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('input').first().prop('value')).toBe('2020-07-22'); - expect(wrapper.find('input').last().prop('value')).toBe('2020-08-24'); - expect( - wrapper.find('.rc-picker-input').first().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); - expect( - wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-placeholder'), - ).toBeTruthy(); - - rightCell.simulate('mouseLeave'); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('input').first().prop('value')).toBe('2020-07-22'); - expect(wrapper.find('input').last().prop('value')).toBe('2020-08-22'); - expect( - wrapper.find('.rc-picker-input').first().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); - expect( - wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); - - wrapper.closePicker(1); + openPicker(container, 1); + const rightCell = findCell(24, 1); + fireEvent.mouseEnter(rightCell); + act(() => { + jest.runAllTimers(); + }); + + expect(document.querySelectorAll('input')[0].value).toBe('2020-07-22'); + expect(document.querySelectorAll('input')[1].value).toBe('2020-08-24'); + expect(document.querySelectorAll('.rc-picker-input')[0]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass( + 'rc-picker-input-placeholder', + ); + + fireEvent.mouseLeave(rightCell); + act(() => { + jest.runAllTimers(); + }); + + expect(document.querySelectorAll('input')[0].value).toBe('2020-07-22'); + expect(document.querySelectorAll('input')[1].value).toBe('2020-08-22'); + expect(document.querySelectorAll('.rc-picker-input')[0]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + expect(document.querySelectorAll('.rc-picker-input')[1]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + + closePicker(container, 1); }); it('should restore after selecting cell', () => { - const wrapper = mount(); + const { container } = render(); // left - wrapper.openPicker(0); - const leftCell = wrapper.findCell(24, 0); - leftCell.simulate('mouseEnter'); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('input').first().prop('value')).toBe('2020-07-24'); - expect(wrapper.find('input').last().prop('value')).toBe('2020-08-22'); - expect( - wrapper.find('.rc-picker-input').first().hasClass('rc-picker-input-placeholder'), - ).toBeTruthy(); - expect( - wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); - - wrapper.selectCell(24, 0); - expect(wrapper.find('input').first().prop('value')).toBe('2020-07-24'); - expect(wrapper.find('input').last().prop('value')).toBe('2020-08-22'); - expect( - wrapper.find('.rc-picker-input').first().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); - expect( - wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); + openPicker(container, 0); + const leftCell = findCell(24, 0); + // leftCell.simulate('mouseEnter'); + fireEvent.mouseEnter(leftCell); + act(() => { + jest.runAllTimers(); + }); + expect(document.querySelectorAll('input')[0].value).toBe('2020-07-24'); + expect(document.querySelectorAll('input')[1].value).toBe('2020-08-22'); + expect(document.querySelectorAll('.rc-picker-input')[0]).toHaveClass( + 'rc-picker-input-placeholder', + ); + // ).toBeTruthy(); + expect(document.querySelectorAll('.rc-picker-input')[1]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + // ).toBeFalsy(); + + selectCell(24, 0); + expect(document.querySelectorAll('input')[0].value).toBe('2020-07-24'); + expect(document.querySelectorAll('input')[1].value).toBe('2020-08-22'); + expect(document.querySelectorAll('.rc-picker-input')[0]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + // ).toBeFalsy(); + expect(document.querySelectorAll('.rc-picker-input')[1]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + // ).toBeFalsy(); // right - const rightCell = wrapper.findCell(24, 1); - rightCell.simulate('mouseEnter'); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('input').first().prop('value')).toBe('2020-07-24'); - expect(wrapper.find('input').last().prop('value')).toBe('2020-08-24'); - expect( - wrapper.find('.rc-picker-input').first().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); - expect( - wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-placeholder'), - ).toBeTruthy(); - - wrapper.selectCell(24, 1); - expect(wrapper.find('input').first().prop('value')).toBe('2020-07-24'); - expect(wrapper.find('input').last().prop('value')).toBe('2020-08-24'); - expect( - wrapper.find('.rc-picker-input').first().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); - expect( - wrapper.find('.rc-picker-input').last().hasClass('rc-picker-input-placeholder'), - ).toBeFalsy(); + const rightCell = findCell(24, 1); + // rightCell.simulate('mouseEnter'); + fireEvent.mouseEnter(rightCell); + act(() => { + jest.runAllTimers(); + }); + + expect(document.querySelectorAll('input')[0].value).toBe('2020-07-24'); + expect(document.querySelectorAll('input')[1].value).toBe('2020-08-24'); + expect(document.querySelectorAll('.rc-picker-input')[0]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + // ).toBeFalsy(); + expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass( + 'rc-picker-input-placeholder', + ); + // ).toBeTruthy(); + + selectCell(24, 1); + expect(document.querySelectorAll('input')[0].value).toBe('2020-07-24'); + expect(document.querySelectorAll('input')[1].value).toBe('2020-08-24'); + expect(document.querySelectorAll('.rc-picker-input')[0]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + // ).toBeFalsy(); + expect(document.querySelectorAll('.rc-picker-input')[1]).not.toHaveClass( + 'rc-picker-input-placeholder', + ); + // ).toBeFalsy(); }); // https://github.com/ant-design/ant-design/issues/26544 it('should clean hover style when selecting the same value with last value', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.openPicker(); + openPicker(container); - wrapper.selectCell(24, 0); - expect(wrapper.find('input').first().prop('value')).toBe('2020-07-24'); - expect(wrapper.find('input').first().hasClass('rc-picker-input-placeholder')).toBeFalsy(); - expect(wrapper.isOpen()).toBeTruthy(); + selectCell(24, 0); + expect(document.querySelectorAll('input')[0].value).toBe('2020-07-24'); + expect(document.querySelectorAll('input')[0]).not.toHaveClass('rc-picker-input-placeholder'); + expect(isOpen()).toBeTruthy(); }); }); @@ -1410,7 +1484,7 @@ describe('Picker.Range', () => { // Can not select days before today and today return true; }; - const wrapper = mount( + const { container } = render( { />, ); - wrapper.openPicker(); + openPicker(container); - expect(wrapper.find('.rc-picker-ok button').props().disabled).toBeTruthy(); + expect(document.querySelector('.rc-picker-ok button').disabled).toBeTruthy(); - wrapper - .find('PickerPanel') - .first() - .find('.rc-picker-time-panel-column') - .first() - .find('li') - .at(6) - .simulate('click'); + fireEvent.click( + document.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[6], + ); - expect(wrapper.find('input').first().props().value).toEqual('2020-07-24 06:00:00'); - expect(wrapper.find('.rc-picker-ok button').props().disabled).toBeTruthy(); + expect(document.querySelectorAll('input')[0].value).toEqual('2020-07-24 06:00:00'); + expect(document.querySelector('.rc-picker-ok button').disabled).toBeTruthy(); }); // https://github.com/ant-design/ant-design/issues/26024 it('panel should keep open when nextValue is empty', () => { - const wrapper = mount(); + const { container } = render(); - wrapper.openPicker(0); + openPicker(container, 0); - wrapper.selectCell(7, 0); - expect(wrapper.find('input').first().prop('value')).toBe('1990-09-07'); + selectCell(7, 0); + expect(document.querySelectorAll('input')[0].value).toBe('1990-09-07'); // back to first panel and clear input value - wrapper.find('input').first().simulate('focus'); - wrapper.inputValue('', 0); + fireEvent.focus(document.querySelectorAll('input')[0]); + inputValue('', 0); // reselect date - wrapper.selectCell(9, 0); - expect(wrapper.find('input').first().prop('value')).toBe('1990-09-09'); + selectCell(9, 0); + expect(document.querySelectorAll('input')[0].value).toBe('1990-09-09'); // end date - wrapper.selectCell(9, 1); + selectCell(9, 1); - matchValues(wrapper, '1990-09-09', '1990-10-09'); + matchValues(container, '1990-09-09', '1990-10-09'); }); it('right date panel switch to month should keep in the same year', () => { - const wrapper = mount(); - wrapper.openPicker(0); - wrapper.find('.rc-picker-month-btn').last().simulate('click'); - expect(wrapper.find('.rc-picker-year-btn').text()).toEqual('1990'); + const { container } = render(); + openPicker(container, 0); + fireEvent.click(document.querySelectorAll('.rc-picker-month-btn')[1]); + expect(document.querySelector('.rc-picker-year-btn').textContent).toEqual('1990'); }); // https://github.com/ant-design/ant-design/issues/26390 it('month panel should be disabled', () => { - const wrapper = mount(); - wrapper.openPicker(); - wrapper.selectCell(15); + const { container } = render(); + openPicker(container); + selectCell(15); - wrapper.find('.rc-picker-month-btn').first().simulate('click'); - expect(wrapper.findCell('Jan').hasClass('rc-picker-cell-disabled')).toBeTruthy(); - expect(wrapper.findCell('Dec').hasClass('rc-picker-cell-disabled')).toBeFalsy(); + fireEvent.click(document.querySelector('.rc-picker-month-btn')); + expect(findCell('Jan')).toHaveClass('rc-picker-cell-disabled'); + expect(findCell('Dec')).not.toHaveClass('rc-picker-cell-disabled'); }); // https://github.com/ant-design/ant-design/issues/23167 it('default endDate should be relative startDate', () => { - const wrapper = mount(); - wrapper.openPicker(); + const { container } = render(); + openPicker(container); - wrapper.selectCell(24); - wrapper.find('.rc-picker-ok button').simulate('click'); + selectCell(24); + fireEvent.click(document.querySelector('.rc-picker-ok button')); - wrapper.find('ul').first().find('li').at(0).simulate('click'); - wrapper.find('.rc-picker-ok button').simulate('click'); + fireEvent.click(document.querySelector('ul').querySelector('li')); + fireEvent.click(document.querySelector('.rc-picker-ok button')); - matchValues(wrapper, '1990-09-24 00:00:00', '1990-09-24 00:00:00'); + matchValues(container, '1990-09-24 00:00:00', '1990-09-24 00:00:00'); }); it('default startDate should be relative endDate', () => { - const wrapper = mount(); - wrapper.openPicker(1); + const { container } = render(); + openPicker(container, 1); - wrapper.selectCell(24); - wrapper.find('.rc-picker-ok button').simulate('click'); + selectCell(24); + fireEvent.click(document.querySelector('.rc-picker-ok button')); - wrapper.find('ul').first().find('li').at(0).simulate('click'); - wrapper.find('.rc-picker-ok button').simulate('click'); + fireEvent.click(document.querySelector('ul').querySelector('li')); + fireEvent.click(document.querySelector('.rc-picker-ok button')); - matchValues(wrapper, '1990-09-24 00:00:00', '1990-09-24 00:00:00'); + matchValues(container, '1990-09-24 00:00:00', '1990-09-24 00:00:00'); }); // https://github.com/ant-design/ant-design/issues/30893 it('range picker should have onMouseEnter and onMouseLeave event', () => { const handleMouseEnter = jest.fn(); const handleMouseLeave = jest.fn(); - const wrapper = mount( + const { container } = render( , ); - wrapper.simulate('mouseenter'); + // wrapper.simulate('mouseenter'); + fireEvent.mouseEnter(container.querySelector('.rc-picker')); expect(handleMouseEnter).toHaveBeenCalled(); - wrapper.simulate('mouseleave'); + // wrapper.simulate('mouseleave'); + fireEvent.mouseLeave(container.querySelector('.rc-picker')); expect(handleMouseLeave).toHaveBeenCalled(); }); @@ -1523,35 +1594,46 @@ describe('Picker.Range', () => { const disabledDate = (current: Moment) => { return current.diff(now, 'days') > 1 || current.diff(now, 'days') < -1; }; - const wrapper = mount( + const { container } = render( , ); - wrapper.find('input').first().simulate('focus'); - wrapper.keyDown(KeyCode.ENTER); - wrapper.keyDown(KeyCode.TAB); + fireEvent.focus(document.querySelector('input')); + + function pickerKeyDown(keyCode: number) { + fireEvent.keyDown(container.querySelector('.rc-picker'), { + keyCode, + which: keyCode, + charCode: keyCode, + }); + } + + pickerKeyDown(KeyCode.ENTER); + pickerKeyDown(KeyCode.TAB); // Make sure the selected value is disabledDate. Because only a few values are disabledDate - wrapper.keyDown(KeyCode.DOWN); - wrapper.keyDown(KeyCode.DOWN); - wrapper.keyDown(KeyCode.DOWN); - wrapper.keyDown(KeyCode.DOWN); - wrapper.keyDown(KeyCode.DOWN); - wrapper.keyDown(KeyCode.DOWN); - wrapper.keyDown(KeyCode.ENTER); + pickerKeyDown(KeyCode.DOWN); + pickerKeyDown(KeyCode.DOWN); + pickerKeyDown(KeyCode.DOWN); + pickerKeyDown(KeyCode.DOWN); + pickerKeyDown(KeyCode.DOWN); + pickerKeyDown(KeyCode.DOWN); + pickerKeyDown(KeyCode.ENTER); expect(onCalendarChange).not.toHaveBeenCalled(); }); // https://github.com/ant-design/ant-design/issues/33662 it('range picker should have onClick event', () => { const handleClick = jest.fn(); - const wrapper = mount(); - wrapper.simulate('click'); + const { container } = render(); + // wrapper.simulate('click'); + fireEvent.click(container.querySelector('.rc-picker')); expect(handleClick).toHaveBeenCalled(); }); it('range picker should have onMouseDown event', () => { const handleMouseDown = jest.fn(); - const wrapper = mount(); - wrapper.simulate('mousedown'); + const { container } = render(); + // wrapper.simulate('mousedown'); + fireEvent.mouseDown(container.querySelector('.rc-picker')); expect(handleMouseDown).toHaveBeenCalled(); }); @@ -1578,7 +1660,7 @@ describe('Picker.Range', () => { }, }, }); - const wrapper = mount( + const { container } = render( { suffixIcon={O} />, ); - wrapper.openPicker(1); - expect( - wrapper.find('.rc-picker-panel-container').getDOMNode().style.marginLeft, - ).toBe('0px'); + openPicker(container, 1); + expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ marginLeft: 0 }); mock.mockRestore(); }); @@ -1616,7 +1696,7 @@ describe('Picker.Range', () => { }, }, }); - const wrapper = mount( + const { container } = render( { suffixIcon={O} />, ); - wrapper.openPicker(1); - expect( - wrapper.find('.rc-picker-panel-container').getDOMNode().style.marginLeft, - ).toBe('0px'); + openPicker(container, 1); + expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ marginLeft: 0 }); mock.mockRestore(); }); @@ -1654,7 +1732,7 @@ describe('Picker.Range', () => { }, }, }); - const wrapper = mount( + const { container } = render( { suffixIcon={O} />, ); - wrapper.openPicker(1); - expect( - wrapper.find('.rc-picker-panel-container').getDOMNode().style.marginLeft, - ).toBe('295px'); + openPicker(container, 1); + expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ + marginLeft: '295px', + }); mock.mockRestore(); }); }); diff --git a/tests/setup.js b/tests/setup.js index df5d140..f2601cd 100644 --- a/tests/setup.js +++ b/tests/setup.js @@ -1,85 +1,85 @@ -global.requestAnimationFrame = callback => { - global.setTimeout(callback, 0); -}; +// global.requestAnimationFrame = callback => { +// global.setTimeout(callback, 0); +// }; -global.cancelAnimationFrame = id => { - global.clearTimeout(id); -}; +// global.cancelAnimationFrame = id => { +// global.clearTimeout(id); +// }; -const Enzyme = require('enzyme'); -const Adapter = require('enzyme-adapter-react-16'); +// const Enzyme = require('enzyme'); +// const Adapter = require('@wojtekmaj/enzyme-adapter-react-17'); -Enzyme.configure({ adapter: new Adapter() }); +// Enzyme.configure({ adapter: new Adapter() }); -Object.assign(Enzyme.ReactWrapper.prototype, { - openPicker(index = 0) { - this.find('input') - .at(index) - .simulate('mousedown') - .simulate('focus'); - }, - closePicker(index = 0) { - this.find('input') - .at(index) - .simulate('blur'); - }, - confirmOK() { - this.find('.rc-picker-ok > *').simulate('click'); - }, - isOpen() { - const openDiv = this.find('.rc-picker-dropdown').hostNodes(); - return openDiv && openDiv.length && !openDiv.hasClass('rc-picker-dropdown-hidden'); - }, - findCell(text, index = 0) { - let matchCell; +// Object.assign(Enzyme.ReactWrapper.prototype, { +// openPicker(index = 0) { +// this.find('input') +// .at(index) +// .simulate('mousedown') +// .simulate('focus'); +// }, +// closePicker(index = 0) { +// this.find('input') +// .at(index) +// .simulate('blur'); +// }, +// confirmOK() { +// this.find('.rc-picker-ok > *').simulate('click'); +// }, +// isOpen() { +// const openDiv = this.find('.rc-picker-dropdown').hostNodes(); +// return openDiv && openDiv.length && !openDiv.hasClass('rc-picker-dropdown-hidden'); +// }, +// findCell(text, index = 0) { +// let matchCell; - const table = this.find('table').at(index); +// const table = this.find('table').at(index); - table.find('td').forEach(td => { - if (td.text() === String(text) && td.props().className.includes('-in-view')) { - matchCell = td; - } - }); - if (!matchCell) { - throw new Error('Cell not match in picker panel.'); - } +// table.find('td').forEach(td => { +// if (td.text() === String(text) && td.props().className.includes('-in-view')) { +// matchCell = td; +// } +// }); +// if (!matchCell) { +// throw new Error('Cell not match in picker panel.'); +// } - return matchCell; - }, - selectCell(text, index = 0) { - const td = this.findCell(text, index); - td.simulate('click'); +// return matchCell; +// }, +// selectCell(text, index = 0) { +// const td = this.findCell(text, index); +// td.simulate('click'); - return td; - }, - clickButton(type) { - let matchBtn; - this.find('button').forEach(btn => { - if (btn.props().className.includes(`-header-${type}-btn`)) { - matchBtn = btn; - } - }); +// return td; +// }, +// clickButton(type) { +// let matchBtn; +// this.find('button').forEach(btn => { +// if (btn.props().className.includes(`-header-${type}-btn`)) { +// matchBtn = btn; +// } +// }); - matchBtn.simulate('click'); +// matchBtn.simulate('click'); - return matchBtn; - }, - clearValue() { - this.find('.rc-picker-clear-btn').simulate('mouseDown'); - this.find('.rc-picker-clear-btn').simulate('mouseUp'); - }, - keyDown(which, info = {}, index = 0) { - let component = this.find('input'); +// return matchBtn; +// }, +// clearValue() { +// this.find('.rc-picker-clear-btn').simulate('mouseDown'); +// this.find('.rc-picker-clear-btn').simulate('mouseUp'); +// }, +// keyDown(which, info = {}, index = 0) { +// let component = this.find('input'); - if (component.length === 0) { - component = this.find('.rc-picker-panel'); - } +// if (component.length === 0) { +// component = this.find('.rc-picker-panel'); +// } - component.at(index).simulate('keydown', { ...info, which }); - }, - inputValue(text, index = 0) { - this.find('input') - .at(index) - .simulate('change', { target: { value: text } }); - }, -}); +// component.at(index).simulate('keydown', { ...info, which }); +// }, +// inputValue(text, index = 0) { +// this.find('input') +// .at(index) +// .simulate('change', { target: { value: text } }); +// }, +// }); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 155d2fa..8e91df9 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { mount as originMount, ReactWrapper } from 'enzyme'; +// import { mount as originMount, ReactWrapper } from 'enzyme'; +import { fireEvent } from '@testing-library/react'; import moment, { Moment, unitOfTime } from 'moment'; -import Picker, { PickerProps, PickerPanel } from '../../src'; +import Picker, { PickerPanel, PickerProps } from '../../src'; import momentGenerateConfig from '../../src/generate/moment'; import enUS from '../../src/locale/en_US'; import { PickerBaseProps, PickerDateProps, PickerTimeProps } from '../../src/Picker'; @@ -18,20 +19,20 @@ import RangePicker, { const FULL_FORMAT = 'YYYY-MM-DD HH:mm:ss'; -export type Wrapper = ReactWrapper & { - confirmOK: () => void; - openPicker: (index?: number) => void; - closePicker: (index?: number) => void; - isOpen: () => boolean; - findCell: (text: number | string, index?: number) => Wrapper; - selectCell: (text: number | string, index?: number) => Wrapper; - clearValue: (index?: number) => void; - keyDown: (which: number, info?: object, index?: number) => void; - clickButton: (type: 'prev' | 'next' | 'super-prev' | 'super-next') => Wrapper; - inputValue: (text: string, index?: number) => Wrapper; -}; - -export const mount = originMount as (...args: Parameters) => Wrapper; +// export type Wrapper = ReactWrapper & { +// confirmOK: () => void; +// openPicker: (index?: number) => void; +// closePicker: (index?: number) => void; +// isOpen: () => boolean; +// findCell: (text: number | string, index?: number) => Wrapper; +// selectCell: (text: number | string, index?: number) => Wrapper; +// clearValue: (index?: number) => void; +// keyDown: (which: number, info?: object, index?: number) => void; +// clickButton: (type: 'prev' | 'next' | 'super-prev' | 'super-next') => Wrapper; +// inputValue: (text: string, index?: number) => Wrapper; +// }; + +// export const mount = originMount as (...args: Parameters) => Wrapper; export function getMoment(str: string): Moment { const formatList = [FULL_FORMAT, 'YYYY-MM-DD', 'HH:mm:ss', 'YYYY']; @@ -114,3 +115,71 @@ export class MomentRangePicker extends React.Component { ); } } + +// ====================================== UTIL ====================================== +export function openPicker(container: HTMLElement, index = 0) { + const input = container.querySelectorAll('input')[index]; + fireEvent.mouseDown(input); + fireEvent.focus(input); +} + +export function closePicker(container: HTMLElement, index = 0) { + const input = container.querySelectorAll('input')[index]; + fireEvent.blur(input); +} + +export function isOpen() { + const dropdown = document.querySelector('.rc-picker-dropdown'); + return dropdown && !dropdown.classList.contains('rc-picker-dropdown-hidden'); +} + +export function findCell(text: string | number, index = 0) { + let matchCell: HTMLElement; + + const table = document.querySelectorAll('table')[index]; + + Array.from(table.querySelectorAll('td')).forEach((td) => { + if (td.textContent === String(text) && td.className.includes('-in-view')) { + matchCell = td; + } + }); + if (!matchCell) { + throw new Error('Cell not match in picker panel.'); + } + + return matchCell; +} + +export function selectCell(text: string | number, index = 0) { + const td = findCell(text, index); + fireEvent.click(td); + + return td; +} + +export function clickButton(type: string) { + let matchBtn: HTMLButtonElement; + Array.from(document.querySelectorAll('button')).forEach((btn) => { + if (btn.className.includes(`-header-${type}-btn`)) { + matchBtn = btn; + } + }); + + fireEvent.click(matchBtn); + + return matchBtn; +} + +export function confirmOK() { + fireEvent.click(document.querySelector('.rc-picker-ok > *')); +} + +export function clearValue() { + const clearBtn = document.querySelector('.rc-picker-clear-btn'); + fireEvent.mouseDown(clearBtn); + fireEvent.mouseUp(clearBtn); +} + +export function inputValue(text: string, index = 0) { + fireEvent.change(document.querySelectorAll('input')[index], { target: { value: text } }); +}