Epic Vuex app specs

ee/spec/javascripts/epic/components/epic_app_spec.js

+import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+
+import axios from '~/lib/utils/axios_utils';
+
+import EpicApp from 'ee/epic/components/epic_app.vue';
+import createStore from 'ee/epic/store';
+
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import issueShowData from 'spec/issue_show/mock_data';
+import { TEST_HOST } from 'spec/test_constants';
+import { mockEpicMeta, mockEpicData } from '../mock_data';
+
+describe('EpicAppComponent', () => {
+  let vm;
+  let mock;
+
+  beforeEach(done => {
+    mock = new MockAdapter(axios);
+    mock.onGet(`${TEST_HOST}/realtime_changes`).reply(200, issueShowData.initialRequest);
+
+    const Component = Vue.extend(EpicApp);
+    const store = createStore();
+    store.dispatch('setEpicMeta', mockEpicMeta);
+    store.dispatch('setEpicData', mockEpicData);
+
+    vm = mountComponentWithStore(Component, {
+      store,
+    });
+
+    setTimeout(done);
+  });
+
+  afterEach(() => {
+    mock.restore();
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders component container element with class `epic-page-container`', () => {
+      expect(vm.$el.classList.contains('epic-page-container')).toBe(true);
+    });
+  });
+});

ee/spec/javascripts/epic/components/epic_body_spec.js

+import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+
+import axios from '~/lib/utils/axios_utils';
+
+import EpicBody from 'ee/epic/components/epic_body.vue';
+import createStore from 'ee/epic/store';
+
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import issueShowData from 'spec/issue_show/mock_data';
+import { TEST_HOST } from 'spec/test_constants';
+import { mockEpicMeta, mockEpicData } from '../mock_data';
+
+describe('EpicBodyComponent', () => {
+  let vm;
+  let mock;
+
+  beforeEach(done => {
+    mock = new MockAdapter(axios);
+    mock.onGet(`${TEST_HOST}/realtime_changes`).reply(200, issueShowData.initialRequest);
+
+    const Component = Vue.extend(EpicBody);
+    const store = createStore();
+    store.dispatch('setEpicMeta', mockEpicMeta);
+    store.dispatch('setEpicData', mockEpicData);
+
+    vm = mountComponentWithStore(Component, {
+      store,
+    });
+
+    setTimeout(done);
+  });
+
+  afterEach(() => {
+    mock.restore();
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders component container element with classes `issuable-details` & `content-block`', () => {
+      expect(vm.$el.classList.contains('issuable-details')).toBe(true);
+      expect(vm.$el.classList.contains('content-block')).toBe(true);
+    });
+
+    it('renders epic body container element with class `detail-page-description`', () => {
+      expect(vm.$el.querySelector('.detail-page-description')).not.toBeNull();
+    });
+
+    it('renders epic body elements', () => {
+      expect(vm.$el.querySelector('.title-container')).not.toBeNull();
+      expect(vm.$el.querySelector('.description')).not.toBeNull();
+    });
+
+    it('renders related issues list elements', () => {
+      expect(vm.$el.querySelector('.related-issues-block')).not.toBeNull();
+      expect(vm.$el.querySelector('.js-related-issues-header-issue-count')).not.toBeNull();
+      expect(vm.$el.querySelector('.related-issues-token-body')).not.toBeNull();
+      expect(vm.$el.querySelector('.issuable-list')).not.toBeNull();
+    });
+  });
+});

ee/spec/javascripts/epic/components/epic_header_spec.js

