gl_toggle_vuex_spec.js 2.78 KB
Newer Older
1 2 3
import Vuex from 'vuex';
import { GlToggle } from '@gitlab/ui';
import { mount, createLocalVue } from '@vue/test-utils';
4
import GlToggleVuex from '~/vue_shared/components/gl_toggle_vuex.vue';
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114

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

describe('GlToggleVuex component', () => {
  let wrapper;
  let store;

  const findButton = () => wrapper.find('button');

  const createWrapper = (props = {}) => {
    wrapper = mount(GlToggleVuex, {
      localVue,
      store,
      propsData: {
        stateProperty: 'toggleState',
        ...props,
      },
    });
  };

  beforeEach(() => {
    store = new Vuex.Store({
      state: {
        toggleState: false,
      },
      actions: {
        setToggleState: ({ commit }, { key, value }) => commit('setToggleState', { key, value }),
      },
      mutations: {
        setToggleState: (state, { key, value }) => {
          state[key] = value;
        },
      },
    });
    createWrapper();
  });

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

  it('renders gl-toggle', () => {
    expect(wrapper.find(GlToggle).exists()).toBe(true);
  });

  it('properly computes default value for setAction', () => {
    expect(wrapper.props('setAction')).toBe('setToggleState');
  });

  describe('without a store module', () => {
    it('calls action with new value when value changes', () => {
      jest.spyOn(store, 'dispatch');

      findButton().trigger('click');
      expect(store.dispatch).toHaveBeenCalledWith('setToggleState', {
        key: 'toggleState',
        value: true,
      });
    });

    it('updates store property when value changes', () => {
      findButton().trigger('click');
      expect(store.state.toggleState).toBe(true);
    });
  });

  describe('with a store module', () => {
    beforeEach(() => {
      store = new Vuex.Store({
        modules: {
          someModule: {
            namespaced: true,
            state: {
              toggleState: false,
            },
            actions: {
              setToggleState: ({ commit }, { key, value }) =>
                commit('setToggleState', { key, value }),
            },
            mutations: {
              setToggleState: (state, { key, value }) => {
                state[key] = value;
              },
            },
          },
        },
      });

      createWrapper({
        storeModule: 'someModule',
      });
    });

    it('calls action with new value when value changes', () => {
      jest.spyOn(store, 'dispatch');

      findButton().trigger('click');
      expect(store.dispatch).toHaveBeenCalledWith('someModule/setToggleState', {
        key: 'toggleState',
        value: true,
      });
    });

    it('updates store property when value changes', () => {
      findButton().trigger('click');
      expect(store.state.someModule.toggleState).toBe(true);
    });
  });
});