1 files changed, 46 insertions, 28 deletions

diff --git a/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js b/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
index bc86ee5a0c6..0786882f527 100644
--- a/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
+++ b/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
@@ -29,6 +29,13 @@ describe('StackedProgressBarComponent', () => {
     vm.$destroy();
   });
 
+  const findSuccessBarText = wrapper => wrapper.$el.querySelector('.status-green').innerText.trim();
+  const findNeutralBarText = wrapper =>
+    wrapper.$el.querySelector('.status-neutral').innerText.trim();
+  const findFailureBarText = wrapper => wrapper.$el.querySelector('.status-red').innerText.trim();
+  const findUnavailableBarText = wrapper =>
+    wrapper.$el.querySelector('.status-unavailable').innerText.trim();
+
   describe('computed', () => {
     describe('neutralCount', () => {
       it('returns neutralCount based on totalCount, successCount and failureCount', () => {
@@ -37,24 +44,54 @@ describe('StackedProgressBarComponent', () => {
     });
   });
 
-  describe('methods', () => {
+  describe('template', () => {
+    it('renders container element', () => {
+      expect(vm.$el.classList.contains('stacked-progress-bar')).toBeTruthy();
+    });
+
+    it('renders empty state when count is unavailable', () => {
+      const vmX = createComponent({ totalCount: 0, successCount: 0, failureCount: 0 });
+
+      expect(findUnavailableBarText(vmX)).not.toBeUndefined();
+    });
+
+    it('renders bar elements when count is available', () => {
+      expect(findSuccessBarText(vm)).not.toBeUndefined();
+      expect(findNeutralBarText(vm)).not.toBeUndefined();
+      expect(findFailureBarText(vm)).not.toBeUndefined();
+    });
+
     describe('getPercent', () => {
-      it('returns percentage from provided count based on `totalCount`', () => {
-        expect(vm.getPercent(500)).toBe(10);
+      it('returns correct percentages from provided count based on `totalCount`', () => {
+        vm = createComponent({ totalCount: 100, successCount: 25, failureCount: 10 });
+
+        expect(findSuccessBarText(vm)).toBe('25%');
+        expect(findNeutralBarText(vm)).toBe('65%');
+        expect(findFailureBarText(vm)).toBe('10%');
       });
 
-      it('returns percentage with decimal place from provided count based on `totalCount`', () => {
-        expect(vm.getPercent(67)).toBe(1.3);
+      it('returns percentage with decimal place when decimal is greater than 1', () => {
+        vm = createComponent({ successCount: 67 });
+
+        expect(findSuccessBarText(vm)).toBe('1.3%');
       });
 
-      it('returns percentage as `< 1` from provided count based on `totalCount` when evaluated value is less than 1', () => {
-        expect(vm.getPercent(10)).toBe('< 1');
+      it('returns percentage as `< 1%` from provided count based on `totalCount` when evaluated value is less than 1', () => {
+        vm = createComponent({ successCount: 10 });
+
+        expect(findSuccessBarText(vm)).toBe('< 1%');
       });
 
-      it('returns 0 if totalCount is falsy', () => {
+      it('returns not available if totalCount is falsy', () => {
         vm = createComponent({ totalCount: 0 });
 
-        expect(vm.getPercent(100)).toBe(0);
+        expect(findUnavailableBarText(vm)).toBe('Not available');
+      });
+
+      it('returns 99.9% when numbers are extreme decimals', () => {
+        vm = createComponent({ totalCount: 1000000 });
+
+        expect(findNeutralBarText(vm)).toBe('99.9%');
       });
     });
 
@@ -82,23 +119,4 @@ describe('StackedProgressBarComponent', () => {
       });
     });
   });
-
-  describe('template', () => {
-    it('renders container element', () => {
-      expect(vm.$el.classList.contains('stacked-progress-bar')).toBeTruthy();
-    });
-
-    it('renders empty state when count is unavailable', () => {
-      const vmX = createComponent({ totalCount: 0, successCount: 0, failureCount: 0 });
-
-      expect(vmX.$el.querySelectorAll('.status-unavailable').length).not.toBe(0);
-      vmX.$destroy();
-    });
-
-    it('renders bar elements when count is available', () => {
-      expect(vm.$el.querySelectorAll('.status-green').length).not.toBe(0);
-      expect(vm.$el.querySelectorAll('.status-neutral').length).not.toBe(0);
-      expect(vm.$el.querySelectorAll('.status-red').length).not.toBe(0);
-    });
-  });
 });