Use mergeUrlParams when requesting batch diff files

app/assets/javascripts/diffs/store/actions.js

@@ -118,12 +118,7 @@ export const fetchDiffFilesBatch = ({ commit, state }) => {
 
   const getBatch = (page = 1) =>
     axios
-      .get(state.endpointBatch, {
-        params: {
-          ...urlParams,
-          page,
-        },
-      })
+      .get(mergeUrlParams({ ...urlParams, page }, state.endpointBatch))
       .then(({ data: { pagination, diff_files } }) => {
         commit(types.SET_DIFF_DATA_BATCH, { diff_files });
         commit(types.SET_BATCH_LOADING, false);

spec/frontend/diffs/store/actions_spec.js

@@ -51,6 +51,7 @@ import axios from '~/lib/utils/axios_utils';
 import testAction from '../../helpers/vuex_action_helper';
 import * as utils from '~/diffs/store/utils';
 import * as commonUtils from '~/lib/utils/common_utils';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import createFlash from '~/flash';
 
@@ -179,13 +180,29 @@ describe('DiffsStoreActions', () => {
       const res1 = { diff_files: [], pagination: { next_page: 2 } };
       const res2 = { diff_files: [], pagination: {} };
       mock
-        .onGet(endpointBatch, {
-          params: { page: 1, per_page: DIFFS_PER_PAGE, w: '1', view: 'inline' },
-        })
+        .onGet(
+          mergeUrlParams(
+            {
+              per_page: DIFFS_PER_PAGE,
+              w: '1',
+              view: 'inline',
+              page: 1,
+            },
+            endpointBatch,
+          ),
+        )
         .reply(200, res1)
-        .onGet(endpointBatch, {
-          params: { page: 2, per_page: DIFFS_PER_PAGE, w: '1', view: 'inline' },
-        })
+        .onGet(
+          mergeUrlParams(
+            {
+              per_page: DIFFS_PER_PAGE,
+              w: '1',
+              view: 'inline',
+              page: 2,
+            },
+            endpointBatch,
+          ),
+        )
         .reply(200, res2);
 
       testAction(
@@ -208,6 +225,33 @@ describe('DiffsStoreActions', () => {
         },
       );
     });
+
+    it.each`
+      viewStyle     | otherView
+      ${'inline'}   | ${'parallel'}
+      ${'parallel'} | ${'inline'}
+    `(
+      'should make a request with the view parameter "$viewStyle" when the batchEndpoint already contains "$otherView"',
+      ({ viewStyle, otherView }) => {
+        const endpointBatch = '/fetch/diffs_batch';
+        const mock = new MockAdapter(axios);
+
+        fetchDiffFilesBatch({
+          commit: () => {},
+          state: {
+            endpointBatch: `${endpointBatch}?view=${otherView}`,
+            useSingleDiffStyle: true,
+            diffViewType: viewStyle,
+          },
+        })
+          .then(() => {
+            expect(mock.history.get[0].url).toContain(`view=${viewStyle}`);
+            expect(mock.history.get[0].url).not.toContain(`view=${otherView}`);
+            mock.restore();
+          })
+          .catch(() => {});
+      },
+    );
   });
 
   describe('fetchDiffFilesMeta', () => {
@@ -284,9 +328,9 @@ describe('DiffsStoreActions', () => {
         const res1 = { diff_files: [], pagination: { next_page: 2 } };
         const res2 = { diff_files: [], pagination: {} };
         mock
-          .onGet(endpointBatch, { params: { page: 1, per_page: DIFFS_PER_PAGE, w: '1' } })
+          .onGet(mergeUrlParams({ per_page: DIFFS_PER_PAGE, w: '1', page: 1 }, endpointBatch))
           .reply(200, res1)
-          .onGet(endpointBatch, { params: { page: 2, per_page: DIFFS_PER_PAGE, w: '1' } })
+          .onGet(mergeUrlParams({ per_page: DIFFS_PER_PAGE, w: '1', page: 2 }, endpointBatch))
           .reply(200, res2);
 
         testAction(
@@ -309,6 +353,32 @@ describe('DiffsStoreActions', () => {
           },
         );
       });
+
+      it.each`
+        querystrings        | requestUrl
+        ${'?view=parallel'} | ${'/fetch/diffs_batch?view=parallel'}
+        ${'?view=inline'}   | ${'/fetch/diffs_batch?view=inline'}
+        ${''}               | ${'/fetch/diffs_batch'}
+      `(
+        'should use the endpoint $requestUrl if the endpointBatch in state includes `$querystrings` as a querystring',
+        ({ querystrings, requestUrl }) => {
+          const endpointBatch = '/fetch/diffs_batch';
+          const mock = new MockAdapter(axios);
+
+          fetchDiffFilesBatch({
+            commit: () => {},
+            state: {
+              endpointBatch: `${endpointBatch}${querystrings}`,
+              diffViewType: 'inline',
+            },
+          })
+            .then(() => {
+              expect(mock.history.get[0].url).toEqual(requestUrl);
+              mock.restore();
+            })
+            .catch(() => {});
+        },
+      );
     });
 
     describe('fetchDiffFilesMeta', () => {