primevue-mirror/components/toast/Toast.spec.js

import { mount } from '@vue/test-utils';
import PrimeVue from 'primevue/config';
import Toast from './Toast.vue';

describe('Toast.vue', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(Toast, {
            global: {
                plugins: [PrimeVue],
                stubs: {
                    teleport: true,
                    transition: true
                }
            },
            data() {
                return {
                    messages: [{ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 }]
                };
            }
        });
    });

    it('should exist', () => {
        expect(wrapper.find('.p-toast.p-component').exists()).toBe(true);
        expect(wrapper.find('.p-toast-message').classes()).toContain('p-toast-message-success');
        expect(wrapper.find('.p-toast-summary').text()).toBe('Success Message');
        expect(wrapper.find('.p-toast-detail').text()).toBe('Message Content');
    });

    it('should position is changed', async () => {
        await wrapper.setProps({ position: 'bottom-left' });

        setTimeout(() => {
            expect(wrapper.find('.p-toast.p-component').classes()).toContain('p-toast-bottom-left');
        }, 200);
    });

    it('should show grouped toast', async () => {
        await wrapper.setProps({ group: 'br' });

        expect(wrapper.find('.p-toast.p-component').exists()).toBe(true);
    });

    it('should close toast', async () => {
        await wrapper.vm.remove({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });

        expect(wrapper.find('.p-toast-message').exists()).toBe(false);
    });

    it('should show multiple toast', async () => {
        await wrapper.setData({
            messages: [
                { severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 },
                { severity: 'info', summary: 'Message 2', detail: 'Message 2 Content', life: 3000 },
                { severity: 'info', summary: 'Message 3', detail: 'Message 3 Content', life: 3000 }
            ]
        });

        expect(wrapper.findAll('.p-toast-message').length).toBe(3);
    });

    it('should close multiple toast', async () => {
        await wrapper.setData({
            messages: [
                { severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 },
                { severity: 'info', summary: 'Message 2', detail: 'Message 2 Content', life: 3000 },
                { severity: 'info', summary: 'Message 3', detail: 'Message 3 Content', life: 3000 }
            ]
        });

        await wrapper.vm.onRemoveAllGroups();

        expect(wrapper.findAll('.p-toast-message').length).toBe(0);
    });

    it('should close grouped toast', async () => {
        await wrapper.setProps({ group: 'br' });

        await wrapper.vm.onRemoveGroup('br');

        expect(wrapper.findAll('.p-toast-message').length).toBe(0);
    });

    describe('custom icons', () => {
        it('should have custom close icon', async () => {
            await wrapper.setProps({ closeIcon: 'pi pi-discord' });
            await wrapper.setData({
                messages: [{ severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 }]
            });

            const icon = wrapper.find('.p-toast-icon-close-icon');

            expect(icon.classes()).toContain('pi-discord');
        });

        it('should have custom info severity icon', async () => {
            await wrapper.setProps({ infoIcon: 'pi pi-discord' });
            await wrapper.setData({
                messages: [{ severity: 'info', summary: 'Message', detail: 'Message Content', life: 3000 }]
            });

            const icon = wrapper.find('.p-toast-message-icon');

            expect(icon.classes()).toContain('pi-discord');
        });

        it('should have custom warn severity icon', async () => {
            await wrapper.setProps({ warnIcon: 'pi pi-discord' });
            await wrapper.setData({
                messages: [{ severity: 'warn', summary: 'Message', detail: 'Message Content', life: 3000 }]
            });

            const icon = wrapper.find('.p-toast-message-icon');

            expect(icon.classes()).toContain('pi-discord');
        });

        it('should have custom error severity icon', async () => {
            await wrapper.setProps({ errorIcon: 'pi pi-discord' });
            await wrapper.setData({
                messages: [{ severity: 'error', summary: 'Message', detail: 'Message Content', life: 3000 }]
            });

            const icon = wrapper.find('.p-toast-message-icon');

            expect(icon.classes()).toContain('pi-discord');
        });

        it('should have custom success severity icon', async () => {
            await wrapper.setProps({ successIcon: 'pi pi-discord' });
            await wrapper.setData({
                messages: [{ severity: 'success', summary: 'Message', detail: 'Message Content', life: 3000 }]
            });

            const icon = wrapper.find('.p-toast-message-icon');

            expect(icon.classes()).toContain('pi-discord');
        });
    });
});