@mekari/mekari-ui-vue/src/components/Toast/trigger-test.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 MToast from './index.vue';
import { removeElement } from './helpers';
import MButton from '../Button';
import ToastPlugin from '../../plugins/Toast';
import { createLocalVue, shallowMount } from '@vue/test-utils';


jest.useFakeTimers();

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

const TemplateToast = {
  components: { MButton, MToast },
  data() {
    return {
      options: {
        title: '',
        description: 'Description',
        type: 'success',
        icon: 'default',
        position: 'top-right',
        duration: 3000,
        queue: true,
      },
    };
  },
  methods: {
    showToast(methodName = 'open', useParams = true) {
      if (useParams) {
        if (methodName === 'open') {
          this.$toastPlugin[methodName]({ ...this.options });
        } else {
          this.$toastPlugin[methodName]('Message');
        }
      } else {
        this.$toastPlugin[methodName]();
      }
    },
    clearToast() {
      this.$toastPlugin.clear();
    },
  },
  template: `
    <div>
      <m-button ref="showButton" @click="showToast">
        Button
      </m-button>
      <m-button ref="clearButton" @click="clearToast">
        Button
      </m-button>

      <m-button ref="successTrigger" @click="showToast('success')">
        Button
      </m-button>
      <m-button ref="errorTrigger" @click="showToast('error')">
        Button
      </m-button>
      <m-button ref="infoTrigger" @click="showToast('info')">
        Button
      </m-button>
      <m-button ref="warningTrigger" @click="showToast('warning')">
        Button
      </m-button>
      <m-button ref="defaultTrigger" @click="showToast('default')">
        Button
      </m-button>

      <m-button ref="emptyToastTrigger" @click="showToast('open', false)">
        Button
      </m-button>
    </div>
  `,
};

describe('Mekari UI Toast Component - Trigger Test', () => {
  let wrapper;

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

  afterEach(() => {
    wrapper.destroy();
    removeElement(document.querySelector('.v-toast'));
  });

  it('should open toast if trigger is clicked', async () => {
    expect(document.querySelector('.v-toast')).toBeFalsy();
    wrapper.findComponent({ ref: 'showButton' }).vm.$emit('click');

    await wrapper.vm.$nextTick();
    expect(document.querySelector('.v-toast')).toBeTruthy();
  });

  it('should open toast ony one when trigger is clicked and options singleToast set to true', async () => {
    wrapper.setData({
      options: {
        title: '',
        description: 'Description',
        type: 'success',
        icon: 'default',
        position: 'top-right',
        duration: 3000,
        singleToast: true,
        queue: true,
      },
    });
    jest.useFakeTimers();
    wrapper.findComponent({ ref: 'showButton' }).vm.$emit('click');
    wrapper.findComponent({ ref: 'showButton' }).vm.$emit('click');
    jest.advanceTimersByTime(250);
    await wrapper.vm.$nextTick();
    const alertEl = document.querySelector('.v-toast').querySelectorAll('.alert');
    expect(alertEl.length).toBe(1);
  });

  it('should have a custom wrapper class when props wrapperClass filled', async () => {
    wrapper.setData({
      options: {
        title: '',
        description: 'Description',
        type: 'success',
        icon: 'default',
        position: 'top-right',
        duration: 3000,
        singleToast: true,
        queue: true,
        wrapperClass: 'wrapper-class',
      },
    });
    jest.useFakeTimers();
    wrapper.findComponent({ ref: 'showButton' }).vm.$emit('click');
    wrapper.findComponent({ ref: 'showButton' }).vm.$emit('click');
    jest.advanceTimersByTime(250);
    await wrapper.vm.$nextTick();
    const alertEl = document.querySelector('.wrapper-class').querySelectorAll('.alert');
    expect(alertEl.length).toBe(1);
  });

  it('should open success toast if trigger is clicked', async () => {
    wrapper.findComponent({ ref: 'successTrigger' }).vm.$emit('click');

    await wrapper.vm.$nextTick();
    expect(document.querySelector('.v-toast').innerHTML).toBeTruthy();
    expect(document.querySelector('.v-toast').querySelector('.v-toast__item').classList.contains('alert-success')).toBe(true);
  });

  it('should open info toast if trigger is clicked', async () => {
    wrapper.findComponent({ ref: 'infoTrigger' }).vm.$emit('click');

    await wrapper.vm.$nextTick();
    expect(document.querySelector('.v-toast').innerHTML).toBeTruthy();
    expect(document.querySelector('.v-toast').querySelector('.v-toast__item').classList.contains('alert-info')).toBe(true);
  });

  it('should open warning toast if trigger is clicked', async () => {
    wrapper.findComponent({ ref: 'warningTrigger' }).vm.$emit('click');

    await wrapper.vm.$nextTick();
    expect(document.querySelector('.v-toast').innerHTML).toBeTruthy();
    expect(document.querySelector('.v-toast').querySelector('.v-toast__item').classList.contains('alert-warning')).toBe(true);
  });

  it('should open default toast if trigger is clicked', async () => {
    wrapper.findComponent({ ref: 'defaultTrigger' }).vm.$emit('click');

    await wrapper.vm.$nextTick();
    expect(document.querySelector('.v-toast').innerHTML).toBeTruthy();
    expect(document.querySelector('.v-toast').querySelector('.v-toast__item').classList.contains('alert-default')).toBe(true);
  });

  it('should open error toast if trigger is clicked', async () => {
    wrapper.findComponent({ ref: 'errorTrigger' }).vm.$emit('click');

    await wrapper.vm.$nextTick();
    expect(document.querySelector('.v-toast').innerHTML).toBeTruthy();
    expect(document.querySelector('.v-toast').querySelector('.v-toast__item').classList.contains('alert-error')).toBe(true);
  });

  it('should clear toast if trigger is clicked', async () => {
    wrapper.findComponent({ ref: 'showButton' }).vm.$emit('click');
    await wrapper.vm.$nextTick();

    wrapper.findComponent({ ref: 'clearButton' }).vm.$emit('click');
    jest.runAllTimers();
    await wrapper.vm.$nextTick();

    expect(document.querySelector('.v-toast').innerHTML).toBeFalsy();
  });


  it('should wait the old one to disappear to add another toast if queue is set to true', async () => {
    wrapper.findComponent({ ref: 'showButton' }).vm.$emit('click');
    await wrapper.vm.$nextTick();

    wrapper.findComponent({ ref: 'showButton' }).vm.$emit('click');
    await wrapper.vm.$nextTick();

    expect(document.querySelector('.v-toast').childElementCount).toBe(1);
  });
});