geo_replicable_spec.js 3.91 KB
Newer Older
Zack Cuddy's avatar
Zack Cuddy committed
1
import { GlPagination } from '@gitlab/ui';
2 3 4 5
import { createLocalVue, shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import GeoReplicable from 'ee/geo_replicable/components/geo_replicable.vue';
import GeoReplicableItem from 'ee/geo_replicable/components/geo_replicable_item.vue';
6 7 8 9 10 11 12 13
import initStore from 'ee/geo_replicable/store';

import * as types from 'ee/geo_replicable/store/mutation_types';
import {
  MOCK_BASIC_FETCH_DATA_MAP,
  MOCK_REPLICABLE_TYPE,
  MOCK_GRAPHQL_PAGINATION_DATA,
  MOCK_RESTFUL_PAGINATION_DATA,
14
  MOCK_GRAPHQL_REGISTRY,
15
} from '../mock_data';
Zack Cuddy's avatar
Zack Cuddy committed
16 17 18 19

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

20
describe('GeoReplicable', () => {
Zack Cuddy's avatar
Zack Cuddy committed
21
  let wrapper;
22
  let store;
Zack Cuddy's avatar
Zack Cuddy committed
23

24
  const createStore = options => {
25
    store = initStore({ replicableType: MOCK_REPLICABLE_TYPE, graphqlFieldName: null, ...options });
26
    jest.spyOn(store, 'dispatch').mockImplementation();
Zack Cuddy's avatar
Zack Cuddy committed
27 28 29
  };

  const createComponent = () => {
30
    wrapper = shallowMount(GeoReplicable, {
Zack Cuddy's avatar
Zack Cuddy committed
31
      localVue,
32
      store,
Zack Cuddy's avatar
Zack Cuddy committed
33 34 35 36 37
    });
  };

  afterEach(() => {
    wrapper.destroy();
38
    store = null;
Zack Cuddy's avatar
Zack Cuddy committed
39 40
  });

41 42 43
  const findGeoReplicableContainer = () => wrapper.find('section');
  const findGlPagination = () => findGeoReplicableContainer().find(GlPagination);
  const findGeoReplicableItem = () => findGeoReplicableContainer().findAll(GeoReplicableItem);
Zack Cuddy's avatar
Zack Cuddy committed
44 45 46

  describe('template', () => {
    beforeEach(() => {
47 48 49 50 51
      createStore();
      store.commit(types.RECEIVE_REPLICABLE_ITEMS_SUCCESS, {
        data: MOCK_BASIC_FETCH_DATA_MAP,
        pagination: MOCK_RESTFUL_PAGINATION_DATA,
      });
Zack Cuddy's avatar
Zack Cuddy committed
52 53 54
      createComponent();
    });

55 56
    it('renders the replicable container', () => {
      expect(findGeoReplicableContainer().exists()).toBe(true);
Zack Cuddy's avatar
Zack Cuddy committed
57 58
    });

59 60 61
    describe('GeoReplicableItem', () => {
      it('renders an instance for each replicableItem in the store', () => {
        const replicableItemWrappers = findGeoReplicableItem();
62
        const replicableItems = [...store.state.replicableItems];
Zack Cuddy's avatar
Zack Cuddy committed
63

64 65
        for (let i = 0; i < replicableItemWrappers.length; i += 1) {
          expect(replicableItemWrappers.at(i).props().projectId).toBe(replicableItems[i].projectId);
Zack Cuddy's avatar
Zack Cuddy committed
66 67 68 69
        }
      });
    });
  });
70
  describe('GlPagination', () => {
71
    describe('when graphqlFieldName is not defined', () => {
72
      it('renders always', () => {
73
        createStore();
Zack Cuddy's avatar
Zack Cuddy committed
74
        createComponent();
75
        expect(findGlPagination().exists()).toBe(true);
Zack Cuddy's avatar
Zack Cuddy committed
76
      });
77
    });
Zack Cuddy's avatar
Zack Cuddy committed
78

79
    describe('when graphqlFieldName is defined', () => {
80
      it('renders always', () => {
81
        createStore({ graphqlFieldName: MOCK_GRAPHQL_REGISTRY });
82 83
        createComponent();
        expect(findGlPagination().exists()).toBe(true);
Zack Cuddy's avatar
Zack Cuddy committed
84
      });
85 86
    });
  });
Zack Cuddy's avatar
Zack Cuddy committed
87

88
  describe.each`
89 90 91 92 93 94 95
    graphqlFieldName         | currentPage | newPage | action
    ${null}                  | ${1}        | ${2}    | ${undefined}
    ${null}                  | ${2}        | ${1}    | ${undefined}
    ${MOCK_GRAPHQL_REGISTRY} | ${1}        | ${2}    | ${'next'}
    ${MOCK_GRAPHQL_REGISTRY} | ${2}        | ${1}    | ${'prev'}
  `(`changing the page`, ({ graphqlFieldName, currentPage, newPage, action }) => {
    describe(`when graphqlFieldName is ${graphqlFieldName}`, () => {
96 97
      describe(`from ${currentPage} to ${newPage}`, () => {
        beforeEach(() => {
98
          createStore({ graphqlFieldName });
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
          store.commit(types.RECEIVE_REPLICABLE_ITEMS_SUCCESS, {
            data: MOCK_BASIC_FETCH_DATA_MAP,
            pagination: { ...MOCK_GRAPHQL_PAGINATION_DATA, page: currentPage },
          });
          createComponent();
          findGlPagination().vm.$emit(GlPagination.model.event, newPage);
        });

        it(`should call setPage with ${newPage}`, () => {
          expect(store.dispatch).toHaveBeenCalledWith('setPage', newPage);
        });

        it(`should call fetchReplicableItems with ${action}`, () => {
          expect(store.dispatch).toHaveBeenCalledWith('fetchReplicableItems', action);
        });
Zack Cuddy's avatar
Zack Cuddy committed
114
      });
Zack Cuddy's avatar
Zack Cuddy committed
115 116 117
    });
  });
});