@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, expect, it } from 'vitest';
import MStatusNotification from './MStatusNotification.vue';
import {
  InfoCircleFilled24,
  WarningTriangleFilled24,
  ErrorFilled24,
  CheckCircleFilled24,
} from '@mozaic-ds/icons-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(InfoCircleFilled24).exists()).toBe(true);
    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(CheckCircleFilled24).exists()).toBe(
      true,
    );

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

    const wrapperError = mount(MStatusNotification, {
      props: {
        title: 'Error',
        description: 'Error Description',
        status: 'error',
      },
    });
    expect(wrapperError.findComponent(ErrorFilled24).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);
  });
});