fixed notes_spec.js

spec/javascripts/notes_spec.js

 /* eslint-disable space-before-function-paren, no-unused-expressions, no-var, object-shorthand, comma-dangle, max-len */
 import _ from 'underscore';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import 'autosize';
 import '~/gl_form';
 import '~/lib/utils/text_utility';
 import '~/render_gfm';
 import Notes from '~/notes';
+import timeoutPromise from './helpers/set_timeout_promise_helper';
 
 (function() {
   window.gon || (window.gon = {});
@@ -119,6 +122,7 @@ import Notes from '~/notes';
       let noteEntity;
       let $form;
       let $notesContainer;
+      let mock;
 
       beforeEach(() => {
         this.notes = new Notes('', []);
@@ -136,24 +140,28 @@ import Notes from '~/notes';
         $form = $('form.js-main-target-form');
         $notesContainer = $('ul.main-notes-list');
         $form.find('textarea.js-note-text').val(sampleComment);
+
+        mock = new MockAdapter(axios);
+        mock.onPost(/(.*)\/notes$/).reply(200, noteEntity);
       });
 
-      it('updates note and resets edit form', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('updates note and resets edit form', (done) => {
         spyOn(this.notes, 'revertNoteEditForm');
         spyOn(this.notes, 'setupNewNote');
 
         $('.js-comment-button').click();
-        deferred.resolve(noteEntity);
 
-        const $targetNote = $notesContainer.find(`#note_${noteEntity.id}`);
-        const updatedNote = Object.assign({}, noteEntity);
-        updatedNote.note = 'bar';
-        this.notes.updateNote(updatedNote, $targetNote);
+        setTimeout(() => {
+          const $targetNote = $notesContainer.find(`#note_${noteEntity.id}`);
+          const updatedNote = Object.assign({}, noteEntity);
+          updatedNote.note = 'bar';
+          this.notes.updateNote(updatedNote, $targetNote);
+
+          expect(this.notes.revertNoteEditForm).toHaveBeenCalledWith($targetNote);
+          expect(this.notes.setupNewNote).toHaveBeenCalled();
 
-        expect(this.notes.revertNoteEditForm).toHaveBeenCalledWith($targetNote);
-        expect(this.notes.setupNewNote).toHaveBeenCalled();
+          done();
+        });
       });
     });
 
@@ -479,8 +487,19 @@ import Notes from '~/notes';
       };
       let $form;
       let $notesContainer;
+      let mock;
+
+      function mockNotesPost() {
+        mock.onPost(/(.*)\/notes$/).reply(200, note);
+      }
+
+      function mockNotesPostError() {
+        mock.onPost(/(.*)\/notes$/).networkError();
+      }
 
       beforeEach(() => {
+        mock = new MockAdapter(axios);
+
         this.notes = new Notes('', []);
         window.gon.current_username = 'root';
         window.gon.current_user_fullname = 'Administrator';
@@ -489,63 +508,92 @@ import Notes from '~/notes';
         $form.find('textarea.js-note-text').val(sampleComment);
       });
 
+      afterEach(() => {
+        mock.restore();
+      });
+
       it('should show placeholder note while new comment is being posted', () => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
         expect($notesContainer.find('.note.being-posted').length > 0).toEqual(true);
       });
 
-      it('should remove placeholder note when new comment is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should remove placeholder note when new comment is done posting', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        expect($notesContainer.find('.note.being-posted').length).toEqual(0);
+        setTimeout(() => {
+          expect($notesContainer.find('.note.being-posted').length).toEqual(0);
+
+          done();
+        });
       });
 
-      it('should show actual note element when new comment is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should show actual note element when new comment is done posting', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        expect($notesContainer.find(`#note_${note.id}`).length > 0).toEqual(true);
+        setTimeout(() => {
+          expect($notesContainer.find(`#note_${note.id}`).length > 0).toEqual(true);
+
+          done();
+        });
       });
 
-      it('should reset Form when new comment is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should reset Form when new comment is done posting', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        expect($form.find('textarea.js-note-text').val()).toEqual('');
+        setTimeout(() => {
+          expect($form.find('textarea.js-note-text').val()).toEqual('');
+
+          done();
+        });
       });
 
-      it('should show flash error message when new comment failed to be posted', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should show flash error message when new comment failed to be posted', (done) => {
+        mockNotesPostError();
+
         $('.js-comment-button').click();
 
-        deferred.reject();
-        expect($notesContainer.parent().find('.flash-container .flash-text').is(':visible')).toEqual(true);
+        setTimeout(() => {
+          expect($notesContainer.parent().find('.flash-container .flash-text').is(':visible')).toEqual(true);
+
+          done();
+        });
       });
 
