Skip to content

Commit 3af2119

Browse files
asdlml6asdlml6
committed
Merge branch 'dev' of https://gitee.com/devui/vue-devui into dev
2 parents f75ae56 + bbca389 commit 3af2119

File tree

4 files changed

+304
-229
lines changed

4 files changed

+304
-229
lines changed

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

Lines changed: 185 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,194 @@
11
import { mount } from '@vue/test-utils';
2-
import { ref } from 'vue';
32
import DCard from '../src/card';
43
import DAvatar from '../../avatar/src/avatar';
54

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')
5+
describe('card', () => {
6+
it('should render correctly', async () => {
7+
const wrapper = mount(DCard);
8+
expect(wrapper.element).toMatchSnapshot()
9+
})
10+
it('should render correctly avatar', async () => {
11+
const wrapper = mount({
12+
components: {
13+
DCard,
14+
DAvatar
15+
},
16+
template: `
17+
<d-card class="d-card">
18+
<template #cardAvatar>
19+
<d-avatar name="DevUI"></d-avatar>
20+
</template>
21+
</d-card>
22+
`,
4523
});
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')
24+
const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
25+
expect(avatar.classes()).toContain('devui-avatar');
26+
})
27+
it('in v-slot mode should render correctly avatar', async () => {
28+
const wrapper = mount({
29+
components: {
30+
DCard,
31+
DAvatar
32+
},
33+
template: `
34+
<d-card class="d-card">
35+
<template v-slot:cardAvatar>
36+
<d-avatar name="DevUI"></d-avatar>
37+
</template>
38+
</d-card>
39+
`,
8440
});
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')
41+
const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
42+
expect(avatar.classes()).toContain('devui-avatar');
43+
})
44+
it('should render correctly title', async () => {
45+
const wrapper = mount({
46+
components: {
47+
DCard,
48+
},
49+
template: `
50+
<d-card class="d-card">
51+
<template #cardTitle>
52+
DevUI
53+
</template>
54+
</d-card>
55+
`,
12456
});
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')
57+
expect(wrapper.find('.devui-card-title').text()).toBe('DevUI')
58+
})
59+
it('in v-slot mode should render title', async () => {
60+
const wrapper = mount({
61+
components: {
62+
DCard,
63+
},
64+
template: `
65+
<d-card class="d-card">
66+
<template v-slot:cardTitle>
67+
DEVUI Course
68+
</template>
69+
</d-card>
70+
`,
16471
});
72+
expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
73+
})
74+
it('should render correctly subtitle', async () => {
75+
const wrapper = mount({
76+
components: {
77+
DCard,
78+
},
79+
template: `
80+
<d-card class="d-card">
81+
<template #cardSubtitle>
82+
DevUI
83+
</template>
84+
</d-card>
85+
`,
86+
});
87+
expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
88+
})
89+
it('in v-slot mode should render subtitle', async () => {
90+
const wrapper = mount({
91+
components: {
92+
DCard,
93+
},
94+
template: `
95+
<d-card class="d-card">
96+
<template v-slot:cardSubtitle>
97+
DevUI
98+
</template>
99+
</d-card>
100+
`,
101+
});
102+
expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
103+
})
104+
it('should render correctly content', async () => {
105+
const wrapper = mount({
106+
components: {
107+
DCard,
108+
},
109+
template: `
110+
<d-card class="d-card">
111+
<template #cardContent>
112+
DevUI
113+
</template>
114+
</d-card>
115+
`,
116+
});
117+
expect(wrapper.find('.devui-card-content').text()).toBe('DevUI')
118+
})
119+
it('in v-slot mode should render content', async () => {
120+
const wrapper = mount({
121+
components: {
122+
DCard,
123+
},
124+
template: `
125+
<d-card class="d-card">
126+
<template v-slot:cardContent>
127+
DevUI
128+
</template>
129+
</d-card>
130+
`,
131+
});
132+
expect(wrapper.find('.devui-card-content').text()).toBe('DevUI')
133+
})
134+
it('should render correctly actions', async () => {
135+
const wrapper = mount({
136+
components: {
137+
DCard,
138+
},
139+
template: `
140+
<d-card class="d-card">
141+
<template #cardActions>
142+
<div class="card-block">
143+
btn
144+
</div>
145+
</template>
146+
</d-card>
147+
`,
148+
});
149+
expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
150+
expect(wrapper.find('.card-block').text()).toBe('btn')
151+
})
152+
it('in v-slot mode should render actions', async () => {
153+
const wrapper = mount({
154+
components: {
155+
DCard,
156+
},
157+
template: `
158+
<d-card class="d-card">
159+
<template #cardActions>
160+
<div class="card-block">
161+
btn
162+
</div>
163+
</template>
164+
</d-card>
165+
`,
166+
});
167+
expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
168+
expect(wrapper.find('.card-block').text()).toBe('btn')
169+
})
170+
it('should render correctly image', async () => {
171+
const wrapper = mount({
172+
components: {
173+
DCard,
174+
},
175+
template: `
176+
<d-card class="d-card" :src="'https://devui.design/components/assets/image1.png'">
177+
</d-card>
178+
`,
179+
});
180+
expect(wrapper.find('.devui-card-meta').attributes('src').includes('https://devui.design/components/assets/image1.png')).toBeTruthy();
181+
})
182+
it('should render correctly align', async () => {
183+
const wrapper = mount({
184+
components: {
185+
DCard,
186+
},
187+
template: `
188+
<d-card class="d-card" :align="'spaceBetween'">
189+
</d-card>
190+
`,
191+
});
192+
expect(wrapper.find('.devui-card-actions-align-spaceBetween').exists()).toBeTruthy();
193+
})
165194
})

0 commit comments

Comments
 (0)