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

describe('MTextArea component', () => {
  it('should render correctly with the given props', () => {
    const wrapper = mount(MTextArea, {
      props: {
        id: 'textarea-id',
        modelValue: 'Test value',
        placeholder: 'Enter text here...',
        rows: 5,
        maxLength: 200,
      },
    });

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

    expect(textarea.attributes('id')).toBe('textarea-id');
    expect(textarea.attributes('placeholder')).toBe('Enter text here...');
    expect(textarea.attributes('rows')).toBe('5');
    expect(textarea.attributes('maxlength')).toBe('200');
  });

  it('should apply is-invalid class when isInvalid prop is true', () => {
    const wrapper = mount(MTextArea, {
      props: {
        id: 'textarea-id',
        modelValue: 'Test value',
        isInvalid: true,
      },
    });

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

  it('should update modelValue when the textarea value changes', async () => {
    const wrapper = mount(MTextArea, {
      props: {
        id: 'textarea-id',
        modelValue: 'Initial value',
      },
    });

    const textarea = wrapper.find('textarea');
    await textarea.setValue('Updated value');

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

  it('should not allow changes if the textarea is disabled', async () => {
    const wrapper = mount(MTextArea, {
      props: {
        id: 'textarea-id',
        modelValue: 'Initial value',
        disabled: true,
      },
    });

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

    await textarea.setValue('Updated value');

    expect(wrapper.emitted()['update:modelValue']).toBeFalsy();
  });

  it('should be read-only if the readonly prop is true', async () => {
    const wrapper = mount(MTextArea, {
      props: {
        id: 'textarea-id',
        modelValue: 'Initial value',
        readonly: true,
      },
    });

    const textarea = wrapper.find('textarea');
    expect(textarea.attributes('readonly')).toBeDefined();

    await textarea.setValue('Updated value');

    expect(textarea.attributes('value')).toBe('Initial value');
  });

  it('should apply a default classObject computed class', () => {
    const wrapper = mount(MTextArea, {
      props: {
        id: 'textarea-id',
        modelValue: 'Test value',
      },
    });

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

  it('should correctly bind rows attribute', () => {
    const wrapper = mount(MTextArea, {
      props: {
        id: 'textarea-id',
        modelValue: 'Test value',
        rows: 4,
      },
    });

    const textarea = wrapper.find('textarea');
    expect(textarea.attributes('rows')).toBe('4');
  });
});