1 files changed, 55 insertions, 18 deletions

diff --git a/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js b/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
index 1a200090805..88ab51cf135 100644
--- a/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
@@ -1,16 +1,24 @@
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import ProjectStorageApp from '~/usage_quotas/storage/components/project_storage_app.vue';
 import UsageGraph from '~/usage_quotas/storage/components/usage_graph.vue';
-import { TOTAL_USAGE_DEFAULT_TEXT } from '~/usage_quotas/storage/constants';
+import {
+  descendingStorageUsageSort,
+  getStorageTypesFromProjectStatistics,
+} from '~/usage_quotas/storage/utils';
+import {
+  storageTypeHelpPaths,
+  PROJECT_STORAGE_TYPES,
+  NAMESPACE_STORAGE_TYPES,
+  TOTAL_USAGE_DEFAULT_TEXT,
+} from '~/usage_quotas/storage/constants';
 import getProjectStorageStatistics from '~/usage_quotas/storage/queries/project_storage.query.graphql';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
 import {
-  projectData,
   mockGetProjectStorageStatisticsGraphQLResponse,
   mockEmptyResponse,
   defaultProjectProvideValues,
@@ -36,25 +44,26 @@ describe('ProjectStorageApp', () => {
   };
 
   const createComponent = ({ provide = {}, mockApollo } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(ProjectStorageApp, {
-        apolloProvider: mockApollo,
-        provide: {
-          ...defaultProjectProvideValues,
-          ...provide,
-        },
-      }),
-    );
+    wrapper = shallowMountExtended(ProjectStorageApp, {
+      apolloProvider: mockApollo,
+      provide: {
+        ...defaultProjectProvideValues,
+        ...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);
+  const findProjectDetailsTable = () => wrapper.findByTestId('usage-quotas-project-usage-details');
+  const findNamespaceDetailsTable = () =>
+    wrapper.findByTestId('usage-quotas-namespace-usage-details');
 
   describe('with apollo fetching successful', () => {
     let mockApollo;
+    const mockProjectData = mockGetProjectStorageStatisticsGraphQLResponse.data.project;
 
     beforeEach(async () => {
       mockApollo = createMockApolloProvider({
@@ -65,13 +74,33 @@ describe('ProjectStorageApp', () => {
     });
 
     it('renders correct total usage', () => {
-      expect(findUsagePercentage().text()).toBe(projectData.storage.totalUsage);
+      const expectedValue = numberToHumanSize(
+        mockGetProjectStorageStatisticsGraphQLResponse.data.project.statistics.storageSize,
+        1,
+      );
+      expect(findUsagePercentage().text()).toBe(expectedValue);
+    });
+
+    it('passes project storage entities to project details table', () => {
+      const expectedValue = getStorageTypesFromProjectStatistics(
+        PROJECT_STORAGE_TYPES,
+        mockProjectData.statistics,
+        mockProjectData.statisticsDetailsPaths,
+        storageTypeHelpPaths,
+      ).sort(descendingStorageUsageSort('value'));
+
+      expect(findProjectDetailsTable().props('storageTypes')).toStrictEqual(expectedValue);
     });
 
-    it('renders correct usage quotas help link', () => {
-      expect(findUsageQuotasHelpLink().attributes('href')).toBe(
-        defaultProjectProvideValues.helpLinks.usageQuotas,
+    it('passes namespace storage entities to namespace details table', () => {
+      const expectedValue = getStorageTypesFromProjectStatistics(
+        NAMESPACE_STORAGE_TYPES,
+        mockProjectData.statistics,
+        mockProjectData.statisticsDetailsPaths,
+        storageTypeHelpPaths,
       );
+
+      expect(findNamespaceDetailsTable().props('storageTypes')).toStrictEqual(expectedValue);
     });
   });
 
@@ -104,6 +133,14 @@ describe('ProjectStorageApp', () => {
     it('shows default text for total usage', () => {
       expect(findUsagePercentage().text()).toBe(TOTAL_USAGE_DEFAULT_TEXT);
     });
+
+    it('passes empty array to project details table', () => {
+      expect(findProjectDetailsTable().props('storageTypes')).toStrictEqual([]);
+    });
+
+    it('passes empty array to namespace details table', () => {
+      expect(findNamespaceDetailsTable().props('storageTypes')).toStrictEqual([]);
+    });
   });
 
   describe('with apollo fetching error', () => {