@mekari/mekari-ui-vue/src/plugins/Popover/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 MPopoverPlugin from '.';
import { createLocalVue, shallowMount } from '@vue/test-utils';

jest.useFakeTimers();

const localVue = createLocalVue();
localVue.use(MPopoverPlugin);

const PopoverWithDirectiveTemplate = {
  template: `
    <div class="text-center p-7">
      <button ref="clickTrigger" class="btn btn-primary" v-popover.click.top="'Click Content'" title="Click Popover">Click Trigger</button>
      <button ref="hoverTrigger" class="btn btn-primary" v-popover.hover.top="'Hover Content'" title="Click Popover">Hover Trigger</button>
      <button ref="emptyPopoverTrigger" class="btn btn-primary" v-popover.hover.top>Empty Popover</button>
    </div>
  `,
};

describe('Mekari UI Popover Plugins', () => {
  let wrapper;

  function cleanUpBody() {
    wrapper.destroy();
    document.body.querySelectorAll('.popover').forEach(e => e.parentNode.removeChild(e));
  }

  beforeEach(() => {
    wrapper = shallowMount(PopoverWithDirectiveTemplate, {
      localVue,
    });
  });

  afterEach(() => {
    cleanUpBody();
  });

  describe('should be able to handle click event', () => {
    it('should toggle popover visibility after button trigger clicked if the props trigger is `click`', () => {
      wrapper.findComponent({ ref: 'clickTrigger' }).trigger('click');
      expect(document.body.querySelector('.popover').classList.contains('show')).toBe(true);
      wrapper.findComponent({ ref: 'clickTrigger' }).trigger('click');
    });
  });

  describe('should be able to handle hover event', () => {
    it('should toggle popover visibility after button trigger mouseenter and mouseleave if the props trigger is `hover`', () => {
      wrapper.findComponent({ ref: 'hoverTrigger' }).trigger('mouseenter');
      expect(document.body.querySelectorAll('.popover')[1].classList.contains('show')).toBe(true);
      wrapper.findComponent({ ref: 'hoverTrigger' }).trigger('mouseleave');
      expect(document.body.querySelectorAll('.popover')[1].classList.contains('show')).toBe(false);
    });
  });

});