diff --git a/.jest.config.js b/.jest.config.js index 0e305ce44..6050b4ee9 100644 --- a/.jest.config.js +++ b/.jest.config.js @@ -3,7 +3,7 @@ module.exports = { testEnvironment: 'jsdom', - setupFiles: ['./tests/setup.js'], + setupFilesAfterEnv: ['./tests/setup.ts'], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], @@ -14,7 +14,7 @@ module.exports = { }, testRegex: '.*\\.test\\.(j|t)sx?$', - // testRegex: 'scaleable\\/.*\\.test\\.(j|t)sx?$', + // testRegex: 'modal\\/.*\\.test\\.(j|t)sx?$', collectCoverageFrom: [ 'components/**/*.{ts,tsx}', diff --git a/components/drawer/__tests__/__snapshots__/index.test.tsx.snap b/components/drawer/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 000000000..9f780d245 --- /dev/null +++ b/components/drawer/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,905 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Drawer customization should be supported 1`] = ` +"

Modal

" +`; + +exports[`Drawer should render correctly 1`] = ` +"

Drawer

This is a drawer

Some content contained within the drawer.

" +`; + +exports[`Drawer should work correctly with different placement 1`] = ` +"

Some content contained within the drawer.

" +`; + +exports[`Drawer should work correctly with different placement 2`] = ` +"

Some content contained within the drawer.

" +`; + +exports[`Drawer should work correctly with different placement 3`] = ` +"

Some content contained within the drawer.

" +`; + +exports[`Drawer should work correctly with different placement 4`] = ` +"

Some content contained within the drawer.

" +`; diff --git a/components/drawer/__tests__/index.test.tsx b/components/drawer/__tests__/index.test.tsx new file mode 100644 index 000000000..a35a219aa --- /dev/null +++ b/components/drawer/__tests__/index.test.tsx @@ -0,0 +1,151 @@ +import React from 'react' +import { mount } from 'enzyme' +import { Drawer } from 'components' +import { nativeEvent, updateWrapper } from 'tests/utils' +import { expectDrawerIsClosed, expectDrawerIsOpened } from './use-modal.test' +import userEvent from '@testing-library/user-event' + +describe('Drawer', () => { + it('should render correctly', () => { + const wrapper = mount( + + Drawer + This is a drawer + +

Some content contained within the drawer.

+ + , + ) + expect(wrapper.html()).toMatchSnapshot() + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('should work correctly with different placement', () => { + const top = mount( + +

Some content contained within the drawer.

+ , + ) + expect(top.html()).toMatchSnapshot() + expect(() => top.unmount()).not.toThrow() + + const right = mount( + +

Some content contained within the drawer.

+ , + ) + expect(right.html()).toMatchSnapshot() + expect(() => right.unmount()).not.toThrow() + + const bottom = mount( + +

Some content contained within the drawer.

+ , + ) + expect(bottom.html()).toMatchSnapshot() + expect(() => bottom.unmount()).not.toThrow() + + const left = mount( + +

Some content contained within the drawer.

+ , + ) + expect(left.html()).toMatchSnapshot() + expect(() => left.unmount()).not.toThrow() + }) + + it('should trigger event when drawer changed', async () => { + const closeHandler = jest.fn() + const wrapper = mount( + + Modal + , + ) + expectDrawerIsClosed(wrapper) + + wrapper.setProps({ visible: true }) + await updateWrapper(wrapper, 350) + expectDrawerIsOpened(wrapper) + + wrapper.find('.backdrop').simulate('click', nativeEvent) + await updateWrapper(wrapper, 500) + expectDrawerIsClosed(wrapper) + expect(closeHandler).toHaveBeenCalled() + }) + + it('should disable backdrop event', async () => { + const closeHandler = jest.fn() + const wrapper = mount( + + Modal + , + ) + wrapper.find('.backdrop').simulate('click', nativeEvent) + await updateWrapper(wrapper, 500) + expectDrawerIsOpened(wrapper) + expect(closeHandler).not.toHaveBeenCalled() + }) + + it('customization should be supported', () => { + const wrapper = mount( + + Modal + , + ) + const html = wrapper.find('.wrapper').html() + expect(html).toMatchSnapshot() + expect(wrapper.find('.wrapper').at(0).getDOMNode()).toHaveClass('test-class') + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('focus should only be switched within modal', async () => { + const wrapper = mount( + + + setState(false)} placement="right"> + Drawer + This is a drawer + +

Some content contained within the drawer.

+ + + + ) +} +`} +/> + + { + const [state, setState] = React.useState(false) + const [placement, setPlacement] = React.useState('') + const open = (text) => { + setPlacement(text) + setState(true) + } + return ( +
+ + + + + setState(false)} placement={placement}> + Drawer + This is a drawer + +

Some content contained within the drawer.

+ + +
+ ) +} +`} +/> + + +Drawer.Props + +| Attribute | Description | Type | Accepted values | Default | +| ------------------------ | -------------------------------- | ----------------------------------- | -------------------------- | ------- | +| **visible** | open or close | `boolean` | - | `false` | +| **onClose** | close event | `() => void` | - | - | +| **onContentClick** | event from modal content | `(e: MouseEvent) => void` | - | - | +| **wrapClassName** | className of the drawer dialog | `string` | - | - | +| **keyboard** | press Esc to close drawer | `boolean` | - | `true` | +| **disableBackdropClick** | click background and don't close | `boolean` | - | `false` | +| **placement** | position of the drawer | [DrawerPlacement](#drawerplacement) | - | `right` | +| ... | native props | `HTMLAttributes` | `'name', 'className', ...` | - | + +Drawer.Title.Props + +| Attribute | Description | Type | Accepted values | Default | +| --------- | ------------ | ---------------- | ------------------------ | ------- | +| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | + +Drawer.Subtitle.Props + +| Attribute | Description | Type | Accepted values | Default | +| --------- | ------------ | ---------------- | ------------------------ | ------- | +| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | + +Drawer.Content.Props + +| Attribute | Description | Type | Accepted values | Default | +| --------- | ------------ | ---------------- | ------------------------ | ------- | +| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | + +DrawerPlacement + +```ts +type DrawerPlacement = 'top' | 'bottom' | 'right' | 'left' +``` + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/drawer.mdx b/pages/zh-cn/components/drawer.mdx new file mode 100644 index 000000000..4645b394e --- /dev/null +++ b/pages/zh-cn/components/drawer.mdx @@ -0,0 +1,105 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Drawer, Button } from 'components' + +export const meta = { + title: '抽屉 Drawer', + group: '反馈', +} + +## Drawer / 抽屉 + +固定在屏幕边缘的可交互元素组。 + + { + const [state, setState] = React.useState(false) + return ( +
+ + setState(false)} placement="right"> + 标题 + 子标题 + +

