Show `< 1%` when percent value evaluated is less than 1

2 files changed, 10 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
index f44d361c47e..78fde463507 100644
--- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
+++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
@@ -71,7 +71,11 @@ export default {
   },
   methods: {
     getPercent(count) {
-      return roundOffFloat((count / this.totalCount) * 100, 1);
+      const percent = roundOffFloat((count / this.totalCount) * 100, 1);
+      if (percent > 0 && percent < 1) {
+        return '< 1';
+      }
+      return percent;
     },
     barStyle(percent) {
       return `width: ${percent}%;`;
diff --git a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
index 076d940961d..f1fe2e996fc 100644
--- a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
+++ b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
@@ -44,7 +44,11 @@ describe('StackedProgressBarComponent', () => {
       });
 
       it('returns percentage with decimal place from provided count based on `totalCount`', () => {
-        expect(vm.getPercent(10)).toBe(0.2);
+        expect(vm.getPercent(67)).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');
       });
     });