feat(progress): 补充单元测试

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

@@ -1,53 +1,73 @@
 import { mount } from '@vue/test-utils';
-import Progress from '../progress';
+import Progress from '../src/progress';
 
-describe('d-progress', () => {
-    it('height', () => {
-        const wrapper = mount(Progress, {
-            props: { height: '20px' },
+describe('progress', () => {
+    describe('progress basic', () => {
+        const TestComponent = {
+            components: {
+                'd-progress': Progress,
+            },
+            template: `
+                <div class="progress-container">
+                    <d-progress :percentage="80" percentageText="80%"></d-progress>
+                </div>
+            `,
+        }
+        const wrapper = mount(TestComponent)
+        it('Progress demo has created successfully', async () => {
+            expect(wrapper).toBeTruthy()
+        })
+    })
+
+    describe('read only', () => {
+        it('percentage should be rendered correctly', () => {
+            const wrapper = mount(Progress, {
+                props: { percentage: 20 },
+            });
+            expect(wrapper.props().percentage).toBe(20);
         });
-        expect(wrapper.props().height).toBe('20px');
-    });
 
-    it('percentage', () => {
-        const wrapper = mount(Progress, {
-            props: { percentage: 20 },
+        it('percentageText should be rendered correctly', () => {
+            const wrapper = mount(Progress, {
+                props: { percentageText: '30%' },
+            });
+            expect(wrapper.props().percentageText).toBe('30%');
         });
-        expect(wrapper.props().percentage).toBe(20);
-    });
 
-    it('percentageText', () => {
-        const wrapper = mount(Progress, {
-            props: { percentageText: '30%' },
+        it('barbgcolor should be rendered correctly', () => {
+            const wrapper = mount(Progress, {
+                props: { barBgColor: '#5170ff' },
+            });
+            expect(wrapper.props().barBgColor).toBe('#5170ff');
         });
-        expect(wrapper.props().percentageText).toBe('30%');
-    });
 
-    it('barbgcolor', () => {
-        const wrapper = mount(Progress, {
-            props: { barbgcolor: '#5170ff' },
+        it('height should be rendered correctly', () => {
+            const wrapper = mount(Progress, {
+                props: { height: '20px' },
+            });
+            expect(wrapper.props().height).toBe('20px');
         });
-        expect(wrapper.props().barbgcolor).toBe('#5170ff');
-    });
 
-    it('isCircle', () => {
-        const wrapper = mount(Progress, {
-            props: { isCircle: false },
+        it('isCircle should be rendered correctly', () => {
+            const wrapper = mount(Progress, {
+                props: { isCircle: false },
+            });
+            expect(wrapper.props().isCircle).toBe(false);
         });
-        expect(wrapper.props().isCircle).toBe(false);
-    });
 
-    it('strokeWidth', () => {
-        const wrapper = mount(Progress, {
-            props: { strokeWidth: 6 },
+        it('strokeWidth should be rendered correctly', () => {
+            const wrapper = mount(Progress, {
+                props: { strokeWidth: 6 },
+            });
+            expect(wrapper.props().strokeWidth).toBe(6);
         });
-        expect(wrapper.props().strokeWidth).toBe(6);
-    });
 
-    it('showContent', () => {
-        const wrapper = mount(Progress, {
-            props: { showContent: true },
+        it('showContent should be rendered correctly', () => {
+            const wrapper = mount(Progress, {
+                props: { showContent: true },
+            });
+            expect(wrapper.props().showContent).toBe(true);
         });
-        expect(wrapper.props().showContent).toBe(true);
-    });
+    })
 });
+

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

@@ -1,5 +1,5 @@
 import type { App } from 'vue'
-import Progress from './src/progress'
+import { Progress } from './src/progress'
 
 Progress.install = function(app: App) {
   app.component(Progress.name, Progress)

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

@@ -8,19 +8,19 @@
 3. 当需要显示一个操作完成的百分比或已完成的步骤/总步骤时。
 
 ### 基本用法
+基本的进度和文字配置。
 
-
-::: demo 基本的进度和文字配置。
+::: demo
 ```vue
 <template>
-<section class="devui-code-box-demo">
-    <div class="progress-container">
-        <d-progress :percentage="80" percentageText="80%"></d-progress>
-    </div>
-    <div class="progress-container">
-        <d-progress :percentage="30" percentageText="30%" barBgColor="#50D4AB" height="30px"></d-progress>
-    </div>
-</section>
+    <section class="devui-code-box-demo">
+        <div class="progress-container">
+            <d-progress :percentage="80" percentageText="80%"></d-progress>
+        </div>
+        <div class="progress-container">
+            <d-progress :percentage="30" percentageText="30%" barBgColor="#50D4AB" height="30px"></d-progress>
+        </div>
+    </section>
 </template>
 <style>
 .progress-container {
@@ -38,6 +38,8 @@
 :::
 
 ### 圆环用法
+基本的进度和文字配置。
+
 ::: demo
 ```vue
 <template>

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

@@ -0,0 +1,103 @@
+# Progress
+
+Progress bar.
+
+### When To Use
+1. When the operation takes a long time.
+2. When an operation takes a long time to interrupt the current interface or background operation.
+3. To display the percentage of completed operations or the number of completed steps/total steps.
+
+### Basic Usage
+Basic progress and text configuration.
+
+::: demo
+```vue
+<template>
+    <section class="devui-code-box-demo">
+        <div class="progress-container">
+            <d-progress :percentage="80" percentageText="80%"></d-progress>
+        </div>
+        <div class="progress-container">
+            <d-progress :percentage="30" percentageText="30%" barBgColor="#50D4AB" height="30px"></d-progress>
+        </div>
+    </section>
+</template>
+<style>
+.progress-container {
+    margin-bottom: 20px;
+}
+.devui-code-box-demo{
+    border-bottom: 1px dashed #dfe1e6;
+    padding: 16px 0;
+    .progress-container {
+        margin-bottom: 20px;
+    }
+}
+</style>
+```
+:::
+
+### Circle Usage
+Basic progress and text configuration.
+
+::: demo
+```vue
+<template>
+    <section class="devui-code-box-demo">
+        <div class="progress-container-circle">
+            <d-progress :isCircle="true" :percentage="80" :showContent="false"> </d-progress>
+        </div>
+        <div class="progress-container-circle">
+            <d-progress :isCircle="true" :percentage="80" barBgColor="#50D4AB" :strokeWidth="8">
+            </d-progress>
+        </div>
+        <div class="progress-container-circle">
+            <d-progress :isCircle="true" :percentage="80" barBgColor="#50D4AB">
+                <span class="icon-position">
+                    <d-icon
+                        name="right"
+                        color="#3dcca6"
+                    />
+                </span>
+            </d-progress>
+        </div>
+    </section>
+</template>
+<style>
+.progress-container-circle {
+    height: 130px;
+    width: 130px;
+    font-size: 20px;
+    display: inline-block;
+    margin-right: 10px;
+}
+.icon-position {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+    white-space: normal;
+    text-align: center;
+    transform: translate(-50%, -50%);
+    color: #50d4ab;
+    font-size: 24px;
+}
+
+</style>
+```
+:::
+
+### API
+#### d-progress parameter
+| Parameter | Type | Default | Description | Jump to Demo |
+| :---: | :---: | :---: | :---: | :---: |
+| percentage | `number` | 0 | Optional. The maximum value of the progress bar is 100. | [Basic Usage](#basic-usage) |
+| percentageText |  `string` | -- | Optional. Text description of the current value of the progress bar, for example, '30%'\|'4/5' | [Basic Usage](#basic-usage) |
+| barBgColor |  `string` | #5170ff | Optional. Color of the progress bar. The default value is sky blue. | [Basic Usage](#basic-usage) |
+| height |  `string` | 20px | Optional. The default value is 20px. | [Basic Usage](#basic-usage) |
+| isCircle |  `boolean` | false | Optional. Whether the progress bar is displayed in a circle. | [Circle Usage](#circle-usage) |
+| 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) |
+| showContent |  `boolean` | true | Optional. Sets whether to display content in the circle progress bar. | [Circle Usage](#circle-usage) |