1 files changed, 215 insertions, 0 deletions
diff --git a/spec/frontend/monitoring/components/charts/gauge_spec.js b/spec/frontend/monitoring/components/charts/gauge_spec.js
new file mode 100644
index 00000000000..850e2ca87db
--- /dev/null
+++ b/spec/frontend/monitoring/components/charts/gauge_spec.js
@@ -0,0 +1,215 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlGaugeChart } from '@gitlab/ui/dist/charts';
+import GaugeChart from '~/monitoring/components/charts/gauge.vue';
+import { gaugeChartGraphData } from '../../graph_data';
+
+describe('Gauge Chart component', () => {
+  const defaultGraphData = gaugeChartGraphData();
+
+  let wrapper;
+
+  const findGaugeChart = () => wrapper.find(GlGaugeChart);
+
+  const createWrapper = ({ ...graphProps } = {}) => {
+    wrapper = shallowMount(GaugeChart, {
+      propsData: {
+        graphData: {
+          ...defaultGraphData,
+          ...graphProps,
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('chart component', () => {
+    it('is rendered when props are passed', () => {
+      createWrapper();
+
+      expect(findGaugeChart().exists()).toBe(true);
+    });
+  });
+
+  describe('min and max', () => {
+    const MIN_DEFAULT = 0;
+    const MAX_DEFAULT = 100;
+
+    it('are passed to chart component', () => {
+      createWrapper();
+
+      expect(findGaugeChart().props('min')).toBe(100);
+      expect(findGaugeChart().props('max')).toBe(1000);
+    });
+
+    const invalidCases = [undefined, NaN, 'a string'];
+
+    it.each(invalidCases)(
+      'if min has invalid value, defaults are used for both min and max',
+      invalidValue => {
+        createWrapper({ minValue: invalidValue });
+
+        expect(findGaugeChart().props('min')).toBe(MIN_DEFAULT);
+        expect(findGaugeChart().props('max')).toBe(MAX_DEFAULT);
+      },
+    );
+
+    it.each(invalidCases)(
+      'if max has invalid value, defaults are used for both min and max',
+      invalidValue => {
+        createWrapper({ minValue: invalidValue });
+
+        expect(findGaugeChart().props('min')).toBe(MIN_DEFAULT);
+        expect(findGaugeChart().props('max')).toBe(MAX_DEFAULT);
+      },
+    );
+
+    it('if min is bigger than max, defaults are used for both min and max', () => {
+      createWrapper({ minValue: 100, maxValue: 0 });
+
+      expect(findGaugeChart().props('min')).toBe(MIN_DEFAULT);
+      expect(findGaugeChart().props('max')).toBe(MAX_DEFAULT);
+    });
+  });
+
+  describe('thresholds', () => {
+    it('thresholds are set on chart', () => {
+      createWrapper();
+
+      expect(findGaugeChart().props('thresholds')).toEqual([500, 800]);
+    });
+
+    it('when no thresholds are defined, a default threshold is defined at 95% of max_value', () => {
+      createWrapper({
+        minValue: 0,
+        maxValue: 100,
+        thresholds: {},
+      });
+
+      expect(findGaugeChart().props('thresholds')).toEqual([95]);
+    });
+
+    it('when out of min-max bounds thresholds are defined, a default threshold is defined at 95% of the range between min_value and max_value', () => {
+      createWrapper({
+        thresholds: {
+          values: [-10, 1500],
+        },
+      });
+
+      expect(findGaugeChart().props('thresholds')).toEqual([855]);
+    });
+
+    describe('when mode is absolute', () => {
+      it('only valid threshold values are used', () => {
+        createWrapper({
+          thresholds: {
+            mode: 'absolute',
+            values: [undefined, 10, 110, NaN, 'a string', 400],
+          },
+        });
+
+        expect(findGaugeChart().props('thresholds')).toEqual([110, 400]);
+      });
+
+      it('if all threshold values are invalid, a default threshold is defined at 95% of the range between min_value and max_value', () => {
+        createWrapper({
+          thresholds: {
+            mode: 'absolute',
+            values: [NaN, undefined, 'a string', 1500],
+          },
+        });
+
+        expect(findGaugeChart().props('thresholds')).toEqual([855]);
+      });
+    });
+
+    describe('when mode is percentage', () => {
+      it('when values outside of 0-100 bounds are used, a default threshold is defined at 95% of max_value', () => {
+        createWrapper({
+          thresholds: {
+            mode: 'percentage',
+            values: [110],
+          },
+        });
+
+        expect(findGaugeChart().props('thresholds')).toEqual([855]);
+      });
+
+      it('if all threshold values are invalid, a default threshold is defined at 95% of max_value', () => {
+        createWrapper({
+          thresholds: {
+            mode: 'percentage',
+            values: [NaN, undefined, 'a string', 1500],
+          },
+        });
+
+        expect(findGaugeChart().props('thresholds')).toEqual([855]);
+      });
+    });
+  });
+
+  describe('split (the number of ticks on the chart arc)', () => {
+    const SPLIT_DEFAULT = 10;
+
+    it('is passed to chart as prop', () => {
+      createWrapper();
+
+      expect(findGaugeChart().props('splitNumber')).toBe(20);
+    });
+
+    it('if not explicitly set, passes a default value to chart', () => {
+      createWrapper({ split: '' });
+
+      expect(findGaugeChart().props('splitNumber')).toBe(SPLIT_DEFAULT);
+    });
+
+    it('if set as a number that is not an integer, passes the default value to chart', () => {
+      createWrapper({ split: 10.5 });
+
+      expect(findGaugeChart().props('splitNumber')).toBe(SPLIT_DEFAULT);
+    });
+
+    it('if set as a negative number, passes the default value to chart', () => {
+      createWrapper({ split: -10 });
+
+      expect(findGaugeChart().props('splitNumber')).toBe(SPLIT_DEFAULT);
+    });
+  });
+
+  describe('text (the text displayed on the gauge for the current value)', () => {
+    it('displays the query result value when format is not set', () => {
+      createWrapper({ format: '' });
+
+      expect(findGaugeChart().props('text')).toBe('3');
+    });
+
+    it('displays the query result value when format is set to invalid value', () => {
+      createWrapper({ format: 'invalid' });
+
+      expect(findGaugeChart().props('text')).toBe('3');
+    });
+
+    it('displays a formatted query result value when format is set', () => {
+      createWrapper();
+
+      expect(findGaugeChart().props('text')).toBe('3kB');
+    });
+
+    it('displays a placeholder value when metric is empty', () => {
+      createWrapper({ metrics: [] });
+
+      expect(findGaugeChart().props('text')).toBe('--');
+    });
+  });
+
+  describe('value', () => {
+    it('correct value is passed', () => {
+      createWrapper();
+
+      expect(findGaugeChart().props('value')).toBe(3);
+    });
+  });
+});