mirror of
https://github.com/zhigang1992/react.git
synced 2026-03-27 22:54:38 +08:00
test(note): add testcase
This commit is contained in:
unix
211
components/note/__tests__/__snapshots__/index.test.tsx.snap
Normal file
211
components/note/__tests__/__snapshots__/index.test.tsx.snap
Normal file
@@ -0,0 +1,211 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Note should render correctly 1`] = `
|
||||
"<div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>note<style>
|
||||
.note {
|
||||
padding: 8pt 16pt;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #eaeaea;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.note :global(p) {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
line-height: 1.5;
|
||||
padding-right: 4pt;
|
||||
}
|
||||
|
||||
</style></div>"
|
||||
`;
|
||||
|
||||
exports[`Note should work with different styles 1`] = `
|
||||
"<div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>secondary<style>
|
||||
.note {
|
||||
padding: calc(8pt / 2) calc(16pt / 2);
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #666;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.note :global(p) {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
line-height: 1.5;
|
||||
padding-right: 4pt;
|
||||
}
|
||||
|
||||
</style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>success<style>
|
||||
.note {
|
||||
padding: 8pt 16pt;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #0070f3;
|
||||
color: #fff;
|
||||
background-color: #0070f3;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.note :global(p) {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
line-height: 1.5;
|
||||
padding-right: 4pt;
|
||||
}
|
||||
|
||||
</style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>warning<style>
|
||||
.note {
|
||||
padding: 8pt 16pt;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #000;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.note :global(p) {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
line-height: 1.5;
|
||||
padding-right: 4pt;
|
||||
}
|
||||
|
||||
</style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>error<style>
|
||||
.note {
|
||||
padding: calc(8pt / 2) calc(16pt / 2);
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #000;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.note :global(p) {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
line-height: 1.5;
|
||||
padding-right: 4pt;
|
||||
}
|
||||
|
||||
</style></div></div>"
|
||||
`;
|
||||
|
||||
exports[`Note should work with different types 1`] = `
|
||||
"<div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>secondary<style>
|
||||
.note {
|
||||
padding: 8pt 16pt;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #666;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.note :global(p) {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
line-height: 1.5;
|
||||
padding-right: 4pt;
|
||||
}
|
||||
|
||||
</style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>success<style>
|
||||
.note {
|
||||
padding: 8pt 16pt;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #0070f3;
|
||||
color: #0070f3;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.note :global(p) {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
line-height: 1.5;
|
||||
padding-right: 4pt;
|
||||
}
|
||||
|
||||
</style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>warning<style>
|
||||
.note {
|
||||
padding: 8pt 16pt;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #f5a623;
|
||||
color: #f5a623;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.note :global(p) {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
line-height: 1.5;
|
||||
padding-right: 4pt;
|
||||
}
|
||||
|
||||
</style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>error<style>
|
||||
.note {
|
||||
padding: 8pt 16pt;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #ff0000;
|
||||
color: #ff0000;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.note :global(p) {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
line-height: 1.5;
|
||||
padding-right: 4pt;
|
||||
}
|
||||
|
||||
</style></div></div>"
|
||||
`;
|
||||
48
components/note/__tests__/index.test.tsx
Normal file
48
components/note/__tests__/index.test.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React from 'react'
|
||||
import { mount } from 'enzyme'
|
||||
import { Note } from 'components'
|
||||
import { updateWrapper } from 'tests/utils'
|
||||
|
||||
describe('Note', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(<Note>note</Note>)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should work with different types', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Note type="secondary">secondary</Note>
|
||||
<Note type="success">success</Note>
|
||||
<Note type="warning">warning</Note>
|
||||
<Note type="error">error</Note>
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('custom labels should be rendered', async () => {
|
||||
const wrapper = mount(<Note label={false}>note</Note>)
|
||||
expect(wrapper.find('.label').length).toBe(0)
|
||||
|
||||
wrapper.setProps({ label: 'test' })
|
||||
await updateWrapper(wrapper)
|
||||
expect(wrapper.find('.label').text().toLowerCase())
|
||||
.toContain('test')
|
||||
})
|
||||
|
||||
it('should work with different styles', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Note type="secondary" small>secondary</Note>
|
||||
<Note type="success" filled>success</Note>
|
||||
<Note filled>warning</Note>
|
||||
<Note filled small>error</Note>
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user