diff options
Diffstat (limited to 'spec/frontend')
| -rw-r--r-- | spec/frontend/__mocks__/@gitlab/ui.js | 17 | ||||
| -rw-r--r-- | spec/frontend/monitoring/components/charts/bar_spec.js | 54 | ||||
| -rw-r--r-- | spec/frontend/monitoring/mock_data.js | 47 | ||||
| -rw-r--r-- | spec/frontend/monitoring/store/utils_spec.js | 34 | ||||
| -rw-r--r-- | spec/frontend/monitoring/utils_spec.js | 64 |
5 files changed, 216 insertions, 0 deletions
diff --git a/spec/frontend/__mocks__/@gitlab/ui.js b/spec/frontend/__mocks__/@gitlab/ui.js index ef97cb11424..7f893bf7ed7 100644 --- a/spec/frontend/__mocks__/@gitlab/ui.js +++ b/spec/frontend/__mocks__/@gitlab/ui.js @@ -17,3 +17,20 @@ export const GlTooltip = { return h('div', this.$attrs, this.$slots.default); }, }; + +export const GlPopoverDirective = { + bind() {}, +}; + +export const GlPopover = { + props: { + cssClasses: { + type: Array, + required: false, + default: () => [], + }, + }, + render(h) { + return h('div', this.$attrs, this.$slots.default); + }, +}; diff --git a/spec/frontend/monitoring/components/charts/bar_spec.js b/spec/frontend/monitoring/components/charts/bar_spec.js new file mode 100644 index 00000000000..e39e6e7e2c2 --- /dev/null +++ b/spec/frontend/monitoring/components/charts/bar_spec.js @@ -0,0 +1,54 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlBarChart } from '@gitlab/ui/dist/charts'; +import Bar from '~/monitoring/components/charts/bar.vue'; +import { barMockData } from '../../mock_data'; + +jest.mock('~/lib/utils/icon_utils', () => ({ + getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'), +})); + +describe('Bar component', () => { + let barChart; + let store; + + beforeEach(() => { + barChart = shallowMount(Bar, { + propsData: { + graphData: barMockData, + }, + store, + }); + }); + + afterEach(() => { + barChart.destroy(); + }); + + describe('wrapped components', () => { + describe('GitLab UI bar chart', () => { + let glbarChart; + let chartData; + + beforeEach(() => { + glbarChart = barChart.find(GlBarChart); + chartData = barChart.vm.chartData[barMockData.metrics[0].label]; + }); + + it('is a Vue instance', () => { + expect(glbarChart.isVueInstance()).toBe(true); + }); + + it('should display a label on the x axis', () => { + expect(glbarChart.vm.xAxisTitle).toBe(barMockData.xLabel); + }); + + it('should return chartData as array of arrays', () => { + expect(chartData).toBeInstanceOf(Array); + + chartData.forEach(item => { + expect(item).toBeInstanceOf(Array); + }); + }); + }); + }); +}); diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js index c98b6a9592f..284b7a0997f 100644 --- a/spec/frontend/monitoring/mock_data.js +++ b/spec/frontend/monitoring/mock_data.js @@ -703,3 +703,50 @@ export const stackedColumnMockedData = { }, ], }; + +export const barMockData = { + title: 'SLA Trends - Primary Services', + type: 'bar-chart', + xLabel: 'service', + y_label: 'percentile', + metrics: [ + { + id: 'sla_trends_primary_services', + series_name: 'group 1', + metric_id: 'undefined_sla_trends_primary_services', + metricId: 'undefined_sla_trends_primary_services', + query_range: + 'avg(avg_over_time(slo_observation_status{environment="gprd", stage=~"main|", type=~"api|web|git|registry|sidekiq|ci-runners"}[1d])) by (type)', + unit: 'Percentile', + label: 'SLA', + prometheus_endpoint_path: + '/gitlab-com/metrics-dogfooding/-/environments/266/prometheus/api/v1/query_range?query=clamp_min%28clamp_max%28avg%28avg_over_time%28slo_observation_status%7Benvironment%3D%22gprd%22%2C+stage%3D~%22main%7C%22%2C+type%3D~%22api%7Cweb%7Cgit%7Cregistry%7Csidekiq%7Cci-runners%22%7D%5B1d%5D%29%29+by+%28type%29%2C1%29%2C0%29', + result: [ + { + metric: { type: 'api' }, + values: [[1583995208, '0.9935198135198128']], + }, + { + metric: { type: 'git' }, + values: [[1583995208, '0.9975296513504401']], + }, + { + metric: { type: 'registry' }, + values: [[1583995208, '0.9994716394716395']], + }, + { + metric: { type: 'sidekiq' }, + values: [[1583995208, '0.9948251748251747']], + }, + { + metric: { type: 'web' }, + values: [[1583995208, '0.9535664335664336']], + }, + { + metric: { type: 'postgresql_database' }, + values: [[1583995208, '0.9335664335664336']], + }, + ], + }, + ], +}; diff --git a/spec/frontend/monitoring/store/utils_spec.js b/spec/frontend/monitoring/store/utils_spec.js index 1e5bbc9c113..4bbbe33647c 100644 --- a/spec/frontend/monitoring/store/utils_spec.js +++ b/spec/frontend/monitoring/store/utils_spec.js @@ -25,6 +25,10 @@ describe('mapToDashboardViewModel', () => { panels: [ { title: 'Title A', + xLabel: '', + xAxis: { + name: '', + }, type: 'chart-type', y_label: 'Y Label A', metrics: [], @@ -44,6 +48,10 @@ describe('mapToDashboardViewModel', () => { { title: 'Title A', type: 'chart-type', + xLabel: '', + xAxis: { + name: '', + }, y_label: 'Y Label A', yAxis: { name: 'Y Label A', @@ -114,6 +122,28 @@ describe('mapToDashboardViewModel', () => { const getMappedPanel = () => mapToDashboardViewModel(dashboard).panelGroups[0].panels[0]; + it('panel with x_label', () => { + setupWithPanel({ + title: panelTitle, + x_label: 'x label', + }); + + expect(getMappedPanel()).toEqual({ + title: panelTitle, + xLabel: 'x label', + xAxis: { + name: 'x label', + }, + y_label: '', + yAxis: { + name: '', + format: SUPPORTED_FORMATS.number, + precision: 2, + }, + metrics: [], + }); + }); + it('group y_axis defaults', () => { setupWithPanel({ title: panelTitle, @@ -121,7 +151,11 @@ describe('mapToDashboardViewModel', () => { expect(getMappedPanel()).toEqual({ title: panelTitle, + xLabel: '', y_label: '', + xAxis: { + name: '', + }, yAxis: { name: '', format: SUPPORTED_FORMATS.number, diff --git a/spec/frontend/monitoring/utils_spec.js b/spec/frontend/monitoring/utils_spec.js index 2d9417bf971..262b8b985cc 100644 --- a/spec/frontend/monitoring/utils_spec.js +++ b/spec/frontend/monitoring/utils_spec.js @@ -6,6 +6,7 @@ import { graphDataPrometheusQuery, graphDataPrometheusQueryRange, anomalyMockGraphData, + barMockData, } from './mock_data'; jest.mock('~/lib/utils/url_utility'); @@ -210,4 +211,67 @@ describe('monitoring/utils', () => { expect(mergeUrlParams).toHaveBeenCalledWith({ duration_seconds: `${seconds}` }, fromUrl); }); }); + + describe('barChartsDataParser', () => { + const singleMetricExpected = { + SLA: [ + ['0.9935198135198128', 'api'], + ['0.9975296513504401', 'git'], + ['0.9994716394716395', 'registry'], + ['0.9948251748251747', 'sidekiq'], + ['0.9535664335664336', 'web'], + ['0.9335664335664336', 'postgresql_database'], + ], + }; + + const multipleMetricExpected = { + ...singleMetricExpected, + SLA_2: Object.values(singleMetricExpected)[0], + }; + + const barMockDataWithMultipleMetrics = { + ...barMockData, + metrics: [ + barMockData.metrics[0], + { + ...barMockData.metrics[0], + label: 'SLA_2', + }, + ], + }; + + [ + { + input: { metrics: undefined }, + output: {}, + testCase: 'barChartsDataParser returns {} with undefined', + }, + { + input: { metrics: null }, + output: {}, + testCase: 'barChartsDataParser returns {} with null', + }, + { + input: { metrics: [] }, + output: {}, + testCase: 'barChartsDataParser returns {} with []', + }, + { + input: barMockData, + output: singleMetricExpected, + testCase: 'barChartsDataParser returns single series object with single metrics', + }, + { + input: barMockDataWithMultipleMetrics, + output: multipleMetricExpected, + testCase: 'barChartsDataParser returns multiple series object with multiple metrics', + }, + ].forEach(({ input, output, testCase }) => { + it(testCase, () => { + expect(monitoringUtils.barChartsDataParser(input.metrics)).toEqual( + expect.objectContaining(output), + ); + }); + }); + }); }); |