mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-28 20:25:29 +08:00
test(modal): add testcase
This commit is contained in:
unix
189
components/modal/__tests__/__snapshots__/index.test.tsx.snap
Normal file
189
components/modal/__tests__/__snapshots__/index.test.tsx.snap
Normal file
@@ -0,0 +1,189 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Modal should render correctly 1`] = `
|
||||
"<div class=\\"backdrop transition-enter\\"><div class=\\"layer\\"></div><div class=\\"content\\"><div class=\\"wrapper wrapper-enter\\"><h2 class=\\"\\">Modal</h2><style>
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.6;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
word-break: break-word;
|
||||
text-transform: uppercase;
|
||||
color: #000;
|
||||
}
|
||||
</style><p class=\\"\\">This is a modal</p><style>
|
||||
p {
|
||||
font-size: .875rem;
|
||||
line-height: 1.6;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
word-break: break-word;
|
||||
text-transform: uppercase;
|
||||
color: #666;
|
||||
}
|
||||
</style><div class=\\"content \\"><p>Some content contained within the modal.</p></div><style>
|
||||
.content {
|
||||
margin: 0;
|
||||
padding: 16pt 0 8pt 0;
|
||||
}
|
||||
|
||||
.content :global(p) {
|
||||
margin: 0;
|
||||
}
|
||||
</style><div></div><footer><button class=\\"\\">Cancel</button><style>
|
||||
button {
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
transition: all 200ms ease-in-out 0s;
|
||||
border: none;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: #000;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style><button class=\\"\\">Submit</button><style>
|
||||
button {
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
transition: all 200ms ease-in-out 0s;
|
||||
border: none;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: #000;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style></footer><style>
|
||||
footer {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 3.625rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
footer > :global(button+button) {
|
||||
border-left: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 3.625rem;
|
||||
}
|
||||
</style><style>
|
||||
.wrapper {
|
||||
max-width: 90%;
|
||||
width: 26rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border-radius: 5px;
|
||||
padding: 16pt;
|
||||
opacity: 0;
|
||||
transform: translate3d(0px, -40px, 0px);
|
||||
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;
|
||||
}
|
||||
|
||||
.wrapper-enter {
|
||||
opacity: 0;
|
||||
transform: translate3d(0px, -40px, 0px);
|
||||
}
|
||||
|
||||
.wrapper-enter-active {
|
||||
opacity: 1;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.wrapper-leave {
|
||||
opacity: 1;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.wrapper-leave-active {
|
||||
opacity: 0;
|
||||
transform: translate3d(0px, -50px, 0px);
|
||||
}
|
||||
</style></div></div><div class=\\"offset\\"></div><style>
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: auto;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.offset {
|
||||
height: 25vh;
|
||||
opacity: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.25;
|
||||
background-color: #000;
|
||||
transition: opacity .35s cubic-bezier(.4, 0, .2, 1);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
</style></div>"
|
||||
`;
|
||||
102
components/modal/__tests__/index.test.tsx
Normal file
102
components/modal/__tests__/index.test.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import React from 'react'
|
||||
import { mount } from 'enzyme'
|
||||
import { Modal } from 'components'
|
||||
import { nativeEvent, updateWrapper } from 'tests/utils'
|
||||
import { expectModalIsClosed, expectModalIsOpened } from './use-modal.test'
|
||||
|
||||
describe('Modal', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(
|
||||
<Modal open={true}>
|
||||
<Modal.Title>Modal</Modal.Title>
|
||||
<Modal.Subtitle>This is a modal</Modal.Subtitle>
|
||||
<Modal.Content>
|
||||
<p>Some content contained within the modal.</p>
|
||||
</Modal.Content>
|
||||
<Modal.Action passive>Cancel</Modal.Action>
|
||||
<Modal.Action>Submit</Modal.Action>
|
||||
</Modal>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should trigger event when modal changed', async () => {
|
||||
const openHandler = jest.fn()
|
||||
const closeHandler = jest.fn()
|
||||
const wrapper = mount(
|
||||
<Modal onOpen={openHandler} onClose={closeHandler}>
|
||||
<Modal.Title>Modal</Modal.Title>
|
||||
</Modal>
|
||||
)
|
||||
expectModalIsClosed(wrapper)
|
||||
|
||||
wrapper.setProps({ open: true })
|
||||
await updateWrapper(wrapper, 350)
|
||||
expectModalIsOpened(wrapper)
|
||||
expect(openHandler).toHaveBeenCalled()
|
||||
|
||||
wrapper.find('.backdrop').simulate('click', nativeEvent)
|
||||
await updateWrapper(wrapper, 500)
|
||||
expectModalIsClosed(wrapper)
|
||||
expect(closeHandler).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should disable backdrop event', async () => {
|
||||
const closeHandler = jest.fn()
|
||||
const wrapper = mount(
|
||||
<Modal open={true} disableBackdropClick onClose={closeHandler}>
|
||||
<Modal.Title>Modal</Modal.Title>
|
||||
<Modal.Action>Submit</Modal.Action>
|
||||
</Modal>
|
||||
)
|
||||
wrapper.find('.backdrop').simulate('click', nativeEvent)
|
||||
await updateWrapper(wrapper, 500)
|
||||
expectModalIsOpened(wrapper)
|
||||
expect(closeHandler).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should ignore backdrop disabled when actions missing', async () => {
|
||||
const closeHandler = jest.fn()
|
||||
const wrapper = mount(
|
||||
<Modal open={true} disableBackdropClick onClose={closeHandler}>
|
||||
<Modal.Title>Modal</Modal.Title>
|
||||
</Modal>
|
||||
)
|
||||
wrapper.find('.backdrop').simulate('click', nativeEvent)
|
||||
await updateWrapper(wrapper, 500)
|
||||
expectModalIsClosed(wrapper)
|
||||
expect(closeHandler).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should ignore event when action disabled', () => {
|
||||
const actions1 = jest.fn()
|
||||
const actions2 = jest.fn()
|
||||
const wrapper = mount(
|
||||
<Modal open={true}>
|
||||
<Modal.Title>Modal</Modal.Title>
|
||||
<Modal.Action passive onClick={actions1}>Submit</Modal.Action>
|
||||
<Modal.Action disabled onClick={actions2}>Submit</Modal.Action>
|
||||
</Modal>
|
||||
)
|
||||
wrapper.find('button').at(0).simulate('click', nativeEvent)
|
||||
wrapper.find('button').at(1).simulate('click', nativeEvent)
|
||||
|
||||
expect(actions1).toHaveBeenCalled()
|
||||
expect(actions2).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should be close modal through action event', async () => {
|
||||
const closeHandler = jest.fn()
|
||||
const wrapper = mount(
|
||||
<Modal open={true} onClose={closeHandler}>
|
||||
<Modal.Title>Modal</Modal.Title>
|
||||
<Modal.Action passive onClick={e => e.close()}>Close</Modal.Action>
|
||||
</Modal>
|
||||
)
|
||||
wrapper.find('button').at(0).simulate('click', nativeEvent)
|
||||
await updateWrapper(wrapper, 500)
|
||||
expectModalIsClosed(wrapper)
|
||||
expect(closeHandler).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
37
components/modal/__tests__/use-modal.test.tsx
Normal file
37
components/modal/__tests__/use-modal.test.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { mount, ReactWrapper } from 'enzyme'
|
||||
import { Modal, useModal } from 'components'
|
||||
import { updateWrapper } from 'tests/utils'
|
||||
|
||||
export const expectModalIsOpened = (wrapper: ReactWrapper) => {
|
||||
expect(wrapper.find('.content').length).not.toBe(0)
|
||||
}
|
||||
|
||||
export const expectModalIsClosed = (wrapper: ReactWrapper) => {
|
||||
expect(wrapper.find('.content').length).toBe(0)
|
||||
}
|
||||
|
||||
describe('UseModal', () => {
|
||||
it('should follow change with use-modal', async () => {
|
||||
const MockModal: React.FC<{ show?: boolean }> = ({ show }) => {
|
||||
const { setVisible, bindings } = useModal(false)
|
||||
useEffect(() => {
|
||||
if (show !== undefined) setVisible(show)
|
||||
}, [show])
|
||||
return (
|
||||
<Modal {...bindings}>
|
||||
<Modal.Title>Modal</Modal.Title>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
const wrapper = mount(<MockModal />)
|
||||
wrapper.setProps({ show: true })
|
||||
await updateWrapper(wrapper, 300)
|
||||
expectModalIsOpened(wrapper)
|
||||
|
||||
wrapper.setProps({ show: false })
|
||||
await updateWrapper(wrapper, 500)
|
||||
expectModalIsClosed(wrapper)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user