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

describe('MToggle Component', () => {
  it('should render the toggle with default props', () => {
    const wrapper = mount(MToggle, {
      props: {
        id: 'test-toggle',
      },
    });

    const input = wrapper.find('input');
    expect(input.exists()).toBe(true);
    expect(input.attributes().id).toBe('test-toggle');
    expect(input.classes()).toContain('mc-toggle__input');
  });

  it('should bind and update modelValue (v-model)', async () => {
    const wrapper = mount(MToggle, {
      props: {
        id: 'test-toggle',
        modelValue: false,
      },
    });

    const input = wrapper.find('input');
    expect(input.element.checked).toBe(false);

    await input.setChecked(true);

    const emittedEvent = wrapper.emitted()['update:modelValue'];
    expect(emittedEvent).toBeDefined();
    expect(emittedEvent![0]).toEqual([true]);
  });

  it('is disabled when the disabled prop is true', () => {
    const wrapper = mount(MToggle, {
      props: {
        id: 'test-toggle',
        disabled: true,
      },
    });

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

  it('should render the label if provided', () => {
    const wrapper = mount(MToggle, {
      props: {
        id: 'test-toggle',
        label: 'Enable feature',
      },
    });

    const label = wrapper.find('.mc-toggle__label');
    expect(label.exists()).toBe(true);
    expect(label.text()).toBe('Enable feature');
  });

  it('should not render the label if not provided', () => {
    const wrapper = mount(MToggle, {
      props: {
        id: 'test-toggle',
      },
    });

    const label = wrapper.find('.mc-toggle__label');
    expect(label.exists()).toBe(false);
  });

  it('should apply the correct size class based on the size prop', () => {
    const wrapper = mount(MToggle, {
      props: {
        id: 'test-toggle',
        size: 'm',
      },
    });

    expect(wrapper.classes()).toContain('mc-toggle--m');
  });

  it('should emit updated modelValue on toggle change', async () => {
    const wrapper = mount(MToggle, {
      props: {
        id: 'test-toggle',
        modelValue: false,
      },
    });

    const input = wrapper.find('input');
    await input.setChecked(true);

    const emittedEvent = wrapper.emitted()['update:modelValue'];
    expect(emittedEvent).toBeDefined();
    expect(emittedEvent![0]).toEqual([true]);
  });
});