Merge branch '23696-fix-diff-view-highlighting' into 'master'

Resolve "Highlighting lines is broken"

## What does this MR do?

Add line highlighting back to diff view.  This was working in the MR "changes" tab, but not on a commit page such as https://gitlab.com/winniehell/reproduction-area/commit/9101e66f5761929002956e0f2dd65d7f8643903d

~~This MR also fixes the `scrollToElement` method in `MergeRequestTabs` to account for the extra height of the tab links which are now fixed in place once they are scrolled to the top of the screen.~~ (removed in favor of !7051)

This MR also refactors much of the `Diff` and `MergeRequestTabs` classes to es6 syntax in an effort to increase readability.

## Are there points in the code the reviewer needs to double check?

Check out both MR "change" tabs and commit diff pages and ensure that line highlighting works and that loading a page with one of these permalink hashes correctly highlights and scrolls to the line.

Ensure I didn't break anything in the transition to es6 syntax.  Check the functionality of the tabs on MR pages, as well as diff page interactivity (unfolding hidden lines in diff files, adding comments to diffs, etc).  I have checked these myself, but another set of eyes would be a good idea.

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG.md) entry added
- Tests
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #23696

See merge request !7090

1 files changed, 56 insertions, 53 deletions

diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 971222c44e1..65e4177ecfe 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -1,108 +1,111 @@
-/* eslint-disable space-before-function-paren, no-var, comma-dangle, dot-notation, quotes, no-undef, no-return-assign, no-underscore-dangle, camelcase, padded-blocks, max-len */
+/* eslint-disable no-var, comma-dangle, object-shorthand */
 
 /*= require merge_request_tabs */
 //= require breakpoints
 
-(function() {
-  describe('MergeRequestTabs', function() {
-    var stubLocation;
-    stubLocation = function(stubs) {
-      var defaults;
-      defaults = {
+(function () {
+  describe('MergeRequestTabs', function () {
+    var stubLocation = {};
+    var setLocation = function (stubs) {
+      var defaults = {
         pathname: '',
         search: '',
         hash: ''
       };
-      return $.extend(defaults, stubs);
+      $.extend(stubLocation, defaults, stubs || {});
     };
     fixture.preload('merge_request_tabs.html');
-    beforeEach(function() {
-      this["class"] = new MergeRequestTabs();
-      return this.spies = {
-        ajax: spyOn($, 'ajax').and.callFake(function() {}),
-        history: spyOn(history, 'replaceState').and.callFake(function() {})
+
+    beforeEach(function () {
+      this.class = new gl.MergeRequestTabs({ stubLocation: stubLocation });
+      setLocation();
+
+      this.spies = {
+        ajax: spyOn($, 'ajax').and.callFake(function () {}),
+        history: spyOn(window.history, 'replaceState').and.callFake(function () {})
       };
     });
-    describe('#activateTab', function() {
-      beforeEach(function() {
+
+    describe('#activateTab', function () {
+      beforeEach(function () {
         fixture.load('merge_request_tabs.html');
-        return this.subject = this["class"].activateTab;
+        this.subject = this.class.activateTab;
       });
-      it('shows the first tab when action is show', function() {
+      it('shows the first tab when action is show', function () {
         this.subject('show');
-        return expect($('#notes')).toHaveClass('active');
+        expect($('#notes')).toHaveClass('active');
       });
-      it('shows the notes tab when action is notes', function() {
+      it('shows the notes tab when action is notes', function () {
         this.subject('notes');
-        return expect($('#notes')).toHaveClass('active');
+        expect($('#notes')).toHaveClass('active');
       });
-      it('shows the commits tab when action is commits', function() {
+      it('shows the commits tab when action is commits', function () {
         this.subject('commits');
-        return expect($('#commits')).toHaveClass('active');
+        expect($('#commits')).toHaveClass('active');
       });
-      return it('shows the diffs tab when action is diffs', function() {
+      it('shows the diffs tab when action is diffs', function () {
         this.subject('diffs');
-        return expect($('#diffs')).toHaveClass('active');
+        expect($('#diffs')).toHaveClass('active');
       });
     });
-    return describe('#setCurrentAction', function() {
-      beforeEach(function() {
-        return this.subject = this["class"].setCurrentAction;
+
+    describe('#setCurrentAction', function () {
+      beforeEach(function () {
+        this.subject = this.class.setCurrentAction;
       });
-      it('changes from commits', function() {
-        this["class"]._location = stubLocation({
+      it('changes from commits', function () {
+        setLocation({
           pathname: '/foo/bar/merge_requests/1/commits'
         });
         expect(this.subject('notes')).toBe('/foo/bar/merge_requests/1');
-        return expect(this.subject('diffs')).toBe('/foo/bar/merge_requests/1/diffs');
+        expect(this.subject('diffs')).toBe('/foo/bar/merge_requests/1/diffs');
       });
-      it('changes from diffs', function() {
-        this["class"]._location = stubLocation({
+      it('changes from diffs', function () {
+        setLocation({
           pathname: '/foo/bar/merge_requests/1/diffs'
         });
         expect(this.subject('notes')).toBe('/foo/bar/merge_requests/1');
-        return expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits');
+        expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits');
       });
-      it('changes from diffs.html', function() {
-        this["class"]._location = stubLocation({
+      it('changes from diffs.html', function () {
+        setLocation({
           pathname: '/foo/bar/merge_requests/1/diffs.html'
         });
         expect(this.subject('notes')).toBe('/foo/bar/merge_requests/1');
-        return expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits');
+        expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits');
       });
-      it('changes from notes', function() {
-        this["class"]._location = stubLocation({
+      it('changes from notes', function () {
+        setLocation({
           pathname: '/foo/bar/merge_requests/1'
         });
         expect(this.subject('diffs')).toBe('/foo/bar/merge_requests/1/diffs');
-        return expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits');
+        expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits');
       });
-      it('includes search parameters and hash string', function() {
-        this["class"]._location = stubLocation({
+      it('includes search parameters and hash string', function () {
+        setLocation({
           pathname: '/foo/bar/merge_requests/1/diffs',
           search: '?view=parallel',
           hash: '#L15-35'
         });
-        return expect(this.subject('show')).toBe('/foo/bar/merge_requests/1?view=parallel#L15-35');
+        expect(this.subject('show')).toBe('/foo/bar/merge_requests/1?view=parallel#L15-35');
       });
-      it('replaces the current history state', function() {
-        var new_state;
-        this["class"]._location = stubLocation({
+      it('replaces the current history state', function () {
+        var newState;
+        setLocation({
           pathname: '/foo/bar/merge_requests/1'
         });
-        new_state = this.subject('commits');
-        return expect(this.spies.history).toHaveBeenCalledWith({
+        newState = this.subject('commits');
+        expect(this.spies.history).toHaveBeenCalledWith({
           turbolinks: true,
-          url: new_state
-        }, document.title, new_state);
+          url: newState
+        }, document.title, newState);
       });
-      return it('treats "show" like "notes"', function() {
-        this["class"]._location = stubLocation({
+      it('treats "show" like "notes"', function () {
+        setLocation({
           pathname: '/foo/bar/merge_requests/1/commits'
         });
-        return expect(this.subject('show')).toBe('/foo/bar/merge_requests/1');
+        expect(this.subject('show')).toBe('/foo/bar/merge_requests/1');
       });
     });
   });
-
 }).call(this);