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


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

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

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

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

  it('should set content inside text based on slot', () => {
    wrapper = shallowMount(MText, {
      slots: {
        default: 'Text',
      },
    });
    expect(wrapper.find('p').text()).toBe('Text');
  });

  it('should set tag to be H1 if props type is "page-title"', () => {
    wrapper = initWrapper({
      type: 'page-title',
    });
    expect(wrapper.element.tagName).toBe('H1');
  });

  it('should set tag to be H2 if props type is "stage-title"', () => {
    wrapper = initWrapper({
      type: 'stage-title',
    });
    expect(wrapper.element.tagName).toBe('H2');
  });

  it('should set tag to be H3 if props type is "section"', () => {
    wrapper = initWrapper({
      type: 'section',
    });
    expect(wrapper.element.tagName).toBe('H3');
  });

  it('should set tag to be DIV if props type is "large-title"', () => {
    wrapper = initWrapper({
      type: 'large-title',
    });
    expect(wrapper.element.tagName).toBe('DIV');
    expect(wrapper.find('div').classes('large-title')).toBe(true);
  });

  it('should set tag to be P if props type is "body"', () => {
    wrapper = initWrapper({
      type: 'body',
    });
    expect(wrapper.element.tagName).toBe('P');
  });

  it('should set tag to be P if props type is empty', () => {
    wrapper = initWrapper();
    expect(wrapper.element.tagName).toBe('P');
  });

  it('should set tag to be P if props type is not on list', () => {
    wrapper = initWrapper({
      type: 'wrong-type',
    });
    expect(wrapper.element.tagName).toBe('P');
  });

  it('should set tag to be SMALL if props type is "caption"', () => {
    wrapper = initWrapper({
      type: 'caption',
    });
    expect(wrapper.element.tagName).toBe('SMALL');
  });
});