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


describe('Mekari UI Popover Component', () => {
  let wrapper;
  const triggerId = 'popover-activator';
  const buttonTriggerWrapper = document.createElement('button');
  buttonTriggerWrapper.id = triggerId;
  buttonTriggerWrapper.textContent = 'Trigger Button';
  document.body.appendChild(buttonTriggerWrapper);
  const buttonTrigger = document.body.querySelector(`#${triggerId}`);

  function initWrapper(additionPropsData = {}) {
    return shallowMount(MPopover, {
      attachTo: document.body,
      propsData: {
        content: 'Content',
        target: triggerId,
        ...additionPropsData,
      },
    });
  }

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

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

  it('should not trigger anything if target props is empty', () => {
    wrapper = shallowMount(MPopover, {
      attachTo: document.body,
      propsData: {
        trigger: 'click',
        content: 'Content',
      },
    });
    buttonTrigger.click();
    expect(wrapper.find('.popover').exists()).toBe(false);
  });

  it('should set title based on title props', async () => {
    wrapper = initWrapper({
      trigger: 'click',
      title: 'title',
    });
    buttonTrigger.click();
    await wrapper.vm.$nextTick();
    expect(wrapper.find('.popover-header').exists()).toBe(true);
  });

  describe('should be able to handle click event', () => {
    it('should toggle popover visibility after button trigger clicked if the props trigger is `click`', async () => {
      wrapper = initWrapper({ trigger: 'click' });

      buttonTrigger.click();
      await wrapper.vm.$nextTick();
      expect(wrapper.find('.popover').exists()).toBe(true);

      buttonTrigger.click();
      await wrapper.vm.$nextTick();
      expect(wrapper.find('.popover').exists()).toBe(false);

      buttonTrigger.click();
      await wrapper.vm.$nextTick();
      expect(wrapper.find('.popover').exists()).toBe(true);
    });
  });

  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`', async () => {
      wrapper = initWrapper({ trigger: 'hover' });
      await wrapper.vm.$nextTick();

      buttonTrigger.dispatchEvent(new Event('mouseenter'));
      await wrapper.vm.$nextTick();
      expect(wrapper.find('.popover').exists()).toBe(true);

      buttonTrigger.dispatchEvent(new Event('mouseleave'));
      await wrapper.vm.$nextTick();
      expect(wrapper.find('.popover').exists()).toBe(false);

      buttonTrigger.dispatchEvent(new Event('mouseenter'));
      await wrapper.vm.$nextTick();
      expect(wrapper.find('.popover').exists()).toBe(true);
    });
  });
});