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

describe('Select.vue', () => {
  it('renders options correctly', () => {
    const options = [
      { text: 'Option 1', value: '1' },
      { text: 'Option 2', value: '2' },
      { text: 'Option 3', value: '3' },
    ];

    const wrapper = mount(MSelect, {
      props: {
        id: 'test-select',
        modelValue: '1',
        options,
      },
    });

    const optionElements = wrapper.findAll('option');
    expect(optionElements.length).toBe(options.length);
    expect(optionElements[0].text()).toBe('Option 1');
    expect(optionElements[1].text()).toBe('Option 2');
    expect(optionElements[2].text()).toBe('Option 3');
  });

  it('renders placeholder when provided', () => {
    const options = [
      { text: 'Option 1', value: '1' },
      { text: 'Option 2', value: '2' },
    ];

    const wrapper = mount(MSelect, {
      props: {
        id: 'test-select',
        modelValue: '',
        options,
        placeholder: 'Select an option',
      },
    });

    const placeholderOption = wrapper.find('option[disabled]');
    expect(placeholderOption.exists()).toBe(true);
    expect(placeholderOption.text()).toBe('-- Select an option --');
  });

  it('binds and updates the modelValue correctly', async () => {
    const options = [
      { text: 'Option 1', value: '1' },
      { text: 'Option 2', value: '2' },
    ];

    const wrapper = mount(MSelect, {
      props: {
        id: 'test-select',
        modelValue: '1',
        options,
      },
    });

    await wrapper.find('select').setValue('2');

    const emitted = wrapper.emitted('update:modelValue');
    expect(emitted).toBeDefined();
    expect(emitted!.length).toBe(1);
    expect(emitted![0]).toEqual(['2']);
  });

  it('disables the select when the disabled prop is true', () => {
    const wrapper = mount(MSelect, {
      props: {
        id: 'test-select',
        modelValue: '1',
        options: [{ text: 'Option 1', value: '1' }],
        disabled: true,
      },
    });

    const select = wrapper.find('select');
    expect(select.attributes('disabled')).toBeDefined();
  });

  it('applies the correct classes based on props', () => {
    const wrapper = mount(MSelect, {
      props: {
        id: 'test-select',
        modelValue: '1',
        options: [{ text: 'Option 1', value: '1' }],
        size: 's',
        isInvalid: true,
      },
    });

    const select = wrapper.find('select');

    expect(select.classes()).toContain('mc-select--s');

    expect(select.classes()).toContain('is-invalid');
  });

  it('does not apply invalid class if isInvalid is not set', () => {
    const wrapper = mount(MSelect, {
      props: {
        id: 'test-select',
        modelValue: '1',
        options: [{ text: 'Option 1', value: '1' }],
      },
    });

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