mirror of
https://github.com/zhigang1992/react.git
synced 2026-03-26 22:42:51 +08:00
test(progress): add testcase
This commit is contained in:
unix
421
components/progress/__tests__/__snapshots__/index.test.tsx.snap
Normal file
421
components/progress/__tests__/__snapshots__/index.test.tsx.snap
Normal file
@@ -0,0 +1,421 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Progress should be render background-color with color prop 1`] = `
|
||||
"<div class=\\"progress \\"><div class=\\"inner\\" title=\\"59%\\"></div><progress class=\\"\\" value=\\"59\\" max=\\"100\\"></progress><style>
|
||||
progress {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: unset;
|
||||
bottom: unset;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fixed > .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
transition: all 100ms ease-in;
|
||||
border-radius: 5px;
|
||||
background-color: #111;
|
||||
width: 59%;
|
||||
}
|
||||
</style></div>"
|
||||
`;
|
||||
|
||||
exports[`Progress should fixed 1`] = `
|
||||
"<div><div class=\\"progress fixed\\"><div class=\\"inner\\" title=\\"59%\\"></div><progress class=\\"\\" value=\\"59\\" max=\\"100\\"></progress><style>
|
||||
progress {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: unset;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fixed > .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
transition: all 100ms ease-in;
|
||||
border-radius: 5px;
|
||||
background-color: #000;
|
||||
width: 59%;
|
||||
}
|
||||
</style></div><div class=\\"progress fixed\\"><div class=\\"inner\\" title=\\"21%\\"></div><progress class=\\"\\" value=\\"21\\" max=\\"100\\"></progress><style>
|
||||
progress {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fixed > .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
transition: all 100ms ease-in;
|
||||
border-radius: 5px;
|
||||
background-color: #000;
|
||||
width: 21%;
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
|
||||
exports[`Progress should render correctly 1`] = `
|
||||
"<div class=\\"progress \\"><div class=\\"inner\\" title=\\"59%\\"></div><progress class=\\"\\" value=\\"59\\" max=\\"100\\"></progress><style>
|
||||
progress {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: unset;
|
||||
bottom: unset;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fixed > .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
transition: all 100ms ease-in;
|
||||
border-radius: 5px;
|
||||
background-color: #000;
|
||||
width: 59%;
|
||||
}
|
||||
</style></div>"
|
||||
`;
|
||||
|
||||
exports[`Progress should show different progress by maximum 1`] = `
|
||||
"<div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"98.33%\\"></div><progress class=\\"\\" value=\\"59\\" max=\\"60\\"></progress><style>
|
||||
progress {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: unset;
|
||||
bottom: unset;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fixed > .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
transition: all 100ms ease-in;
|
||||
border-radius: 5px;
|
||||
background-color: #000;
|
||||
width: 98.33%;
|
||||
}
|
||||
</style></div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"42%\\"></div><progress class=\\"\\" value=\\"21\\" max=\\"50\\"></progress><style>
|
||||
progress {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: unset;
|
||||
bottom: unset;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fixed > .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
transition: all 100ms ease-in;
|
||||
border-radius: 5px;
|
||||
background-color: #000;
|
||||
width: 42%;
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
|
||||
exports[`Progress should work with different types 1`] = `
|
||||
"<div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"59%\\"></div><progress class=\\"\\" value=\\"59\\" max=\\"100\\"></progress><style>
|
||||
progress {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: unset;
|
||||
bottom: unset;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fixed > .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
transition: all 100ms ease-in;
|
||||
border-radius: 5px;
|
||||
background-color: #666;
|
||||
width: 59%;
|
||||
}
|
||||
</style></div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"21%\\"></div><progress class=\\"\\" value=\\"21\\" max=\\"100\\"></progress><style>
|
||||
progress {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: unset;
|
||||
bottom: unset;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fixed > .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
transition: all 100ms ease-in;
|
||||
border-radius: 5px;
|
||||
background-color: #0070f3;
|
||||
width: 21%;
|
||||
}
|
||||
</style></div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"2%\\"></div><progress class=\\"\\" value=\\"2\\" max=\\"100\\"></progress><style>
|
||||
progress {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: unset;
|
||||
bottom: unset;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fixed > .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
transition: all 100ms ease-in;
|
||||
border-radius: 5px;
|
||||
background-color: #f5a623;
|
||||
width: 2%;
|
||||
}
|
||||
</style></div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"1%\\"></div><progress class=\\"\\" value=\\"1\\" max=\\"100\\"></progress><style>
|
||||
progress {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: unset;
|
||||
bottom: unset;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fixed > .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
transition: all 100ms ease-in;
|
||||
border-radius: 5px;
|
||||
background-color: #ff0000;
|
||||
width: 1%;
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
65
components/progress/__tests__/index.test.tsx
Normal file
65
components/progress/__tests__/index.test.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react'
|
||||
import { mount } from 'enzyme'
|
||||
import { Progress } from 'components'
|
||||
|
||||
describe('Progress', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(<Progress value={59} />)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should work with different types', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Progress value={59} type="secondary" />
|
||||
<Progress value={21} type="success" />
|
||||
<Progress value={2} type="warning" />
|
||||
<Progress value={1} type="error" />
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should show different progress by maximum', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Progress value={59} max={60} />
|
||||
<Progress value={21} max={50} />
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should fixed', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Progress value={59} fixedTop />
|
||||
<Progress value={21} fixedBottom />
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should be render background-color with color prop', () => {
|
||||
const colors = {
|
||||
20: '#ccc',
|
||||
100: '#111',
|
||||
}
|
||||
const wrapper = mount(<Progress value={59} colors={colors} />)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should be ignore wrong colors', () => {
|
||||
const colors = {
|
||||
'qq': '#ccc',
|
||||
10: '#111',
|
||||
}
|
||||
const wrapper = mount(<Progress value={59} colors={colors} />)
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user