+import Vue from 'vue';
+
+import EpicHeader from 'ee/epic/components/epic_header.vue';
+import createStore from 'ee/epic/store';
+import { statusType } from 'ee/epic/constants';
+
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mockEpicMeta, mockEpicData } from '../mock_data';
+
+describe('EpicBodyComponent', () => {
+  let vm;
+  let store;
+
+  beforeEach(done => {
+    const Component = Vue.extend(EpicHeader);
+
+    store = createStore();
+    store.dispatch('setEpicMeta', mockEpicMeta);
+    store.dispatch('setEpicData', mockEpicData);
+
+    vm = mountComponentWithStore(Component, {
+      store,
+    });
+
+    setTimeout(done);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('statusIcon', () => {
+      it('returns string `issue-open-m` when `isEpicOpen` is true', () => {
+        vm.$store.state.state = statusType.open;
+
+        expect(vm.statusIcon).toBe('issue-open-m');
+      });
+
+      it('returns string `mobile-issue-close` when `isEpicOpen` is false', () => {
+        vm.$store.state.state = statusType.close;
+
+        expect(vm.statusIcon).toBe('mobile-issue-close');
+      });
+    });
+
+    describe('statusText', () => {
+      it('returns string `Open` when `isEpicOpen` is true', () => {
+        vm.$store.state.state = statusType.open;
+
+        expect(vm.statusText).toBe('Open');
+      });
+
+      it('returns string `Closed` when `isEpicOpen` is false', () => {
+        vm.$store.state.state = statusType.close;
+
+        expect(vm.statusText).toBe('Closed');
+      });
+    });
+
+    describe('actionButtonClass', () => {
+      it('returns default button classes along with `btn-close` when `isEpicOpen` is true', () => {
+        vm.$store.state.state = statusType.open;
+
+        expect(vm.actionButtonClass).toBe(
+          'btn btn-grouped js-btn-epic-action qa-close-reopen-epic-button btn-close',
+        );
+      });
+
+      it('returns default button classes along with `btn-open` when `isEpicOpen` is false', () => {
+        vm.$store.state.state = statusType.close;
+
+        expect(vm.actionButtonClass).toBe(
+          'btn btn-grouped js-btn-epic-action qa-close-reopen-epic-button btn-open',
+        );
+      });
+    });
+
+    describe('actionButtonText', () => {
+      it('returns string `Close epic` when `isEpicOpen` is true', () => {
+        vm.$store.state.state = statusType.open;
+
+        expect(vm.actionButtonText).toBe('Close epic');
+      });
+
+      it('returns string `Reopen epic` when `isEpicOpen` is false', () => {
+        vm.$store.state.state = statusType.close;
+
+        expect(vm.actionButtonText).toBe('Reopen epic');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with class `detail-page-header`', () => {
+      expect(vm.$el.classList.contains('detail-page-header')).toBe(true);
+      expect(vm.$el.querySelector('.detail-page-header-body')).not.toBeNull();
+    });
+
+    it('renders epic status icon and text elements', () => {
+      const statusEl = vm.$el.querySelector('.issuable-status-box');
+
+      expect(statusEl).not.toBeNull();
+      expect(
+        statusEl.querySelector('svg.ic-issue-open-m use').getAttribute('xlink:href'),
+      ).toContain('issue-open-m');
+
+      expect(statusEl.querySelector('span').innerText.trim()).toBe('Open');
+    });
+
+    it('renders epic author details element', () => {
+      const metaEl = vm.$el.querySelector('.issuable-meta');
+
+      expect(metaEl).not.toBeNull();
+      expect(metaEl.querySelector('strong a.user-avatar-link')).not.toBeNull();
+    });
+
+    it('renders action buttons element', () => {
+      const actionsEl = vm.$el.querySelector('.js-issuable-actions');
+
+      expect(actionsEl).not.toBeNull();
+      expect(actionsEl.querySelector('.js-btn-epic-action')).not.toBeNull();
+      expect(actionsEl.querySelector('.js-loading-button-label').innerText.trim()).toBe(
+        'Close epic',
+      );
+    });
+  });
+});

ee/spec/javascripts/epic/mock_data.js

+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+import { TEST_HOST } from 'spec/test_constants';
+
+const metaFixture = getJSONFixture('epic/mock_meta.json');
+const meta = JSON.parse(metaFixture.meta);
+const initial = JSON.parse(metaFixture.initial);
+
+export const mockEpicMeta = convertObjectPropsToCamelCase(meta, {
+  deep: true,
+});
+
+export const mockEpicData = convertObjectPropsToCamelCase(
+  Object.assign({}, getJSONFixture('epic/mock_data.json'), initial, { endpoint: TEST_HOST }),
+  { deep: true },
+);

ee/spec/javascripts/epic/store/actions_spec.js

+import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+
+import defaultState from 'ee/epic/store/state';
+import * as actions from 'ee/epic/store/actions';
+import epicUtils from 'ee/epic/utils/epic_utils';
+import { statusType } from 'ee/epic/constants';
+
+import axios from '~/lib/utils/axios_utils';
+import testAction from 'spec/helpers/vuex_action_helper';
+
+import { mockEpicMeta, mockEpicData } from '../mock_data';
+
+describe('Epic Store Actions', () => {
+  let state;
+
+  beforeEach(() => {
+    state = Object.assign({}, defaultState);
+  });
+
+  describe('setEpicMeta', () => {
+    it('should set received Epic meta', done => {
+      testAction(
+        actions.setEpicMeta,
+        mockEpicMeta,
+        {},
+        [{ type: 'SET_EPIC_META', payload: mockEpicMeta }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('setEpicData', () => {
+    it('should set received Epic data', done => {
+      testAction(
+        actions.setEpicData,
+        mockEpicData,
+        {},
+        [{ type: 'SET_EPIC_DATA', payload: mockEpicData }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestEpicStatusChange', () => {
+    it('should set status change flag', done => {
+      testAction(
+        actions.requestEpicStatusChange,
+        {},
+        state,
+        [{ type: 'REQUEST_EPIC_STATUS_CHANGE' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestEpicStatusChangeSuccess', () => {
+    it('should set epic state type', done => {
+      testAction(
+        actions.requestEpicStatusChangeSuccess,
+        { state: statusType.close },
+        state,
+        [{ type: 'REQUEST_EPIC_STATUS_CHANGE_SUCCESS', payload: { state: statusType.close } }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestEpicStatusChangeFailure', () => {
+    beforeEach(() => {
+      setFixtures('<div class="flash-container"></div>');
+    });
+
+    it('should set status change flag', done => {
+      testAction(
+        actions.requestEpicStatusChangeFailure,
+        {},
+        state,
+        [{ type: 'REQUEST_EPIC_STATUS_CHANGE_FAILURE' }],
+        [],
+        done,
+      );
+    });
+
+    it('should show flash error', done => {
+      actions.requestEpicStatusChangeFailure({ commit: () => {} });
+
+      Vue.nextTick()
+        .then(() => {
+          expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
+            'Unable to update this epic at this time.',
+          );
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('triggerIssuableEvent', () => {
+    it('Calls `triggerDocumentEvent` with events `issuable_vue_app:change`, `issuable:change` and passes `isEpicOpen` as param', () => {
+      spyOn(epicUtils, 'triggerDocumentEvent').and.returnValue(false);
+
+      const data = { isEpicOpen: true };
+      actions.triggerIssuableEvent({}, data);
+
+      expect(epicUtils.triggerDocumentEvent).toHaveBeenCalledWith(
+        'issuable_vue_app:change',
+        data.isEpicOpen,
+      );
+
+      expect(epicUtils.triggerDocumentEvent).toHaveBeenCalledWith(
+        'issuable:change',
+        data.isEpicOpen,
+      );
+    });
+  });
+
+  describe('toggleEpicStatus', () => {
+    let mock;
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    describe('success', () => {
+      it('dispatches requestEpicStatusChange and requestEpicStatusChangeSuccess when request is complete', done => {
+        mock.onPut(/(.*)/).replyOnce(200, {
+          state: statusType.close,
+        });
+
+        testAction(
+          actions.toggleEpicStatus,
+          null,
+          state,
+          [],
+          [
+            {
+              type: 'requestEpicStatusChange',
+            },
+            {
+              type: 'requestEpicStatusChangeSuccess',
+              payload: { state: statusType.close },
+            },
+            {
+              type: 'triggerIssuableEvent',
+              payload: { isEpicOpen: true },
+            },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('failure', () => {
+      it('dispatches requestEpicStatusChange and requestEpicStatusChangeFailure when request fails', done => {
+        mock.onPut(/(.*)/).replyOnce(500, {});
+
+        testAction(
+          actions.toggleEpicStatus,
+          null,
+          state,
+          [],
+          [
+            {
+              type: 'requestEpicStatusChange',
+            },
+            {
+              type: 'requestEpicStatusChangeFailure',
+            },
+            {
+              type: 'triggerIssuableEvent',
+              payload: { isEpicOpen: true },
+            },
+          ],
+          done,
+        );
+      });
+    });
+  });
+});

ee/spec/javascripts/epic/store/getters_spec.js

+import * as getters from 'ee/epic/store/getters';
+import { statusType } from 'ee/epic/constants';
+
+describe('Epic Store Getters', () => {
+  describe('isEpicOpen', () => {
+    it('returns `true` when Epic `state` is `opened`', () => {
+      const epicState = {
+        state: statusType.open,
+      };
+
+      expect(getters.isEpicOpen(epicState)).toBe(true);
+    });
+
+    it('returns `false` when Epic `state` is `closed`', () => {
+      const epicState = {
+        state: statusType.closed,
+      };
+
+      expect(getters.isEpicOpen(epicState)).toBe(false);
+    });
+  });
+});

ee/spec/javascripts/epic/store/mutationts_spec.js

+import mutations from 'ee/epic/store/mutations';
+import * as types from 'ee/epic/store/mutation_types';
+
+import { mockEpicMeta, mockEpicData } from '../mock_data';
+
+describe('Epic Store Mutations', () => {
+  describe('SET_EPIC_META', () => {
+    it('Should add Epic meta to state', () => {
+      const state = {};
+      mutations[types.SET_EPIC_META](state, mockEpicMeta);
+
+      expect(state).toEqual(mockEpicMeta);
+    });
+  });
+
+  describe('SET_EPIC_DATA', () => {
+    it('Should add Epic data to state', () => {
+      const state = {};
+      mutations[types.SET_EPIC_DATA](state, mockEpicData);
+
+      expect(state).toEqual(mockEpicData);
+    });
+  });
+
+  describe('REQUEST_EPIC_STATUS_CHANGE', () => {
+    it('Should set `epicStatusChangeInProgress` flag on state as `true`', () => {
+      const state = {};
+      mutations[types.REQUEST_EPIC_STATUS_CHANGE](state);
+
+      expect(state.epicStatusChangeInProgress).toBe(true);
+    });
+  });
+
+  describe('REQUEST_EPIC_STATUS_CHANGE_SUCCESS', () => {
+    it('Should set `epicStatusChangeInProgress` flag on state as `false` and update Epic `state`', () => {
+      const state = {
+        state: 'opened',
+      };
+      mutations[types.REQUEST_EPIC_STATUS_CHANGE_SUCCESS](state, { state: 'closed' });
+
+      expect(state.epicStatusChangeInProgress).toBe(false);
+      expect(state.state).toBe('closed');
+    });
+  });
+
+  describe('REQUEST_EPIC_STATUS_CHANGE_FAILURE', () => {
+    it('Should set `epicStatusChangeInProgress` flag on state as `false`', () => {
+      const state = {};
+      mutations[types.REQUEST_EPIC_STATUS_CHANGE_FAILURE](state);
+
+      expect(state.epicStatusChangeInProgress).toBe(false);
+    });
+  });
+});