@mekari/mekari-ui-vue/src/components/Button/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 MButton from './index.vue';
import MIcon from '../Icon';
import { shallowMount } from '@vue/test-utils';

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

  beforeEach(() => {
    wrapper = shallowMount(MButton);
  });

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

  const setPropsWrapper = async props => {
    wrapper.setProps({ ...props });
    await wrapper.vm.$nextTick();
  };

  it('should match snapshot', () => {
    expect(wrapper.element).toMatchSnapshot();
  });

  it('should use class based on variant loading correctly', async () => {
    await setPropsWrapper({ variant: 'loading' });
    expect(wrapper.classes('is-loading')).toBe(true);
  });

  it('should use class based on variant icon-only correctly', async () => {
    await setPropsWrapper({ variant: 'icon-only' });
    expect(wrapper.classes('btn-icon-only')).toBe(true);
  });

  it('should use class based on variant icon-left correctly', async () => {
    await setPropsWrapper({ variant: 'icon-left' });
    expect(wrapper.classes('btn-with-icon')).toBe(true);
  });

  it('should use class based on variant icon-right correctly', async () => {
    await setPropsWrapper({ variant: 'icon-right' });
    expect(wrapper.classes('btn-with-icon')).toBe(true);
  });

  it('should use class based on themes correctly', async () => {
    await setPropsWrapper({ theme: 'secondary' });
    expect(wrapper.classes('btn-secondary')).toBe(true);
  });

  it('should use class based on size correctly', async () => {
    await setPropsWrapper({ size: 'lg' });
    expect(wrapper.classes('btn-lg')).toBe(true);
  });

  it('should use class based on label correctly', async () => {
    await setPropsWrapper({ label: 'Label' });
    expect(wrapper.find('span').text()).toBe('Label');
  });

  it('should use class based on iconVariant correctly', async () => {
    await setPropsWrapper({
      variant: 'icon-only',
      iconVariant: 'add',
    });
    expect(wrapper.findComponent(MIcon).attributes('variant')).toBe('add');
  });

  it('should use type based on buttonType correctly', async () => {
    await setPropsWrapper({ buttonType: 'submit' });
    expect(wrapper.attributes('type')).toBe('submit');
  });

  it('should disable the button based on props disabled', async () => {
    await setPropsWrapper({ disabled: true });
    expect(wrapper.attributes('disabled')).toBe('disabled');
  });

  it('should be able to set button content based on default slot', () => {
    wrapper.destroy();
    wrapper = shallowMount(MButton, {
      slots: {
        default: 'Button',
      },
    });
    expect(wrapper.vm.$slots.default[0].text).toBe('Button');
  });
});