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

This MR fixes the issue where the Show/Hide whitespace changes button was getting stuck in the Show whitespace changes state once it has been toggled.

The problem was that the w=0 parameter in the URL was getting handled as if it was an integer flag. Since url params are always strings the flag will always result in true regardless of the value.

This MR fixes the issue by converting the w flag to an integer when it is read out.

Tests for the component has also been added.

What are the relevant issue numbers?

Closes #52122 (closed)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Tests added for this feature/bug
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines

spec/javascripts/diffs/components/compare_versions_spec.js

 import Vue from 'vue';
 import CompareVersionsComponent from '~/diffs/components/compare_versions.vue';
 import store from '~/mr_notes/stores';
+import { getParameterValues } from '~/lib/utils/url_utility';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffsMockData from '../mock_data/merge_request_diffs';
 
@@ -21,7 +22,7 @@ describe('CompareVersions', () => {
     it('should render Tree List toggle button with correct attribute values', () => {
       const treeListBtn = vm.$el.querySelector('.js-toggle-tree-list');
 
-      expect(treeListBtn).toBeDefined();
+      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');
@@ -31,8 +32,8 @@ describe('CompareVersions', () => {
       const sourceDropdown = vm.$el.querySelector('.mr-version-dropdown');
       const targetDropdown = vm.$el.querySelector('.mr-version-compare-dropdown');
 
-      expect(sourceDropdown).toBeDefined();
-      expect(targetDropdown).toBeDefined();
+      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);
     });
@@ -53,7 +54,7 @@ describe('CompareVersions', () => {
       const whitespaceBtn = vm.$el.querySelector('.js-toggle-whitespace');
       const href = vm.toggleWhitespacePath;
 
-      expect(whitespaceBtn).toBeDefined();
+      expect(whitespaceBtn).not.toBeNull();
       expect(whitespaceBtn.getAttribute('href')).toEqual(href);
       expect(whitespaceBtn.innerHTML).toContain('Hide whitespace changes');
     });
@@ -62,8 +63,8 @@ describe('CompareVersions', () => {
       const inlineBtn = vm.$el.querySelector('#inline-diff-btn');
       const parallelBtn = vm.$el.querySelector('#parallel-diff-btn');
 
-      expect(inlineBtn).toBeDefined();
-      expect(parallelBtn).toBeDefined();
+      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');
@@ -71,4 +72,23 @@ describe('CompareVersions', () => {
     });
   });
 
+  describe('setInlineDiffViewType', () => {
+
+    it('should persist the view type in the url', () => {
+      vm.setInlineDiffViewType();
+      const viewType = getParameterValues('view')[0];
+
+      expect(viewType).toEqual('inline');
+    });
+  });
+
+  describe('setParallelDiffViewType', () => {
+
+    it('should persist the view type in the url', () => {
+      vm.setParallelDiffViewType();
+      const viewType = getParameterValues('view')[0];
+
+      expect(viewType).toEqual('parallel');
+    });
+  });
 });