@mozaic-ds/vue/src/components/statusbadge/MstatusBadge.spec.ts

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

import { describe, it, expect } from 'vitest';

import { mount } from '@vue/test-utils';
import MStatusBadge from './MStatusBadge.vue';

describe('MStatusBadge component', () => {
  it('renders properly', () => {
    const wrapper = mount(MStatusBadge, {
      props: {
        label: 'Badge Label',
      },
    });

    expect(wrapper.text()).toContain('Badge Label');
  });

  describe('size', () => {
    it('does not add a size modifier class when size is "m" (default)', () => {
      const wrapper = mount(MStatusBadge, { props: { label: 'Badge' } });
      expect(wrapper.classes()).not.toContain('mc-status-badge--m');
    });

    it('adds the "mc-status-badge--s" class when size is "s"', () => {
      const wrapper = mount(MStatusBadge, {
        props: { label: 'Badge', size: 's' },
      });
      expect(wrapper.classes()).toContain('mc-status-badge--s');
    });
  });

  describe('status', () => {
    it('does not add a status modifier class when status is "info" (default)', () => {
      const wrapper = mount(MStatusBadge, { props: { label: 'Badge' } });
      expect(wrapper.classes()).not.toContain('mc-status-badge--info');
    });

    it.each(['success', 'warning', 'error', 'neutral'] as const)(
      'adds the "mc-status-badge--%s" class when status is "%s"',
      (status) => {
        const wrapper = mount(MStatusBadge, {
          props: { label: 'Badge', status },
        });
        expect(wrapper.classes()).toContain(`mc-status-badge--${status}`);
      },
    );
  });
});