@mozaic-ds/vue/src/components/textinput/MTextInput.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 MTextInput from './MTextInput.vue';
import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';

describe('MTextInput component', () => {
  it('should render correctly with the given props', () => {
    const wrapper = mount(MTextInput, {
      props: {
        id: 'input-id',
        modelValue: 'test',
        placeholder: 'Enter text',
        inputType: 'text',
        size: 's',
      },
    });

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

    expect(input.attributes('id')).toBe('input-id');
    expect(input.attributes('placeholder')).toBe('Enter text');
    expect(input.attributes('type')).toBe('text');
    expect(wrapper.classes()).toContain('mc-text-input--s');
  });

  it('should update modelValue when input value changes', async () => {
    const wrapper = mount(MTextInput, {
      props: {
        id: 'input-id',
        modelValue: 'initial value',
      },
    });

    const input = wrapper.find('input');
    await input.setValue('new value');

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

  it('should render Search24 icon when passed to icon slot', () => {
    const wrapper = mount(MTextInput, {
      props: {
        id: 'input-id',
        modelValue: 'test',
      },
      slots: {
        icon: Search24,
      },
    });

    const iconWrapper = wrapper.find('.mc-text-input__icon');
    expect(iconWrapper.exists()).toBe(true);
    expect(iconWrapper.findComponent(Search24).exists()).toBe(true);
  });

  it('should render the clear button when isClearable is true and modelValue is not empty', () => {
    const wrapper = mount(MTextInput, {
      props: {
        id: 'input-id',
        modelValue: 'text content',
        isClearable: true,
      },
    });

    const clearButton = wrapper.find('.mc-controls-options__button');
    expect(clearButton.exists()).toBe(true);
  });

  it('should clear the input value when the clear button is clicked', async () => {
    const wrapper = mount(MTextInput, {
      props: {
        id: 'input-id',
        modelValue: 'text content',
        isClearable: true,
      },
    });

    const clearButton = wrapper.find('.mc-controls-options__button');
    await clearButton.trigger('click');

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

  it('should not render the clear button if isClearable is false', () => {
    const wrapper = mount(MTextInput, {
      props: {
        id: 'input-id',
        modelValue: 'text content',
        isClearable: false,
      },
    });

    const clearButton = wrapper.find('.mc-controls-options__button');
    expect(clearButton.exists()).toBe(false);
  });

  it('should apply the correct classes based on validation props', () => {
    const wrapper = mount(MTextInput, {
      props: {
        id: 'input-id',
        modelValue: 'text content',
        isInvalid: true,
      },
    });

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

  it('should not apply is-invalid if not specified', () => {
    const wrapper = mount(MTextInput, {
      props: {
        id: 'input-id',
        modelValue: 'text content',
      },
    });

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