-      it('should show flash error message when comment failed to be updated', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should show flash error message when comment failed to be updated', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        const $noteEl = $notesContainer.find(`#note_${note.id}`);
-        $noteEl.find('.js-note-edit').click();
-        $noteEl.find('textarea.js-note-text').val(updatedComment);
-        $noteEl.find('.js-comment-save-button').click();
+        timeoutPromise()
+          .then(() => {
+            const $noteEl = $notesContainer.find(`#note_${note.id}`);
+            $noteEl.find('.js-note-edit').click();
+            $noteEl.find('textarea.js-note-text').val(updatedComment);
 
-        deferred.reject();
-        const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`);
-        expect($updatedNoteEl.hasClass('.being-posted')).toEqual(false); // Remove being-posted visuals
-        expect($updatedNoteEl.find('.note-text').text().trim()).toEqual(sampleComment); // See if comment reverted back to original
-        expect($('.flash-container').is(':visible')).toEqual(true); // Flash error message shown
+            mock.restore();
+
+            mockNotesPostError();
+
+            $noteEl.find('.js-comment-save-button').click();
+          })
+          .then(timeoutPromise)
+          .then(() => {
+            const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`);
+            expect($updatedNoteEl.hasClass('.being-posted')).toEqual(false); // Remove being-posted visuals
+            expect($updatedNoteEl.find('.note-text').text().trim()).toEqual(sampleComment); // See if comment reverted back to original
+            expect($('.flash-container').is(':visible')).toEqual(true); // Flash error message shown
+
+            done();
+          })
+          .catch(done.fail);
       });
     });
 
@@ -563,8 +611,12 @@ import Notes from '~/notes';
       };
       let $form;
       let $notesContainer;
+      let mock;
 
       beforeEach(() => {
+        mock = new MockAdapter(axios);
+        mock.onPost(/(.*)\/notes$/).reply(200, note);
+
         this.notes = new Notes('', []);
         window.gon.current_username = 'root';
         window.gon.current_user_fullname = 'Administrator';
@@ -582,15 +634,20 @@ import Notes from '~/notes';
         $form.find('textarea.js-note-text').val(sampleComment);
       });
 
-      it('should remove slash command placeholder when comment with slash commands is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      afterEach(() => {
+        mock.restore();
+      });
+
+      it('should remove slash command placeholder when comment with slash commands is done posting', (done) => {
         spyOn(gl.awardsHandler, 'addAwardToEmojiBar').and.callThrough();
         $('.js-comment-button').click();
 
         expect($notesContainer.find('.system-note.being-posted').length).toEqual(1); // Placeholder shown
-        deferred.resolve(note);
-        expect($notesContainer.find('.system-note.being-posted').length).toEqual(0); // Placeholder removed
+
+        setTimeout(() => {
+          expect($notesContainer.find('.system-note.being-posted').length).toEqual(0); // Placeholder removed
+          done();
+        });
       });
     });
 
@@ -607,8 +664,12 @@ import Notes from '~/notes';
       };
       let $form;
       let $notesContainer;
+      let mock;
 
       beforeEach(() => {
+        mock = new MockAdapter(axios);
+        mock.onPost(/(.*)\/notes$/).reply(200, note);
+
         this.notes = new Notes('', []);
         window.gon.current_username = 'root';
         window.gon.current_user_fullname = 'Administrator';
@@ -617,19 +678,24 @@ import Notes from '~/notes';
         $form.find('textarea.js-note-text').html(sampleComment);
       });
 
-      it('should not render a script tag', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      afterEach(() => {
+        mock.restore();
+      });
+
+      it('should not render a script tag', (done) => {
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        const $noteEl = $notesContainer.find(`#note_${note.id}`);
-        $noteEl.find('.js-note-edit').click();
-        $noteEl.find('textarea.js-note-text').html(updatedComment);
-        $noteEl.find('.js-comment-save-button').click();
+        setTimeout(() => {
+          const $noteEl = $notesContainer.find(`#note_${note.id}`);
+          $noteEl.find('.js-note-edit').click();
+          $noteEl.find('textarea.js-note-text').html(updatedComment);
+          $noteEl.find('.js-comment-save-button').click();
+
+          const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`).find('.js-task-list-container');
+          expect($updatedNoteEl.find('.note-text').text().trim()).toEqual('');
 
-        const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`).find('.js-task-list-container');
-        expect($updatedNoteEl.find('.note-text').text().trim()).toEqual('');
+          done();
+        });
       });
     });