1 files changed, 28 insertions, 26 deletions
diff --git a/spec/frontend/monitoring/components/charts/single_stat_spec.js b/spec/frontend/monitoring/components/charts/single_stat_spec.js
index 9cc5970da82..3783b1eebd2 100644
--- a/spec/frontend/monitoring/components/charts/single_stat_spec.js
+++ b/spec/frontend/monitoring/components/charts/single_stat_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
-import { singleStatMetricsResult } from '../../mock_data';
+import { singleStatGraphData } from '../../graph_data';
 
 describe('Single Stat Chart component', () => {
   let singleStatChart;
@@ -8,7 +8,7 @@ describe('Single Stat Chart component', () => {
   beforeEach(() => {
     singleStatChart = shallowMount(SingleStatChart, {
       propsData: {
-        graphData: singleStatMetricsResult,
+        graphData: singleStatGraphData({}, { unit: 'MB' }),
       },
     });
   });
@@ -20,15 +20,12 @@ describe('Single Stat Chart component', () => {
   describe('computed', () => {
     describe('statValue', () => {
       it('should interpolate the value and unit props', () => {
-        expect(singleStatChart.vm.statValue).toBe('91.00MB');
+        expect(singleStatChart.vm.statValue).toBe('1.00MB');
       });
 
       it('should change the value representation to a percentile one', () => {
         singleStatChart.setProps({
-          graphData: {
-            ...singleStatMetricsResult,
-            maxValue: 120,
-          },
+          graphData: singleStatGraphData({ max_value: 120 }, { value: 91 }),
         });
 
         expect(singleStatChart.vm.statValue).toContain('75.83%');
@@ -36,10 +33,7 @@ describe('Single Stat Chart component', () => {
 
       it('should display NaN for non numeric maxValue values', () => {
         singleStatChart.setProps({
-          graphData: {
-            ...singleStatMetricsResult,
-            maxValue: 'not a number',
-          },
+          graphData: singleStatGraphData({ max_value: 'not a number' }),
         });
 
         expect(singleStatChart.vm.statValue).toContain('NaN');
@@ -47,25 +41,33 @@ describe('Single Stat Chart component', () => {
 
       it('should display NaN for missing query values', () => {
         singleStatChart.setProps({
-          graphData: {
-            ...singleStatMetricsResult,
-            metrics: [
-              {
-                ...singleStatMetricsResult.metrics[0],
-                result: [
-                  {
-                    ...singleStatMetricsResult.metrics[0].result[0],
-                    value: [''],
-                  },
-                ],
-              },
-            ],
-            maxValue: 120,
-          },
+          graphData: singleStatGraphData({ max_value: 120 }, { value: 'NaN' }),
         });
 
         expect(singleStatChart.vm.statValue).toContain('NaN');
       });
+
+      describe('field attribute', () => {
+        it('displays a label value instead of metric value when field attribute is used', () => {
+          singleStatChart.setProps({
+            graphData: singleStatGraphData({ field: 'job' }, { isVector: true }),
+          });
+
+          return singleStatChart.vm.$nextTick(() => {
+            expect(singleStatChart.vm.statValue).toContain('prometheus');
+          });
+        });
+
+        it('displays No data to display if field attribute is not present', () => {
+          singleStatChart.setProps({
+            graphData: singleStatGraphData({ field: 'this-does-not-exist' }),
+          });
+
+          return singleStatChart.vm.$nextTick(() => {
+            expect(singleStatChart.vm.statValue).toContain('No data to display');
+          });
+        });
+      });
     });
   });
 });