Try to clean up legit Vue error that was patched over

See https://gitlab.com/gitlab-org/gitlab-ce/issues/37619#note_50422859

3 files changed, 92 insertions, 25 deletions

diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 8c81c5d6df3..85231b2314c 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -122,9 +122,7 @@
         // we need to do this to prevent noteForm inconsistent content warning
         // this is something we intentionally do so we need to recover the content
         this.note.note = noteText;
-        if (this.$refs.noteBody) {
-          this.$refs.noteBody.$refs.noteForm.note = noteText; // TODO: This could be better
-        }
+        this.$refs.noteBody.$refs.noteForm.note = noteText;
       },
     },
     created() {
diff --git a/spec/javascripts/notes/components/issue_note_app_spec.js b/spec/javascripts/notes/components/issue_note_app_spec.js
index 8e43037f356..b9c3cbe6fba 100644
--- a/spec/javascripts/notes/components/issue_note_app_spec.js
+++ b/spec/javascripts/notes/components/issue_note_app_spec.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import issueNotesApp from '~/notes/components/issue_notes_app.vue';
 import service from '~/notes/services/notes_service';
 import * as mockData from '../mock_data';
+import getSetTimeoutPromise from '../../helpers/set_timeout_promise_helper';
 
 describe('issue_note_app', () => {
   let mountComponent;
@@ -13,10 +14,20 @@ describe('issue_note_app', () => {
     }));
   };
 
-  const discussionNoteInterceptor = (request, next) => {
-    next(request.respondWith(JSON.stringify(mockData.discussionNoteServerResponse), {
-      status: 200,
-    }));
+  const noteInterceptor = (request, next) => {
+    if (request.url === '/gitlab-org/gitlab-ce/issues/26/discussions.json') {
+      next(request.respondWith(JSON.stringify(mockData.discussionNoteServerResponse), {
+        status: 200,
+      }));
+    } else if (request.url === '/gitlab-org/gitlab-ce/noteable/issue/98/notes') {
+      next(request.respondWith(JSON.stringify(mockData.notesPollingResponse), {
+        status: 200,
+      }));
+    } else if (request.method === 'PUT' && request.url === '/gitlab-org/gitlab-ce/notes/1471') {
+      next(request.respondWith(JSON.stringify(mockData.updatedNoteResponse), {
+        status: 200,
+      }));
+    }
   };
 
   beforeEach(() => {
@@ -129,13 +140,13 @@ describe('issue_note_app', () => {
   describe('update note', () => {
     describe('individual note', () => {
       beforeEach(() => {
-        Vue.http.interceptors.push(individualNoteInterceptor);
-        spyOn(service, 'updateNote').and.callFake(() => Promise.resolve());
+        Vue.http.interceptors.push(noteInterceptor);
+        spyOn(service, 'updateNote').and.callThrough();
         vm = mountComponent();
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, individualNoteInterceptor);
+        Vue.http.interceptors = _.without(Vue.http.interceptors, noteInterceptor);
       });
 
       it('renders edit form', (done) => {
@@ -149,28 +160,33 @@ describe('issue_note_app', () => {
       });
 
       it('calls the service to update the note', (done) => {
-        setTimeout(() => {
-          vm.$el.querySelector('.js-note-edit').click();
-          Vue.nextTick(() => {
+        getSetTimeoutPromise()
+          .then(() => {
+            vm.$el.querySelector('.js-note-edit').click();
+          })
+          .then(Vue.nextTick)
+          .then(() => {
             vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
             vm.$el.querySelector('.js-vue-issue-save').click();
 
             expect(service.updateNote).toHaveBeenCalled();
-            done();
-          });
-        }, 0);
+          })
+          // Wait for the requests to finish before destroying
+          .then(Vue.nextTick)
+          .then(done)
+          .catch(done.fail);
       });
     });
 
     describe('dicussion note', () => {
       beforeEach(() => {
-        Vue.http.interceptors.push(discussionNoteInterceptor);
-        spyOn(service, 'updateNote').and.callFake(() => Promise.resolve());
+        Vue.http.interceptors.push(noteInterceptor);
+        spyOn(service, 'updateNote').and.callThrough();
         vm = mountComponent();
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, discussionNoteInterceptor);
+        Vue.http.interceptors = _.without(Vue.http.interceptors, noteInterceptor);
       });
 
       it('renders edit form', (done) => {
@@ -184,16 +200,21 @@ describe('issue_note_app', () => {
       });
 
       it('updates the note and resets the edit form', (done) => {
-        setTimeout(() => {
-          vm.$el.querySelector('.js-note-edit').click();
-          Vue.nextTick(() => {
+        getSetTimeoutPromise()
+          .then(() => {
+            vm.$el.querySelector('.js-note-edit').click();
+          })
+          .then(Vue.nextTick)
+          .then(() => {
             vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
             vm.$el.querySelector('.js-vue-issue-save').click();
 
             expect(service.updateNote).toHaveBeenCalled();
-            done();
-          });
-        }, 0);
+          })
+          // Wait for the requests to finish before destroying
+          .then(Vue.nextTick)
+          .then(done)
+          .catch(done.fail);
       });
     });
   });
diff --git a/spec/javascripts/notes/mock_data.js b/spec/javascripts/notes/mock_data.js
index 42497de3c55..165c514cbb8 100644
--- a/spec/javascripts/notes/mock_data.js
+++ b/spec/javascripts/notes/mock_data.js
@@ -447,3 +447,51 @@ export const discussionNoteServerResponse = [{
   }],
   "individual_note": false
 }];
+
+export const notesPollingResponse = {
+  last_fetched_at: 1512900838,
+  notes: [],
+};
+
+export const updatedNoteResponse = {
+  "commands_changes": null,
+  "valid": true,
+  "id": 1471,
+  "attachment": null,
+  "author": {
+    "id": 1,
+    "name": "Root",
+    "username": "root",
+    "state": "active",
+    "avatar_url": null,
+    "path": "/root"
+  },
+  "created_at": "2017-08-08T16:53:00.666Z",
+  "updated_at": "2017-12-10T11:03:21.876Z",
+  "system": false,
+  "noteable_id": 124,
+  "noteable_type": "Issue",
+  "noteable_iid": 29,
+  "type": "DiscussionNote",
+  "human_access": "Owner",
+  "note": "Adding a comment",
+  "note_html": "\u003cp dir=\"auto\"\u003eAdding a comment\u003c/p\u003e",
+  "last_edited_at": "2017-12-10T11:03:21.876Z",
+  "last_edited_by": {
+    "id": 1,
+    "name": 'Root',
+    "username": 'root',
+    "state": 'active',
+    "avatar_url": null,
+    "path": '/root',
+  },
+  "current_user": {
+    "can_edit": true
+  },
+  "discussion_id": "a3ed36e29b1957efb3b68c53e2d7a2b24b1df052",
+  "emoji_awardable": true,
+  "award_emoji": [],
+  "toggle_award_path": "/gitlab-org/gitlab-ce/notes/1471/toggle_award_emoji",
+  "report_abuse_path": "/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F29%23note_1471\u0026user_id=1",
+  "path": "/gitlab-org/gitlab-ce/notes/1471"
+};