@mozaic-ds/vue/src/components/flag/MFlag.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 Flag from './MFlag.vue';

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

  it('applies no modifier class when appearance is standard or undefined', () => {
    const wrapperDefault = mount(Flag, {
      props: {
        label: 'Default',
      },
    });
    expect(wrapperDefault.classes()).not.toContain('mc-flag--standard');

    const wrapperStandard = mount(Flag, {
      props: {
        label: 'Standard',
        appearance: 'standard',
      },
    });
    expect(wrapperStandard.classes()).not.toContain('mc-flag--standard');
  });

  it('applies correct modifier class for non-standard appearance', () => {
    const appearances = ['danger', 'accent', 'inverse'] as const;

    appearances.forEach((appearance) => {
      const wrapper = mount(Flag, {
        props: {
          label: `Label ${appearance}`,
          appearance,
        },
      });

      expect(wrapper.classes()).toContain(`mc-flag--${appearance}`);
    });
  });
});