@mozaic-ds/vue/src/components/togglegroup/MToggleGroup.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 MToggleGroup from './MToggleGroup.vue';
import MToggle from '@/components/toggle/MToggle.vue';

describe('MToggleGroup.vue', () => {
  it('renders toggles based on options', async () => {
    const options = [
      { id: '1', label: 'Option 1', value: 'option1' },
      { id: '2', label: 'Option 2', value: 'option2' },
    ];

    const wrapper = mount(MToggleGroup, {
      props: {
        name: 'test-name',
        options,
      },
    });

    const toggles = wrapper.findAllComponents(MToggle);
    expect(toggles.length).toBe(2);

    expect(toggles[0].props('label')).toBe('Option 1');
    expect(toggles[1].props('label')).toBe('Option 2');
  });

  it('updates modelValue when a toggle is checked', async () => {
    const options = [
      { id: '1', label: 'Option 1', value: 'option1' },
      { id: '2', label: 'Option 2', value: 'option2' },
    ];

    const wrapper = mount(MToggleGroup, {
      props: {
        name: 'test-name',
        options,
        modelValue: [],
      },
    });

    const toggle1 = wrapper.findAllComponents(MToggle)[0].find('input');
    await toggle1.setChecked(true);

    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
    expect(wrapper.emitted('update:modelValue')[0]).toEqual([['option1']]);

    const toggle2 = wrapper.findAllComponents(MToggle)[1].find('input');
    await toggle2.setChecked(true);

    expect(wrapper.emitted('update:modelValue')[1]).toEqual([
      ['option1', 'option2'],
    ]);
  });

  it('syncs with the v-model when initial value is passed', async () => {
    const options = [
      { id: '1', label: 'Option 1', value: 'option1' },
      { id: '2', label: 'Option 2', value: 'option2' },
    ];

    const wrapper = mount(MToggleGroup, {
      props: {
        name: 'test-name',
        options,
        modelValue: ['option1'],
      },
    });

    const toggles = wrapper.findAllComponents(MToggle);
    expect(toggles[0].props('modelValue')).toBe(true);
    expect(toggles[1].props('modelValue')).toBe(false);

    await wrapper.setProps({ modelValue: ['option2'] });

    expect(toggles[0].props('modelValue')).toBe(false);
    expect(toggles[1].props('modelValue')).toBe(true);
  });
});