Skip to content

Commit 23ba3b1

Browse files
anlyyaoanlyyao
authored
test(Progress): add test case (#741)
* test(Progress): add test case * fix: fix cr * chore: update _common
1 parent c17cf72 commit 23ba3b1

File tree

5 files changed

+65
-55
lines changed

5 files changed

+65
-55
lines changed

‎src/_common

‎src/progress/__test__/__snapshots__/demo.test.jsx.snap

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ exports[`Progress > Progress baseVue demo works fine 1`] = `
1515
>
1616
<!-- LINE -->
1717
<div
18-
class="t-progress--thin t-progress--status--default"
18+
class="t-progress--thin t-progress--status-default"
1919
>
2020
<div
2121
class="t-progress__bar"
@@ -49,7 +49,7 @@ exports[`Progress > Progress baseVue demo works fine 1`] = `
4949
<!--v-if-->
5050
<!-- PLUMP -->
5151
<div
52-
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--default"
52+
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
5353
>
5454
<div
5555
class="t-progress__inner"
@@ -81,7 +81,7 @@ exports[`Progress > Progress baseVue demo works fine 1`] = `
8181
<!--v-if-->
8282
<!-- CIRCLE -->
8383
<div
84-
class="t-progress--circle t-progress--status--default"
84+
class="t-progress--circle t-progress--status-default"
8585
style="width: 112px; height: 112px;"
8686
>
8787
<div
@@ -139,7 +139,7 @@ exports[`Progress > Progress circleVue demo works fine 1`] = `
139139
<!--v-if-->
140140
<!-- CIRCLE -->
141141
<div
142-
class="t-progress--circle t-progress--status--default"
142+
class="t-progress--circle t-progress--status-default"
143143
style="width: 112px; height: 112px;"
144144
>
145145
<div
@@ -189,7 +189,7 @@ exports[`Progress > Progress circleVue demo works fine 1`] = `
189189
<!--v-if-->
190190
<!-- CIRCLE -->
191191
<div
192-
class="t-progress--circle t-progress--status--warning"
192+
class="t-progress--circle t-progress--status-warning"
193193
style="width: 112px; height: 112px;"
194194
>
195195
<div
@@ -251,7 +251,7 @@ exports[`Progress > Progress circleVue demo works fine 1`] = `
251251
<!--v-if-->
252252
<!-- CIRCLE -->
253253
<div
254-
class="t-progress--circle t-progress--status--error"
254+
class="t-progress--circle t-progress--status-error"
255255
style="width: 112px; height: 112px;"
256256
>
257257
<div
@@ -313,7 +313,7 @@ exports[`Progress > Progress circleVue demo works fine 1`] = `
313313
<!--v-if-->
314314
<!-- CIRCLE -->
315315
<div
316-
class="t-progress--circle t-progress--status--success"
316+
class="t-progress--circle t-progress--status-success"
317317
style="width: 112px; height: 112px;"
318318
>
319319
<div
@@ -379,7 +379,7 @@ exports[`Progress > Progress customVue demo works fine 1`] = `
379379
>
380380
<!-- LINE -->
381381
<div
382-
class="t-progress--thin t-progress--status--default"
382+
class="t-progress--thin t-progress--status-default"
383383
>
384384
<div
385385
class="t-progress__bar"
@@ -419,7 +419,7 @@ exports[`Progress > Progress customVue demo works fine 1`] = `
419419
>
420420
<!-- LINE -->
421421
<div
422-
class="t-progress--thin t-progress--status--default"
422+
class="t-progress--thin t-progress--status-default"
423423
>
424424
<div
425425
class="t-progress__bar"
@@ -459,7 +459,7 @@ exports[`Progress > Progress lineVue demo works fine 1`] = `
459459
>
460460
<!-- LINE -->
461461
<div
462-
class="t-progress--thin t-progress--status--default"
462+
class="t-progress--thin t-progress--status-default"
463463
>
464464
<div
465465
class="t-progress__bar"
@@ -491,7 +491,7 @@ exports[`Progress > Progress lineVue demo works fine 1`] = `
491491
>
492492
<!-- LINE -->
493493
<div
494-
class="t-progress--thin t-progress--status--warning"
494+
class="t-progress--thin t-progress--status-warning"
495495
>
496496
<div
497497
class="t-progress__bar"
@@ -535,7 +535,7 @@ exports[`Progress > Progress lineVue demo works fine 1`] = `
535535
>
536536
<!-- LINE -->
537537
<div
538-
class="t-progress--thin t-progress--status--error"
538+
class="t-progress--thin t-progress--status-error"
539539
>
540540
<div
541541
class="t-progress__bar"
@@ -579,7 +579,7 @@ exports[`Progress > Progress lineVue demo works fine 1`] = `
579579
>
580580
<!-- LINE -->
581581
<div
582-
class="t-progress--thin t-progress--status--success"
582+
class="t-progress--thin t-progress--status-success"
583583
>
584584
<div
585585
class="t-progress__bar"
@@ -670,7 +670,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
670670
>
671671
<!-- LINE -->
672672
<div
673-
class="t-progress--thin t-progress--status--default"
673+
class="t-progress--thin t-progress--status-default"
674674
>
675675
<div
676676
class="t-progress__bar"
@@ -704,7 +704,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
704704
<!--v-if-->
705705
<!-- PLUMP -->
706706
<div
707-
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--default"
707+
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
708708
>
709709
<div
710710
class="t-progress__inner"
@@ -736,7 +736,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
736736
<!--v-if-->
737737
<!-- CIRCLE -->
738738
<div
739-
class="t-progress--circle t-progress--status--default"
739+
class="t-progress--circle t-progress--status-default"
740740
style="width: 112px; height: 112px;"
741741
>
742742
<div
@@ -805,7 +805,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
805805
>
806806
<!-- LINE -->
807807
<div
808-
class="t-progress--thin t-progress--status--default"
808+
class="t-progress--thin t-progress--status-default"
809809
>
810810
<div
811811
class="t-progress__bar"
@@ -906,7 +906,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
906906
>
907907
<!-- LINE -->
908908
<div
909-
class="t-progress--thin t-progress--status--default"
909+
class="t-progress--thin t-progress--status-default"
910910
>
911911
<div
912912
class="t-progress__bar"
@@ -946,7 +946,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
946946
>
947947
<!-- LINE -->
948948
<div
949-
class="t-progress--thin t-progress--status--default"
949+
class="t-progress--thin t-progress--status-default"
950950
>
951951
<div
952952
class="t-progress__bar"
@@ -1009,7 +1009,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
10091009
>
10101010
<!-- LINE -->
10111011
<div
1012-
class="t-progress--thin t-progress--status--default"
1012+
class="t-progress--thin t-progress--status-default"
10131013
>
10141014
<div
10151015
class="t-progress__bar"
@@ -1041,7 +1041,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
10411041
>
10421042
<!-- LINE -->
10431043
<div
1044-
class="t-progress--thin t-progress--status--warning"
1044+
class="t-progress--thin t-progress--status-warning"
10451045
>
10461046
<div
10471047
class="t-progress__bar"
@@ -1085,7 +1085,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
10851085
>
10861086
<!-- LINE -->
10871087
<div
1088-
class="t-progress--thin t-progress--status--error"
1088+
class="t-progress--thin t-progress--status-error"
10891089
>
10901090
<div
10911091
class="t-progress__bar"
@@ -1129,7 +1129,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
11291129
>
11301130
<!-- LINE -->
11311131
<div
1132-
class="t-progress--thin t-progress--status--success"
1132+
class="t-progress--thin t-progress--status-success"
11331133
>
11341134
<div
11351135
class="t-progress__bar"
@@ -1202,7 +1202,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
12021202
<!--v-if-->
12031203
<!-- PLUMP -->
12041204
<div
1205-
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--default"
1205+
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
12061206
>
12071207
<div
12081208
class="t-progress__inner"
@@ -1232,7 +1232,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
12321232
<!--v-if-->
12331233
<!-- PLUMP -->
12341234
<div
1235-
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--warning"
1235+
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-warning"
12361236
>
12371237
<div
12381238
class="t-progress__inner"
@@ -1262,7 +1262,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
12621262
<!--v-if-->
12631263
<!-- PLUMP -->
12641264
<div
1265-
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--error"
1265+
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-error"
12661266
>
12671267
<div
12681268
class="t-progress__inner"
@@ -1292,7 +1292,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
12921292
<!--v-if-->
12931293
<!-- PLUMP -->
12941294
<div
1295-
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success"
1295+
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-success"
12961296
>
12971297
<div
12981298
class="t-progress__inner"
@@ -1351,7 +1351,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
13511351
<!--v-if-->
13521352
<!-- CIRCLE -->
13531353
<div
1354-
class="t-progress--circle t-progress--status--default"
1354+
class="t-progress--circle t-progress--status-default"
13551355
style="width: 112px; height: 112px;"
13561356
>
13571357
<div
@@ -1401,7 +1401,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
14011401
<!--v-if-->
14021402
<!-- CIRCLE -->
14031403
<div
1404-
class="t-progress--circle t-progress--status--warning"
1404+
class="t-progress--circle t-progress--status-warning"
14051405
style="width: 112px; height: 112px;"
14061406
>
14071407
<div
@@ -1463,7 +1463,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
14631463
<!--v-if-->
14641464
<!-- CIRCLE -->
14651465
<div
1466-
class="t-progress--circle t-progress--status--error"
1466+
class="t-progress--circle t-progress--status-error"
14671467
style="width: 112px; height: 112px;"
14681468
>
14691469
<div
@@ -1525,7 +1525,7 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
15251525
<!--v-if-->
15261526
<!-- CIRCLE -->
15271527
<div
1528-
class="t-progress--circle t-progress--status--success"
1528+
class="t-progress--circle t-progress--status-success"
15291529
style="width: 112px; height: 112px;"
15301530
>
15311531
<div
@@ -1597,7 +1597,7 @@ exports[`Progress > Progress plumpVue demo works fine 1`] = `
15971597
<!--v-if-->
15981598
<!-- PLUMP -->
15991599
<div
1600-
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--default"
1600+
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
16011601
>
16021602
<div
16031603
class="t-progress__inner"
@@ -1627,7 +1627,7 @@ exports[`Progress > Progress plumpVue demo works fine 1`] = `
16271627
<!--v-if-->
16281628
<!-- PLUMP -->
16291629
<div
1630-
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--warning"
1630+
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-warning"
16311631
>
16321632
<div
16331633
class="t-progress__inner"
@@ -1657,7 +1657,7 @@ exports[`Progress > Progress plumpVue demo works fine 1`] = `
16571657
<!--v-if-->
16581658
<!-- PLUMP -->
16591659
<div
1660-
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--error"
1660+
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-error"
16611661
>
16621662
<div
16631663
class="t-progress__inner"
@@ -1687,7 +1687,7 @@ exports[`Progress > Progress plumpVue demo works fine 1`] = `
16871687
<!--v-if-->
16881688
<!-- PLUMP -->
16891689
<div
1690-
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success"
1690+
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-success"
16911691
>
16921692
<div
16931693
class="t-progress__inner"
@@ -1719,7 +1719,7 @@ exports[`Progress > Progress transitionVue demo works fine 1`] = `
17191719
>
17201720
<!-- LINE -->
17211721
<div
1722-
class="t-progress--thin t-progress--status--default"
1722+
class="t-progress--thin t-progress--status-default"
17231723
>
17241724
<div
17251725
class="t-progress__bar"

‎src/progress/__test__/index.test.jsx

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,13 @@ describe('Progress', () => {
5858
});
5959

6060
it(': status', async () => {
61-
const wrapper = mount(Progress, {
62-
props: { status: 'success' },
61+
const statusList = ['', 'success', 'error', 'warning', 'active'];
62+
const statusListResult = ['default', 'success', 'error', 'warning', 'active'];
63+
statusList.forEach((status, index) => {
64+
const wrapper = mount(() => <Progress percentage={30} status={status} />);
65+
const thin = wrapper.find('.t-progress--thin');
66+
expect(thin.classes()).toContain(`t-progress--status-${statusListResult[index]}`);
6367
});
64-
const container = wrapper.find('.t-progress--thin');
65-
expect(container.classes()).toContain('t-progress--status--success');
6668
});
6769

6870
it(': strokeWidth', async () => {
@@ -86,6 +88,20 @@ describe('Progress', () => {
8688
});
8789
expect(getComputedStyle(wrapper.find('.t-progress__bar').element).backgroundColor).toEqual('white');
8890
});
91+
92+
it(': theme', async () => {
93+
const wrapper = mount(Progress, {
94+
props: { percentage: 50, theme: '' },
95+
});
96+
const progressDom = wrapper.find('.t-progress');
97+
expect(progressDom.text()).toBeFalsy();
98+
await wrapper.setProps({
99+
theme: 'plump',
100+
});
101+
const bar = wrapper.find('.t-progress__bar');
102+
expect(bar.exists()).toBeTruthy();
103+
expect(bar.classes()).toContain('t-progress--plump');
104+
});
89105
});
90106

91107
describe('slots', () => {

‎src/progress/constants.ts

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,17 @@ export const PRO_THEME = {
33
PLUMP: 'plump',
44
CIRCLE: 'circle',
55
};
6-
export const CIRCLE_SIZE = {
7-
SMALL: 'small',
8-
MEDIUM: 'medium',
9-
LARGE: 'large',
10-
};
6+
117
export const CIRCLE_SIZE_PX = 112;
128

13-
export const STATUS_TEXT = ['success', 'error', 'warning', 'active', 'normal'];
149
export const STATUS_ICON = ['success', 'error', 'warning'];
1510

11+
// 进度大于 10 ，进度百分比显示在内部；进度百分比小于 10 进度显示在外部
12+
export const PLUMP_SEPARATE = 10;
13+
1614
export default {
1715
PRO_THEME,
18-
CIRCLE_SIZE,
1916
CIRCLE_SIZE_PX,
20-
STATUS_TEXT,
2117
STATUS_ICON,
18+
PLUMP_SEPARATE,
2219
};
23-
24-
// 进度大于 10 ，进度百分比显示在内部；进度百分比小于 10 进度显示在外部
25-
export const PLUMP_SEPARATE = 10;

0 commit comments

Comments
 (0)