diff options
Diffstat (limited to 'spec/frontend/monitoring/components/charts/single_stat_spec.js')
-rw-r--r-- | spec/frontend/monitoring/components/charts/single_stat_spec.js | 60 |
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'); }); }); }); |