@mozaic-ds/vue/src/components/statusnotification/MStatusNotification.spec.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import { mount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import MStatusNotification from './MStatusNotification.vue';
import InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';
import CheckCircle32 from '@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.vue';
import WarningCircle32 from '@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue';
import CrossCircle32 from '@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.vue';

describe('MStatusNotification.vue', () => {
  it('should render correctly with the default props', () => {
    const wrapper = mount(MStatusNotification, {
      props: {
        title: 'Test Title',
        description: 'Test Description',
      },
    });

    expect(wrapper.text()).toContain('Test Title');
    expect(wrapper.text()).toContain('Test Description');
    expect(wrapper.findComponent(InfoCircle32).exists()).toBe(true); // Default icon is InfoCircle32
    expect(wrapper.classes()).toContain('mc-status-notification');
  });

  it('should display the correct icon based on the status prop', () => {
    const wrapperSuccess = mount(MStatusNotification, {
      props: {
        title: 'Success',
        description: 'Success Description',
        status: 'success',
      },
    });
    expect(wrapperSuccess.findComponent(CheckCircle32).exists()).toBe(true);

    const wrapperWarning = mount(MStatusNotification, {
      props: {
        title: 'Warning',
        description: 'Warning Description',
        status: 'warning',
      },
    });
    expect(wrapperWarning.findComponent(WarningCircle32).exists()).toBe(true);

    const wrapperError = mount(MStatusNotification, {
      props: {
        title: 'Error',
        description: 'Error Description',
        status: 'error',
      },
    });
    expect(wrapperError.findComponent(CrossCircle32).exists()).toBe(true);
  });

  it('should show the close button if closable prop is true', () => {
    const wrapper = mount(MStatusNotification, {
      props: {
        title: 'Closable Test',
        description: 'Test Description',
        closable: true,
      },
    });

    expect(
      wrapper.find('button.mc-status-notification-closable__close').exists(),
    ).toBe(true);
  });

  it('should emit a close event when the close button is clicked', async () => {
    const wrapper = mount(MStatusNotification, {
      props: {
        title: 'Closable Test',
        description: 'Test Description',
        closable: true,
      },
    });

    const closeButton = wrapper.find(
      'button.mc-status-notification-closable__close',
    );
    await closeButton.trigger('click');

    // Check if the "close" event was emitted
    expect(wrapper.emitted()).toHaveProperty('close');
  });

  it('should render footer slot if provided', () => {
    const footerSlotContent = '<button>Footer Button</button>';
    const wrapper = mount(MStatusNotification, {
      props: {
        title: 'With Footer',
        description: 'Description with footer',
      },
      slots: {
        footer: footerSlotContent,
      },
    });

    expect(wrapper.html()).toContain(footerSlotContent);
  });
});