diff --git a/.eslintrc.js b/.eslintrc.js index 3306056a..27131190 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,9 +1,6 @@ -const base = require('@umijs/fabric/dist/eslint'); - module.exports = { - ...base, + extends: [require.resolve('@umijs/fabric/dist/eslint')], rules: { - ...base.rules, 'no-template-curly-in-string': 0, 'prefer-promise-reject-errors': 0, 'react/no-array-index-key': 0, @@ -13,5 +10,6 @@ module.exports = { 'no-param-reassign': 0, 'no-restricted-globals': 0, '@typescript-eslint/no-explicit-any': 0, + '@typescript-eslint/no-shadow': 'off', }, -}; \ No newline at end of file +}; diff --git a/docs/demo/base.md b/docs/demo/base.md new file mode 100644 index 00000000..edb074a9 --- /dev/null +++ b/docs/demo/base.md @@ -0,0 +1,3 @@ +## base + + diff --git a/docs/examples/base.tsx b/docs/examples/base.tsx new file mode 100755 index 00000000..dbcb73b5 --- /dev/null +++ b/docs/examples/base.tsx @@ -0,0 +1,39 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import React, { useState } from 'react'; +import Drawer from 'rc-drawer'; + +const Demo = () => { + const [open, setOpen] = useState(false); + const onChange = (bool: boolean) => { + // console.log('change: ', bool); + }; + const onTouchEnd = () => { + setOpen(false); + }; + const onSwitch = () => { + setOpen(c => !c); + }; + return ( +
+ { + // console.log('transitionEnd: ', c); + }} + placement="right" + width={400} + > + content + +
+ +
+
+ ); +}; +export default Demo; diff --git a/docs/examples/change-remove.tsx b/docs/examples/change-remove.tsx index 3bd2a6c0..f8d65dc9 100755 --- a/docs/examples/change-remove.tsx +++ b/docs/examples/change-remove.tsx @@ -1,13 +1,9 @@ -/* eslint-disable no-console,react/no-multi-comp */ -import { Icon, Menu } from 'antd'; +import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; +import { Menu } from 'antd'; import * as React from 'react'; import Drawer from 'rc-drawer'; -import 'antd/lib/menu/style'; -import 'antd/lib/style'; - - import '../../assets/index.less'; import './assets/index.less'; @@ -16,7 +12,7 @@ const MenuItemGroup = Menu.ItemGroup; class Demo extends React.Component { public state = { show: true, - } + }; public componentDidMount() { setTimeout(() => { this.setState({ @@ -26,55 +22,73 @@ class Demo extends React.Component { } public render() { return ( -
- {this.state.show && - - Navigation One} +
+ {this.state.show && ( + + - - Option 1 - Option 2 - - - Option 3 - Option 4 - - - Navigation Two} - > - Option 5 - Option 6 - - Option 7 - Option 8 + + + Navigation One + + } + > + + Option 1 + Option 2 + + + Option 3 + Option 4 + - - Navigation Three} - > - Option 9 - Option 10 - Option 11 - Option 12 - - - } + + + Navigation Two + + } + > + Option 5 + Option 6 + + Option 7 + Option 8 + + + + + Navigation Three + + } + > + Option 9 + Option 10 + Option 11 + Option 12 + +
+ + )}
内容区块 diff --git a/docs/examples/change.tsx b/docs/examples/change.tsx index a704de0d..b0232ad9 100755 --- a/docs/examples/change.tsx +++ b/docs/examples/change.tsx @@ -1,5 +1,5 @@ -/* eslint-disable no-console,react/no-multi-comp */ -import { Icon, Menu } from 'antd'; +import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; +import { Menu } from 'antd'; import * as React from 'react'; import Drawer from 'rc-drawer'; @@ -15,7 +15,7 @@ const MenuItemGroup = Menu.ItemGroup; class Demo extends React.Component { public state = { open: true, - } + }; public componentDidMount() { setTimeout(() => { this.setState({ @@ -25,20 +25,20 @@ class Demo extends React.Component { } public onChange = (bool: boolean) => { console.log('change: ', bool); - } + }; public onTouchEnd = () => { this.setState({ open: false, }); - } + }; public onSwitch = () => { this.setState({ open: !this.state.open, }); - } + }; public render() { return ( -
+
Navigation One} + title={ + + + Navigation One + + } > Option 1 @@ -70,7 +75,12 @@ class Demo extends React.Component { Navigation Two} + title={ + + + Navigation Two + + } > Option 5 Option 6 @@ -81,7 +91,12 @@ class Demo extends React.Component { Navigation Three} + title={ + + + Navigation Three + + } > Option 9 Option 10 @@ -92,14 +107,24 @@ class Demo extends React.Component {
内容区块 diff --git a/docs/examples/getContainer.tsx b/docs/examples/getContainer.tsx index b5f4a067..79083e5d 100644 --- a/docs/examples/getContainer.tsx +++ b/docs/examples/getContainer.tsx @@ -1,5 +1,5 @@ -/* eslint-disable no-console,react/no-multi-comp */ -import { Icon, Menu } from 'antd'; +import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; +import { Menu } from 'antd'; import * as React from 'react'; import Drawer from 'rc-drawer'; @@ -26,63 +26,60 @@ class DrawerTester extends React.Component { public render() { return (
-
- +
+ - + Navigation One } > - - Option 1 - Option 2 + + Option 1 + Option 2 - - Option 3 - Option 4 + + Option 3 + Option 4 - + Navigation Two } > - Option 5 - Option 6 - - Option 7 - Option 8 + Option 5 + Option 6 + + Option 7 + Option 8 - + Navigation Three } > - Option 9 - Option 10 - Option 11 - Option 12 + Option 9 + Option 10 + Option 11 + Option 12 diff --git a/docs/examples/level.tsx b/docs/examples/level.tsx index 2b9db7ad..f0e9f670 100755 --- a/docs/examples/level.tsx +++ b/docs/examples/level.tsx @@ -1,5 +1,5 @@ -/* eslint-disable no-console,react/no-multi-comp */ -import { Button, Icon, Menu } from 'antd'; +import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; +import { Button, Menu } from 'antd'; import * as React from 'react'; import Drawer from 'rc-drawer'; @@ -16,15 +16,15 @@ const MenuItemGroup = Menu.ItemGroup; class Demo extends React.Component { public state = { level: ['#root'], - } + }; public onClick = () => { this.setState({ level: this.state.level ? null : ['#root'], }); - } + }; public render() { return ( -
+
Navigation One} + title={ + + + Navigation One + + } > Option 1 @@ -46,7 +51,12 @@ class Demo extends React.Component { Navigation Two} + title={ + + + Navigation Two + + } > Option 5 Option 6 @@ -57,7 +67,12 @@ class Demo extends React.Component { Navigation Three} + title={ + + + Navigation Three + + } > Option 9 Option 10 @@ -68,8 +83,12 @@ class Demo extends React.Component {
内容区块 diff --git a/docs/examples/multiple.tsx b/docs/examples/multiple.tsx index 1fe3135d..a9daba68 100755 --- a/docs/examples/multiple.tsx +++ b/docs/examples/multiple.tsx @@ -15,36 +15,43 @@ class Demo extends React.Component { open: false, openChild: false, openChildren: false, - } + }; public onClick = () => { this.setState({ open: !this.state.open, }); - } + }; public onChildClick = () => { this.setState({ openChild: !this.state.openChild, - }) - } + }); + }; public onChildrenClick = () => { this.setState({ openChildren: !this.state.openChildren, - }) - } - public getLevelMove = (e: { target: HTMLElement, open: boolean }): number | [number, number] => { + }); + }; + public getLevelMove = (e: { + target: HTMLElement; + open: boolean; + }): number | [number, number] => { const target = e.target as HTMLElement; if (target.className.indexOf('drawer1') >= 0) { return [200, 100]; } return 100; - } + }; public render() { return ( -
+
@@ -79,15 +86,14 @@ class Demo extends React.Component { placement="right" levelMove={this.getLevelMove} > -
- 三级抽屉 -
+
三级抽屉
-
); +
+ ); } } export default Demo; diff --git a/docs/examples/no-mask.tsx b/docs/examples/no-mask.tsx index 3cefffe5..cd3e809e 100755 --- a/docs/examples/no-mask.tsx +++ b/docs/examples/no-mask.tsx @@ -1,5 +1,5 @@ -/* eslint-disable no-console,react/no-multi-comp */ -import { Icon, Menu } from 'antd'; +import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; +import { Menu } from 'antd'; import * as React from 'react'; import Drawer from 'rc-drawer'; @@ -10,7 +10,7 @@ import 'antd/lib/style'; import '../../assets/index.less'; import './assets/index.less'; -const {SubMenu} = Menu; +const { SubMenu } = Menu; const MenuItemGroup = Menu.ItemGroup; class Demo extends React.Component { public state = { @@ -38,7 +38,7 @@ class Demo extends React.Component { key="sub1" title={ - + Navigation One } @@ -56,7 +56,7 @@ class Demo extends React.Component { key="sub2" title={ - + Navigation Two } @@ -72,7 +72,7 @@ class Demo extends React.Component { key="sub4" title={ - + Navigation Three } diff --git a/docs/examples/openRenderDom.tsx b/docs/examples/openRenderDom.tsx index 3b4e88ec..95ad01e3 100755 --- a/docs/examples/openRenderDom.tsx +++ b/docs/examples/openRenderDom.tsx @@ -1,5 +1,5 @@ -/* eslint-disable no-console,react/no-multi-comp */ -import { Button, Icon, Menu } from 'antd'; +import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; +import { Button, Menu } from 'antd'; import * as React from 'react'; import Drawer from 'rc-drawer'; @@ -17,16 +17,21 @@ const MenuItemGroup = Menu.ItemGroup; class Demo extends React.Component { public state = { open: false, - } + }; public onClick = () => { this.setState({ open: !this.state.open, }); - } + }; public render() { return ( -
- +
+ Navigation One} + title={ + + + Navigation One + + } > Option 1 @@ -48,7 +58,12 @@ class Demo extends React.Component { Navigation Two} + title={ + + + Navigation Two + + } > Option 5 Option 6 @@ -59,7 +74,12 @@ class Demo extends React.Component { Navigation Three} + title={ + + + Navigation Three + + } > Option 9 Option 10 @@ -70,8 +90,12 @@ class Demo extends React.Component {
diff --git a/docs/examples/placement.tsx b/docs/examples/placement.tsx index a9fd981b..14b075d7 100755 --- a/docs/examples/placement.tsx +++ b/docs/examples/placement.tsx @@ -1,5 +1,5 @@ -/* eslint-disable no-console,react/no-multi-comp */ -import { Icon, Menu, Select } from 'antd'; +import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; +import { Menu, Select } from 'antd'; import * as React from 'react'; import Drawer from 'rc-drawer'; @@ -22,24 +22,31 @@ class Demo extends React.Component { childShow: true, width: '20vw', height: null, - } + }; public onChange = (value: string) => { - this.setState({ - placement: value, - width: value === 'right' || value === 'left' ? '20vw' : null, - height: value === 'right' || value === 'left' ? null : '20vh', - childShow: false, // 删除子级，删除切换时的过渡动画。。。 - }, () => { - this.setState({ - childShow: true, - }); - }); - } + this.setState( + { + placement: value, + width: value === 'right' || value === 'left' ? '20vw' : null, + height: value === 'right' || value === 'left' ? null : '20vh', + childShow: false, // 删除子级，删除切换时的过渡动画。。。 + }, + () => { + this.setState({ + childShow: true, + }); + }, + ); + }; public render() { return ( -
+
{this.state.childShow && ( - + Navigation One} + title={ + + + Navigation One + + } > Option 1 @@ -60,7 +72,12 @@ class Demo extends React.Component { Navigation Two} + title={ + + + Navigation Two + + } > Option 5 Option 6 @@ -71,7 +88,12 @@ class Demo extends React.Component { Navigation Three} + title={ + + + Navigation Three + + } > Option 9 Option 10 @@ -83,8 +105,12 @@ class Demo extends React.Component { )}
选择位置： diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx index bea7683c..456fd934 100755 --- a/docs/examples/simple.tsx +++ b/docs/examples/simple.tsx @@ -1,5 +1,5 @@ -/* eslint-disable no-console,react/no-multi-comp */ -import { Icon, Menu } from 'antd'; +import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; +import { Menu } from 'antd'; import * as React from 'react'; import Drawer from 'rc-drawer'; @@ -7,7 +7,6 @@ import Drawer from 'rc-drawer'; import 'antd/lib/menu/style'; import 'antd/lib/style'; - import '../../assets/index.less'; import './assets/index.less'; @@ -16,28 +15,33 @@ const MenuItemGroup = Menu.ItemGroup; class Demo extends React.Component { public state = { open: false, - } + }; public onSwitch = () => { const { open } = this.state; this.setState({ open: !open, }); - } + }; public render() { return ( -
+
Navigation One} + title={ + + + Navigation One + + } > Option 1 @@ -50,7 +54,12 @@ class Demo extends React.Component { Navigation Two} + title={ + + + Navigation Two + + } > Option 5 Option 6 @@ -61,7 +70,12 @@ class Demo extends React.Component { Navigation Three} + title={ + + + Navigation Three + + } > Option 9 Option 10 @@ -72,14 +86,18 @@ class Demo extends React.Component {
内容区块
- ) + ); } } diff --git a/package.json b/package.json index 9fd958c0..827cd090 100644 --- a/package.json +++ b/package.json @@ -34,10 +34,10 @@ "scripts": { "start": "dumi dev", "build": "dumi build", - "compile": "father build && lessc assets/index.less assets/index.css", + "compile": "father-build && lessc assets/index.less assets/index.css", "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", "lint": "eslint src/ --ext .tsx,.ts", - "test": "father test", + "test": "umi-test", "now-build": "npm run build" }, "peerDependencies": { @@ -47,32 +47,34 @@ "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "^2.2.6", - "rc-util": "^5.7.0" + "rc-util": "^5.21.2" }, "devDependencies": { + "@ant-design/icons": "^4.7.0", + "@testing-library/jest-dom": "^5.11.9", + "@testing-library/react": "^12.1.5", "@types/classnames": "^2.2.9", - "@types/enzyme": "^3.1.15", "@types/jest": "^27.0.2", "@types/raf": "^3.4.0", "@types/react": "^17.0.9", "@types/react-dom": "^17.0.6", "@types/warning": "^3.0.0", "@umijs/fabric": "^2.0.0", - "dumi": "^1.1.10", - "enzyme": "^3.10.0", - "enzyme-adapter-react-16": "^1.14.0", - "enzyme-to-json": "^3.4.2", + "@umijs/test": "^3.5.23", + "antd": "^4.20.2", + "dumi": "^1.1.40", "eslint": "^7.0.0", - "father": "^2.13.2", + "father-build": "^1.22.1", "glob": "^7.1.6", "jsonp": "^0.2.0", "less": "^3.10.3", "np": "^7.5.0", + "prettier": "^2.6.2", "querystring": "^0.2.0", "rc-test": "^6.0.1", "react": "^16.10.2", "react-dom": "^16.10.2", "react-test-renderer": "^16.10.2", - "typescript": "^4.0.3" + "typescript": "^4.6.4" } } diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap index 1d9499a9..9adcfaf3 100644 --- a/tests/__snapshots__/index.spec.tsx.snap +++ b/tests/__snapshots__/index.spec.tsx.snap @@ -13,7 +13,7 @@ exports[`rc-drawer-menu getContainer is null 1`] = `
test1
diff --git a/tests/drawer.spec.tsx b/tests/drawer.spec.tsx index a3986ac9..ac762ff5 100644 --- a/tests/drawer.spec.tsx +++ b/tests/drawer.spec.tsx @@ -1,71 +1,34 @@ -/* eslint-disable max-classes-per-file */ -// eslint-disable react/no-multi-comp -import { mount } from 'enzyme'; -import * as React from 'react'; +import React, { useRef } from 'react'; import Drawer from '../src/'; import type { IDrawerProps } from '../src/IDrawerPropTypes'; -import toJson from 'enzyme-to-json'; +import { cleanup, render } from '@testing-library/react'; -class DrawerTesterRef extends React.Component { - public container: HTMLDivElement; - public getContainer = () => { - return this.container; - }; - public saveContainer = (container: HTMLDivElement) => { - this.container = container; - }; - public render() { - return ( -
-
- +const DrawerTesterRef = (props: IDrawerProps) => { + const containerRef = useRef(null); + return ( +
+
+ containerRef.current} {...props}> +

Here is content of Drawer

+ +
+ ); +}; + +const DrawerTesterDom = (props: IDrawerProps) => { + const containerRef = useRef(null); + return ( +
+
+ {open && ( + containerRef.current} {...props}>

Here is content of Drawer

 -
- ); - } -} -/* eslint react/no-multi-comp: 0 */ - -interface IState { - visible: boolean; -} -// tslint:disable-next-line:max-classes-per-file -class DrawerTesterDom extends React.Component { - public container: HTMLDivElement; - constructor(props: IDrawerProps) { - super(props); - this.state = { visible: false }; - } - public componentDidMount() { - this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state - } - public getContainer = () => { - return this.container; - }; - public saveContainer = (container: HTMLDivElement) => { - this.container = container; - }; - public render() { - return ( -
-
- {this.state.visible ? ( - -

Here is content of Drawer

- - ) : null} -
- ); - } -} + )} +
+ ); +}; -/* eslint react/no-multi-comp: 0 */ -// tslint:disable-next-line:max-classes-per-file const DrawerTesterBoolean = props => (
@@ -75,18 +38,24 @@ const DrawerTesterBoolean = props => ( ); describe('Drawer', () => { + afterEach(() => { + cleanup(); + }); it('render function', () => { - const wrapper = mount(); - expect(toJson(wrapper.render())).toMatchSnapshot(); + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); it('render dom', () => { - const wrapper = mount(); - expect(toJson(wrapper.render())).toMatchSnapshot(); + const { container, rerender } = render(); + rerender(); + expect(container.firstChild).toMatchSnapshot(); }); it('render boolean', () => { - const wrapper = mount(); - expect(toJson(wrapper.render())).toMatchSnapshot(); + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 13f26743..3d7671a8 100755 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -1,7 +1,7 @@ -import { mount } from 'enzyme'; -import * as React from 'react'; -import toJson from 'enzyme-to-json'; +import { cleanup, fireEvent, render } from '@testing-library/react'; +import React from 'react'; import Drawer from '../src'; +import type { IDrawerProps } from '../src/IDrawerPropTypes'; interface Point { x: number; @@ -62,19 +62,21 @@ function createMultiMoveTouchEventObject(points: Point[]) { } describe('rc-drawer-menu', () => { - let instance; + afterEach(() => { + cleanup(); + }); it('single drawer', () => { - instance = mount( {}} />); - const drawer = instance.find('.drawer') as any; - const drawerContent = instance.find('.drawer-content-wrapper') as any; - expect(!!drawer).toBe(true); - expect(drawer.instance().parentNode.parentNode.tagName).toBe('BODY'); - console.log('clientWidth:', drawerContent.instance().clientWidth); - expect(drawerContent.instance().style.transform).toBe('translateX(-100%)'); + render( {}} />); + const drawer = document.querySelector('.drawer'); + expect(drawer).toBeTruthy(); + expect(drawer.parentNode.parentNode.nodeName).toBe('BODY'); + expect( + document.querySelector('.drawer-content-wrapper').getAttribute('style'), + ).toBe('transform: translateX(-100%);'); }); it('icon child is element', () => { - instance = mount( + render( @@ -84,87 +86,77 @@ describe('rc-drawer-menu', () => { level={null} />, ); - const icon = instance.find('.a'); - console.log('icon.length:', icon.length); - expect(icon.length).toBe(1); + expect(document.querySelector('.a')).toBeTruthy(); }); it('default open drawer', () => { - instance = mount( - a} defaultOpen level={[]} />, - ); - const drawer = instance.find('.drawer-content-wrapper').instance() as any; - const content = instance.find('.drawer-content'); - content.simulate( - 'touchStart', + render(a} defaultOpen level={[]} />); + const drawer = document.querySelector('.drawer-content-wrapper'); + const content = document.querySelector('.drawer-content'); + fireEvent.touchStart( + content, createStartTouchEventObject({ x: 100, y: 0 }), ); - content.simulate( - 'touchMove', - createMoveTouchEventObject({ x: 150, y: 10 }), - ); - content.simulate('touchEnd', createMoveTouchEventObject({ x: 200, y: 0 })); - content.simulate('touchStart', createStartTouchEventObject({ x: 0, y: 0 })); - content.simulate('touchMove', createMoveTouchEventObject({ x: 0, y: 10 })); - content.simulate('touchEnd', createMoveTouchEventObject({ x: 0, y: 10 })); - content.simulate( - 'touchStart', + fireEvent.touchMove(content, createMoveTouchEventObject({ x: 150, y: 10 })); + fireEvent.touchEnd(content, createMoveTouchEventObject({ x: 200, y: 0 })); + fireEvent.touchStart(content, createStartTouchEventObject({ x: 0, y: 0 })); + fireEvent.touchMove(content, createMoveTouchEventObject({ x: 0, y: 10 })); + fireEvent.touchEnd(content, createMoveTouchEventObject({ x: 0, y: 10 })); + fireEvent.touchStart( + content, createMultiStartTouchEventObject([ { x: 0, y: 0 }, { x: 100, y: 100 }, ]), ); - content.simulate( - 'touchMove', + fireEvent.touchMove( + content, createMultiMoveTouchEventObject([ { x: 0, y: 10 }, { x: 100, y: 120 }, ]), ); - content.simulate( - 'touchEnd', + fireEvent.touchEnd( + content, createMultiMoveTouchEventObject([ { x: 0, y: 10 }, { x: 100, y: 120 }, ]), ); - console.log('transform is empty:', drawer.style.transform); - expect(drawer.style.transform).toEqual(''); + expect(drawer.getAttribute('style')).toEqual(''); }); it('handler is null，open=true', () => { - instance = mount(); - expect(toJson(instance.render())).toMatchSnapshot(); + render(); + expect(document.querySelector('.drawer')).toMatchSnapshot(); }); it('handler is null，open=false', () => { - instance = mount(); - expect(toJson(instance.render())).toMatchSnapshot(); + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); }); it('switch open drawer', () => { - instance = mount(); + const { container, rerender } = render(); jest.useFakeTimers(); - const drawer = instance.find('.drawer-content-wrapper').instance() as any; - console.log('第一次：', drawer.style.transform); + const drawer = document.querySelector( + '.drawer-content-wrapper', + ) as HTMLElement; + // console.log('第一次：', drawer.style.transform); expect(drawer.style.transform).toBe('translateX(-100%)'); - expect(toJson(instance.render())).toMatchSnapshot(); - instance.setProps({ - open: true, - }); - jest.runAllTimers(); - expect(toJson(instance.render())).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); + rerender(); + expect(container.firstChild).toMatchSnapshot(); console.log(drawer.style.transform); expect(drawer.style.transform).toEqual(''); - instance.setProps({ - open: false, - }); - console.log('第二次：', drawer.style.transform); - jest.runAllTimers(); + rerender(); + // console.log('第二次：', drawer.style.transform); expect(drawer.style.transform).toBe('translateX(-100%)'); - expect(toJson(instance.render())).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); jest.useRealTimers(); }); it('getContainer is null', () => { - instance = mount( + const { container } = render(
{ />
, ); - const drawer = instance.find('.drawer').instance() as any; - const a = instance.find('#a').instance() as any; - console.log('a transform:', a.style.transform); + const drawer = document.querySelector('.drawer') as HTMLElement; + const a = document.querySelector('#a') as HTMLElement; expect(a.style.transform).toBe(''); - console.log(drawer.parentNode.parentNode.className); - expect(drawer.parentNode.className).toBe('drawer-wrapper'); - expect(drawer.parentNode.parentNode.className).toBe('react-wrapper'); - expect(toJson(instance.render())).toMatchSnapshot(); + // console.log(drawer.parentNode.parentElement.className); + expect(drawer.parentElement.className).toBe('drawer-wrapper'); + expect(drawer.parentNode.parentElement.className).toBe('react-wrapper'); + expect(container.firstChild).toMatchSnapshot(); }); it('click open close', () => { - instance = mount(); - const content = instance.find('.drawer-content-wrapper').instance() as any; - console.log(content.style.transform); + render(); + const content = document.querySelector( + '.drawer-content-wrapper', + ) as HTMLElement; + // console.log(content.style.transform); expect(content.style.transform).toBe('translateX(-100%)'); - const handle = instance.find('.drawer-handle'); - handle.simulate('click'); - console.log(content.style.transform); + const handle = document.querySelector('.drawer-handle'); + fireEvent.click(handle); + // console.log(content.style.transform); expect(content.style.transform).toBe(''); - const mask = instance.find('.drawer-mask'); - mask.simulate('click'); - console.log(content.style.transform); + const mask = document.querySelector('.drawer-mask'); + fireEvent.click(mask); + // console.log(content.style.transform); expect(content.style.transform).toBe('translateX(-100%)'); }); it('will unmount', () => { - instance = mount(
); - const divWrapper = instance.find('.div-wrapper').instance() as any; - const content = instance.find('.drawer-content-wrapper').instance() as any; + const { rerender } = render(
); + const divWrapper = document.querySelector('.div-wrapper') as HTMLElement; + const content = document.querySelector( + '.drawer-content-wrapper', + ) as HTMLElement; console.log(content.style.transform); expect(content.style.transform).toBe(''); - instance.setProps({ - show: false, - }); + rerender(
); expect(divWrapper.children.length).toBe(0); }); it('placement change', () => { - instance = mount(); - const content = instance.find('.drawer-content-wrapper').instance() as any; - console.log(content.style.transform); + const { rerender } = render(); + const content = document.querySelector( + '.drawer-content-wrapper', + ) as HTMLElement; + // console.log(content.style.transform); expect(content.style.transform).toBe('translateX(-100%)'); - instance.setProps({ - placement: 'top', - level: ['a', 'b'], - }); - console.log(content.style.transform); + rerender(); + + // console.log(content.style.transform); expect(content.style.transform).toBe('translateY(-100%)'); }); it('levelMove is Array', () => { - instance = mount(); - expect(toJson(instance.render())).toMatchSnapshot(); - instance.setProps({ - open: true, - }); - instance.setProps({ - open: false, - levelMove: () => 200, - }); - instance.setProps({ - open: true, - levelMove: [200], - }); - expect(toJson(instance.render())).toMatchSnapshot(); + const { rerender, container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); + rerender(); + rerender( 200} open={false} />); + rerender(); + expect(document.querySelector('.drawer')).toMatchSnapshot(); }); it('handler is null, render is null', () => { - instance = mount(); - expect(toJson(instance.render())).toMatchSnapshot(); + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); it('getContainer', () => { - instance = mount(
); - instance.setProps({ - show: false, - }); - expect(toJson(instance.render())).toMatchSnapshot(); + const { container, rerender } = render(
); + rerender(
); + expect(container.firstChild).toMatchSnapshot(); }); it('contentWrapperStyle', () => { - instance = mount( + render( , ); - const content = instance.find('.drawer-content-wrapper').instance() as any; + const content = document.querySelector( + '.drawer-content-wrapper', + ) as HTMLElement; expect(content.style.background).toBe('rgb(255, 0, 0)'); }); it('autoFocus', () => { - instance = mount( - -

Here is content of Drawer

- , - ); + let cache: IDrawerProps = {}; + const getDom = (props: IDrawerProps) => { + cache = { ...cache, ...props }; + return ( + +

Here is content of Drawer

+ + ); + }; + const { rerender } = render(getDom({})); // In case { autoFocus: false }, default activeElement shouldn't be drawer node expect(document.activeElement).not.toBe( - instance.find('.auto-focus-test-wrapper .drawer').at(0).getDOMNode(), + document.querySelector('.auto-focus-test-wrapper .drawer'), ); // autofocus should not treat as dom attribute when {autofocus: false} - expect(instance.html().indexOf('autofocus')).toBe(-1); + expect(document.body.innerHTML.indexOf('autofocus')).toBe(-1); // Close and reopen drawer with props {autoFocus: true} - instance.setProps({ open: false, autoFocus: true }); - - instance.setProps({ open: true }); + rerender(getDom({ open: false, autoFocus: true })); + rerender(getDom({ open: true })); // In case { autoFocus: true }, by which is also 's default, the activeElement will be drawer by itself expect(document.activeElement).toBe( - instance.find('.auto-focus-test-wrapper .drawer').at(0).getDOMNode(), + document.querySelector('.auto-focus-test-wrapper .drawer'), ); // autofocus should not treat as dom attribute when {autofocus: true} - expect(instance.html().indexOf('autofocus')).toBe(-1); + expect(document.body.innerHTML.indexOf('autofocus')).toBe(-1); }); }); diff --git a/tests/index.tsx b/tests/index.tsx index e17be549..1fc6de2e 100644 --- a/tests/index.tsx +++ b/tests/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Drawer from '../'; +import Drawer from '../src'; export default () => { return ( @@ -19,9 +19,15 @@ export default () => { getContainer="#abc" showMask={false} maskStyle={{ top: 100 }} - onChange={(e) => { console.log(e); }} - onClose={(e: React.MouseEvent) => { console.log(e.pageX); }} - onHandleClick={(e: React.KeyboardEvent) => { console.log(e.keyCode); }} + onChange={e => { + console.log(e); + }} + onClose={(e: React.MouseEvent) => { + console.log(e.pageX); + }} + onHandleClick={(e: React.KeyboardEvent) => { + console.log(e.keyCode); + }} /> ); }; diff --git a/tests/mask.spec.tsx b/tests/mask.spec.tsx index 189776cc..8f784778 100644 --- a/tests/mask.spec.tsx +++ b/tests/mask.spec.tsx @@ -1,28 +1,26 @@ -import { mount } from 'enzyme'; -import * as React from 'react'; +import { cleanup, render } from '@testing-library/react'; +import React from 'react'; import Drawer from '../src'; describe('Drawer Mask', () => { + afterEach(() => { + cleanup(); + }); it('show mask', () => { - const wrapper = mount(); + const { rerender } = render(); expect(document.body.className).toBe('ant-scrolling-effect'); - wrapper.setProps({ - open: false, - }); - + rerender(); expect(document.body.className).toBe(''); }); it('no mask', () => { - const wrapper = mount(); + const { rerender } = render(); expect(document.body.className).toBe(''); - wrapper.setProps({ - open: false, - }); + rerender(); expect(document.body.className).toBe(''); });