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

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

  beforeEach(() => {
    wrapper = shallowMount(MAlert, {
      stubs: {
        'm-alert': MAlert,
      },
    });
  });

  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 appropriate class name based on the selected type variant and should not display the icon', async () => {
    await setPropsWrapper({ type: 'success' });
    expect(wrapper.classes('alert-success')).toBe(true);
    expect(wrapper.find('.ic').exists()).toBe(false);
    expect(wrapper.find('.close').exists()).toBe(false);
  });

  it('should always display the description even it is not set properly', async () => {
    // await setPropsWrapper({});
    expect(wrapper.find('.alert-title').exists()).toBe(false);
    expect(wrapper.find('.alert-description').exists()).toBe(true);
  });

  it('should use appropriate class name based on the selected type variant and should not display the icon', async () => {
    await setPropsWrapper({ icon: 'anything' });
    expect(wrapper.find('.ic').exists()).toBe(true);
  });

  it('should contain default icon for the given type', async () => {
    await setPropsWrapper({ type: 'error', icon: 'default' });
    expect(wrapper.find('.ic-error').exists()).toBe(true);
  });

  it('should contain specified icon for the given type', async () => {
    await setPropsWrapper({ type: 'warning', icon: 'info' });
    expect(wrapper.classes('alert-warning')).toBe(true);
    expect(wrapper.find('.ic-info').exists()).toBe(true);
  });


  it('should contain specified icon for the given type even it is not a standard icon', async () => {
    await setPropsWrapper({ icon: 'attachment' });
    expect(wrapper.find('.ic-attachment').exists()).toBe(true);
  });

  it('should contain the title if specified', async () => {
    const title = 'Hello World';
    await setPropsWrapper({ title });
    expect(wrapper.find('.alert-title').exists()).toBe(true);
    expect(wrapper.find('.alert-title').text()).toBe(title);
  });

  it('should contain the description if specified', async () => {
    const description = 'Hello from another side';
    await setPropsWrapper({ description });
    expect(wrapper.find('.alert-description').exists()).toBe(true);
    expect(wrapper.find('.alert-description').text()).toBe(description);
  });

  it('should be able to close the alert if set to dismissible', async () => {
    await setPropsWrapper({ dismissible: true });
    wrapper.find('.close').trigger('click');
    await wrapper.vm.$nextTick();
    expect(wrapper.classes('alert-dismissible')).toBe(true);
    expect(wrapper.find('.close').exists()).toBe(true);
    expect(wrapper.emitted('close')).toBeTruthy();
  });

  it('should displayed as a dismissible toast if specified', async () => {
    await setPropsWrapper({ toast: true, dismissible: true });
    expect(wrapper.classes('alert-toast')).toBe(true);
    expect(wrapper.classes('alert-dismissible')).toBe(true);
    expect(wrapper.find('.close').exists()).toBe(true);
  });
});