@mozaic-ds/vue/src/components/checkbox/MCheckbox.spec.ts

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

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

describe('MCheckbox', () => {
  it('renders with label', () => {
    const wrapper = mount(MCheckbox, {
      props: {
        id: 'test-checkbox',
        label: 'Accept terms',
        modelValue: false,
      },
    });

    expect(wrapper.find('label').text()).toBe('Accept terms');
  });

  it('renders the checkbox as checked when modelValue is true', () => {
    const wrapper = mount(MCheckbox, {
      props: {
        id: 'test-checkbox',
        modelValue: true,
      },
    });

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

  it('renders the checkbox as unchecked when modelValue is false', () => {
    const wrapper = mount(MCheckbox, {
      props: {
        id: 'test-checkbox',
        modelValue: false,
      },
    });

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

  it('emits update:modelValue when clicked', async () => {
    const wrapper = mount(MCheckbox, {
      props: {
        id: 'test-checkbox',
        modelValue: false,
      },
    });

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

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

  it('emits update:modelValue when unchecked', async () => {
    const wrapper = mount(MCheckbox, {
      props: {
        id: 'test-checkbox',
        modelValue: true,
      },
    });

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

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

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

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

  it('sets the indeterminate state correctly', () => {
    const wrapper = mount(MCheckbox, {
      props: {
        id: 'test-checkbox',
        indeterminate: true,
      },
    });

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

  it('applies is-invalid class when isInvalid is true', () => {
    const wrapper = mount(MCheckbox, {
      props: {
        id: 'test-checkbox',
        isInvalid: true,
      },
    });

    expect(wrapper.find('input').classes()).toContain('is-invalid');
  });
});