@mozaic-ds/vue/src/components/radio/MRadio.spec.ts

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

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

describe('MRadio component', () => {
  it('renders a radio button with a label', () => {
    const wrapper = mount(MRadio, {
      props: {
        id: 'radio1',
        label: 'Option 1',
      },
    });

    const radioInput = wrapper.find('input[type="radio"]');
    expect(radioInput.exists()).toBe(true);

    const label = wrapper.find('label');
    expect(label.text()).toBe('Option 1');
  });

  it('binds modelValue correctly when checked', async () => {
    const wrapper = mount(MRadio, {
      props: {
        id: 'radio1',
        modelValue: false,
      },
    });

    const radioInput = wrapper.find('input');

    expect(radioInput.element.checked).toBe(false);

    await radioInput.setChecked();

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

  it('sets the disabled attribute when disabled prop is true', () => {
    const wrapper = mount(MRadio, {
      props: {
        id: 'radio1',
        disabled: true,
      },
    });

    const radioInput = wrapper.find('input[type="radio"]');
    expect(radioInput.attributes('disabled')).toBeDefined();
  });

  it('applies the is-invalid class when isInvalid prop is true', () => {
    const wrapper = mount(MRadio, {
      props: {
        id: 'radio1',
        isInvalid: true,
      },
    });

    const radioInput = wrapper.find('input[type="radio"]');
    expect(radioInput.classes()).toContain('is-invalid');
  });

  it('does not apply the is-invalid class when isInvalid prop is false', () => {
    const wrapper = mount(MRadio, {
      props: {
        id: 'radio1',
        isInvalid: false,
      },
    });

    const radioInput = wrapper.find('input[type="radio"]');
    expect(radioInput.classes()).not.toContain('is-invalid');
  });

  it('emits update:modelValue on change', async () => {
    const wrapper = mount(MRadio, {
      props: {
        id: 'radio1',
        modelValue: false,
      },
    });

    const radioInput = wrapper.find('input[type="radio"]');

    await radioInput.setChecked();

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

  it('does not emit change when disabled', async () => {
    const wrapper = mount(MRadio, {
      props: {
        id: 'radio1',
        disabled: true,
        modelValue: false,
      },
    });

    const radioInput = wrapper.find('input[type="radio"]');

    await radioInput.setChecked();

    expect(wrapper.emitted()['update:modelValue']).toBeUndefined();
  });
});