Skip to content

Commit c8d49b3

Browse files
to0simpleto0simple
authored
feat(toast): add toast file (#10)
1 parent df4030d commit c8d49b3

File tree

1 file changed

+295
-0
lines changed

1 file changed

+295
-0
lines changed

‎packages/devui-vue/devui/toast/__tests__/toast.spec.ts

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
import { mount } from '@vue/test-utils';
2+
import { nextTick } from 'vue';
3+
import Toast from '../src/toast';
4+
5+
describe('Toast', () => {
6+
describe('toast basic', () => {
7+
it('should create toast component correctly', () => {
8+
const wrapper = mount(Toast, {
9+
props: {
10+
value: [
11+
{
12+
severity: 'success'
13+
}
14+
]
15+
}
16+
});
17+
expect(wrapper.find('.devui-toast').exists()).toBe(true);
18+
})
19+
it('toast has summary', async() => {
20+
const wrapper = mount(Toast, {
21+
props: {
22+
value: [
23+
{
24+
severity: 'success',
25+
summary: 'Summary'
26+
}
27+
]
28+
}
29+
})
30+
await nextTick();
31+
expect(wrapper.find('.devui-toast-title').text()).toBe('Summary');
32+
})
33+
it('toast has content', async() => {
34+
const wrapper = mount(Toast, {
35+
props: {
36+
value: [
37+
{
38+
severity: 'success',
39+
content: 'content'
40+
}
41+
]
42+
}
43+
})
44+
await nextTick()
45+
expect(wrapper.find('.devui-toast-message').text()).toBe('content');
46+
})
47+
it('toast has content of solt', async() => {
48+
const wrapper = mount(Toast, {
49+
props: {
50+
value: [
51+
{
52+
severity: 'success',
53+
content: 'slot:customTemplate',
54+
info: 'info'
55+
} as any
56+
]
57+
},
58+
slots: {
59+
customTemplate: (msg) => {
60+
return `<p>${msg.info}</p>`
61+
}
62+
}
63+
})
64+
await nextTick();
65+
expect(wrapper.find('.devui-toast-message').text()).toBe('<p>info</p>');
66+
})
67+
it('toast has detail', async() => {
68+
const wrapper = mount(Toast, {
69+
props: {
70+
value: [
71+
{
72+
severity: 'success',
73+
detail : 'detail'
74+
}
75+
]
76+
}
77+
});
78+
await nextTick();
79+
expect(wrapper.find('.devui-toast-message').text()).toBe('detail');
80+
})
81+
})
82+
83+
describe('toast type', () => {
84+
it('toast should be success', async () => {
85+
const wrapper = mount(Toast, {
86+
props: {
87+
value: [
88+
{
89+
severity: 'success'
90+
}
91+
]
92+
}
93+
});
94+
await nextTick();
95+
expect(wrapper.find('.devui-toast-message-success').exists()).toBe(true);
96+
});
97+
it('toast should be common', async() => {
98+
const wrapper = mount(Toast, {
99+
props: {
100+
value: [
101+
{
102+
severity: 'common'
103+
}
104+
]
105+
}
106+
});
107+
await nextTick();
108+
expect(wrapper.find('.devui-toast-message-common').exists()).toBe(true);
109+
})
110+
it('toast should be info', async() => {
111+
const wrapper = mount(Toast, {
112+
props: {
113+
value: [
114+
{
115+
severity: 'info'
116+
}
117+
]
118+
}
119+
});
120+
await nextTick();
121+
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(true);
122+
})
123+
it('toast should be error', async() => {
124+
const wrapper = mount(Toast, {
125+
props: {
126+
value: [
127+
{
128+
severity: 'error'
129+
}
130+
]
131+
}
132+
});
133+
await nextTick();
134+
expect(wrapper.find('.devui-toast-message-error').exists()).toBe(true);
135+
})
136+
it('toast should be warning', async() => {
137+
const wrapper = mount(Toast, {
138+
props: {
139+
value: [
140+
{
141+
severity: 'warning'
142+
}
143+
]
144+
}
145+
})
146+
await nextTick();
147+
expect(wrapper.find('.devui-toast-message-warning').exists()).toBe(true);
148+
})
149+
})
150+
151+
describe('toast life and sticky', () => {
152+
const value = [
153+
{
154+
severity: 'success',
155+
summary: 'summary'
156+
}
157+
];
158+
beforeEach(() => {
159+
jest.useFakeTimers();
160+
})
161+
it('has life, should close after 5000ms', async() => {
162+
const wrapper = mount(Toast, {
163+
props: {
164+
value: value,
165+
life: 5000
166+
}
167+
})
168+
jest.advanceTimersToNextTimer(3000);
169+
await nextTick();
170+
expect(wrapper.find('.devui-toast-item-container')).toBeTruthy();
171+
jest.advanceTimersToNextTimer(2000);
172+
await nextTick();
173+
expect(wrapper.find('.devui-toast-item-container').exists()).toBeFalsy();
174+
})
175+
it('has life and sticky, not dismiss should close', async() => {
176+
const wrapper = mount(Toast, {
177+
props:{
178+
value: value,
179+
life: 5000,
180+
sticky: true
181+
}
182+
})
183+
jest.advanceTimersByTime(3000);
184+
await nextTick();
185+
expect(wrapper.find('.devui-toast-item-container').exists()).toBe(true);
186+
jest.advanceTimersByTime(2000);
187+
await nextTick();
188+
expect(wrapper.find('.devui-toast-item-container').exists()).toBe(true);
189+
await wrapper.find('.devui-toast-icon-close').trigger('click');
190+
jest.advanceTimersByTime(300);
191+
await nextTick();
192+
expect(wrapper.find('.devui-toast-item-container').exists()).toBe(false);
193+
})
194+
})
195+
196+
describe('toast single and global life mode', () => {
197+
beforeEach(() => {
198+
jest.useFakeTimers();
199+
})
200+
it('dismiss by global life mode', async() => {
201+
const wrapper = mount(Toast,{
202+
props: {
203+
value: [
204+
{ severity: 'success', life: 3000, summary: 'success' },
205+
{ severity: 'info', life: 5000, summary: 'info'},
206+
{ severity: 'error',summary: 'error' }
207+
],
208+
lifeMode: 'global'
209+
}
210+
})
211+
await nextTick();
212+
expect(wrapper.find('.devui-toast-message-success')).toBeTruthy();
213+
expect(wrapper.find('.devui-toast-message-info')).toBeTruthy();
214+
expect(wrapper.find('.devui-toast-message-error')).toBeTruthy();
215+
jest.advanceTimersByTime(5300);
216+
await nextTick();
217+
expect(wrapper.find('.devui-toast-message-success').exists()).toBeFalsy();
218+
expect(wrapper.find('.devui-toast-message-info').exists()).toBeFalsy();
219+
expect(wrapper.find('.devui-toast-message-error').exists()).toBeFalsy();
220+
expect(wrapper.find('.devui-toast').text()).toBe('');
221+
})
222+
it('dismiss by singel life mode', async() => {
223+
const wrapper = mount(Toast, {
224+
props: {
225+
value: [
226+
{ life: 3000, severity: 'info', summary: 'info', detail: 'info content' },
227+
{ life: 6000, severity: 'success', summary: 'success', detail: 'success content' }
228+
],
229+
lifeMode: 'single'
230+
}
231+
})
232+
await nextTick();
233+
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(true);
234+
expect(wrapper.find('.devui-toast-message-success').exists()).toBe(true);
235+
jest.advanceTimersByTime(3300);
236+
await nextTick();
237+
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(false);
238+
expect(wrapper.find('.devui-toast-message-success').exists()).toBe(true);
239+
jest.advanceTimersByTime(3000);
240+
await nextTick();
241+
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(false);
242+
expect(wrapper.find('.devui-toast-message-success').exists()).toBe(false);
243+
jest.runAllTimers();
244+
await nextTick();
245+
expect(wrapper.find('.devui-toast').text()).toBe('');
246+
})
247+
//TODO: mouseenter 没起作用
248+
describe('toast multiple', () => {
249+
beforeEach(() => {
250+
jest.useFakeTimers();
251+
})
252+
it('mouse over not dismiss, mouse out dismiss', async() => {
253+
const wrapper = mount(Toast, {
254+
props: {
255+
value: [
256+
{ severity: 'info', summary: 'info', detail: 'info content' },
257+
{ severity: 'success', summary: 'success', detail: 'success content' }
258+
],
259+
life: 5000
260+
}
261+
})
262+
await nextTick();
263+
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(true);
264+
expect(wrapper.find('.devui-toast-message-success').exists()).toBe(true);
265+
await wrapper.findAll('.devui-toast-item-container')[0].trigger('mouseenter');
266+
jest.advanceTimersByTime(5000);
267+
await nextTick();
268+
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(true);
269+
await wrapper.find('.devui-toast-message-info').trigger('mouseleave');
270+
jest.runAllTimers();
271+
await nextTick();
272+
expect(wrapper.find('.devui-toast-item-container').exists()).toBe(false);
273+
})
274+
})
275+
276+
describe('toast styleClass and style', () => {
277+
it('add styleclass and style', async() => {
278+
const wrapper = mount(Toast, {
279+
props: {
280+
value: [
281+
{ severity: 'info', summary: 'info', detail: 'info content' }
282+
],
283+
styleClass: 'myClass',
284+
style: {
285+
color: 'rgb(255, 255, 255)'
286+
}
287+
}
288+
})
289+
await nextTick();
290+
expect(wrapper.find('.devui-toast').classes()).toContain('myClass');
291+
expect(wrapper.find('.devui-toast').attributes('style')).toBe('z-index: 1076; color: rgb(255, 255, 255);');
292+
})
293+
})
294+
})
295+
})

0 commit comments

Comments
 (0)