diff options
author | Paul Gascou-Vaillancourt <paul.gascvail@gmail.com> | 2019-08-29 20:52:25 +0300 |
---|---|---|
committer | Paul Gascou-Vaillancourt <paul.gascvail@gmail.com> | 2019-09-04 19:17:56 +0300 |
commit | 929eb0568874cfe224ec59dbc4dda939f050dff4 (patch) | |
tree | af794d1db9962b3d9abf935edc8b2fb775976815 /spec/frontend | |
parent | ea4e9ada64091e186969d9656c74c7923652fcad (diff) |
Backport "Add toggle to hide dismissed vulnerabilities"
Backport of https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/15333
Diffstat (limited to 'spec/frontend')
-rw-r--r-- | spec/frontend/vue_shared/components/gl_toggle_vuex_spec.js | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/gl_toggle_vuex_spec.js b/spec/frontend/vue_shared/components/gl_toggle_vuex_spec.js new file mode 100644 index 00000000000..f076c45e56c --- /dev/null +++ b/spec/frontend/vue_shared/components/gl_toggle_vuex_spec.js @@ -0,0 +1,115 @@ +import Vuex from 'vuex'; +import GlToggleVuex from '~/vue_shared/components/gl_toggle_vuex.vue'; +import { GlToggle } from '@gitlab/ui'; +import { mount, createLocalVue } from '@vue/test-utils'; + +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, + }, + sync: false, + }); + }; + + 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); + }); + }); +}); |