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

jest.useFakeTimers();

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

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

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

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

  beforeEach(() => {
    wrapper = shallowMount(TooltipWithDirectiveTemplate, {
      sync: false,
      localVue,
    });
  });

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

  describe('should be able to handle click event', () => {
    it('should toggle tooltip visibility after button trigger clicked if the props trigger is `click`', async () => {
      await wrapper.findComponent({ ref: 'clickTrigger' }).trigger('click');
      expect(document.body.querySelector('.mkvue-directive-tooltip')).toBeTruthy();
      await wrapper.findComponent({ ref: 'clickTrigger' }).trigger('click');
      expect(document.body.querySelector('.mkvue-directive-tooltip')).toBeFalsy();
    });
    it('should not hide tooltip after action if the trigger element is in focus', async () => {
      cleanUpBody();
      wrapper = shallowMount(TooltipWithDirectiveTemplate, {
        attachTo: document.body,
        localVue,
      });
      await wrapper.findComponent({ ref: 'clickTrigger' }).trigger('click');
      wrapper.findComponent({ ref: 'clickTrigger' }).element.focus();
      await wrapper.findComponent({ ref: 'clickTrigger' }).trigger('click');
      expect(document.body.querySelector('.mkvue-directive-tooltip')).toBeTruthy();
    });
  });

  describe('should be able to handle hover event', () => {
    it('should toggle tooltip visibility after button trigger mouseenter and mouseleave if the props trigger is `hover`', async () => {
      await wrapper.findComponent({ ref: 'hoverTrigger' }).trigger('mouseenter');
      expect(document.body.querySelector('.mkvue-directive-tooltip')).toBeTruthy();
      await wrapper.findComponent({ ref: 'hoverTrigger' }).trigger('mouseleave');
      expect(document.body.querySelector('.mkvue-directive-tooltip')).toBeFalsy();
    });
    it('should not hide tooltip after action if the trigger element is in focus', async () => {
      cleanUpBody();
      wrapper = shallowMount(TooltipWithDirectiveTemplate, {
        attachTo: document.body,
        localVue,
      });
      await wrapper.findComponent({ ref: 'hoverTrigger' }).trigger('mouseenter');
      wrapper.findComponent({ ref: 'hoverTrigger' }).element.focus();
      await wrapper.findComponent({ ref: 'hoverTrigger' }).trigger('mouseleave');
      expect(document.body.querySelector('.mkvue-directive-tooltip')).toBeTruthy();
    });
  });

});