test(Progress): add test case (#741)

* test(Progress): add test case * fix: fix cr * chore: update _common
Tencent · May 30, 2023 · 23ba3b1 · 23ba3b1
1 parent c17cf72
commit 23ba3b1
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 55 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/progress/__test__/__snapshots__/demo.test.jsx.snap b/src/progress/__test__/__snapshots__/demo.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`Progress > Progress baseVue demo works fine 1`] = `
     >
       <!-- LINE -->
       <div
-        class="t-progress--thin t-progress--status--default"
+        class="t-progress--thin t-progress--status-default"
       >
         <div
           class="t-progress__bar"
@@ -49,7 +49,7 @@ exports[`Progress > Progress baseVue demo works fine 1`] = `
       <!--v-if-->
       <!-- PLUMP -->
       <div
-        class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--default"
+        class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
       >
         <div
           class="t-progress__inner"
@@ -81,7 +81,7 @@ exports[`Progress > Progress baseVue demo works fine 1`] = `
       <!--v-if-->
       <!-- CIRCLE -->
       <div
-        class="t-progress--circle t-progress--status--default"
+        class="t-progress--circle t-progress--status-default"
         style="width: 112px; height: 112px;"
       >
         <div
@@ -139,7 +139,7 @@ exports[`Progress > Progress circleVue demo works fine 1`] = `
       <!--v-if-->
       <!-- CIRCLE -->
       <div
-        class="t-progress--circle t-progress--status--default"
+        class="t-progress--circle t-progress--status-default"
         style="width: 112px; height: 112px;"
       >
         <div
@@ -189,7 +189,7 @@ exports[`Progress > Progress circleVue demo works fine 1`] = `
       <!--v-if-->
       <!-- CIRCLE -->
       <div
-        class="t-progress--circle t-progress--status--warning"
+        class="t-progress--circle t-progress--status-warning"
         style="width: 112px; height: 112px;"
       >
         <div
@@ -251,7 +251,7 @@ exports[`Progress > Progress circleVue demo works fine 1`] = `
       <!--v-if-->
       <!-- CIRCLE -->
       <div
-        class="t-progress--circle t-progress--status--error"
+        class="t-progress--circle t-progress--status-error"
         style="width: 112px; height: 112px;"
       >
         <div
@@ -313,7 +313,7 @@ exports[`Progress > Progress circleVue demo works fine 1`] = `
       <!--v-if-->
       <!-- CIRCLE -->
       <div
-        class="t-progress--circle t-progress--status--success"
+        class="t-progress--circle t-progress--status-success"
         style="width: 112px; height: 112px;"
       >
         <div
@@ -379,7 +379,7 @@ exports[`Progress > Progress customVue demo works fine 1`] = `
     >
       <!-- LINE -->
       <div
-        class="t-progress--thin t-progress--status--default"
+        class="t-progress--thin t-progress--status-default"
       >
         <div
           class="t-progress__bar"
@@ -419,7 +419,7 @@ exports[`Progress > Progress customVue demo works fine 1`] = `
     >
       <!-- LINE -->
       <div
-        class="t-progress--thin t-progress--status--default"
+        class="t-progress--thin t-progress--status-default"
       >
         <div
           class="t-progress__bar"
@@ -459,7 +459,7 @@ exports[`Progress > Progress lineVue demo works fine 1`] = `
     >
       <!-- LINE -->
       <div
-        class="t-progress--thin t-progress--status--default"
+        class="t-progress--thin t-progress--status-default"
       >
         <div
           class="t-progress__bar"
@@ -491,7 +491,7 @@ exports[`Progress > Progress lineVue demo works fine 1`] = `
     >
       <!-- LINE -->
       <div
-        class="t-progress--thin t-progress--status--warning"
+        class="t-progress--thin t-progress--status-warning"
       >
         <div
           class="t-progress__bar"
@@ -535,7 +535,7 @@ exports[`Progress > Progress lineVue demo works fine 1`] = `
     >
       <!-- LINE -->
       <div
-        class="t-progress--thin t-progress--status--error"
+        class="t-progress--thin t-progress--status-error"
       >
         <div
           class="t-progress__bar"
