@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,
  WarningTriangleFilled24,
  ErrorFilled24,
  CheckCircleFilled24,
} from '@mozaic-ds/icons-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('adds the accent modifier class when appearance is accent', () => {
    const wrapper = mount(MStatusMessage, {
      props: { label: 'Accent', appearance: 'accent' },
    });
    expect(wrapper.classes()).toContain('mc-status-message--accent');
  });

  it('does NOT add the accent modifier class when appearance is standard', () => {
    const wrapper = mount(MStatusMessage, {
      props: { label: 'Standard', appearance: 'standard' },
    });
    expect(wrapper.classes()).not.toContain('mc-status-message--accent');
    expect(wrapper.classes()).not.toContain('mc-status-message--standard');
  });

  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(WarningTriangleFilled24).exists()).toBe(true);
  });

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

    expect(wrapper.findComponent(ErrorFilled24).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);
  });
});