Merge branch 'master' into 24339-job-page24339-job-page

* master: (190 commits)
  Replaced duplicate z-index with index of 400
  Enable RSpec profiling only if RSPEC_PROFILING_POSTGRES_URL is not empty
  Add descriptions for the RSpec/EmptyExampleGroup and RSpec/ExpectOutput cops
  Add note about artifacts previewing in docs
  MRWidget: Make error message bold and red.
  Fixes the 500 for custom apearance header logo and logo
  MRWidget: Change refresh button place in failed state.
  Remove readme project_view option
  Update prometheus documentation
  Fix JavaScript translations that are using a namespace
  MRWidget: Add refresh button into MR widget failed state.
  Add s selectors for supported avatars.
  Render plain README using Markup viewer so it is displayed below tree
  Add docs on how to turn off SSL verification on GH oauth
  Fix clicking disabled clipboard button toolip
  Stop MR conflict code from blowing up when branches are missing
  Update edit.html.haml Closes #32555
  Fixes per feedback on user avatar components.
  Consolidate user avatar Vue logic
  Fixes for the rename reserved paths helpers
  ...

1 files changed, 164 insertions, 12 deletions

diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index be4605a5b89..d3494aaa94f 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -14,6 +14,7 @@ import '~/notes';
   gl.utils = gl.utils || {};
 
   describe('Notes', function() {
+    const FLASH_TYPE_ALERT = 'alert';
     var commentsTemplate = 'issues/issue_with_comment.html.raw';
     preloadFixtures(commentsTemplate);
 
@@ -78,6 +79,47 @@ import '~/notes';
       });
     });
 
