Makes close/reopen issue request to inside the vue app

3 files changed, 85 insertions, 0 deletions

diff --git a/spec/javascripts/notes/helpers.js b/spec/javascripts/notes/helpers.js
new file mode 100644
index 00000000000..a7663710a56
--- /dev/null
+++ b/spec/javascripts/notes/helpers.js
@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/prefer-default-export
+export const resetStore = (store) => {
+  store.replaceState({
+    notes: [],
+    targetNoteHash: null,
+    lastFetchedAt: null,
+
+    notesData: {},
+    userData: {},
+    noteableData: {},
+  });
+};
diff --git a/spec/javascripts/notes/mock_data.js b/spec/javascripts/notes/mock_data.js
index f0c800c759d..ccf4bd070c2 100644
--- a/spec/javascripts/notes/mock_data.js
+++ b/spec/javascripts/notes/mock_data.js
@@ -7,6 +7,8 @@ export const notesDataMock = {
   notesPath: '/gitlab-org/gitlab-ce/noteable/issue/98/notes',
   quickActionsDocsPath: '/help/user/project/quick_actions',
   registerPath: '/users/sign_in?redirect_to_referer=yes#register-pane',
+  closeIssuePath: '/twitter/flight/issues/9.json?issue%5Bstate_event%5D=close',
+  reopenIssuePath: '/twitter/flight/issues/9.json?issue%5Bstate_event%5D=reopen',
 };
 
 export const userDataMock = {
diff --git a/spec/javascripts/notes/stores/actions_spec.js b/spec/javascripts/notes/stores/actions_spec.js
index e092320f9a3..6508f4772d2 100644
--- a/spec/javascripts/notes/stores/actions_spec.js
+++ b/spec/javascripts/notes/stores/actions_spec.js
@@ -1,8 +1,16 @@
+import Vue from 'vue';
+import _ from 'underscore';
 import * as actions from '~/notes/stores/actions';
+import store from '~/notes/stores';
 import testAction from '../../helpers/vuex_action_helper';
+import { resetStore } from '../helpers';
 import { discussionMock, notesDataMock, userDataMock, noteableDataMock, individualNote } from '../mock_data';
 
 describe('Actions Notes Store', () => {
+  afterEach(() => {
+    resetStore(store);
+  });
+
   describe('setNotesData', () => {
     it('should set received notes data', (done) => {
       testAction(actions.setNotesData, null, { notesData: {} }, [
@@ -58,4 +66,67 @@ describe('Actions Notes Store', () => {
       ], done);
     });
   });
+
+  describe('async methods', () => {
+    const interceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify({}), {
+        status: 200,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(interceptor);
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+    });
+
+    describe('closeIssue', () => {
+      it('sets state as closed', (done) => {
+        store.dispatch('closeIssue', { notesData: { closeIssuePath: '' } })
+          .then(() => {
+            expect(store.state.noteableData.state).toEqual('closed');
+            done();
+          })
+          .catch(done.fail);
+      });
+    });
+
+    describe('reopenIssue', () => {
+      it('sets state as reopened', (done) => {
+        store.dispatch('reopenIssue', { notesData: { reopenIssuePath: '' } })
+          .then(() => {
+            expect(store.state.noteableData.state).toEqual('reopened');
+            done();
+          })
+          .catch(done.fail);
+      });
+    });
+  });
+
+  describe('emitStateChangedEvent', () => {
+    it('emits an event on the document', () => {
+      document.addEventListener('issuable_vue_app:change', (event) => {
+        expect(event.detail.data).toEqual({ id: '1', state: 'closed' });
+        expect(event.detail.isClosed).toEqual(true);
+      });
+
+      store.dispatch('emitStateChangedEvent', { id: '1', state: 'closed' });
+    });
+  });
+
+  describe('toggleIssueLocalState', () => {
+    it('sets issue state as closed', (done) => {
+      testAction(actions.toggleIssueLocalState, 'closed', {}, [
+        { type: 'CLOSE_ISSUE', payload: 'closed' },
+      ], done);
+    });
+
+    it('sets issue state as reopened', (done) => {
+      testAction(actions.toggleIssueLocalState, 'reopened', {}, [
+        { type: 'REOPEN_ISSUE', payload: 'reopened' },
+      ], done);
+    });
+  });
 });