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


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

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

  it('should match snapshot', () => {
    wrapper = shallowMount(MBadge, {
      propsData: {
        label: 'Label',
      },
    });
    expect(wrapper.element).toMatchSnapshot();
  });

  it('should match set text from label props', () => {
    wrapper = shallowMount(MBadge, {
      propsData: {
        label: 'New Label',
      },
    });
    expect(wrapper.findComponent({ ref: 'badgeLabel' }).text()).toBe('New Label');
  });

  it('should match set text from label props and the shape of badge will be circle', () => {
    wrapper = shallowMount(MBadge, {
      propsData: {
        rounded: true,
        label: '9',
      },
    });
    expect(wrapper.findComponent({ ref: 'badgeLabel' }).text()).toBe('9');
    expect(wrapper.find('.badge-shape--circle').exists()).toBe(true);
  });

  it('should match set text from label props and the shape of badge will be rounded', () => {
    wrapper = shallowMount(MBadge, {
      propsData: {
        rounded: true,
        label: '99+',
      },
    });
    expect(wrapper.findComponent({ ref: 'badgeLabel' }).text()).toBe('99+');
    expect(wrapper.find('.badge-shape--rounded').exists()).toBe(true);
  });

  it('should match set text from default slots', () => {
    wrapper = shallowMount(MBadge, {
      slots: {
        default: 'New Label',
      },
    });
    expect(wrapper.find('div').text()).toBe('New Label');
  });

  it('should match set text from label props and the shape of badge will be rounded', () => {
    wrapper = shallowMount(MBadge, {
      propsData: {
        rounded: true,
      },
      slots: {
        default: 'New Label',
      },
    });
    expect(wrapper.find('div').text()).toBe('New Label');
    expect(wrapper.find('.badge-shape--rounded').exists()).toBe(true);
  });
});