mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-26 05:15:44 +08:00
test(textarea): add testcase
This commit is contained in:
unix
181
components/textarea/__tests__/__snapshots__/index.test.tsx.snap
Normal file
181
components/textarea/__tests__/__snapshots__/index.test.tsx.snap
Normal file
@@ -0,0 +1,181 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Textarea should render correctly 1`] = `
|
||||
"<div class=\\"wrapper \\"><textarea placeholder=\\"placeholder\\"></textarea><style>
|
||||
.wrapper {
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
width: initial;
|
||||
min-width: 12.5rem;
|
||||
max-width: 95vw;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
color: #000;
|
||||
transition: border 0.2s ease 0s, color 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.wrapper.hover {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.wrapper.disabled {
|
||||
background-color: #fafafa;
|
||||
border-color: #eaeaea;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
|
||||
font-size: .875rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 6.25rem;
|
||||
resize: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 8pt;
|
||||
}
|
||||
|
||||
.disabled > textarea {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style></div>"
|
||||
`;
|
||||
|
||||
exports[`Textarea should work with different styles 1`] = `
|
||||
"<div><div class=\\"wrapper \\"><textarea></textarea><style>
|
||||
.wrapper {
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
width: initial;
|
||||
min-width: 12.5rem;
|
||||
max-width: 95vw;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #666;
|
||||
color: #000;
|
||||
transition: border 0.2s ease 0s, color 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.wrapper.hover {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.wrapper.disabled {
|
||||
background-color: #fafafa;
|
||||
border-color: #eaeaea;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
|
||||
font-size: .875rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 6.25rem;
|
||||
resize: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 8pt;
|
||||
}
|
||||
|
||||
.disabled > textarea {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style></div><div class=\\"wrapper \\"><textarea></textarea><style>
|
||||
.wrapper {
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
width: 20%;
|
||||
min-width: 12.5rem;
|
||||
max-width: 95vw;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
color: #000;
|
||||
transition: border 0.2s ease 0s, color 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.wrapper.hover {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.wrapper.disabled {
|
||||
background-color: #fafafa;
|
||||
border-color: #eaeaea;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
|
||||
font-size: .875rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 6.25rem;
|
||||
resize: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 8pt;
|
||||
}
|
||||
|
||||
.disabled > textarea {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style></div><div class=\\"wrapper \\"><textarea></textarea><style>
|
||||
.wrapper {
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
width: initial;
|
||||
min-width: 12.5rem;
|
||||
max-width: 95vw;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
color: #000;
|
||||
transition: border 0.2s ease 0s, color 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.wrapper.hover {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.wrapper.disabled {
|
||||
background-color: #fafafa;
|
||||
border-color: #eaeaea;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
|
||||
font-size: .875rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100px;
|
||||
resize: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 8pt;
|
||||
}
|
||||
|
||||
.disabled > textarea {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
72
components/textarea/__tests__/index.test.tsx
Normal file
72
components/textarea/__tests__/index.test.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import React from 'react'
|
||||
import { mount } from 'enzyme'
|
||||
import { Textarea } from 'components'
|
||||
import { nativeEvent } from 'tests/utils'
|
||||
|
||||
describe('Textarea', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(<Textarea placeholder="placeholder" />)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should work with different styles', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Textarea status="secondary" />
|
||||
<Textarea width="20%" />
|
||||
<Textarea minHeight="100px" />
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should set textarea from value', () => {
|
||||
const wrapper = mount(<Textarea initialValue="test-value" />)
|
||||
let el = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement
|
||||
expect(el.value).toEqual('test-value')
|
||||
|
||||
wrapper.setProps({ value: 'test-value2' })
|
||||
el = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement
|
||||
expect(el.value).toEqual('test-value2')
|
||||
})
|
||||
|
||||
it('should trigger events when textarea changed', () => {
|
||||
let value = ''
|
||||
const handler = jest.fn()
|
||||
.mockImplementation(e => value = e.target.value)
|
||||
const wrapper = mount(<Textarea onChange={handler} />)
|
||||
wrapper.find('textarea')
|
||||
.simulate('change', { target: { value: 'test-value' } })
|
||||
expect(handler).toHaveBeenCalled()
|
||||
expect(value).toEqual('test-value')
|
||||
handler.mockRestore()
|
||||
})
|
||||
|
||||
it('should ignore events when disabled or readonly', () => {
|
||||
const handler = jest.fn()
|
||||
const wrapper = mount(<Textarea onChange={handler} disabled />)
|
||||
wrapper.find('textarea')
|
||||
.simulate('change', { target: { value: 'test-value' } })
|
||||
expect(handler).not.toHaveBeenCalled()
|
||||
|
||||
wrapper.setProps({ disabled: false, readOnly: true })
|
||||
wrapper.find('textarea')
|
||||
.simulate('change', { target: { value: 'test-value2' } })
|
||||
expect(handler).not.toHaveBeenCalled()
|
||||
handler.mockRestore()
|
||||
})
|
||||
|
||||
it('should pass through blur event', () => {
|
||||
const blurHandler = jest.fn()
|
||||
const focusHandler = jest.fn()
|
||||
const wrapper = mount(<Textarea onBlur={blurHandler} onFocus={focusHandler} />)
|
||||
|
||||
wrapper.find('textarea').simulate('focus', nativeEvent)
|
||||
expect(focusHandler).toHaveBeenCalled()
|
||||
|
||||
wrapper.find('textarea').simulate('blur', nativeEvent)
|
||||
expect(blurHandler).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user