1 files changed, 137 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/storage_counter/usage_graph_spec.js b/spec/frontend/vue_shared/components/storage_counter/usage_graph_spec.js
new file mode 100644
index 00000000000..103eee4b9a8
--- /dev/null
+++ b/spec/frontend/vue_shared/components/storage_counter/usage_graph_spec.js
@@ -0,0 +1,137 @@
+import { shallowMount } from '@vue/test-utils';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
+
+let data;
+let wrapper;
+
+function mountComponent({ rootStorageStatistics, limit }) {
+  wrapper = shallowMount(UsageGraph, {
+    propsData: {
+      rootStorageStatistics,
+      limit,
+    },
+  });
+}
+function findStorageTypeUsagesSerialized() {
+  return wrapper
+    .findAll('[data-testid="storage-type-usage"]')
+    .wrappers.map((wp) => wp.element.style.flex);
+}
+
+describe('Storage Counter usage graph component', () => {
+  beforeEach(() => {
+    data = {
+      rootStorageStatistics: {
+        wikiSize: 5000,
+        repositorySize: 4000,
+        packagesSize: 3000,
+        lfsObjectsSize: 2000,
+        buildArtifactsSize: 500,
+        pipelineArtifactsSize: 500,
+        snippetsSize: 2000,
+        storageSize: 17000,
+        uploadsSize: 1000,
+      },
+      limit: 2000,
+    };
+    mountComponent(data);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the legend in order', () => {
+    const types = wrapper.findAll('[data-testid="storage-type-legend"]');
+
+    const {
+      buildArtifactsSize,
+      pipelineArtifactsSize,
+      lfsObjectsSize,
+      packagesSize,
+      repositorySize,
+      wikiSize,
+      snippetsSize,
+      uploadsSize,
+    } = data.rootStorageStatistics;
+
+    expect(types.at(0).text()).toMatchInterpolatedText(`Wikis ${numberToHumanSize(wikiSize)}`);
+    expect(types.at(1).text()).toMatchInterpolatedText(
+      `Repositories ${numberToHumanSize(repositorySize)}`,
+    );
+    expect(types.at(2).text()).toMatchInterpolatedText(
+      `Packages ${numberToHumanSize(packagesSize)}`,
+    );
+    expect(types.at(3).text()).toMatchInterpolatedText(
+      `LFS Objects ${numberToHumanSize(lfsObjectsSize)}`,
+    );
+    expect(types.at(4).text()).toMatchInterpolatedText(
+      `Snippets ${numberToHumanSize(snippetsSize)}`,
+    );
+    expect(types.at(5).text()).toMatchInterpolatedText(
+      `Artifacts ${numberToHumanSize(buildArtifactsSize + pipelineArtifactsSize)}`,
+    );
+    expect(types.at(6).text()).toMatchInterpolatedText(`Uploads ${numberToHumanSize(uploadsSize)}`);
+  });
+
+  describe('when storage type is not used', () => {
+    beforeEach(() => {
+      data.rootStorageStatistics.wikiSize = 0;
+      mountComponent(data);
+    });
+
+    it('filters the storage type', () => {
+      expect(wrapper.text()).not.toContain('Wikis');
+    });
+  });
+
+  describe('when there is no storage usage', () => {
+    beforeEach(() => {
+      data.rootStorageStatistics.storageSize = 0;
+      mountComponent(data);
+    });
+
+    it('it does not render', () => {
+      expect(wrapper.html()).toEqual('');
+    });
+  });
+
+  describe('when limit is 0', () => {
+    beforeEach(() => {
+      data.limit = 0;
+      mountComponent(data);
+    });
+
+    it('sets correct flex values', () => {
+      expect(findStorageTypeUsagesSerialized()).toStrictEqual([
+        '0.29411764705882354',
+        '0.23529411764705882',
+        '0.17647058823529413',
+        '0.11764705882352941',
+        '0.11764705882352941',
+        '0.058823529411764705',
+        '0.058823529411764705',
+      ]);
+    });
+  });
+
+  describe('when storage exceeds limit', () => {
+    beforeEach(() => {
+      data.limit = data.rootStorageStatistics.storageSize - 1;
+      mountComponent(data);
+    });
+
+    it('it does render correclty', () => {
+      expect(findStorageTypeUsagesSerialized()).toStrictEqual([
+        '0.29411764705882354',
+        '0.23529411764705882',
+        '0.17647058823529413',
+        '0.11764705882352941',
+        '0.11764705882352941',
+        '0.058823529411764705',
+        '0.058823529411764705',
+      ]);
+    });
+  });
+});