@mozaic-ds/vue/src/components/radiogroup/MRadioGroup.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 MRadioGroup from './MRadioGroup.vue';
import MField from '@/components/field/MField.vue';
import MRadio from '@/components/radio/MRadio.vue';

describe('MRadioGroup component', () => {
  const options = [
    { id: 'option-1', label: 'Option 1', value: 'option1' },
    { id: 'option-2', label: 'Option 2', value: 'option2', disabled: true },
    { id: 'option-3', label: 'Option 3', value: 'option3' },
  ];

  // eslint-disable-next-line
  const mountComponent = (props: Record<string, any>) => {
    return mount(MRadioGroup, {
      global: {
        components: { MField, MRadio },
      },
      props: {
        name: 'radio-group',
        options,
        ...props,
      },
    });
  };

  it('renders the radio buttons correctly', () => {
    const wrapper = mountComponent({});
    expect(wrapper.findAll('input[type="radio"]')).toHaveLength(3);
  });

  it('binds the modelValue prop correctly', async () => {
    const wrapper = mountComponent({ modelValue: 'option1' });

    const radio1 = wrapper.find('#option-1');
    const radio2 = wrapper.find('#option-2');
    const radio3 = wrapper.find('#option-3');

    expect(radio1.element.checked).toBe(true);
    expect(radio2.element.checked).toBe(false);
    expect(radio3.element.checked).toBe(false);
  });

  it('does not allow disabled options to be selected', async () => {
    const wrapper = mountComponent({ modelValue: 'option1' });
    const radio2 = wrapper.find('#option-2');

    expect(radio2.attributes('disabled')).toBeDefined();
    await radio2.setChecked();

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