2020-03-13 15:44:24 +05:30
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2019-09-04 21:01:54 +05:30
|
|
|
import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
|
2020-05-24 23:13:21 +05:30
|
|
|
import { singleStatMetricsResult } from '../../mock_data';
|
2020-01-01 13:55:28 +05:30
|
|
|
|
2019-09-04 21:01:54 +05:30
|
|
|
describe('Single Stat Chart component', () => {
|
|
|
|
let singleStatChart;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2020-03-13 15:44:24 +05:30
|
|
|
singleStatChart = shallowMount(SingleStatChart, {
|
2019-09-04 21:01:54 +05:30
|
|
|
propsData: {
|
2020-05-24 23:13:21 +05:30
|
|
|
graphData: singleStatMetricsResult,
|
2019-09-04 21:01:54 +05:30
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
singleStatChart.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('computed', () => {
|
2020-03-13 15:44:24 +05:30
|
|
|
describe('statValue', () => {
|
2019-09-04 21:01:54 +05:30
|
|
|
it('should interpolate the value and unit props', () => {
|
2020-04-22 19:07:51 +05:30
|
|
|
expect(singleStatChart.vm.statValue).toBe('91.00MB');
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('should change the value representation to a percentile one', () => {
|
|
|
|
singleStatChart.setProps({
|
|
|
|
graphData: {
|
2020-05-24 23:13:21 +05:30
|
|
|
...singleStatMetricsResult,
|
2020-04-22 19:07:51 +05:30
|
|
|
maxValue: 120,
|
2020-03-13 15:44:24 +05:30
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2020-04-22 19:07:51 +05:30
|
|
|
expect(singleStatChart.vm.statValue).toContain('75.83%');
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
|
|
|
|
2020-04-22 19:07:51 +05:30
|
|
|
it('should display NaN for non numeric maxValue values', () => {
|
2020-03-13 15:44:24 +05:30
|
|
|
singleStatChart.setProps({
|
|
|
|
graphData: {
|
2020-05-24 23:13:21 +05:30
|
|
|
...singleStatMetricsResult,
|
2020-04-22 19:07:51 +05:30
|
|
|
maxValue: 'not a number',
|
2020-03-13 15:44:24 +05:30
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(singleStatChart.vm.statValue).toContain('NaN');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should display NaN for missing query values', () => {
|
|
|
|
singleStatChart.setProps({
|
|
|
|
graphData: {
|
2020-05-24 23:13:21 +05:30
|
|
|
...singleStatMetricsResult,
|
2020-03-13 15:44:24 +05:30
|
|
|
metrics: [
|
|
|
|
{
|
2020-05-24 23:13:21 +05:30
|
|
|
...singleStatMetricsResult.metrics[0],
|
2020-03-13 15:44:24 +05:30
|
|
|
result: [
|
|
|
|
{
|
2020-05-24 23:13:21 +05:30
|
|
|
...singleStatMetricsResult.metrics[0].result[0],
|
2020-03-13 15:44:24 +05:30
|
|
|
value: [''],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
2020-04-22 19:07:51 +05:30
|
|
|
maxValue: 120,
|
2020-03-13 15:44:24 +05:30
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(singleStatChart.vm.statValue).toContain('NaN');
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|