Skip to content

Commit 3b696ff

Browse files
kagolgitee-org
kagol
authored and
gitee-org
committed
!234 增加card组件测试用例、修改slider文档
Merge pull request !234 from wzhaofei/dev
2 parents aba1e9e + 89ba6e5 commit 3b696ff

File tree

2 files changed

+228
-65
lines changed

2 files changed

+228
-65
lines changed

‎devui/card/__tests__/card.spec.ts‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import { mount } from '@vue/test-utils';
2+
import { ref } from 'vue';
3+
import DCard from '../src/card';
4+
import DAvatar from '../../avatar/src/avatar';
5+
6+
describe('Card', () => {
7+
it('render', async () => {
8+
const wrapper = mount({
9+
components: {
10+
DCard,
11+
DAvatar
12+
},
13+
template: `
14+
<d-card class="d-card">
15+
<template #cardAvatar>
16+
<d-avatar name="DevUI"></d-avatar>
17+
</template>
18+
<template #cardTitle>
19+
DEVUI Course
20+
</template>
21+
<template #cardSubtitle>
22+
DevUI
23+
</template>
24+
<template #cardContent>
25+
DEVUI
26+
</template>
27+
<template #cardActions>
28+
<div class="card-block">
29+
btn
30+
</div>
31+
</template>
32+
</d-card>
33+
`,
34+
35+
});
36+
37+
const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
38+
expect(avatar.classes()).toContain('devui-avatar');
39+
expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
40+
expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
41+
expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
42+
expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
43+
expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
44+
expect(wrapper.find('.card-block').text()).toBe('btn')
45+
});
46+
it('v-slot:', async () => {
47+
const wrapper = mount({
48+
components: {
49+
DCard,
50+
DAvatar
51+
},
52+
template: `
53+
<d-card class="d-card">
54+
<template v-slot:cardAvatar>
55+
<d-avatar name="DevUI"></d-avatar>
56+
</template>
57+
<template v-slot:cardTitle>
58+
DEVUI Course
59+
</template>
60+
<template v-slot:cardSubtitle>
61+
DevUI
62+
</template>
63+
<template v-slot:cardContent>
64+
DEVUI
65+
</template>
66+
<template v-slot:cardActions>
67+
<div class="card-block">
68+
btn
69+
</div>
70+
</template>
71+
</d-card>
72+
`,
73+
74+
});
75+
76+
const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
77+
expect(avatar.classes()).toContain('devui-avatar');
78+
expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
79+
expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
80+
expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
81+
expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
82+
expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
83+
expect(wrapper.find('.card-block').text()).toBe('btn')
84+
});
85+
it('src', async () => {
86+
const wrapper = mount({
87+
components: {
88+
DCard,
89+
DAvatar
90+
},
91+
template: `
92+
<d-card class="d-card" :src="'https://devui.design/components/assets/image1.png'">
93+
<template #cardAvatar>
94+
<d-avatar name="DevUI"></d-avatar>
95+
</template>
96+
<template #cardTitle>
97+
DEVUI Course
98+
</template>
99+
<template #cardSubtitle>
100+
DevUI
101+
</template>
102+
<template #cardContent>
103+
DEVUI
104+
</template>
105+
<template #cardActions>
106+
<div class="card-block">
107+
btn
108+
</div>
109+
</template>
110+
</d-card>
111+
`,
112+
113+
});
114+
115+
const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
116+
expect(avatar.classes()).toContain('devui-avatar');
117+
expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
118+
expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
119+
expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
120+
expect(wrapper.find('.devui-card-meta').attributes('src').includes('https://devui.design/components/assets/image1.png')).toBeTruthy();
121+
expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
122+
expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
123+
expect(wrapper.find('.card-block').text()).toBe('btn')
124+
});
125+
it('src', async () => {
126+
const wrapper = mount({
127+
components: {
128+
DCard,
129+
DAvatar
130+
},
131+
template: `
132+
<d-card class="d-card" :align="'spaceBetween'">
133+
<template #cardAvatar>
134+
<d-avatar name="DevUI"></d-avatar>
135+
</template>
136+
<template #cardTitle>
137+
DEVUI Course
138+
</template>
139+
<template #cardSubtitle>
140+
DevUI
141+
</template>
142+
<template #cardContent>
143+
DEVUI
144+
</template>
145+
<template #cardActions>
146+
<div class="card-block">
147+
btn
148+
</div>
149+
</template>
150+
</d-card>
151+
`,
152+
153+
});
154+
155+
expect(wrapper.find('.devui-card-actions-align-spaceBetween').exists()).toBeTruthy();
156+
const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
157+
expect(avatar.classes()).toContain('devui-avatar');
158+
expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
159+
expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
160+
expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
161+
expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
162+
expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
163+
expect(wrapper.find('.card-block').text()).toBe('btn')
164+
});
165+
})

‎docs/components/slider/index.md‎

Lines changed: 63 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,82 @@
11
# Slider 滑动输入条
22

3-
滑动输入条
3+
滑动输入条。
44

55
### 何时使用
66

7-
当用户需要在数值区间内进行选择时使用
7+
当用户需要在数值区间内进行选择时使用。
88

99
### 基本用法
1010

