Skip to content

Commit 9899451

Browse files
author
devin
authored
feat: 补充单元测试 (#192)
* docs: 完善Progress文档 * fix: 完善progress单元测试 * fix: 更改progress组件定义方式
1 parent a8b6803 commit 9899451

File tree

4 files changed

+173
-48
lines changed

4 files changed

+173
-48
lines changed

‎packages/devui-vue/devui/progress/__tests__/progress.spec.ts

Lines changed: 57 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,73 @@
11
import { mount } from '@vue/test-utils';
2-
import Progress from '../progress';
2+
import Progress from '../src/progress';
33

4-
describe('d-progress', () => {
5-
it('height', () => {
6-
const wrapper = mount(Progress, {
7-
props: { height: '20px' },
4+
describe('progress', () => {
5+
describe('progress basic', () => {
6+
const TestComponent = {
7+
components: {
8+
'd-progress': Progress,
9+
},
10+
template: `
11+
<div class="progress-container">
12+
<d-progress :percentage="80" percentageText="80%"></d-progress>
13+
</div>
14+
`,
15+
}
16+
const wrapper = mount(TestComponent)
17+
it('Progress demo has created successfully', async () => {
18+
expect(wrapper).toBeTruthy()
19+
})
20+
})
21+
22+
describe('read only', () => {
23+
it('percentage should be rendered correctly', () => {
24+
const wrapper = mount(Progress, {
25+
props: { percentage: 20 },
26+
});
27+
expect(wrapper.props().percentage).toBe(20);
828
});
9-
expect(wrapper.props().height).toBe('20px');
10-
});
1129

12-
it('percentage', () => {
13-
const wrapper = mount(Progress, {
14-
props: { percentage: 20 },
30+
it('percentageText should be rendered correctly', () => {
31+
const wrapper = mount(Progress, {
32+
props: { percentageText: '30%' },
33+
});
34+
expect(wrapper.props().percentageText).toBe('30%');
1535
});
16-
expect(wrapper.props().percentage).toBe(20);
17-
});
1836

19-
it('percentageText', () => {
20-
const wrapper = mount(Progress, {
21-
props: { percentageText: '30%' },
37+
it('barbgcolor should be rendered correctly', () => {
38+
const wrapper = mount(Progress, {
39+
props: { barBgColor: '#5170ff' },
40+
});
41+
expect(wrapper.props().barBgColor).toBe('#5170ff');
2242
});
23-
expect(wrapper.props().percentageText).toBe('30%');
24-
});
2543

26-
it('barbgcolor', () => {
27-
const wrapper = mount(Progress, {
28-
props: { barbgcolor: '#5170ff' },
44+
it('height should be rendered correctly', () => {
45+
const wrapper = mount(Progress, {
46+
props: { height: '20px' },
47+
});
48+
expect(wrapper.props().height).toBe('20px');
2949
});
30-
expect(wrapper.props().barbgcolor).toBe('#5170ff');
31-
});
3250

33-
it('isCircle', () => {
34-
const wrapper = mount(Progress, {
35-
props: { isCircle: false },
51+
it('isCircle should be rendered correctly', () => {
52+
const wrapper = mount(Progress, {
53+
props: { isCircle: false },
54+
});
55+
expect(wrapper.props().isCircle).toBe(false);
3656
});
37-
expect(wrapper.props().isCircle).toBe(false);
38-
});
3957

40-
it('strokeWidth', () => {
41-
const wrapper = mount(Progress, {
42-
props: { strokeWidth: 6 },
58+
it('strokeWidth should be rendered correctly', () => {
59+
const wrapper = mount(Progress, {
60+
props: { strokeWidth: 6 },
61+
});
62+
expect(wrapper.props().strokeWidth).toBe(6);
4363
});
44-
expect(wrapper.props().strokeWidth).toBe(6);
45-
});
4664

47-
it('showContent', () => {
48-
const wrapper = mount(Progress, {
49-
props: { showContent: true },
65+
it('showContent should be rendered correctly', () => {
66+
const wrapper = mount(Progress, {
67+
props: { showContent: true },
68+
});
69+
expect(wrapper.props().showContent).toBe(true);
5070
});
51-
expect(wrapper.props().showContent).toBe(true);
52-
});
71+
})
5372
});
73+

‎packages/devui-vue/devui/progress/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { App } from 'vue'
2-
import Progress from './src/progress'
2+
import { Progress } from './src/progress'
33

44
Progress.install = function(app: App) {
55
app.component(Progress.name, Progress)

‎packages/devui-vue/docs/components/progress/index.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@
88
3. 当需要显示一个操作完成的百分比或已完成的步骤/总步骤时。
99

1010
### 基本用法
11+
基本的进度和文字配置。
1112

12-
13-
::: demo 基本的进度和文字配置。
13+
::: demo
1414
```vue
1515
<template>
16-
<section class="devui-code-box-demo">
17-
<div class="progress-container">
18-
<d-progress :percentage="80" percentageText="80%"></d-progress>
19-
</div>
20-
<div class="progress-container">
21-
<d-progress :percentage="30" percentageText="30%" barBgColor="#50D4AB" height="30px"></d-progress>
22-
</div>
23-
</section>
16+
<section class="devui-code-box-demo">
17+
<div class="progress-container">
18+
<d-progress :percentage="80" percentageText="80%"></d-progress>
19+
</div>
20+
<div class="progress-container">
21+
<d-progress :percentage="30" percentageText="30%" barBgColor="#50D4AB" height="30px"></d-progress>
22+
</div>
23+
</section>
2424
</template>
2525
<style>
2626
.progress-container {
@@ -38,6 +38,8 @@
3838
:::
3939

4040
### 圆环用法
41+
基本的进度和文字配置。
42+
4143
::: demo
4244
```vue
4345
<template>

‎packages/devui-vue/docs/en-US/components/progress/index.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
# Progress
2+
3+
Progress bar.
4+
5+
### When To Use
6+
1. When the operation takes a long time.
7+
2. When an operation takes a long time to interrupt the current interface or background operation.
8+
3. To display the percentage of completed operations or the number of completed steps/total steps.
9+
10+
### Basic Usage
11+
Basic progress and text configuration.
12+
13+
::: demo
14+
```vue
15+
<template>
16+
<section class="devui-code-box-demo">
17+
<div class="progress-container">
18+
<d-progress :percentage="80" percentageText="80%"></d-progress>
19+
</div>
20+
<div class="progress-container">
21+
<d-progress :percentage="30" percentageText="30%" barBgColor="#50D4AB" height="30px"></d-progress>
22+
</div>
23+
</section>
24+
</template>
25+
<style>
26+
.progress-container {
27+
margin-bottom: 20px;
28+
}
29+
.devui-code-box-demo{
30+
border-bottom: 1px dashed #dfe1e6;
31+
padding: 16px 0;
32+
.progress-container {
33+
margin-bottom: 20px;
34+
}
35+
}
36+
</style>
37+
```
38+
:::
39+
40+
### Circle Usage
41+
Basic progress and text configuration.
42+
43+
::: demo
44+
```vue
45+
<template>
46+
<section class="devui-code-box-demo">
47+
<div class="progress-container-circle">
48+
<d-progress :isCircle="true" :percentage="80" :showContent="false"> </d-progress>
49+
</div>
50+
<div class="progress-container-circle">
51+
<d-progress :isCircle="true" :percentage="80" barBgColor="#50D4AB" :strokeWidth="8">
52+
</d-progress>
53+
</div>
54+
<div class="progress-container-circle">
55+
<d-progress :isCircle="true" :percentage="80" barBgColor="#50D4AB">
56+
<span class="icon-position">
57+
<d-icon
58+
name="right"
59+
color="#3dcca6"
60+
/>
61+
</span>
62+
</d-progress>
63+
</div>
64+
</section>
65+
</template>
66+
<style>
67+
.progress-container-circle {
68+
height: 130px;
69+
width: 130px;
70+
font-size: 20px;
71+
display: inline-block;
72+
margin-right: 10px;
73+
}
74+
.icon-position {
75+
position: absolute;
76+
top: 50%;
77+
left: 50%;
78+
width: 100%;
79+
margin: 0;
80+
padding: 0;
81+
line-height: 1;
82+
white-space: normal;
83+
text-align: center;
84+
transform: translate(-50%, -50%);
85+
color: #50d4ab;
86+
font-size: 24px;
87+
}
88+
89+
</style>
90+
```
91+
:::
92+
93+
### API
94+
#### d-progress parameter
95+
| Parameter | Type | Default | Description | Jump to Demo |
96+
| :---: | :---: | :---: | :---: | :---: |
97+
| percentage | `number` | 0 | Optional. The maximum value of the progress bar is 100. | [Basic Usage](#basic-usage) |
98+
| percentageText | `string` | -- | Optional. Text description of the current value of the progress bar, for example, '30%'\|'4/5' | [Basic Usage](#basic-usage) |
99+
| barBgColor | `string` | #5170ff | Optional. Color of the progress bar. The default value is sky blue. | [Basic Usage](#basic-usage) |
100+
| height | `string` | 20px | Optional. The default value is 20px. | [Basic Usage](#basic-usage) |
101+
| isCircle | `boolean` | false | Optional. Whether the progress bar is displayed in a circle. | [Circle Usage](#circle-usage) |
102+
| strokeWidth | `number` | 6 | Optional. Sets the width of the progress bar. The unit is the percentage of the progress bar to the width of the canvas. | [Circle Usage](#circle-usage) |
103+
| showContent | `boolean` | true | Optional. Sets whether to display content in the circle progress bar. | [Circle Usage](#circle-usage) |

0 commit comments

Comments
 (0)