Geist UI 是我最爱的组件库。

+ + +
+ ) +} +`} +/> + + { + const [state, setState] = React.useState(false) + const [placement, setPlacement] = React.useState('') + const open = (text) => { + setPlacement(text) + setState(true) + } + return ( +
+ + + + + setState(false)} placement={placement}> + 标题 + 子标题 + +

Geist UI 是我最爱的组件库。

+ + +
+ ) +} +`} +/> + + +Drawer.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| ------------------------ | ---------------------- | ----------------------------------- | -------------------------- | ------- | +| **visible** | 打开或关闭 | `boolean` | - | `false` | +| **onClose** | 关闭事件 | `() => void` | - | - | +| **onContentClick** | 抽屉内部元素点击事件 | `(e: MouseEvent) => void` | - | - | +| **wrapClassName** | 抽屉弹出内容的类名 | `string` | - | - | +| **keyboard** | 按下 Esc 键关闭元素 | `boolean` | - | `true` | +| **disableBackdropClick** | 点击背景层时不关闭抽屉 | `boolean` | - | `false` | +| **placement** | 抽屉相对于屏幕的位置 | [DrawerPlacement](#drawerplacement) | - | `right` | +| ... | 原生属性 | `HTMLAttributes` | `'name', 'className', ...` | - | + +Drawer.Title.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| ---- | -------- | ---------------- | ------------------------ | ---- | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +Drawer.Subtitle.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| ---- | -------- | ---------------- | ------------------------ | ---- | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +Drawer.Content.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| ---- | -------- | ---------------- | ------------------------ | ---- | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +DrawerPlacement + +```ts +type DrawerPlacement = 'top' | 'bottom' | 'right' | 'left' +``` + + + +export default ({ children }) => {children} diff --git a/tests/setup.js b/tests/setup.ts similarity index 55% rename from tests/setup.js rename to tests/setup.ts index f4eb12b79..1fb2ede15 100644 --- a/tests/setup.js +++ b/tests/setup.ts @@ -1,8 +1,9 @@ -const enzyme = require('enzyme') +import '@testing-library/jest-dom/extend-expect' +import enzyme from 'enzyme' /** * The official repository does not currently support React 17 * https://github.com/enzymejs/enzyme/issues/2429 */ -const Adapter = require('@wojtekmaj/enzyme-adapter-react-17') +import Adapter from '@wojtekmaj/enzyme-adapter-react-17' enzyme.configure({ adapter: new Adapter() })