Use correct endpoint to download Dependency List

This ensures the endpoint receives a request for a JSON formatted
response. Previously, no format was specified, so the endpoint was not
returning the correct response.

ee/app/assets/javascripts/dependencies/components/dependencies_actions.vue

 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlButton, GlDropdown, GlDropdownItem, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { SORT_ORDER } from '../store/constants';
@@ -16,7 +16,8 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   computed: {
-    ...mapState(['endpoint', 'sortField', 'sortFields', 'sortOrder']),
+    ...mapState(['sortField', 'sortFields', 'sortOrder']),
+    ...mapGetters(['downloadEndpoint']),
     sortFieldName() {
       return this.sortFields[this.sortField];
     },
@@ -59,7 +60,7 @@ export default {
     </div>
     <gl-button
       v-gl-tooltip
-      :href="endpoint"
+      :href="downloadEndpoint"
       download="dependencies.json"
       :title="s__('Dependencies|Export as JSON')"
       class="js-download"

ee/app/assets/javascripts/dependencies/store/getters.js

@@ -4,3 +4,5 @@ export const isJobNotSetUp = state => state.reportInfo.status === REPORT_STATUS.
 export const isJobFailed = state =>
   [REPORT_STATUS.jobFailed, REPORT_STATUS.noDependencies].includes(state.reportInfo.status);
 export const isIncomplete = state => state.reportInfo.status === REPORT_STATUS.incomplete;
+
+export const downloadEndpoint = ({ endpoint }) => `${endpoint}.json`;

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_actions_spec.js.snap

@@ -61,7 +61,7 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
     class="js-download"
     data-original-title="Export as JSON"
     download="dependencies.json"
-    href=""
+    href="http://test.host/dependencies.json"
     title=""
   >
     <icon-stub

ee/spec/frontend/dependencies/components/dependencies_actions_spec.js

@@ -13,7 +13,7 @@ describe('DependenciesActions component', () => {
     const localVue = createLocalVue();
 
     store = createStore();
-    jest.spyOn(store, 'dispatch');
+    jest.spyOn(store, 'dispatch').mockImplementation();
 
     wrapper = shallowMount(localVue.extend(DependenciesActions), {
       localVue,
@@ -24,6 +24,8 @@ describe('DependenciesActions component', () => {
 
   beforeEach(() => {
     factory();
+    store.state.endpoint = `${TEST_HOST}/dependencies`;
+    return wrapper.vm.$nextTick();
   });
 
   afterEach(() => {
@@ -54,20 +56,13 @@ describe('DependenciesActions component', () => {
     expect(store.dispatch).toHaveBeenCalledWith('toggleSortOrder');
   });
 
-  describe('given an endpoint', () => {
-    beforeEach(() => {
-      store.state.endpoint = `${TEST_HOST}/dependencies`;
-      return wrapper.vm.$nextTick();
-    });
-
-    it('has a button to export the dependency list', () => {
-      const download = wrapper.find('.js-download');
-      expect(download.attributes()).toEqual(
-        expect.objectContaining({
-          href: store.state.endpoint,
-          download: expect.any(String),
-        }),
-      );
-    });
+  it('has a button to export the dependency list', () => {
+    const download = wrapper.find('.js-download');
+    expect(download.attributes()).toEqual(
+      expect.objectContaining({
+        href: store.getters.downloadEndpoint,
+        download: expect.any(String),
+      }),
+    );
   });
 });

ee/spec/frontend/dependencies/store/getters_spec.js

+import { TEST_HOST } from 'helpers/test_constants';
 import * as getters from 'ee/dependencies/store/getters';
 import { REPORT_STATUS } from 'ee/dependencies/store/constants';
 
@@ -22,4 +23,11 @@ describe('Dependencies getters', () => {
       ).toBe(outcome);
     });
   });
+
+  describe('downloadEndpoint', () => {
+    it('should return download endpoint', () => {
+      const endpoint = `${TEST_HOST}/dependencies`;
+      expect(getters.downloadEndpoint({ endpoint })).toBe(`${TEST_HOST}/dependencies.json`);
+    });
+  });
 });