Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42

12 files changed, 172 insertions, 419 deletions

diff --git a/spec/frontend/projects/new/components/new_project_url_select_spec.js b/spec/frontend/projects/new/components/new_project_url_select_spec.js
index b3f177a1f12..258fa7636d4 100644
--- a/spec/frontend/projects/new/components/new_project_url_select_spec.js
+++ b/spec/frontend/projects/new/components/new_project_url_select_spec.js
@@ -5,7 +5,8 @@ import {
   GlDropdownSectionHeader,
   GlSearchBoxByType,
 } from '@gitlab/ui';
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
@@ -19,6 +20,7 @@ describe('NewProjectUrlSelect component', () => {
 
   const data = {
     currentUser: {
+      id: 'user-1',
       groups: {
         nodes: [
           {
@@ -51,8 +53,7 @@ describe('NewProjectUrlSelect component', () => {
     },
   };
 
-  const localVue = createLocalVue();
-  localVue.use(VueApollo);
+  Vue.use(VueApollo);
 
   const defaultProvide = {
     namespaceFullPath: 'h5bp',
@@ -63,17 +64,19 @@ describe('NewProjectUrlSelect component', () => {
     userNamespaceId: '1',
   };
 
+  let mockQueryResponse;
+
   const mountComponent = ({
     search = '',
     queryResponse = data,
     provide = defaultProvide,
     mountFn = shallowMount,
   } = {}) => {
-    const requestHandlers = [[searchQuery, jest.fn().mockResolvedValue({ data: queryResponse })]];
+    mockQueryResponse = jest.fn().mockResolvedValue({ data: queryResponse });
+    const requestHandlers = [[searchQuery, mockQueryResponse]];
     const apolloProvider = createMockApollo(requestHandlers);
 
     return mountFn(NewProjectUrlSelect, {
-      localVue,
       apolloProvider,
       provide,
       data() {
@@ -87,12 +90,19 @@ describe('NewProjectUrlSelect component', () => {
   const findButtonLabel = () => wrapper.findComponent(GlButton);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findInput = () => wrapper.findComponent(GlSearchBoxByType);
-  const findHiddenInput = () => wrapper.find('input');
+  const findHiddenInput = () => wrapper.find('[name="project[namespace_id]"]');
+
   const clickDropdownItem = async () => {
     wrapper.findComponent(GlDropdownItem).vm.$emit('click');
     await wrapper.vm.$nextTick();
   };
 
+  const showDropdown = async () => {
+    findDropdown().vm.$emit('shown');
+    await wrapper.vm.$apollo.queries.currentUser.refetch();
+    jest.runOnlyPendingTimers();
+  };
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -140,20 +150,18 @@ describe('NewProjectUrlSelect component', () => {
 
   it('focuses on the input when the dropdown is opened', async () => {
     wrapper = mountComponent({ mountFn: mount });
-    jest.runOnlyPendingTimers();
-    await wrapper.vm.$nextTick();
 
     const spy = jest.spyOn(findInput().vm, 'focusInput');
 
-    findDropdown().vm.$emit('shown');
+    await showDropdown();
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
   it('renders expected dropdown items', async () => {
     wrapper = mountComponent({ mountFn: mount });
-    jest.runOnlyPendingTimers();
-    await wrapper.vm.$nextTick();
+
+    await showDropdown();
 
     const listItems = wrapper.findAll('li');
 
@@ -166,15 +174,36 @@ describe('NewProjectUrlSelect component', () => {
     expect(listItems.at(5).text()).toBe(data.currentUser.namespace.fullPath);
   });
 
+  describe('query fetching', () => {
+    describe('on component mount', () => {
+      it('does not fetch query', () => {
+        wrapper = mountComponent({ mountFn: mount });
+
+        expect(mockQueryResponse).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('on dropdown shown', () => {
+      it('fetches query', async () => {
+        wrapper = mountComponent({ mountFn: mount });
+
+        await showDropdown();
+
+        expect(mockQueryResponse).toHaveBeenCalled();
+      });
+    });
+  });
+
   describe('when selecting from a group template', () => {
-    const groupId = getIdFromGraphQLId(data.currentUser.groups.nodes[1].id);
+    const { fullPath, id } = data.currentUser.groups.nodes[1];
 
     beforeEach(async () => {
       wrapper = mountComponent({ mountFn: mount });
-      jest.runOnlyPendingTimers();
-      await wrapper.vm.$nextTick();
 
-      eventHub.$emit('select-template', groupId);
+      // Show dropdown to fetch projects
+      await showDropdown();
+
+      eventHub.$emit('select-template', getIdFromGraphQLId(id), fullPath);
     });
 
     it('filters the dropdown items to the selected group and children', async () => {
@@ -187,13 +216,14 @@ describe('NewProjectUrlSelect component', () => {
     });
 
     it('sets the selection to the group', async () => {
-      expect(findDropdown().props('text')).toBe(data.currentUser.groups.nodes[1].fullPath);
+      expect(findDropdown().props('text')).toBe(fullPath);
     });
   });
 
   it('renders `No matches found` when there are no matching dropdown items', async () => {
     const queryResponse = {
       currentUser: {
+        id: 'user-1',
         groups: {
           nodes: [],
         },
@@ -212,12 +242,13 @@ describe('NewProjectUrlSelect component', () => {
   });
 
   it('emits `update-visibility` event to update the visibility radio options', async () => {
-    wrapper = mountComponent();
-    jest.runOnlyPendingTimers();
-    await wrapper.vm.$nextTick();
+    wrapper = mountComponent({ mountFn: mount });
 
     const spy = jest.spyOn(eventHub, '$emit');
 
+    // Show dropdown to fetch projects
+    await showDropdown();
+
     await clickDropdownItem();
 
     const namespace = data.currentUser.groups.nodes[0];
@@ -231,16 +262,16 @@ describe('NewProjectUrlSelect component', () => {
   });
 
   it('updates hidden input with selected namespace', async () => {
-    wrapper = mountComponent();
-    jest.runOnlyPendingTimers();
-    await wrapper.vm.$nextTick();
+    wrapper = mountComponent({ mountFn: mount });
+
+    // Show dropdown to fetch projects
+    await showDropdown();
 
     await clickDropdownItem();
 
-    expect(findHiddenInput().attributes()).toMatchObject({
-      name: 'project[namespace_id]',
-      value: getIdFromGraphQLId(data.currentUser.groups.nodes[0].id).toString(),
-    });
+    expect(findHiddenInput().attributes('value')).toBe(
+      getIdFromGraphQLId(data.currentUser.groups.nodes[0].id).toString(),
+    );
   });
 
   it('tracks clicking on the dropdown', () => {
diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
index be3716c24e6..5ec0ad794fb 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
@@ -25,9 +25,13 @@ exports[`StatisticsList displays the counts data with labels 1`] = `
       Failed:
     </span>
      
-    <strong>
-      2 pipelines
-    </strong>
+    <gl-link-stub
+      href="/flightjs/Flight/-/pipelines?page=1&scope=all&status=failed"
+    >
+      
+        2 pipelines
+      
+    </gl-link-stub>
   </li>
   <li>
     <span>
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index b4067f6a72b..574756322c7 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -1,11 +1,12 @@
 import { GlTabs, GlTab } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import { merge } from 'lodash';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
 import Component from '~/projects/pipelines/charts/components/app.vue';
 import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
+import API from '~/api';
 
 jest.mock('~/lib/utils/url_utility');
 
@@ -17,7 +18,7 @@ describe('ProjectsPipelinesChartsApp', () => {
   let wrapper;
 
   function createComponent(mountOptions = {}) {
-    wrapper = shallowMount(
+    wrapper = shallowMountExtended(
       Component,
       merge(
         {},
@@ -118,6 +119,23 @@ describe('ProjectsPipelinesChartsApp', () => {
 
       expect(updateHistory).not.toHaveBeenCalled();
     });
+
+    describe('event tracking', () => {
+      it.each`
+        testId                        | event
+        ${'pipelines-tab'}            | ${'p_analytics_ci_cd_pipelines'}
+        ${'deployment-frequency-tab'} | ${'p_analytics_ci_cd_deployment_frequency'}
+        ${'lead-time-tab'}            | ${'p_analytics_ci_cd_lead_time'}
+      `('tracks the $event event when clicked', ({ testId, event }) => {
+        jest.spyOn(API, 'trackRedisHllUserEvent');
+
+        expect(API.trackRedisHllUserEvent).not.toHaveBeenCalled();
+
+        wrapper.findByTestId(testId).vm.$emit('click');
+
+        expect(API.trackRedisHllUserEvent).toHaveBeenCalledWith(event);
+      });
+    });
   });
 
   describe('when provided with a query param', () => {
diff --git a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
index 4e79f62ce81..57a864cb2c4 100644
--- a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
@@ -1,3 +1,4 @@
+import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Component from '~/projects/pipelines/charts/components/statistics_list.vue';
 import { counts } from '../mock_data';
@@ -5,8 +6,15 @@ import { counts } from '../mock_data';
 describe('StatisticsList', () => {
   let wrapper;
 
+  const failedPipelinesLink = '/flightjs/Flight/-/pipelines?page=1&scope=all&status=failed';
+
+  const findFailedPipelinesLink = () => wrapper.findComponent(GlLink);
+
   beforeEach(() => {
     wrapper = shallowMount(Component, {
+      provide: {
+        failedPipelinesLink,
+      },
       propsData: {
         counts,
       },
@@ -15,10 +23,13 @@ describe('StatisticsList', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('displays the counts data with labels', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  it('displays failed pipelines link', () => {
+    expect(findFailedPipelinesLink().attributes('href')).toBe(failedPipelinesLink);
+  });
 });
diff --git a/spec/frontend/projects/pipelines/charts/mock_data.js b/spec/frontend/projects/pipelines/charts/mock_data.js
index 2e2c594102c..04971b5b20e 100644
--- a/spec/frontend/projects/pipelines/charts/mock_data.js
+++ b/spec/frontend/projects/pipelines/charts/mock_data.js
@@ -48,6 +48,7 @@ export const transformedAreaChartData = [
 export const mockPipelineCount = {
   data: {
     project: {
+      id: '1',
       totalPipelines: { count: 34, __typename: 'PipelineConnection' },
       successfulPipelines: { count: 23, __typename: 'PipelineConnection' },
       failedPipelines: { count: 1, __typename: 'PipelineConnection' },
@@ -70,6 +71,7 @@ export const chartOptions = {
 export const mockPipelineStatistics = {
   data: {
     project: {
+      id: '1',
       pipelineAnalytics: {
         weekPipelinesTotals: [0, 0, 0, 0, 0, 0, 0, 0],
         weekPipelinesLabels: [
diff --git a/spec/frontend/projects/settings/components/transfer_project_form_spec.js b/spec/frontend/projects/settings/components/transfer_project_form_spec.js
new file mode 100644
index 00000000000..f7ce7c6f840
--- /dev/null
+++ b/spec/frontend/projects/settings/components/transfer_project_form_spec.js
@@ -0,0 +1,68 @@
+import { namespaces } from 'jest/vue_shared/components/namespace_select/mock_data';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import TransferProjectForm from '~/projects/settings/components/transfer_project_form.vue';
+import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
+import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
+
+describe('Transfer project form', () => {
+  let wrapper;
+
+  const confirmButtonText = 'Confirm';
+  const confirmationPhrase = 'You must construct additional pylons!';
+
+  const createComponent = () =>
+    shallowMountExtended(TransferProjectForm, {
+      propsData: {
+        namespaces,
+        confirmButtonText,
+        confirmationPhrase,
+      },
+    });
+
+  const findNamespaceSelect = () => wrapper.findComponent(NamespaceSelect);
+  const findConfirmDanger = () => wrapper.findComponent(ConfirmDanger);
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the namespace selector', () => {
+    expect(findNamespaceSelect().exists()).toBe(true);
+  });
+
+  it('renders the confirm button', () => {
+    expect(findConfirmDanger().exists()).toBe(true);
+  });
+
+  it('disables the confirm button by default', () => {
+    expect(findConfirmDanger().attributes('disabled')).toBe('true');
+  });
+
+  describe('with a selected namespace', () => {
+    const [selectedItem] = namespaces.group;
+
+    beforeEach(() => {
+      findNamespaceSelect().vm.$emit('select', selectedItem);
+    });
+
+    it('emits the `selectNamespace` event when a namespace is selected', () => {
+      const args = [selectedItem.id];
+
+      expect(wrapper.emitted('selectNamespace')).toEqual([args]);
+    });
+
+    it('enables the confirm button', () => {
+      expect(findConfirmDanger().attributes('disabled')).toBeUndefined();
+    });
+
+    it('clicking the confirm button emits the `confirm` event', () => {
+      findConfirmDanger().vm.$emit('confirm');
+
+      expect(wrapper.emitted('confirm')).toBeDefined();
+    });
+  });
+});
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
index 0fd3e7446da..875c58583df 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
@@ -1,5 +1,5 @@
 import { GlButton, GlDropdown, GlLoadingIcon, GlToggle } from '@gitlab/ui';
-import { shallowMount, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue';
@@ -11,14 +11,14 @@ describe('ServiceDeskSetting', () => {
   const findButton = () => wrapper.find(GlButton);
   const findClipboardButton = () => wrapper.find(ClipboardButton);
   const findIncomingEmail = () => wrapper.findByTestId('incoming-email');
-  const findIncomingEmailLabel = () => wrapper.findByTestId('incoming-email-describer');
+  const findIncomingEmailLabel = () => wrapper.findByTestId('incoming-email-label');
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findTemplateDropdown = () => wrapper.find(GlDropdown);
   const findToggle = () => wrapper.find(GlToggle);
 
-  const createComponent = ({ props = {}, mountFunction = shallowMount } = {}) =>
+  const createComponent = ({ props = {} } = {}) =>
     extendedWrapper(
-      mountFunction(ServiceDeskSetting, {
+      mount(ServiceDeskSetting, {
         propsData: {
           isEnabled: true,
           ...props,
@@ -131,8 +131,7 @@ describe('ServiceDeskSetting', () => {
 
         it('shows error when value contains uppercase or special chars', async () => {
           wrapper = createComponent({
-            props: { customEmailEnabled: true },
-            mountFunction: mount,
+            props: { email: 'foo@bar.com', customEmailEnabled: true },
           });
 
           const input = wrapper.findByTestId('project-suffix');
@@ -142,7 +141,7 @@ describe('ServiceDeskSetting', () => {
 
           await wrapper.vm.$nextTick();
 
-          const errorText = wrapper.find('.text-danger');
+          const errorText = wrapper.find('.invalid-feedback');
           expect(errorText.exists()).toBe(true);
         });
       });
diff --git a/spec/frontend/projects/storage_counter/components/app_spec.js b/spec/frontend/projects/storage_counter/components/app_spec.js
deleted file mode 100644
index f3da01e0602..00000000000
--- a/spec/frontend/projects/storage_counter/components/app_spec.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueApollo from 'vue-apollo';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import waitForPromises from 'helpers/wait_for_promises';
-import StorageCounterApp from '~/projects/storage_counter/components/app.vue';
-import { TOTAL_USAGE_DEFAULT_TEXT } from '~/projects/storage_counter/constants';
-import getProjectStorageCount from '~/projects/storage_counter/queries/project_storage.query.graphql';
-import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
-import {
-  mockGetProjectStorageCountGraphQLResponse,
-  mockEmptyResponse,
-  projectData,
-  defaultProvideValues,
-} from '../mock_data';
-
-const localVue = createLocalVue();
-localVue.use(VueApollo);
-
-describe('Storage counter app', () => {
-  let wrapper;
-
-  const createMockApolloProvider = ({ reject = false, mockedValue } = {}) => {
-    let response;
-
-    if (reject) {
-      response = jest.fn().mockRejectedValue(mockedValue || new Error('GraphQL error'));
-    } else {
-      response = jest.fn().mockResolvedValue(mockedValue);
-    }
-
-    const requestHandlers = [[getProjectStorageCount, response]];
-
-    return createMockApollo(requestHandlers);
-  };
-
-  const createComponent = ({ provide = {}, mockApollo } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(StorageCounterApp, {
-        localVue,
-        apolloProvider: mockApollo,
-        provide: {
-          ...defaultProvideValues,
-          ...provide,
-        },
-      }),
-    );
-  };
-
-  const findAlert = () => wrapper.findComponent(GlAlert);
-  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findUsagePercentage = () => wrapper.findByTestId('total-usage');
-  const findUsageQuotasHelpLink = () => wrapper.findByTestId('usage-quotas-help-link');
-  const findUsageGraph = () => wrapper.findComponent(UsageGraph);
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('with apollo fetching successful', () => {
-    let mockApollo;
-
-    beforeEach(async () => {
-      mockApollo = createMockApolloProvider({
-        mockedValue: mockGetProjectStorageCountGraphQLResponse,
-      });
-      createComponent({ mockApollo });
-      await waitForPromises();
-    });
-
-    it('renders correct total usage', () => {
-      expect(findUsagePercentage().text()).toBe(projectData.storage.totalUsage);
-    });
-
-    it('renders correct usage quotas help link', () => {
-      expect(findUsageQuotasHelpLink().attributes('href')).toBe(
-        defaultProvideValues.helpLinks.usageQuotasHelpPagePath,
-      );
-    });
-  });
-
-  describe('with apollo loading', () => {
-    let mockApollo;
-
-    beforeEach(() => {
-      mockApollo = createMockApolloProvider({
-        mockedValue: new Promise(() => {}),
-      });
-      createComponent({ mockApollo });
-    });
-
-    it('should show loading icon', () => {
-      expect(findLoadingIcon().exists()).toBe(true);
-    });
-  });
-
-  describe('with apollo returning empty data', () => {
-    let mockApollo;
-
-    beforeEach(async () => {
-      mockApollo = createMockApolloProvider({
-        mockedValue: mockEmptyResponse,
-      });
-      createComponent({ mockApollo });
-      await waitForPromises();
-    });
-
-    it('shows default text for total usage', () => {
-      expect(findUsagePercentage().text()).toBe(TOTAL_USAGE_DEFAULT_TEXT);
-    });
-  });
-
-  describe('with apollo fetching error', () => {
-    let mockApollo;
-
-    beforeEach(() => {
-      mockApollo = createMockApolloProvider();
-      createComponent({ mockApollo, reject: true });
-    });
-
-    it('renders gl-alert', () => {
-      expect(findAlert().exists()).toBe(true);
-    });
-  });
-
-  describe('rendering <usage-graph />', () => {
-    let mockApollo;
-
-    beforeEach(async () => {
-      mockApollo = createMockApolloProvider({
-        mockedValue: mockGetProjectStorageCountGraphQLResponse,
-      });
-      createComponent({ mockApollo });
-      await waitForPromises();
-    });
-
-    it('renders usage-graph component if project.statistics exists', () => {
-      expect(findUsageGraph().exists()).toBe(true);
-    });
-
-    it('passes project.statistics to usage-graph component', () => {
-      const {
-        __typename,
-        ...statistics
-      } = mockGetProjectStorageCountGraphQLResponse.data.project.statistics;
-      expect(findUsageGraph().props('rootStorageStatistics')).toMatchObject(statistics);
-    });
-  });
-});
diff --git a/spec/frontend/projects/storage_counter/components/storage_table_spec.js b/spec/frontend/projects/storage_counter/components/storage_table_spec.js
deleted file mode 100644
index c9e56d8f033..00000000000
--- a/spec/frontend/projects/storage_counter/components/storage_table_spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { GlTableLite } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import StorageTable from '~/projects/storage_counter/components/storage_table.vue';
-import { projectData, defaultProvideValues } from '../mock_data';
-
-describe('StorageTable', () => {
-  let wrapper;
-
-  const defaultProps = {
-    storageTypes: projectData.storage.storageTypes,
-  };
-
-  const createComponent = (props = {}) => {
-    wrapper = extendedWrapper(
-      mount(StorageTable, {
-        propsData: {
-          ...defaultProps,
-          ...props,
-        },
-      }),
-    );
-  };
-
-  const findTable = () => wrapper.findComponent(GlTableLite);
-
-  beforeEach(() => {
-    createComponent();
-  });
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('with storage types', () => {
-    it.each(projectData.storage.storageTypes)(
-      'renders table row correctly %o',
-      ({ storageType: { id, name, description } }) => {
-        expect(wrapper.findByTestId(`${id}-name`).text()).toBe(name);
-        expect(wrapper.findByTestId(`${id}-description`).text()).toBe(description);
-        expect(wrapper.findByTestId(`${id}-icon`).props('name')).toBe(id);
-        expect(wrapper.findByTestId(`${id}-help-link`).attributes('href')).toBe(
-          defaultProvideValues.helpLinks[id.replace(`Size`, `HelpPagePath`)]
-            .replace(`Size`, ``)
-            .replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`),
-        );
-      },
-    );
-  });
-
-  describe('without storage types', () => {
-    beforeEach(() => {
-      createComponent({ storageTypes: [] });
-    });
-
-    it('should render the table header <th>', () => {
-      expect(findTable().find('th').exists()).toBe(true);
-    });
-
-    it('should not render any table data <td>', () => {
-      expect(findTable().find('td').exists()).toBe(false);
-    });
-  });
-});
diff --git a/spec/frontend/projects/storage_counter/components/storage_type_icon_spec.js b/spec/frontend/projects/storage_counter/components/storage_type_icon_spec.js
deleted file mode 100644
index 01efd6f14bd..00000000000
--- a/spec/frontend/projects/storage_counter/components/storage_type_icon_spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { GlIcon } from '@gitlab/ui';
-import StorageTypeIcon from '~/projects/storage_counter/components/storage_type_icon.vue';
-
-describe('StorageTypeIcon', () => {
-  let wrapper;
-
-  const createComponent = (props = {}) => {
-    wrapper = mount(StorageTypeIcon, {
-      propsData: {
-        ...props,
-      },
-    });
-  };
-
-  const findGlIcon = () => wrapper.findComponent(GlIcon);
-
-  describe('rendering icon', () => {
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
-    it.each`
-      expected                     | provided
-      ${'doc-image'}               | ${'lfsObjectsSize'}
-      ${'snippet'}                 | ${'snippetsSize'}
-      ${'infrastructure-registry'} | ${'repositorySize'}
-      ${'package'}                 | ${'packagesSize'}
-      ${'upload'}                  | ${'uploadsSize'}
-      ${'disk'}                    | ${'wikiSize'}
-      ${'disk'}                    | ${'anything-else'}
-    `(
-      'renders icon with name of $expected when name prop is $provided',
-      ({ expected, provided }) => {
-        createComponent({ name: provided });
-
-        expect(findGlIcon().props('name')).toBe(expected);
-      },
-    );
-  });
-});
diff --git a/spec/frontend/projects/storage_counter/mock_data.js b/spec/frontend/projects/storage_counter/mock_data.js
deleted file mode 100644
index 6b3e23ac386..00000000000
--- a/spec/frontend/projects/storage_counter/mock_data.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import mockGetProjectStorageCountGraphQLResponse from 'test_fixtures/graphql/projects/storage_counter/project_storage.query.graphql.json';
-
-export { mockGetProjectStorageCountGraphQLResponse };
-
-export const mockEmptyResponse = { data: { project: null } };
-
-export const defaultProvideValues = {
-  projectPath: '/project-path',
-  helpLinks: {
-    usageQuotasHelpPagePath: '/usage-quotas',
-    buildArtifactsHelpPagePath: '/build-artifacts',
-    lfsObjectsHelpPagePath: '/lsf-objects',
-    packagesHelpPagePath: '/packages',
-    repositoryHelpPagePath: '/repository',
-    snippetsHelpPagePath: '/snippets',
-    uploadsHelpPagePath: '/uploads',
-    wikiHelpPagePath: '/wiki',
-  },
-};
-
-export const projectData = {
-  storage: {
-    totalUsage: '13.8 MiB',
-    storageTypes: [
-      {
-        storageType: {
-          id: 'buildArtifactsSize',
-          name: 'Artifacts',
-          description: 'Pipeline artifacts and job artifacts, created with CI/CD.',
-          warningMessage:
-            'Because of a known issue, the artifact total for some projects may be incorrect. For more details, read %{warningLinkStart}the epic%{warningLinkEnd}.',
-          helpPath: '/build-artifacts',
-        },
-        value: 400000,
-      },
-      {
-        storageType: {
-          id: 'lfsObjectsSize',
-          name: 'LFS storage',
-          description: 'Audio samples, videos, datasets, and graphics.',
-          helpPath: '/lsf-objects',
-        },
-        value: 4800000,
-      },
-      {
-        storageType: {
-          id: 'packagesSize',
-          name: 'Packages',
-          description: 'Code packages and container images.',
-          helpPath: '/packages',
-        },
-        value: 3800000,
-      },
-      {
-        storageType: {
-          id: 'repositorySize',
-          name: 'Repository',
-          description: 'Git repository.',
-          helpPath: '/repository',
-        },
-        value: 3900000,
-      },
-      {
-        storageType: {
-          id: 'snippetsSize',
-          name: 'Snippets',
-          description: 'Shared bits of code and text.',
-          helpPath: '/snippets',
-        },
-        value: 0,
-      },
-      {
-        storageType: {
-          id: 'uploadsSize',
-          name: 'Uploads',
-          description: 'File attachments and smaller design graphics.',
-          helpPath: '/uploads',
-        },
-        value: 900000,
-      },
-      {
-        storageType: {
-          id: 'wikiSize',
-          name: 'Wiki',
-          description: 'Wiki content.',
-          helpPath: '/wiki',
-        },
-        value: 300000,
-      },
-    ],
-  },
-};
diff --git a/spec/frontend/projects/storage_counter/utils_spec.js b/spec/frontend/projects/storage_counter/utils_spec.js
deleted file mode 100644
index fb91975a3cf..00000000000
--- a/spec/frontend/projects/storage_counter/utils_spec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { parseGetProjectStorageResults } from '~/projects/storage_counter/utils';
-import {
-  mockGetProjectStorageCountGraphQLResponse,
-  projectData,
-  defaultProvideValues,
-} from './mock_data';
-
-describe('parseGetProjectStorageResults', () => {
-  it('parses project statistics correctly', () => {
-    expect(
-      parseGetProjectStorageResults(
-        mockGetProjectStorageCountGraphQLResponse.data,
-        defaultProvideValues.helpLinks,
-      ),
-    ).toMatchObject(projectData);
-  });
-
-  it('includes storage type with size of 0 in returned value', () => {
-    const mockedResponse = mockGetProjectStorageCountGraphQLResponse.data;
-    // ensuring a specific storage type item has size of 0
-    mockedResponse.project.statistics.repositorySize = 0;
-
-    const response = parseGetProjectStorageResults(mockedResponse, defaultProvideValues.helpLinks);
-
-    expect(response.storage.storageTypes).toEqual(
-      expect.arrayContaining([
-        {
-          storageType: expect.any(Object),
-          value: 0,
-        },
-      ]),
-    );
-  });
-});