2 files changed, 44 insertions, 2 deletions
diff --git a/spec/frontend/projects/storage_counter/components/storage_table_spec.js b/spec/frontend/projects/storage_counter/components/storage_table_spec.js
index 14298318fff..c9e56d8f033 100644
--- a/spec/frontend/projects/storage_counter/components/storage_table_spec.js
+++ b/spec/frontend/projects/storage_counter/components/storage_table_spec.js
@@ -1,4 +1,4 @@
-import { GlTable } from '@gitlab/ui';
+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';
@@ -22,7 +22,7 @@ describe('StorageTable', () => {
     );
   };
 
-  const findTable = () => wrapper.findComponent(GlTable);
+  const findTable = () => wrapper.findComponent(GlTableLite);
 
   beforeEach(() => {
     createComponent();
@@ -37,6 +37,7 @@ describe('StorageTable', () => {
       ({ 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`, ``)
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
new file mode 100644
index 00000000000..01efd6f14bd
--- /dev/null
+++ b/spec/frontend/projects/storage_counter/components/storage_type_icon_spec.js
@@ -0,0 +1,41 @@
+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);
+      },
+    );
+  });
+});