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

describe('MField component', () => {
  it('should render label correctly', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
      },
    });

    const label = wrapper.find('label');
    expect(label.exists()).toBe(true);
    expect(label.text()).toBe('Field Label');
  });

  it('should render requirement text if provided', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
        requirementText: 'required',
      },
    });

    const requirementText = wrapper.find('.mc-field__requirement');
    expect(requirementText.exists()).toBe(true);
    expect(requirementText.text()).toBe('(required)');
  });

  it('should not render requirement text if not provided', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
      },
    });

    const requirementText = wrapper.find('.mc-field__requirement');
    expect(requirementText.exists()).toBe(false);
  });

  it('should render help text if provided', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
        helpText: 'This is some help text.',
        helpId: 'help-id',
      },
    });

    const helpText = wrapper.find('.mc-field__help');
    expect(helpText.exists()).toBe(true);
    expect(helpText.text()).toBe('This is some help text.');
  });

  it('should not render help text if not provided', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
      },
    });

    const helpText = wrapper.find('.mc-field__help');
    expect(helpText.exists()).toBe(false);
  });

  it('should apply is-valid class when isValid prop is true', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
        isValid: true,
        message: 'Valid input',
      },
    });

    expect(wrapper.find('.mc-field__validation-message').classes()).toContain(
      'is-valid',
    );
    expect(wrapper.find('.mc-field__validation-message').text()).toBe(
      'Valid input',
    );
  });

  it('should apply is-invalid class when isInvalid prop is true', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
        isInvalid: true,
        message: 'Invalid input',
      },
    });

    expect(wrapper.find('.mc-field__validation-message').classes()).toContain(
      'is-invalid',
    );
    expect(wrapper.find('.mc-field__validation-message').text()).toBe(
      'Invalid input',
    );
  });

  it('should render a validation message only when isValid or isInvalid is true and message is provided', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
        isValid: true,
        message: 'This is a valid input',
      },
    });

    const validationMessage = wrapper.find('.mc-field__validation-message');
    expect(validationMessage.exists()).toBe(true);
    expect(validationMessage.text()).toBe('This is a valid input');
  });

  it('should render the form element passed in the slot', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
      },
      slots: {
        default: '<input type="text" />',
      },
    });

    const input = wrapper.find('input');
    expect(input.exists()).toBe(true);
    expect(input.attributes('type')).toBe('text');
  });

  it('should render validation message when isInvalid is true and message is provided', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
        isInvalid: true,
        message: 'There is an error',
      },
    });

    const validationMessage = wrapper.find('.mc-field__validation-message');
    expect(validationMessage.exists()).toBe(true);
    expect(validationMessage.text()).toBe('There is an error');
  });

  it('should not render validation message when message is not provided', () => {
    const wrapper = mount(MField, {
      props: {
        id: 'input-id',
        label: 'Field Label',
        isValid: true,
      },
    });

    const validationMessage = wrapper.find('.mc-field__validation-message');
    expect(validationMessage.exists()).toBe(false);
  });
});