mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-15 17:31:18 +08:00
chore: Progress 单测补充 (#5973)
This commit is contained in:
sansiro
GitHub
parent
68754ec845
commit
8d0947bf98
@ -1,10 +1,23 @@
|
||||
import React = require('react');
|
||||
/**
|
||||
* 组件名称：Progress 进度条
|
||||
* 单测内容：
|
||||
* 1. 基础使用
|
||||
* 2. 颜色映射 map
|
||||
* 3. 阈值（刻度）threshold & showThresholdText
|
||||
* 4. 作为表单项
|
||||
* 5. 背景间隔 & 动画 stripe & animate
|
||||
* 6. 环形模式和仪表盘样式
|
||||
* 7. 线条宽度 strokeWidth
|
||||
* 8. 自定义 value 显示 valueTpl
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {render} from '@testing-library/react';
|
||||
import '../../src';
|
||||
import {render as amisRender} from '../../src';
|
||||
import {makeEnv} from '../helper';
|
||||
import {makeEnv, wait} from '../helper';
|
||||
|
||||
test('Renderer:progress', () => {
|
||||
test('Renderer:Progress', () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
@ -17,4 +30,220 @@ test('Renderer:progress', () => {
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
expect(container).toHaveTextContent('60%');
|
||||
expect(container.querySelector('.cxd-Progress-line-bar')).toHaveStyle({
|
||||
width: '60%'
|
||||
});
|
||||
});
|
||||
|
||||
test('Renderer:Progress with map', async () => {
|
||||
const {container, rerender} = render(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 20
|
||||
})
|
||||
);
|
||||
|
||||
const bar = () => container.querySelector('.cxd-Progress-line-bar')!;
|
||||
expect(bar()).toHaveClass('bg-danger');
|
||||
|
||||
rerender(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 40
|
||||
})
|
||||
);
|
||||
expect(bar()).toHaveClass('bg-warning');
|
||||
|
||||
rerender(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 60
|
||||
})
|
||||
);
|
||||
expect(bar()).toHaveClass('bg-info');
|
||||
|
||||
rerender(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 80
|
||||
})
|
||||
);
|
||||
expect(bar()).toHaveClass('bg-success');
|
||||
|
||||
rerender(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 60,
|
||||
map: '#F96D3E'
|
||||
})
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
expect(container.querySelector('.cxd-Progress-line-bar')!).toHaveStyle({
|
||||
'background-color': 'rgb(249, 109, 62)'
|
||||
});
|
||||
|
||||
rerender(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 29,
|
||||
map: [
|
||||
{
|
||||
value: 30,
|
||||
color: '#007bff'
|
||||
},
|
||||
{
|
||||
value: 60,
|
||||
color: '#F96D3E'
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
expect(container.querySelector('.cxd-Progress-line-bar')!).toHaveStyle({
|
||||
'background-color': 'rgb(0, 123, 255)'
|
||||
});
|
||||
});
|
||||
|
||||
test('Renderer:Progress with threshold & showThresholdText', async () => {
|
||||
const {container} = render(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 60,
|
||||
threshold: [
|
||||
{
|
||||
value: '30%',
|
||||
color: 'red'
|
||||
},
|
||||
{
|
||||
value: '90%',
|
||||
color: 'blue'
|
||||
}
|
||||
],
|
||||
showThresholdText: true
|
||||
})
|
||||
);
|
||||
|
||||
const thresholds = container.querySelectorAll('.cxd-Progress-line-threshold');
|
||||
expect(thresholds.length).toBe(2);
|
||||
|
||||
expect(thresholds[0]).toHaveStyle({
|
||||
'left': '30%',
|
||||
'border-color': 'red'
|
||||
});
|
||||
expect(thresholds[1]).toHaveStyle({
|
||||
'left': '90%',
|
||||
'border-color': 'blue'
|
||||
});
|
||||
|
||||
expect(container).toHaveTextContent('30%');
|
||||
expect(container).toHaveTextContent('90%');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:Progress as form item', async () => {
|
||||
const {container} = render(
|
||||
amisRender({
|
||||
type: 'form',
|
||||
data: {
|
||||
progress: 61
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'static-progress',
|
||||
name: 'progress',
|
||||
label: '进度'
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
expect(container.querySelector('.cxd-Progress-line-bar')).toHaveStyle({
|
||||
width: '61%'
|
||||
});
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:Progress with stripe & animate', async () => {
|
||||
const {container} = render(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
animate: true,
|
||||
value: 62,
|
||||
stripe: true
|
||||
})
|
||||
);
|
||||
|
||||
expect(container.querySelector('.cxd-Progress-line-bar')).toHaveClass(
|
||||
'cxd-Progress-line-bar--stripe cxd-Progress-line-bar--stripe-animate'
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:Progress with mode', async () => {
|
||||
const {container, rerender} = render(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 63,
|
||||
mode: 'circle'
|
||||
})
|
||||
);
|
||||
|
||||
expect(container.querySelector('.cxd-Progress-circle')).toBeInTheDocument();
|
||||
expect(container).toMatchSnapshot();
|
||||
|
||||
rerender(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 64,
|
||||
mode: 'dashboard',
|
||||
gapDegree: 100,
|
||||
gapPosition: 'left'
|
||||
})
|
||||
);
|
||||
|
||||
// gapDegree 与 gapPosition 无法验证，因为是 svg
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:Progress with strokeWidth', async () => {
|
||||
const {container, rerender} = render(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 65,
|
||||
strokeWidth: 12
|
||||
})
|
||||
);
|
||||
|
||||
expect(container.querySelector('.cxd-Progress-line-bar')).toHaveStyle({
|
||||
height: '12px'
|
||||
});
|
||||
|
||||
rerender(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
value: 66,
|
||||
mode: 'circle',
|
||||
strokeWidth: 8
|
||||
})
|
||||
);
|
||||
|
||||
expect(
|
||||
container.querySelector('.cxd-Progress-circle svg circle')
|
||||
).toHaveAttribute('stroke-width', '8');
|
||||
});
|
||||
|
||||
test('Renderer:Progress with valueTpl', async () => {
|
||||
const {container, rerender} = render(
|
||||
amisRender({
|
||||
type: 'progress',
|
||||
mode: 'circle',
|
||||
value: 67,
|
||||
valueTpl: '${value}个'
|
||||
})
|
||||
);
|
||||
|
||||
expect(container).toHaveTextContent('67个');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:progress 1`] = `
|
||||
exports[`Renderer:Progress 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Progress"
|
||||
@ -32,3 +32,425 @@ exports[`Renderer:progress 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:Progress as form item 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="cxd-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
表单
|
||||
</span>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="cxd-Form cxd-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Form-label"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
进度
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-Form-static"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line-inter"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line-bar bg-success"
|
||||
style="width: 61%;"
|
||||
title="61%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="cxd-Progress-line-text"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
61%
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-footerWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-btnToolbar cxd-Panel-footer"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--primary cxd-Button--size-default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
提交
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="resize-sensor"
|
||||
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-expand"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-shrink"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-appear"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:Progress with map 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Progress"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line-inter"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line-bar"
|
||||
style="width: 60%; background-color: rgb(249, 109, 62);"
|
||||
title="60%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="cxd-Progress-line-text"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
60%
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:Progress with mode 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Progress"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-circle"
|
||||
style="width: 80px; height: 80px;"
|
||||
>
|
||||
<svg
|
||||
class="bg-success-circle"
|
||||
role="presentation"
|
||||
style="width: 80px; height: 80px;"
|
||||
viewBox="-50 -50 100 100"
|
||||
>
|
||||
<circle
|
||||
class="bg-success-circle-trail"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="46"
|
||||
stroke="#D9D9D9"
|
||||
stroke-linecap="round"
|
||||
stroke-width="8"
|
||||
style="stroke: #D9D9D9; stroke-dasharray: 289.02652413026095px 289.02652413026095; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="bg-success-circle-path"
|
||||
cx="0"
|
||||
cy="0"
|
||||
opacity="1"
|
||||
r="46"
|
||||
stroke-linecap="round"
|
||||
stroke-width="8"
|
||||
style="stroke-dasharray: 289.02652413026095px 289.02652413026095; stroke-dashoffset: 110.93981392819656; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="cxd-Progress-circle-text"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
63%
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:Progress with mode 2`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Progress"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-circle"
|
||||
style="width: 80px; height: 80px;"
|
||||
>
|
||||
<svg
|
||||
class="bg-success-circle"
|
||||
role="presentation"
|
||||
style="width: 80px; height: 80px;"
|
||||
viewBox="-50 -50 100 100"
|
||||
>
|
||||
<circle
|
||||
class="bg-success-circle-trail"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="46"
|
||||
stroke="#D9D9D9"
|
||||
stroke-linecap="round"
|
||||
stroke-width="8"
|
||||
style="stroke: #D9D9D9; stroke-dasharray: 208.7413785385218px 289.02652413026095; stroke-dashoffset: 0; transform: rotate(230deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="bg-success-circle-path"
|
||||
cx="0"
|
||||
cy="0"
|
||||
opacity="1"
|
||||
r="46"
|
||||
stroke-linecap="round"
|
||||
stroke-width="8"
|
||||
style="stroke-dasharray: 208.7413785385218px 289.02652413026095; stroke-dashoffset: 79.14689627386784; transform: rotate(230deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="cxd-Progress-circle-text"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
64%
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:Progress with stripe & animate 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Progress"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line-inter"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line-bar bg-success cxd-Progress-line-bar--stripe cxd-Progress-line-bar--stripe-animate"
|
||||
style="width: 62%;"
|
||||
title="62%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="cxd-Progress-line-text"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
62%
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:Progress with threshold & showThresholdText 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Progress"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line-threshold"
|
||||
style="left: 30%; border-color: red;"
|
||||
>
|
||||
<span
|
||||
class="cxd-Progress-line-threshold-text"
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Progress-line-threshold"
|
||||
style="left: 90%; border-color: blue;"
|
||||
>
|
||||
<span
|
||||
class="cxd-Progress-line-threshold-text"
|
||||
>
|
||||
90%
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Progress-line-inter"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-line-bar bg-info"
|
||||
style="width: 60%;"
|
||||
title="60%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="cxd-Progress-line-text"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
60%
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:Progress with valueTpl 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Progress"
|
||||
>
|
||||
<div
|
||||
class="cxd-Progress-circle"
|
||||
style="width: 80px; height: 80px;"
|
||||
>
|
||||
<svg
|
||||
class="bg-success-circle"
|
||||
role="presentation"
|
||||
style="width: 80px; height: 80px;"
|
||||
viewBox="-50 -50 100 100"
|
||||
>
|
||||
<circle
|
||||
class="bg-success-circle-trail"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="46"
|
||||
stroke="#D9D9D9"
|
||||
stroke-linecap="round"
|
||||
stroke-width="8"
|
||||
style="stroke: #D9D9D9; stroke-dasharray: 289.02652413026095px 289.02652413026095; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="bg-success-circle-path"
|
||||
cx="0"
|
||||
cy="0"
|
||||
opacity="1"
|
||||
r="46"
|
||||
stroke-linecap="round"
|
||||
stroke-width="8"
|
||||
style="stroke-dasharray: 289.02652413026095px 289.02652413026095; stroke-dashoffset: 99.37875296298611; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="cxd-Progress-circle-text"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
67个
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user