diff options
author | Kushal Pandya <kushalspandya@gmail.com> | 2019-01-04 15:10:21 +0300 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-01-04 15:10:21 +0300 |
commit | 833276cd2a12eafef555f131dbcf0f64fa687d09 (patch) | |
tree | d7a945b176e5f236df612e3115f304be7ec57985 /spec | |
parent | 6d99475ad206521e69c7cea6c8e868ce7d568871 (diff) | |
parent | 708df374f598dd56901e8334dc94a98d423f6ee1 (diff) |
Merge branch 'ee1979-gl-modal-vuex' into 'master'
Create shared gl-modal-vuex component and module
See merge request gitlab-org/gitlab-ce!24140
Diffstat (limited to 'spec')
3 files changed, 231 insertions, 0 deletions
diff --git a/spec/javascripts/vue_shared/components/gl_modal_vuex_spec.js b/spec/javascripts/vue_shared/components/gl_modal_vuex_spec.js new file mode 100644 index 00000000000..eb78d37db3e --- /dev/null +++ b/spec/javascripts/vue_shared/components/gl_modal_vuex_spec.js @@ -0,0 +1,151 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import { GlModal } from '@gitlab/ui'; +import GlModalVuex from '~/vue_shared/components/gl_modal_vuex.vue'; +import createState from '~/vuex_shared/modules/modal/state'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +const TEST_SLOT = 'Lorem ipsum modal dolar sit.'; +const TEST_MODAL_ID = 'my-modal-id'; +const TEST_MODULE = 'myModal'; + +describe('GlModalVuex', () => { + let wrapper; + let state; + let actions; + + const factory = (options = {}) => { + const store = new Vuex.Store({ + modules: { + [TEST_MODULE]: { + namespaced: true, + state, + actions, + }, + }, + }); + + const propsData = { + modalId: TEST_MODAL_ID, + modalModule: TEST_MODULE, + ...options.propsData, + }; + + wrapper = shallowMount(localVue.extend(GlModalVuex), { + ...options, + localVue, + store, + propsData, + }); + }; + + beforeEach(() => { + state = createState(); + + actions = { + show: jasmine.createSpy('show'), + hide: jasmine.createSpy('hide'), + }; + }); + + it('renders gl-modal', () => { + factory({ + slots: { + default: `<div>${TEST_SLOT}</div>`, + }, + }); + const glModal = wrapper.find(GlModal); + + expect(glModal.props('modalId')).toBe(TEST_MODAL_ID); + expect(glModal.text()).toContain(TEST_SLOT); + }); + + it('passes props through to gl-modal', () => { + const title = 'Test Title'; + const okVariant = 'success'; + + factory({ + propsData: { + title, + okTitle: title, + okVariant, + }, + }); + const glModal = wrapper.find(GlModal); + + expect(glModal.attributes('title')).toEqual(title); + expect(glModal.attributes('oktitle')).toEqual(title); + expect(glModal.attributes('okvariant')).toEqual(okVariant); + }); + + it('passes listeners through to gl-modal', () => { + const ok = jasmine.createSpy('ok'); + + factory({ + listeners: { ok }, + }); + + const glModal = wrapper.find(GlModal); + glModal.vm.$emit('ok'); + + expect(ok).toHaveBeenCalledTimes(1); + }); + + it('calls vuex action on show', () => { + expect(actions.show).not.toHaveBeenCalled(); + + factory(); + + const glModal = wrapper.find(GlModal); + glModal.vm.$emit('shown'); + + expect(actions.show).toHaveBeenCalledTimes(1); + }); + + it('calls vuex action on hide', () => { + expect(actions.hide).not.toHaveBeenCalled(); + + factory(); + + const glModal = wrapper.find(GlModal); + glModal.vm.$emit('hidden'); + + expect(actions.hide).toHaveBeenCalledTimes(1); + }); + + it('calls bootstrap show when isVisible changes', done => { + state.isVisible = false; + + factory(); + const rootEmit = spyOn(wrapper.vm.$root, '$emit'); + + state.isVisible = true; + + localVue + .nextTick() + .then(() => { + expect(rootEmit).toHaveBeenCalledWith('bv::show::modal', TEST_MODAL_ID); + }) + .then(done) + .catch(done.fail); + }); + + it('calls bootstrap hide when isVisible changes', done => { + state.isVisible = true; + + factory(); + const rootEmit = spyOn(wrapper.vm.$root, '$emit'); + + state.isVisible = false; + + localVue + .nextTick() + .then(() => { + expect(rootEmit).toHaveBeenCalledWith('bv::hide::modal', TEST_MODAL_ID); + }) + .then(done) + .catch(done.fail); + }); +}); diff --git a/spec/javascripts/vuex_shared/modules/modal/actions_spec.js b/spec/javascripts/vuex_shared/modules/modal/actions_spec.js new file mode 100644 index 00000000000..04f64663ae4 --- /dev/null +++ b/spec/javascripts/vuex_shared/modules/modal/actions_spec.js @@ -0,0 +1,31 @@ +import * as types from '~/vuex_shared/modules/modal/mutation_types'; +import * as actions from '~/vuex_shared/modules/modal/actions'; +import testAction from 'spec/helpers/vuex_action_helper'; + +describe('Vuex ModalModule actions', () => { + describe('open', () => { + it('works', done => { + const data = { id: 7 }; + + testAction(actions.open, data, {}, [{ type: types.OPEN, payload: data }], [], done); + }); + }); + + describe('close', () => { + it('works', done => { + testAction(actions.close, null, {}, [{ type: types.CLOSE }], [], done); + }); + }); + + describe('show', () => { + it('works', done => { + testAction(actions.show, null, {}, [{ type: types.SHOW }], [], done); + }); + }); + + describe('hide', () => { + it('works', done => { + testAction(actions.hide, null, {}, [{ type: types.HIDE }], [], done); + }); + }); +}); diff --git a/spec/javascripts/vuex_shared/modules/modal/mutations_spec.js b/spec/javascripts/vuex_shared/modules/modal/mutations_spec.js new file mode 100644 index 00000000000..d07f8ba1e65 --- /dev/null +++ b/spec/javascripts/vuex_shared/modules/modal/mutations_spec.js @@ -0,0 +1,49 @@ +import mutations from '~/vuex_shared/modules/modal/mutations'; +import * as types from '~/vuex_shared/modules/modal/mutation_types'; + +describe('Vuex ModalModule mutations', () => { + describe(types.SHOW, () => { + it('sets isVisible to true', () => { + const state = { + isVisible: false, + }; + + mutations[types.SHOW](state); + + expect(state).toEqual({ + isVisible: true, + }); + }); + }); + + describe(types.HIDE, () => { + it('sets isVisible to false', () => { + const state = { + isVisible: true, + }; + + mutations[types.HIDE](state); + + expect(state).toEqual({ + isVisible: false, + }); + }); + }); + + describe(types.OPEN, () => { + it('sets data and sets isVisible to true', () => { + const data = { id: 7 }; + const state = { + isVisible: false, + data: null, + }; + + mutations[types.OPEN](state, data); + + expect(state).toEqual({ + isVisible: true, + data, + }); + }); + }); +}); |