11-
<br />
11+
:::demo
12+
13+
```vue
1214
<d-slider :min="minValue" :max="maxValue" v-model='inputValue'></d-slider>
13-
<br />
15+
<script>
16+
import { defineComponent, ref } from 'vue'
1417
15-
### 带有输入框的滑动组件
18+
export default defineComponent({
19+
setup() {
20+
const inputValue = ref(0);
21+
const minValue = ref(0);
22+
const maxValue = ref(100);
1623
17-
<br />
18-
<d-slider :min="minValue" :max="maxValue" v-model='inputValue2' showInput></d-slider>
19-
<br />
24+
return {
25+
inputValue,
26+
maxValue,
27+
minValue
28+
};
29+
},
30+
});
31+
</script>
32+
```
2033

21-
### 可设置 Step 的滑动组件
22-
<br />
23-
<d-slider :min="minValue" :max="maxValue" v-model='inputValue3' :step="step"></d-slider>
34+
:::
2435

25-
<br />
36+
### 带有输入框的滑动组件
37+
38+
:::demo
2639

27-
```html
28-
<template>
40+
```vue
41+
<d-slider :min="minValue" :max="maxValue" v-model='inputValue' showInput></d-slider>
42+
<script>
43+
import { defineComponent, ref } from 'vue'
44+
45+
export default defineComponent({
46+
setup() {
47+
const inputValue = ref(0);
48+
const minValue = ref(0);
49+
const maxValue = ref(100);
2950
30-
<d-slider :min="minValue" :max="maxValue" v-model="inputValue"></d-slider>
51+
return {
52+
inputValue,
53+
maxValue,
54+
minValue
55+
};
56+
},
57+
});
58+
</script>
59+
```
3160

32-
<d-slider :min="minValue" :max="maxValue" v-model="inputValue2" showInput></d-slider>
61+
:::
3362

34-
<d-slider :min="minValue" :max="maxValue" v-model="inputValue3" :step="step"></d-slider>
63+
### 可设置 Step 的滑动组件
64+
:::demo
3565

36-
</template>
37-
<script lang="ts">
38-
import { defineComponent, ref } from "vue";
66+
```vue
67+
<d-slider :min="minValue" :max="maxValue" v-model="inputValue" showInput :step="step"></d-slider>
68+
<script>
69+
import { defineComponent, ref } from 'vue'
3970
4071
export default defineComponent({
4172
setup() {
42-
43-
const inputValue = ref(12);
44-
const inputValue2 = ref(15);
45-
const inputValue3 = ref(5);
46-
const minValue = ref(2);
47-
const maxValue = ref(50);
73+
const inputValue = ref(0);
74+
const minValue = ref(0);
75+
const maxValue = ref(100);
4876
const step = ref(4);
4977
5078
return {
5179
inputValue,
52-
inputValue2,
53-
inputValue3
5480
maxValue,
5581
minValue,
5682
step
@@ -59,19 +85,16 @@
5985
});
6086
</script>
6187
```
88+
:::
6289

6390
### 禁止输入态
6491

65-
<br />
66-
<d-slider :min="minValue" :max="maxValue" :disabled="true" v-model='disabledValue'></d-slider>
67-
<br />
92+
:::demo
6893

69-
```html
70-
<template>
94+
```vue
7195
<d-slider :min="minValue" :max="maxValue" :disabled="true" v-model='disabledValue'></d-slider>
72-
</template>
73-
<script lang="ts">
74-
import { defineComponent, ref } from "vue";
96+
<script>
97+
import { defineComponent, ref } from 'vue'
7598
7699
export default defineComponent({
77100
setup() {
@@ -88,31 +111,7 @@
88111
});
89112
</script>
90113
```
91-
92-
<script lang="ts">
93-
import { defineComponent, ref } from 'vue'
94-
export default defineComponent({
95-
setup() {
96-
const disabledValue = ref(5);
97-
const inputValue = ref(12);
98-
const inputValue2 = ref(15);
99-
const inputValue3 = ref(5);
100-
const minValue = ref(2);
101-
const maxValue = ref(50);
102-
const step = ref(4);
103-
104-
return {
105-
disabledValue,
106-
inputValue,
107-
inputValue2,
108-
inputValue3,
109-
maxValue,
110-
minValue,
111-
step
112-
}
113-
}
114-
})
115-
</script>
114+
:::
116115

117116
### API
118117

@@ -122,7 +121,6 @@ d-slider 参数
122121
| --------- | ------- | ----- | ------------------------------------------------------------------- | ---- |
123122
| max | number | 100 | 可选，滑动输入条的最大值 |[基本用法](#基本用法) |
124123
| min | number | 0 | 可选，滑动输入条的最小值 |[基本用法](#基本用法) |
125-
| step | number | 1 | 可选，滑动输入条的步长，取值必须大于等于1，且必须可被(max-min)整除 |[基本用法](#可设置Step的滑动组件) |
126-
| disabled | boolean | false | 可选，值为 true 时禁止用户输入 |[基本用法](#禁止输入态) |
127-
| showInput | boolean | false | 可选，值为 true 显示输入框 |[基本用法](#带有输入框的滑动组件) |
128-
124+
| showInput | boolean | false | 可选，值为 true 显示输入框 |[带有输入框的滑动组件](#带有输入框的滑动组件) |
125+
| step | number | 1 | 可选，滑动输入条的步长，取值必须大于等于1，且必须可被(max-min)整除 |[可设置 Step 的滑动组件](#可设置Step的滑动组件) |
126+
| disabled | boolean | false | 可选，值为 true 时禁止用户输入 |[禁止输入态](#禁止输入态) |

0 commit comments

Comments
 (0)