@mozaic-ds/vue/src/components/statusmessage/MStatusMessage.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 MStatusMessage from './MStatusMessage.vue';

import InfoCircleFilled24 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled24/InfoCircleFilled24.vue';
import WarningCircleFilled24 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled24/WarningCircleFilled24.vue';
import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
import CheckCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled24/CheckCircleFilled24.vue';

describe('MStatusMessage.vue', () => {
  it('renders the label', () => {
    const wrapper = mount(MStatusMessage, {
      props: { label: 'Hello world' },
    });

    expect(wrapper.find('.mc-status-message__description').text()).toBe(
      'Hello world',
    );
  });

  it('uses the info icon by default', () => {
    const wrapper = mount(MStatusMessage, {
      props: { label: 'Info message' },
    });

    expect(wrapper.findComponent(InfoCircleFilled24).exists()).toBe(true);
  });

  it('renders the success icon when status is success', () => {
    const wrapper = mount(MStatusMessage, {
      props: { status: 'success', label: 'Success' },
    });

    expect(wrapper.findComponent(CheckCircleFilled24).exists()).toBe(true);
  });

  it('renders the warning icon when status is warning', () => {
    const wrapper = mount(MStatusMessage, {
      props: { status: 'warning', label: 'Warning' },
    });

    expect(wrapper.findComponent(WarningCircleFilled24).exists()).toBe(true);
  });

  it('renders the error icon when status is error', () => {
    const wrapper = mount(MStatusMessage, {
      props: { status: 'error', label: 'Error' },
    });

    expect(wrapper.findComponent(CrossCircleFilled24).exists()).toBe(true);
  });

  it('adds correct modifier class for non-info statuses', () => {
    const wrapper = mount(MStatusMessage, {
      props: { status: 'warning', label: 'Warn' },
    });

    expect(wrapper.classes()).toContain('mc-status-message--warning');
  });

  it('does NOT add modifier class for info', () => {
    const wrapper = mount(MStatusMessage, { props: { label: 'Info' } });

    expect(wrapper.classes()).not.toContain('mc-status-message--info');
  });

  it('shows loader instead of icon when status is inprogress', () => {
    const wrapper = mount(MStatusMessage, {
      props: { status: 'inprogress', label: 'Loading' },
    });

    expect(wrapper.findComponent({ name: 'MLoader' }).exists()).toBe(true);

    expect(wrapper.find('.mc-status-message__icon').exists()).toBe(false);
  });
});