@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 when label prop is provided', () => {
    const wrapper = mount(MCheckbox, {
      props: {
        id: 'test-checkbox',
        label: 'Accept terms',
        modelValue: false,
      },
    });

    const label = wrapper.find('label');
    expect(label.exists()).toBe(true);
    expect(label.text()).toBe('Accept terms');
    expect(label.attributes('for')).toBe('test-checkbox');
  });

  it('does not render label when label prop is not provided', () => {
    const wrapper = mount(MCheckbox, {
      props: {
        id: 'test-checkbox',
      },
    });

    expect(wrapper.find('label').exists()).toBe(false);
  });

  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']).toBeTruthy();
    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,
      },
    });

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

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

    const checkbox = wrapper.find('input');
    expect(checkbox.attributes('aria-invalid')).toBe('true');
  });

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

    expect(wrapper.classes()).toContain('mc-checkbox--indented');
  });

  it('sets the name attribute when name prop is provided', () => {
    const wrapper = mount(MCheckbox, {
      props: {
        id: 'test-checkbox',
        name: 'accept',
      },
    });

    const checkbox = wrapper.find('input');
    expect(checkbox.attributes('name')).toBe('accept');
  });
});