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


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

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

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

  it('should match banner text and banner link props', () => {
    wrapper = shallowMount(MBanner, {
      propsData: {
        text: 'New Text',
        linkText: 'New Link Text',
        linkHref: 'link-href',
      },
    });
    expect(wrapper.find('.banner-text').text()).toBe('New Text');
    expect(wrapper.find('.banner-link').find('a').text()).toBe('New Link Text');
    expect(wrapper.find('.banner-link').find('a').attributes('href')).toBe('link-href');
  });

  it('should match banner content from slots', () => {
    wrapper = shallowMount(MBanner, {
      slots: {
        default: `
          <div class="banner-text">
            New Text
          </div>
          <div class="banner-link">
            <a>New Link Text</a>
          </div>
        `,
      },
    });
    expect(wrapper.find('.banner-text').text()).toBe('New Text');
    expect(wrapper.find('.banner-link').find('a').text()).toBe('New Link Text');
  });
});