@mozaic-ds/vue/src/components/tag/MTag.spec.ts

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

import { mount } from '@vue/test-utils';
import MTag from './MTag.vue';
import { describe, it, expect, vi } from 'vitest';

describe('MTag.vue', () => {
  it('renders a selectable tag with a checkbox and label', async () => {
    const wrapper = mount(MTag, {
      props: {
        type: 'selectable',
        label: 'Test Tag',
        modelValue: false,
        id: 'test-tag-id',
        name: 'test-tag',
      },
    });

    const checkbox = wrapper.find('input');
    const label = wrapper.find('.mc-tag__label');

    expect(checkbox.exists()).toBe(true);
    expect(label.text()).toBe('Test Tag');
    expect(checkbox.element.checked).toBe(false);

    await checkbox.setChecked();
    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
  });

  it('renders an interactive tag as a button with label', () => {
    const wrapper = mount(MTag, {
      props: {
        type: 'interactive',
        label: 'Interactive Tag',
      },
    });

    const button = wrapper.find('button');
    const label = wrapper.find('.mc-tag__label');

    expect(button.exists()).toBe(true);
    expect(label.text()).toBe('Interactive Tag');
  });

  it('renders a contextualised tag with badge number', () => {
    const wrapper = mount(MTag, {
      props: {
        type: 'contextualised',
        label: 'Contextualised Tag',
        contextualisedNumber: 42,
      },
    });

    const badge = wrapper.findComponent({ name: 'MNumberBadge' });
    const label = wrapper.find('.mc-tag__label');

    expect(badge.exists()).toBe(true);
    expect(badge.props('label')).toBe(42);
    expect(label.text()).toBe('Contextualised Tag');
  });

  it('renders a removable tag with a delete button and emits remove event', async () => {
    const removeTag = vi.fn();
    const wrapper = mount(MTag, {
      props: {
        type: 'removable',
        label: 'Removable Tag',
        id: 'removable-tag-id',
      },
      global: {
        mocks: {
          emit: removeTag,
        },
      },
    });

    const removeButton = wrapper.find('button.mc-tag-removable__remove');
    expect(removeButton.exists()).toBe(true);

    await removeButton.trigger('click');
    expect(removeTag).toHaveBeenCalledWith('remove-tag', 'removable-tag-id');
  });

  it('renders with the correct size classes based on the size prop', () => {
    const wrapper = mount(MTag, {
      props: {
        type: 'informative',
        label: 'Informative Tag',
        size: 'l',
      },
    });

    const element = wrapper.find('span.mc-tag');
    expect(element.classes()).toContain('mc-tag--l');
  });

  it('should disable the tag when the disabled prop is true', () => {
    const wrapper = mount(MTag, {
      props: {
        type: 'selectable',
        label: 'Disabled Tag',
        disabled: true,
      },
    });

    const checkbox = wrapper.find('input');
    expect(checkbox.element.disabled).toBe(true);
  });
});