Skip to content

test(toast): add toast unit test #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 15, 2021
Merged

test(toast): add toast unit test #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
295 changes: 295 additions & 0 deletions packages/devui-vue/devui/toast/__tests__/toast.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,295 @@
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import Toast from '../src/toast';

describe('Toast', () => {
describe('toast basic', () => {
it('should create toast component correctly', () => {
const wrapper = mount(Toast, {
props: {
value: [
{
severity: 'success'
}
]
}
});
expect(wrapper.find('.devui-toast').exists()).toBe(true);
})
it('toast has summary', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{
severity: 'success',
summary: 'Summary'
}
]
}
})
await nextTick();
expect(wrapper.find('.devui-toast-title').text()).toBe('Summary');
})
it('toast has content', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{
severity: 'success',
content: 'content'
}
]
}
})
await nextTick()
expect(wrapper.find('.devui-toast-message').text()).toBe('content');
})
it('toast has content of solt', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{
severity: 'success',
content: 'slot:customTemplate',
info: 'info'
} as any
]
},
slots: {
customTemplate: (msg) => {
return `<p>${msg.info}</p>`
}
}
})
await nextTick();
expect(wrapper.find('.devui-toast-message').text()).toBe('<p>info</p>');
})
it('toast has detail', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{
severity: 'success',
detail : 'detail'
}
]
}
});
await nextTick();
expect(wrapper.find('.devui-toast-message').text()).toBe('detail');
})
})

describe('toast type', () => {
it('toast should be success', async () => {
const wrapper = mount(Toast, {
props: {
value: [
{
severity: 'success'
}
]
}
});
await nextTick();
expect(wrapper.find('.devui-toast-message-success').exists()).toBe(true);
});
it('toast should be common', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{
severity: 'common'
}
]
}
});
await nextTick();
expect(wrapper.find('.devui-toast-message-common').exists()).toBe(true);
})
it('toast should be info', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{
severity: 'info'
}
]
}
});
await nextTick();
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(true);
})
it('toast should be error', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{
severity: 'error'
}
]
}
});
await nextTick();
expect(wrapper.find('.devui-toast-message-error').exists()).toBe(true);
})
it('toast should be warning', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{
severity: 'warning'
}
]
}
})
await nextTick();
expect(wrapper.find('.devui-toast-message-warning').exists()).toBe(true);
})
})

describe('toast life and sticky', () => {
const value = [
{
severity: 'success',
summary: 'summary'
}
];
beforeEach(() => {
jest.useFakeTimers();
})
it('has life, should close after 5000ms', async() => {
const wrapper = mount(Toast, {
props: {
value: value,
life: 5000
}
})
jest.advanceTimersToNextTimer(3000);
await nextTick();
expect(wrapper.find('.devui-toast-item-container')).toBeTruthy();
jest.advanceTimersToNextTimer(2000);
await nextTick();
expect(wrapper.find('.devui-toast-item-container').exists()).toBeFalsy();
})
it('has life and sticky, not dismiss should close', async() => {
const wrapper = mount(Toast, {
props:{
value: value,
life: 5000,
sticky: true
}
})
jest.advanceTimersByTime(3000);
await nextTick();
expect(wrapper.find('.devui-toast-item-container').exists()).toBe(true);
jest.advanceTimersByTime(2000);
await nextTick();
expect(wrapper.find('.devui-toast-item-container').exists()).toBe(true);
await wrapper.find('.devui-toast-icon-close').trigger('click');
jest.advanceTimersByTime(300);
await nextTick();
expect(wrapper.find('.devui-toast-item-container').exists()).toBe(false);
})
})

describe('toast single and global life mode', () => {
beforeEach(() => {
jest.useFakeTimers();
})
it('dismiss by global life mode', async() => {
const wrapper = mount(Toast,{
props: {
value: [
{ severity: 'success', life: 3000, summary: 'success' },
{ severity: 'info', life: 5000, summary: 'info'},
{ severity: 'error',summary: 'error' }
],
lifeMode: 'global'
}
})
await nextTick();
expect(wrapper.find('.devui-toast-message-success')).toBeTruthy();
expect(wrapper.find('.devui-toast-message-info')).toBeTruthy();
expect(wrapper.find('.devui-toast-message-error')).toBeTruthy();
jest.advanceTimersByTime(5300);
await nextTick();
expect(wrapper.find('.devui-toast-message-success').exists()).toBeFalsy();
expect(wrapper.find('.devui-toast-message-info').exists()).toBeFalsy();
expect(wrapper.find('.devui-toast-message-error').exists()).toBeFalsy();
expect(wrapper.find('.devui-toast').text()).toBe('');
})
it('dismiss by singel life mode', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{ life: 3000, severity: 'info', summary: 'info', detail: 'info content' },
{ life: 6000, severity: 'success', summary: 'success', detail: 'success content' }
],
lifeMode: 'single'
}
})
await nextTick();
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(true);
expect(wrapper.find('.devui-toast-message-success').exists()).toBe(true);
jest.advanceTimersByTime(3300);
await nextTick();
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(false);
expect(wrapper.find('.devui-toast-message-success').exists()).toBe(true);
jest.advanceTimersByTime(3000);
await nextTick();
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(false);
expect(wrapper.find('.devui-toast-message-success').exists()).toBe(false);
jest.runAllTimers();
await nextTick();
expect(wrapper.find('.devui-toast').text()).toBe('');
})
//TODO: mouseenter 没起作用
describe('toast multiple', () => {
beforeEach(() => {
jest.useFakeTimers();
})
it('mouse over not dismiss, mouse out dismiss', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{ severity: 'info', summary: 'info', detail: 'info content' },
{ severity: 'success', summary: 'success', detail: 'success content' }
],
life: 5000
}
})
await nextTick();
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(true);
expect(wrapper.find('.devui-toast-message-success').exists()).toBe(true);
await wrapper.findAll('.devui-toast-item-container')[0].trigger('mouseenter');
jest.advanceTimersByTime(5000);
await nextTick();
expect(wrapper.find('.devui-toast-message-info').exists()).toBe(true);
await wrapper.find('.devui-toast-message-info').trigger('mouseleave');
jest.runAllTimers();
await nextTick();
expect(wrapper.find('.devui-toast-item-container').exists()).toBe(false);
})
})

describe('toast styleClass and style', () => {
it('add styleclass and style', async() => {
const wrapper = mount(Toast, {
props: {
value: [
{ severity: 'info', summary: 'info', detail: 'info content' }
],
styleClass: 'myClass',
style: {
color: 'rgb(255, 255, 255)'
}
}
})
await nextTick();
expect(wrapper.find('.devui-toast').classes()).toContain('myClass');
expect(wrapper.find('.devui-toast').attributes('style')).toBe('z-index: 1076; color: rgb(255, 255, 255);');
})
})
})
})