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 {render} from '@testing-library/react';
|
||||||
import '../../src';
|
import '../../src';
|
||||||
import {render as amisRender} from '../../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(
|
const {container} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
{
|
{
|
||||||
@ -17,4 +30,220 @@ test('Renderer:progress', () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
expect(container).toMatchSnapshot();
|
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
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`Renderer:progress 1`] = `
|
exports[`Renderer:Progress 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="cxd-Progress"
|
class="cxd-Progress"
|
||||||
@ -32,3 +32,425 @@ exports[`Renderer:progress 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</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