Merge branch 'ee1979-gl-modal-vuex' into 'master'

Create shared gl-modal-vuex component and module

See merge request gitlab-org/gitlab-ce!24140

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,
+      });
+    });
+  });
+});