@@ -579,7 +579,7 @@ exports[`Progress > Progress lineVue demo works fine 1`] = `
     >
       <!-- LINE -->
       <div
-        class="t-progress--thin t-progress--status--success"
+        class="t-progress--thin t-progress--status-success"
       >
         <div
           class="t-progress__bar"
@@ -670,7 +670,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
           >
             <!-- LINE -->
             <div
-              class="t-progress--thin t-progress--status--default"
+              class="t-progress--thin t-progress--status-default"
             >
               <div
                 class="t-progress__bar"
@@ -704,7 +704,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             <!--v-if-->
             <!-- PLUMP -->
             <div
-              class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--default"
+              class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
             >
               <div
                 class="t-progress__inner"
@@ -736,7 +736,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             <!--v-if-->
             <!-- CIRCLE -->
             <div
-              class="t-progress--circle t-progress--status--default"
+              class="t-progress--circle t-progress--status-default"
               style="width: 112px; height: 112px;"
             >
               <div
@@ -805,7 +805,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
         >
           <!-- LINE -->
           <div
-            class="t-progress--thin t-progress--status--default"
+            class="t-progress--thin t-progress--status-default"
           >
             <div
               class="t-progress__bar"
@@ -906,7 +906,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
           >
             <!-- LINE -->
             <div
-              class="t-progress--thin t-progress--status--default"
+              class="t-progress--thin t-progress--status-default"
             >
               <div
                 class="t-progress__bar"
@@ -946,7 +946,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
           >
             <!-- LINE -->
             <div
-              class="t-progress--thin t-progress--status--default"
+              class="t-progress--thin t-progress--status-default"
             >
               <div
                 class="t-progress__bar"
@@ -1009,7 +1009,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
           >
             <!-- LINE -->
             <div
-              class="t-progress--thin t-progress--status--default"
+              class="t-progress--thin t-progress--status-default"
             >
               <div
                 class="t-progress__bar"
@@ -1041,7 +1041,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
           >
             <!-- LINE -->
             <div
-              class="t-progress--thin t-progress--status--warning"
+              class="t-progress--thin t-progress--status-warning"
             >
               <div
                 class="t-progress__bar"
@@ -1085,7 +1085,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
           >
             <!-- LINE -->
             <div
-              class="t-progress--thin t-progress--status--error"
+              class="t-progress--thin t-progress--status-error"
             >
               <div
                 class="t-progress__bar"
@@ -1129,7 +1129,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
           >
             <!-- LINE -->
             <div
-              class="t-progress--thin t-progress--status--success"
+              class="t-progress--thin t-progress--status-success"
             >
               <div
                 class="t-progress__bar"
@@ -1202,7 +1202,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             <!--v-if-->
             <!-- PLUMP -->
             <div
-              class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--default"
+              class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
             >
               <div
                 class="t-progress__inner"
@@ -1232,7 +1232,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             <!--v-if-->
             <!-- PLUMP -->
             <div
-              class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--warning"
+              class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-warning"
             >
               <div
                 class="t-progress__inner"
@@ -1262,7 +1262,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             <!--v-if-->
             <!-- PLUMP -->
             <div
-              class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--error"
+              class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-error"
             >
               <div
                 class="t-progress__inner"
@@ -1292,7 +1292,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             <!--v-if-->
             <!-- PLUMP -->
             <div
-              class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success"
+              class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-success"
             >
               <div
                 class="t-progress__inner"
@@ -1351,7 +1351,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             <!--v-if-->
             <!-- CIRCLE -->
             <div
-              class="t-progress--circle t-progress--status--default"
+              class="t-progress--circle t-progress--status-default"
               style="width: 112px; height: 112px;"
             >
               <div
@@ -1401,7 +1401,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             <!--v-if-->
             <!-- CIRCLE -->
             <div
-              class="t-progress--circle t-progress--status--warning"
+              class="t-progress--circle t-progress--status-warning"
               style="width: 112px; height: 112px;"
             >
               <div
@@ -1463,7 +1463,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             <!--v-if-->
             <!-- CIRCLE -->
             <div
-              class="t-progress--circle t-progress--status--error"
+              class="t-progress--circle t-progress--status-error"
               style="width: 112px; height: 112px;"
             >
               <div
@@ -1525,7 +1525,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             <!--v-if-->
             <!-- CIRCLE -->
             <div
-              class="t-progress--circle t-progress--status--success"
+              class="t-progress--circle t-progress--status-success"
               style="width: 112px; height: 112px;"
             >
               <div
@@ -1597,7 +1597,7 @@ exports[`Progress > Progress plumpVue demo works fine 1`] = `
       <!--v-if-->
       <!-- PLUMP -->
       <div
