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

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

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

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

  it('should set page to metas.current_page', async () => {
    wrapper = shallowMount(MPagination, {
      propsData: {
        metas: {
          current_page: 1,
          last_page: 100,
          per_page: 10,
          total: 1000,
        },
      },
    });
    wrapper.setProps({
      metas: {
        current_page: 2,
        last_page: 100,
        per_page: 10,
        total: 1000,
      },
    });
    await wrapper.vm.$nextTick();
    expect(wrapper.find('input').element.value).toBe('2');
  });

  it('should set page to 1 if metas.per_page changed', async () => {
    wrapper = shallowMount(MPagination, {
      propsData: {
        metas: {
          current_page: 2,
          last_page: 100,
          per_page: 10,
          total: 1000,
        },
      },
    });
    wrapper.setProps({
      metas: {
        current_page: 2,
        last_page: 100,
        per_page: 20,
        total: 1000,
      },
    });
    await wrapper.vm.$nextTick();
    expect(wrapper.find('input').element.value).toBe('1');
  });

  it('should emit update with new limit value if limit is chaged', async () => {
    wrapper = shallowMount(MPagination);
    wrapper.find('select').setValue(100);
    await wrapper.vm.$nextTick();
    expect(wrapper.emitted('update')[0][0]).toEqual({ page: 1, limit: 100 });
  });

  it('should emit update with new page value if input is changed', async () => {
    wrapper = shallowMount(MPagination, {
      propsData: {
        metas: {
          current_page: 1,
          last_page: 100,
          per_page: 10,
          total: 1000,
        },
      },
    });
    wrapper.find('input').setValue(10);
    wrapper.find('input').trigger('change');
    await wrapper.vm.$nextTick();
    expect(wrapper.emitted('update')[0][0]).toEqual({ page: '10', limit: 10 });
  });

  describe('will emit update with new page value depends on the button', () => {
    it('should emit with value of 1 when firstPageButton clicked', async () => {
      wrapper = shallowMount(MPagination);
      wrapper.findComponent({ ref: 'firstPageButton' }).trigger('click');
      await wrapper.vm.$nextTick();
      expect(wrapper.emitted('update')[0][0]).toEqual({ page: 1, limit: 10 });
    });
    it('should emit with value of page -= 1 when previousPageButton clicked', async () => {
      wrapper = shallowMount(MPagination,{
        propsData: {
          metas: {
            current_page: 2,
            last_page: 100,
            per_page: 10,
            total: 1000,
          },
        },
      });
      wrapper.findComponent({ ref: 'previousPageButton' }).trigger('click');
      await wrapper.vm.$nextTick();
      expect(wrapper.emitted('update')[0][0]).toEqual({ page: 1, limit: 10 });
    });
    it('should emit with value of page += 1 when previousPageButton clicked', async () => {
      wrapper = shallowMount(MPagination);
      wrapper.findComponent({ ref: 'nextPageButton' }).trigger('click');
      await wrapper.vm.$nextTick();
      expect(wrapper.emitted('update')[0][0]).toEqual({ page: 2, limit: 10 });
    });
    it('should emit with value of metas.last_page when lastPageButton clicked', async () => {
      wrapper = shallowMount(MPagination,{
        propsData: {
          metas: {
            current_page: 2,
            last_page: 100,
            per_page: 10,
            total: 1000,
          },
        },
      });
      wrapper.findComponent({ ref: 'lastPageButton' }).trigger('click');
      await wrapper.vm.$nextTick();
      expect(wrapper.emitted('update')[0][0]).toEqual({ page: 100, limit: 10 });
    });
  });

});