1 files changed, 40 insertions, 20 deletions

diff --git a/spec/frontend/monitoring/components/charts/single_stat_spec.js b/spec/frontend/monitoring/components/charts/single_stat_spec.js
index 3783b1eebd2..37712eb3012 100644
--- a/spec/frontend/monitoring/components/charts/single_stat_spec.js
+++ b/spec/frontend/monitoring/components/charts/single_stat_spec.js
@@ -1,71 +1,91 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
 import { singleStatGraphData } from '../../graph_data';
 
 describe('Single Stat Chart component', () => {
-  let singleStatChart;
+  let wrapper;
 
-  beforeEach(() => {
-    singleStatChart = shallowMount(SingleStatChart, {
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(SingleStatChart, {
       propsData: {
         graphData: singleStatGraphData({}, { unit: 'MB' }),
+        ...props,
       },
     });
+  };
+
+  const findChart = () => wrapper.find(GlSingleStat);
+
+  beforeEach(() => {
+    createComponent();
   });
 
   afterEach(() => {
-    singleStatChart.destroy();
+    wrapper.destroy();
   });
 
   describe('computed', () => {
     describe('statValue', () => {
       it('should interpolate the value and unit props', () => {
-        expect(singleStatChart.vm.statValue).toBe('1.00MB');
+        expect(findChart().props('value')).toBe('1.00MB');
       });
 
       it('should change the value representation to a percentile one', () => {
-        singleStatChart.setProps({
+        createComponent({
           graphData: singleStatGraphData({ max_value: 120 }, { value: 91 }),
         });
 
-        expect(singleStatChart.vm.statValue).toContain('75.83%');
+        expect(findChart().props('value')).toContain('75.83%');
       });
 
       it('should display NaN for non numeric maxValue values', () => {
-        singleStatChart.setProps({
+        createComponent({
           graphData: singleStatGraphData({ max_value: 'not a number' }),
         });
 
-        expect(singleStatChart.vm.statValue).toContain('NaN');
+        expect(findChart().props('value')).toContain('NaN');
       });
 
       it('should display NaN for missing query values', () => {
-        singleStatChart.setProps({
+        createComponent({
           graphData: singleStatGraphData({ max_value: 120 }, { value: 'NaN' }),
         });
 
-        expect(singleStatChart.vm.statValue).toContain('NaN');
+        expect(findChart().props('value')).toContain('NaN');
+      });
+
+      it('should not display `unit` when `unit` is undefined', () => {
+        createComponent({
+          graphData: singleStatGraphData({}, { unit: undefined }),
+        });
+
+        expect(findChart().props('value')).not.toContain('undefined');
       });
 
-      describe('field attribute', () => {
+      it('should not display `unit` when `unit` is null', () => {
+        createComponent({
+          graphData: singleStatGraphData({}, { unit: null }),
+        });
+
+        expect(findChart().props('value')).not.toContain('null');
+      });
+
+      describe('when a field attribute is set', () => {
         it('displays a label value instead of metric value when field attribute is used', () => {
-          singleStatChart.setProps({
+          createComponent({
             graphData: singleStatGraphData({ field: 'job' }, { isVector: true }),
           });
 
-          return singleStatChart.vm.$nextTick(() => {
-            expect(singleStatChart.vm.statValue).toContain('prometheus');
-          });
+          expect(findChart().props('value')).toContain('prometheus');
         });
 
         it('displays No data to display if field attribute is not present', () => {
-          singleStatChart.setProps({
+          createComponent({
             graphData: singleStatGraphData({ field: 'this-does-not-exist' }),
           });
 
-          return singleStatChart.vm.$nextTick(() => {
-            expect(singleStatChart.vm.statValue).toContain('No data to display');
-          });
+          expect(findChart().props('value')).toContain('No data to display');
         });
       });
     });