Fix broken "Show whitespace changes" button on MR "Changes" tab

app/assets/javascripts/diffs/components/compare_versions.vue

@@ -40,17 +40,14 @@ export default {
     comparableDiffs() {
       return this.mergeRequestDiffs.slice(1);
     },
-    isWhitespaceVisible() {
-      return !getParameterValues('w')[0];
-    },
     toggleWhitespaceText() {
-      if (this.isWhitespaceVisible) {
+      if (this.isWhitespaceVisible()) {
         return __('Hide whitespace changes');
       }
       return __('Show whitespace changes');
     },
     toggleWhitespacePath() {
-      if (this.isWhitespaceVisible) {
+      if (this.isWhitespaceVisible()) {
         return mergeUrlParams({ w: 1 }, window.location.href);
       }
 
@@ -67,6 +64,9 @@ export default {
       'expandAllFiles',
       'toggleShowTreeList',
     ]),
+    isWhitespaceVisible() {
+      return getParameterValues('w')[0] !== '1';
+    },
   },
 };
 </script>
@@ -121,7 +121,7 @@ export default {
         </a>
         <a
           :href="toggleWhitespacePath"
-          class="btn btn-default"
+          class="btn btn-default qa-toggle-whitespace"
         >
           {{ toggleWhitespaceText }}
         </a>

changelogs/unreleased/52122-fix-broken-whitespace-button.yml

@@ -0,0 +1,5 @@
+---
+title: Fix broken "Show whitespace changes" button on MRs.
+merge_request: 22539
+author:
+type: fixed

spec/javascripts/diffs/components/compare_versions_spec.js

@@ -1 +1,125 @@
-// TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/48034
+import Vue from 'vue';
+import CompareVersionsComponent from '~/diffs/components/compare_versions.vue';
+import store from '~/mr_notes/stores';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import diffsMockData from '../mock_data/merge_request_diffs';
+
+describe('CompareVersions', () => {
+  let vm;
+  const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 };
+
+  beforeEach(() => {
+    vm = createComponentWithStore(Vue.extend(CompareVersionsComponent), store, {
+      mergeRequestDiffs: diffsMockData,
+      mergeRequestDiff: diffsMockData[0],
+      targetBranch,
+    }).$mount();
+  });
+
+  describe('template', () => {
+    it('should render Tree List toggle button with correct attribute values', () => {
+      const treeListBtn = vm.$el.querySelector('.js-toggle-tree-list');
+
+      expect(treeListBtn).not.toBeNull();
+      expect(treeListBtn.dataset.originalTitle).toBe('Toggle file browser');
+      expect(treeListBtn.querySelectorAll('svg use').length).not.toBe(0);
+      expect(treeListBtn.querySelector('svg use').getAttribute('xlink:href')).toContain(
+        '#hamburger',
+      );
+    });
+
+    it('should render comparison dropdowns with correct values', () => {
+      const sourceDropdown = vm.$el.querySelector('.mr-version-dropdown');
+      const targetDropdown = vm.$el.querySelector('.mr-version-compare-dropdown');
+
+      expect(sourceDropdown).not.toBeNull();
+      expect(targetDropdown).not.toBeNull();
+      expect(sourceDropdown.querySelector('a span').innerHTML).toContain('latest version');
+      expect(targetDropdown.querySelector('a span').innerHTML).toContain(targetBranch.branchName);
+    });
+
+    it('should not render comparison dropdowns if no mergeRequestDiffs are specified', () => {
+      vm.mergeRequestDiffs = [];
+
+      vm.$nextTick(() => {
+        const sourceDropdown = vm.$el.querySelector('.mr-version-dropdown');
+        const targetDropdown = vm.$el.querySelector('.mr-version-compare-dropdown');
+
+        expect(sourceDropdown).toBeNull();
+        expect(targetDropdown).toBeNull();
+      });
+    });
+
+    it('should render whitespace toggle button with correct attributes', () => {
+      const whitespaceBtn = vm.$el.querySelector('.qa-toggle-whitespace');
+      const href = vm.toggleWhitespacePath;
+
+      expect(whitespaceBtn).not.toBeNull();
+      expect(whitespaceBtn.getAttribute('href')).toEqual(href);
+      expect(whitespaceBtn.innerHTML).toContain('Hide whitespace changes');
+    });
+
+    it('should render view types buttons with correct values', () => {
+      const inlineBtn = vm.$el.querySelector('#inline-diff-btn');
+      const parallelBtn = vm.$el.querySelector('#parallel-diff-btn');
+
+      expect(inlineBtn).not.toBeNull();
+      expect(parallelBtn).not.toBeNull();
+      expect(inlineBtn.dataset.viewType).toEqual('inline');
+      expect(parallelBtn.dataset.viewType).toEqual('parallel');
+      expect(inlineBtn.innerHTML).toContain('Inline');
+      expect(parallelBtn.innerHTML).toContain('Side-by-side');
+    });
+  });
+
+  describe('setInlineDiffViewType', () => {
+    it('should persist the view type in the url', () => {
+      const viewTypeBtn = vm.$el.querySelector('#inline-diff-btn');
+      viewTypeBtn.click();
+
+      expect(window.location.toString()).toContain('?view=inline');
+    });
+  });
+
+  describe('setParallelDiffViewType', () => {
+    it('should persist the view type in the url', () => {
+      const viewTypeBtn = vm.$el.querySelector('#parallel-diff-btn');
+      viewTypeBtn.click();
+
+      expect(window.location.toString()).toContain('?view=parallel');
+    });
+  });
+
+  describe('comparableDiffs', () => {
+    it('should not contain the first item in the mergeRequestDiffs property', () => {
+      const { comparableDiffs } = vm;
+      const comparableDiffsMock = diffsMockData.slice(1);
+
+      expect(comparableDiffs).toEqual(comparableDiffsMock);
+    });
+  });
+
+  describe('isWhitespaceVisible', () => {
+    const originalHref = window.location.href;
+
+    afterEach(() => {
+      window.history.replaceState({}, null, originalHref);
+    });
+
+    it('should return "true" when no "w" flag is present in the URL (default)', () => {
+      expect(vm.isWhitespaceVisible()).toBe(true);
+    });
+
+    it('should return "false" when the flag is set to "1" in the URL', () => {
+      window.history.replaceState({}, null, '?w=1');
+
+      expect(vm.isWhitespaceVisible()).toBe(false);
+    });
+
+    it('should return "true" when the flag is set to "0" in the URL', () => {
+      window.history.replaceState({}, null, '?w=0');
+
+      expect(vm.isWhitespaceVisible()).toBe(true);
+    });
+  });
+});

spec/javascripts/diffs/mock_data/merge_request_diffs.js

@@ -0,0 +1,42 @@
+export default [
+  {
+    versionIndex: 4,
+    createdAt: '2018-10-23T11:49:16.611Z',
+    commitsCount: 4,
+    latest: true,
+    shortCommitSha: 'de7a8f7f',
+    versionPath: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37',
+    comparePath:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=de7a8f7f20c3ea2e0bef3ba01cfd41c21f6b4995',
+  },
+  {
+    versionIndex: 3,
+    createdAt: '2018-10-23T11:46:40.617Z',
+    commitsCount: 3,
+    latest: false,
+    shortCommitSha: 'e78fc18f',
+    versionPath: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=36',
+    comparePath:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=e78fc18fa37acb2185c59ca94d4a964464feb50e',
+  },
+  {
+    versionIndex: 2,
+    createdAt: '2018-10-04T09:57:39.648Z',
+    commitsCount: 2,
+    latest: false,
+    shortCommitSha: '48da7e7e',
+    versionPath: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=35',
+    comparePath:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=48da7e7e9a99d41c852578bd9cb541ca4d864b3e',
+  },
+  {
+    versionIndex: 1,
+    createdAt: '2018-09-25T20:30:39.493Z',
+    commitsCount: 1,
+    latest: false,
+    shortCommitSha: '47bac2ed',
+    versionPath: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=20',
+    comparePath:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=47bac2ed972c5bee344c1cea159a22cd7f711dc0',
+  },
+];