mirror of
https://github.com/zhigang1992/react.git
synced 2026-03-26 06:55:07 +08:00
test(loading): add testcase
This commit is contained in:
unix
793
components/loading/__tests__/__snapshots__/index.test.tsx.snap
Normal file
793
components/loading/__tests__/__snapshots__/index.test.tsx.snap
Normal file
@@ -0,0 +1,793 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Loading should render correctly 1`] = `
|
||||
"<div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #444;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div>"
|
||||
`;
|
||||
|
||||
exports[`Loading should render correctly 2`] = `[Function]`;
|
||||
|
||||
exports[`Loading should work with custom styles 1`] = `
|
||||
"<div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #444;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #444;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
|
||||
exports[`Loading should work with custom styles 2`] = `[Function]`;
|
||||
|
||||
exports[`Loading should work with different sizes 1`] = `
|
||||
"<div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
background-color: #444;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
background-color: #444;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #444;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: #444;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
|
||||
exports[`Loading should work with different sizes 2`] = `[Function]`;
|
||||
|
||||
exports[`Loading should work with different types 1`] = `
|
||||
"<div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #0070f3;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #666;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #f5a623;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
|
||||
.loading-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
label :global(*) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #ff0000;
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
animation: loading-blink 1.4s infinite both;
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loading-blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
|
||||
exports[`Loading should work with different types 2`] = `[Function]`;
|
||||
56
components/loading/__tests__/index.test.tsx
Normal file
56
components/loading/__tests__/index.test.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from 'react'
|
||||
import { mount } from 'enzyme'
|
||||
import { Loading } from 'components'
|
||||
|
||||
describe('Loading', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(<Loading />)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('should work with different types', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Loading type="success" />
|
||||
<Loading type="secondary" />
|
||||
<Loading type="warning" />
|
||||
<Loading type="error" />
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('should work with different sizes', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Loading size="mini" />
|
||||
<Loading size="small" />
|
||||
<Loading size="medium" />
|
||||
<Loading size="large" />
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('should work with custom styles', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Loading color="#fff" />
|
||||
<Loading width="20%" />
|
||||
<Loading height="10px" />
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('should work with children', () => {
|
||||
const wrapper = mount(<Loading>test-children</Loading>)
|
||||
expect(wrapper.find('.loading').text())
|
||||
.toContain('test-children')
|
||||
})
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user