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

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>