@mekari/mekari-ui-vue/src/components/FormInput/index.spec.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

import MInput from './index.vue';
import { BFormInput } from 'bootstrap-vue';
import { shallowMount } from '@vue/test-utils';

jest.mock('lodash/debounce', () =>
  jest.fn(fn => {
    fn.cancel = jest.fn();
    return fn;
  }),
);

describe('Mekari UI Form Input Component', () => {
  let wrapper;

  const initWrapper = props =>
    shallowMount(MInput, {
      propsData: {
        ...props,
      },
    });

  afterEach(() => {
    wrapper.destroy();
  });

  it('should match snapshot', () => {
    wrapper = initWrapper({ value: 'Text' });
    expect(wrapper.element).toMatchSnapshot();
  });
  it('should add `.prefix-icon` if prop `hasPrefixIcon` is true', () => {
    wrapper = initWrapper({ hasPrefixIcon: true });
    expect(wrapper.classes('prefix-icon')).toBe(true);
  });
  it('should add `.suffix-icon` if prop `hasSuffixIcon` is true', () => {
    wrapper = initWrapper({ hasSuffixIcon: true });
    expect(wrapper.classes('suffix-icon')).toBe(true);
  });
  it('should add `.suffix-icon--double` if prop `hasDoubleSuffixIcon` is true', () => {
    wrapper = initWrapper({ hasDoubleSuffixIcon: true });
    expect(wrapper.classes('suffix-icon--double')).toBe(true);
  });
  it('should add `.input-no-readonly` if prop `clickableReadonly` is true', () => {
    wrapper = initWrapper({ clickableReadonly: true });
    expect(wrapper.classes('input-no-readonly')).toBe(true);
  });
  it('should change form input value if the props value changed', async () => {
    wrapper = initWrapper();
    wrapper.setProps({ value: 'new value' });
    await wrapper.vm.$nextTick();
    expect(wrapper.findComponent(BFormInput).attributes('value')).toBe('new value');
    expect(wrapper.emitted('input')[0][0]).toBe('new value');
  });
});