-        class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--default"
+        class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
       >
         <div
           class="t-progress__inner"
@@ -1627,7 +1627,7 @@ exports[`Progress > Progress plumpVue demo works fine 1`] = `
       <!--v-if-->
       <!-- PLUMP -->
       <div
-        class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--warning"
+        class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-warning"
       >
         <div
           class="t-progress__inner"
@@ -1657,7 +1657,7 @@ exports[`Progress > Progress plumpVue demo works fine 1`] = `
       <!--v-if-->
       <!-- PLUMP -->
       <div
-        class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--error"
+        class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-error"
       >
         <div
           class="t-progress__inner"
@@ -1687,7 +1687,7 @@ exports[`Progress > Progress plumpVue demo works fine 1`] = `
       <!--v-if-->
       <!-- PLUMP -->
       <div
-        class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success"
+        class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-success"
       >
         <div
           class="t-progress__inner"
@@ -1719,7 +1719,7 @@ exports[`Progress > Progress transitionVue demo works fine 1`] = `
   >
     <!-- LINE -->
     <div
-      class="t-progress--thin t-progress--status--default"
+      class="t-progress--thin t-progress--status-default"
     >
       <div
         class="t-progress__bar"

diff --git a/src/progress/__test__/index.test.jsx b/src/progress/__test__/index.test.jsx
@@ -58,11 +58,13 @@ describe('Progress', () => {
     });
 
     it(': status', async () => {
-      const wrapper = mount(Progress, {
-        props: { status: 'success' },
+      const statusList = ['', 'success', 'error', 'warning', 'active'];
+      const statusListResult = ['default', 'success', 'error', 'warning', 'active'];
+      statusList.forEach((status, index) => {
+        const wrapper = mount(() => <Progress percentage={30} status={status} />);
+        const thin = wrapper.find('.t-progress--thin');
+        expect(thin.classes()).toContain(`t-progress--status-${statusListResult[index]}`);
       });
-      const container = wrapper.find('.t-progress--thin');
-      expect(container.classes()).toContain('t-progress--status--success');
     });
 
     it(': strokeWidth', async () => {
@@ -86,6 +88,20 @@ describe('Progress', () => {
       });
       expect(getComputedStyle(wrapper.find('.t-progress__bar').element).backgroundColor).toEqual('white');
     });
+
+    it(': theme', async () => {
+      const wrapper = mount(Progress, {
+        props: { percentage: 50, theme: '' },
+      });
+      const progressDom = wrapper.find('.t-progress');
+      expect(progressDom.text()).toBeFalsy();
+      await wrapper.setProps({
+        theme: 'plump',
+      });
+      const bar = wrapper.find('.t-progress__bar');
+      expect(bar.exists()).toBeTruthy();
+      expect(bar.classes()).toContain('t-progress--plump');
+    });
   });
 
   describe('slots', () => {

diff --git a/src/progress/constants.ts b/src/progress/constants.ts
@@ -3,23 +3,17 @@ export const PRO_THEME = {
   PLUMP: 'plump',
   CIRCLE: 'circle',
 };
-export const CIRCLE_SIZE = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large',
-};
+
 export const CIRCLE_SIZE_PX = 112;
 
-export const STATUS_TEXT = ['success', 'error', 'warning', 'active', 'normal'];
 export const STATUS_ICON = ['success', 'error', 'warning'];
 
+// 进度大于 10 ，进度百分比显示在内部；进度百分比小于 10 进度显示在外部
+export const PLUMP_SEPARATE = 10;
+
 export default {
   PRO_THEME,
-  CIRCLE_SIZE,
   CIRCLE_SIZE_PX,
-  STATUS_TEXT,
   STATUS_ICON,
+  PLUMP_SEPARATE,
 };
-
-// 进度大于 10 ，进度百分比显示在内部；进度百分比小于 10 进度显示在外部
-export const PLUMP_SEPARATE = 10;
+1 −1		docs/web/api/table.en-US.md
+1 −1		docs/web/api/table.md
+45 −43		js/input-number/number.ts
+1 −0		style/mobile/components/picker/v2/_index.less
+4 −4		style/mobile/components/progress/v2/_index.less
+0 −21		test/unit/input-number/formatToNumber.test.js
+78 −1		test/unit/input-number/number.test.js