+    describe('updateNote', () => {
+      let sampleComment;
+      let noteEntity;
+      let $form;
+      let $notesContainer;
+
+      beforeEach(() => {
+        this.notes = new Notes('', []);
+        window.gon.current_username = 'root';
+        window.gon.current_user_fullname = 'Administrator';
+        sampleComment = 'foo';
+        noteEntity = {
+          id: 1234,
+          html: `<li class="note note-row-1234 timeline-entry" id="note_1234">
+                  <div class="note-text">${sampleComment}</div>
+                 </li>`,
+          note: sampleComment,
+          valid: true
+        };
+        $form = $('form.js-main-target-form');
+        $notesContainer = $('ul.main-notes-list');
+        $form.find('textarea.js-note-text').val(sampleComment);
+      });
+
+      it('updates note and resets edit form', () => {
+        const deferred = $.Deferred();
+        spyOn($, 'ajax').and.returnValue(deferred.promise());
+        spyOn(this.notes, 'revertNoteEditForm');
+
+        $('.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);
+
+        expect(this.notes.revertNoteEditForm).toHaveBeenCalledWith($targetNote);
+      });
+    });
+
     describe('renderNote', () => {
       let notes;
       let note;
@@ -98,8 +140,6 @@ import '~/notes';
 
         notes = jasmine.createSpyObj('notes', [
           'refresh',
-          'isNewNote',
-          'isUpdatedNote',
           'collapseLongCommitList',
           'updateNotesCount',
           'putConflictEditWarningInPlace'
@@ -109,13 +149,15 @@ import '~/notes';
         notes.updatedNotesTrackingMap = {};
 
         spyOn(gl.utils, 'localTimeAgo');
+        spyOn(Notes, 'isNewNote').and.callThrough();
+        spyOn(Notes, 'isUpdatedNote').and.callThrough();
         spyOn(Notes, 'animateAppendNote').and.callThrough();
         spyOn(Notes, 'animateUpdateNote').and.callThrough();
       });
 
       describe('when adding note', () => {
         it('should call .animateAppendNote', () => {
-          notes.isNewNote.and.returnValue(true);
+          Notes.isNewNote.and.returnValue(true);
           Notes.prototype.renderNote.call(notes, note, null, $notesList);
 
           expect(Notes.animateAppendNote).toHaveBeenCalledWith(note.html, $notesList);
@@ -124,7 +166,8 @@ import '~/notes';
 
       describe('when note was edited', () => {
         it('should call .animateUpdateNote', () => {
-          notes.isUpdatedNote.and.returnValue(true);
+          Notes.isNewNote.and.returnValue(false);
+          Notes.isUpdatedNote.and.returnValue(true);
           const $note = $('<div>');
           $notesList.find.and.returnValue($note);
           Notes.prototype.renderNote.call(notes, note, null, $notesList);
@@ -134,7 +177,8 @@ import '~/notes';
 
         describe('while editing', () => {
           it('should update textarea if nothing has been touched', () => {
-            notes.isUpdatedNote.and.returnValue(true);
+            Notes.isNewNote.and.returnValue(false);
+            Notes.isUpdatedNote.and.returnValue(true);
             const $note = $(`<div class="is-editing">
               <div class="original-note-content">initial</div>
               <textarea class="js-note-text">initial</textarea>
@@ -146,7 +190,8 @@ import '~/notes';
           });
 
           it('should call .putConflictEditWarningInPlace', () => {
-            notes.isUpdatedNote.and.returnValue(true);
+            Notes.isNewNote.and.returnValue(false);
+            Notes.isUpdatedNote.and.returnValue(true);
             const $note = $(`<div class="is-editing">
               <div class="original-note-content">initial</div>
               <textarea class="js-note-text">different</textarea>
@@ -160,6 +205,47 @@ import '~/notes';
       });
     });
 
+    describe('isUpdatedNote', () => {
+      it('should consider same note text as the same', () => {
+        const result = Notes.isUpdatedNote(
+          {
+            note: 'initial'
+          },
+          $(`<div>
+            <div class="original-note-content">initial</div>
+          </div>`)
+        );
+
+        expect(result).toEqual(false);
+      });
+
+      it('should consider same note with trailing newline as the same', () => {
+        const result = Notes.isUpdatedNote(
+          {
+            note: 'initial\n'
+          },
+          $(`<div>
+            <div class="original-note-content">initial\n</div>
+          </div>`)
+        );
+
+        expect(result).toEqual(false);
+      });
+
+      it('should consider different notes as different', () => {
+        const result = Notes.isUpdatedNote(
+          {
+            note: 'foo'
+          },
+          $(`<div>
+            <div class="original-note-content">bar</div>
+          </div>`)
+        );
+
+        expect(result).toEqual(true);
+      });
+    });
+
     describe('renderDiscussionNote', () => {
       let discussionContainer;
       let note;
@@ -179,15 +265,15 @@ import '~/notes';
         row = jasmine.createSpyObj('row', ['prevAll', 'first', 'find']);
 
         notes = jasmine.createSpyObj('notes', [
-          'isNewNote',
           'isParallelView',
           'updateNotesCount',
         ]);
         notes.note_ids = [];
 
         spyOn(gl.utils, 'localTimeAgo');
+        spyOn(Notes, 'isNewNote');
         spyOn(Notes, 'animateAppendNote');
-        notes.isNewNote.and.returnValue(true);
+        Notes.isNewNote.and.returnValue(true);
         notes.isParallelView.and.returnValue(false);
         row.prevAll.and.returnValue(row);
         row.first.and.returnValue(row);
@@ -377,7 +463,7 @@ import '~/notes';
       });
 
       it('should return true when comment begins with a slash command', () => {
-        const sampleComment = '/wip \n/milestone %1.0 \n/merge \n/unassign Merging this';
+        const sampleComment = '/wip\n/milestone %1.0\n/merge\n/unassign Merging this';
         const hasSlashCommands = this.notes.hasSlashCommands(sampleComment);
 
         expect(hasSlashCommands).toBeTruthy();
@@ -401,10 +487,18 @@ import '~/notes';
     describe('stripSlashCommands', () => {
       it('should strip slash commands from the comment which begins with a slash command', () => {
         this.notes = new Notes();
-        const sampleComment = '/wip \n/milestone %1.0 \n/merge \n/unassign Merging this';
+        const sampleComment = '/wip\n/milestone %1.0\n/merge\n/unassign Merging this';
+        const stripedComment = this.notes.stripSlashCommands(sampleComment);
+
+        expect(stripedComment).toBe('');
+      });
+
+      it('should strip slash commands from the comment but leaves plain comment if it is present', () => {
+        this.notes = new Notes();
+        const sampleComment = '/wip\n/milestone %1.0\n/merge\n/unassign\nMerging this';
         const stripedComment = this.notes.stripSlashCommands(sampleComment);
 
-        expect(stripedComment).not.toBe(sampleComment);
+        expect(stripedComment).toBe('Merging this');
       });
 
       it('should NOT strip string that has slashes within', () => {
@@ -424,6 +518,22 @@ import '~/notes';
 
       beforeEach(() => {
         this.notes = new Notes('', []);
+        spyOn(_, 'escape').and.callFake((comment) => {
+          const escapedString = comment.replace(/["&'<>]/g, (a) => {
+            const escapedToken = {
+              '&': '&amp;',
+              '<': '&lt;',
+              '>': '&gt;',
+              '"': '&quot;',
+              "'": '&#x27;',
+              '`': '&#x60;'
+            }[a];
+
+            return escapedToken;
+          });
+
+          return escapedString;
+        });
       });
 
       it('should return constructed placeholder element for regular note based on form contents', () => {
@@ -444,7 +554,21 @@ import '~/notes';
         expect($tempNote.find('.timeline-content').hasClass('discussion')).toBeFalsy();
         expect($tempNoteHeader.find('.hidden-xs').text().trim()).toEqual(currentUserFullname);
         expect($tempNoteHeader.find('.note-headline-light').text().trim()).toEqual(`@${currentUsername}`);
-        expect($tempNote.find('.note-body .note-text').text().trim()).toEqual(sampleComment);
+        expect($tempNote.find('.note-body .note-text p').text().trim()).toEqual(sampleComment);
+      });
+
+      it('should escape HTML characters from note based on form contents', () => {
+        const commentWithHtml = '<script>alert("Boom!");</script>';
+        const $tempNote = this.notes.createPlaceholderNote({
+          formContent: commentWithHtml,
+          uniqueId,
+          isDiscussionNote: false,
+          currentUsername,
+          currentUserFullname
+        });
+
+        expect(_.escape).toHaveBeenCalledWith(commentWithHtml);
+        expect($tempNote.find('.note-body .note-text p').html()).toEqual('&lt;script&gt;alert("Boom!");&lt;/script&gt;');
       });
 
       it('should return constructed placeholder element for discussion note based on form contents', () => {
@@ -460,5 +584,33 @@ import '~/notes';
         expect($tempNote.find('.timeline-content').hasClass('discussion')).toBeTruthy();
       });
     });
+
+    describe('appendFlash', () => {
+      beforeEach(() => {
+        this.notes = new Notes();
+      });
+
+      it('shows a flash message', () => {
+        this.notes.addFlash('Error message', FLASH_TYPE_ALERT, this.notes.parentTimeline);
+
+        expect(document.querySelectorAll('.flash-alert').length).toBe(1);
+      });
+    });
+
+    describe('clearFlash', () => {
+      beforeEach(() => {
+        $(document).off('ajax:success');
+        this.notes = new Notes();
+      });
+
+      it('removes all the associated flash messages', () => {
+        this.notes.addFlash('Error message 1', FLASH_TYPE_ALERT, this.notes.parentTimeline);
+        this.notes.addFlash('Error message 2', FLASH_TYPE_ALERT, this.notes.parentTimeline);
+
+        this.notes.clearFlash();
+
+        expect(document.querySelectorAll('.flash-alert').length).toBe(0);
+      });
+    });
   });
 }).call(window);