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

describe('MNumberBadge component', () => {
  it('renders the label correctly', () => {
    const wrapper = mount(MNumberBadge, {
      props: { label: 42 },
    });
    expect(wrapper.text()).toBe('42');
  });

  it('applies no modifier class by default', () => {
    const wrapper = mount(MNumberBadge, {
      props: { label: 1 },
    });
    expect(wrapper.classes()).toContain('mc-number-badge');
    expect(wrapper.classes()).not.toContain('mc-number-badge--standard');
    expect(wrapper.classes()).not.toContain('mc-number-badge--s');
  });

  it('applies appearance modifier class when set to danger', () => {
    const wrapper = mount(MNumberBadge, {
      props: {
        label: 5,
        appearance: 'danger',
      },
    });
    expect(wrapper.classes()).toContain('mc-number-badge');
    expect(wrapper.classes()).toContain('mc-number-badge--danger');
  });

  it('applies size modifier class when size is m', () => {
    const wrapper = mount(MNumberBadge, {
      props: {
        label: 10,
        size: 'm',
      },
    });
    expect(wrapper.classes()).toContain('mc-number-badge');
    expect(wrapper.classes()).toContain('mc-number-badge--m');
  });

  it('applies both appearance and size modifier classes when set', () => {
    const wrapper = mount(MNumberBadge, {
      props: {
        label: 3,
        appearance: 'accent',
        size: 'm',
      },
    });
    expect(wrapper.classes()).toContain('mc-number-badge');
    expect(wrapper.classes()).toContain('mc-number-badge--accent');
    expect(wrapper.classes()).toContain('mc-number-badge--m');
  });
});