diff options
Diffstat (limited to 'spec/frontend/monitoring/components/charts/time_series_spec.js')
| -rw-r--r-- | spec/frontend/monitoring/components/charts/time_series_spec.js | 95 |
1 files changed, 27 insertions, 68 deletions
diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js index 50d2c9c80b2..97386be9e32 100644 --- a/spec/frontend/monitoring/components/charts/time_series_spec.js +++ b/spec/frontend/monitoring/components/charts/time_series_spec.js @@ -9,18 +9,12 @@ import { GlChartSeriesLabel, GlChartLegend, } from '@gitlab/ui/dist/charts'; -import { cloneDeep } from 'lodash'; import { shallowWrapperContainsSlotText } from 'helpers/vue_test_utils_helper'; -import { createStore } from '~/monitoring/stores'; import { panelTypes, chartHeight } from '~/monitoring/constants'; import TimeSeries from '~/monitoring/components/charts/time_series.vue'; -import * as types from '~/monitoring/stores/mutation_types'; import { deploymentData, mockProjectDir, annotationsData } from '../../mock_data'; -import { - metricsDashboardPayload, - metricsDashboardViewModel, - metricResultStatus, -} from '../../fixture_data'; + +import { timeSeriesGraphData } from '../../graph_data'; jest.mock('lodash/throttle', () => // this throttle mock executes immediately @@ -35,23 +29,21 @@ jest.mock('~/lib/utils/icon_utils', () => ({ })); describe('Time series component', () => { - let mockGraphData; - let store; + const defaultGraphData = timeSeriesGraphData(); let wrapper; const createWrapper = ( - { graphData = mockGraphData, ...props } = {}, + { graphData = defaultGraphData, ...props } = {}, mountingMethod = shallowMount, ) => { wrapper = mountingMethod(TimeSeries, { propsData: { graphData, - deploymentData: store.state.monitoringDashboard.deploymentData, - annotations: store.state.monitoringDashboard.annotations, + deploymentData, + annotations: annotationsData, projectPath: `${TEST_HOST}${mockProjectDir}`, ...props, }, - store, stubs: { GlPopover: true, }, @@ -59,27 +51,15 @@ describe('Time series component', () => { }); }; - describe('With a single time series', () => { - beforeEach(() => { - setTestTimeout(1000); - - store = createStore(); - - store.commit( - `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, - metricsDashboardPayload, - ); - - store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData); + beforeEach(() => { + setTestTimeout(1000); + }); - store.commit( - `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`, - metricResultStatus, - ); - // dashboard is a dynamically generated fixture and stored at environment_metrics_dashboard.json - [mockGraphData] = store.state.monitoringDashboard.dashboard.panelGroups[1].panels; - }); + afterEach(() => { + wrapper.destroy(); + }); + describe('With a single time series', () => { describe('general functions', () => { const findChart = () => wrapper.find({ ref: 'chart' }); @@ -88,10 +68,6 @@ describe('Time series component', () => { return wrapper.vm.$nextTick(); }); - afterEach(() => { - wrapper.destroy(); - }); - it('allows user to override legend label texts using props', () => { const legendRelatedProps = { legendMinText: 'legendMinText', @@ -231,19 +207,20 @@ describe('Time series component', () => { }); it('formats tooltip content', () => { - const name = 'Status Code'; + const name = 'Metric 1'; const value = '5.556'; const dataIndex = 0; const seriesLabel = wrapper.find(GlChartSeriesLabel); expect(seriesLabel.vm.color).toBe(''); + expect(shallowWrapperContainsSlotText(seriesLabel, 'default', name)).toBe(true); expect(wrapper.vm.tooltip.content).toEqual([ { name, value, dataIndex, color: undefined }, ]); expect( - shallowWrapperContainsSlotText(wrapper.find(GlAreaChart), 'tooltipContent', value), + shallowWrapperContainsSlotText(wrapper.find(GlLineChart), 'tooltipContent', value), ).toBe(true); }); @@ -385,10 +362,8 @@ describe('Time series component', () => { }); it('utilizes all data points', () => { - const { values } = mockGraphData.metrics[0].result[0]; - expect(chartData.length).toBe(1); - expect(seriesData().data.length).toBe(values.length); + expect(seriesData().data.length).toBe(3); }); it('creates valid data', () => { @@ -552,8 +527,8 @@ describe('Time series component', () => { return formatter(date); }; - it('x-axis is formatted correctly in AM/PM format', () => { - expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM'); + it('x-axis is formatted correctly in m/d h:MM TT format', () => { + expect(useXAxisFormatter(mockDate)).toEqual('5/26 8:00 PM'); }); describe('when in PT timezone', () => { @@ -567,17 +542,17 @@ describe('Time series component', () => { it('by default, values are formatted in PT', () => { createWrapper(); - expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM'); + expect(useXAxisFormatter(mockDate)).toEqual('5/26 1:00 PM'); }); it('when the chart uses local timezone, y-axis is formatted in PT', () => { createWrapper({ timezone: 'LOCAL' }); - expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM'); + expect(useXAxisFormatter(mockDate)).toEqual('5/26 1:00 PM'); }); it('when the chart uses UTC, y-axis is formatted in UTC', () => { createWrapper({ timezone: 'UTC' }); - expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM'); + expect(useXAxisFormatter(mockDate)).toEqual('5/26 8:00 PM'); }); }); }); @@ -602,14 +577,10 @@ describe('Time series component', () => { it('constructs a label for the chart y-axis', () => { const { yAxis } = getChartOptions(); - expect(yAxis[0].name).toBe('Requests / Sec'); + expect(yAxis[0].name).toBe('Y Axis'); }); }); }); - - afterEach(() => { - wrapper.destroy(); - }); }); describe('wrapped components', () => { @@ -630,7 +601,7 @@ describe('Time series component', () => { beforeEach(() => { createWrapper( - { graphData: { ...mockGraphData, type: dynamicComponent.chartType } }, + { graphData: timeSeriesGraphData({ type: dynamicComponent.chartType }) }, mount, ); return wrapper.vm.$nextTick(); @@ -700,20 +671,12 @@ describe('Time series component', () => { describe('with multiple time series', () => { describe('General functions', () => { beforeEach(() => { - store = createStore(); - const graphData = cloneDeep(metricsDashboardViewModel.panelGroups[0].panels[3]); - graphData.metrics.forEach(metric => - Object.assign(metric, { result: metricResultStatus.result }), - ); + const graphData = timeSeriesGraphData({ type: panelTypes.AREA_CHART, multiMetric: true }); - createWrapper({ graphData: { ...graphData, type: 'area-chart' } }, mount); + createWrapper({ graphData }, mount); return wrapper.vm.$nextTick(); }); - afterEach(() => { - wrapper.destroy(); - }); - describe('Color match', () => { let lineColors; @@ -754,14 +717,10 @@ describe('Time series component', () => { const findLegend = () => wrapper.find(GlChartLegend); beforeEach(() => { - createWrapper(mockGraphData, mount); + createWrapper({}, mount); return wrapper.vm.$nextTick(); }); - afterEach(() => { - wrapper.destroy(); - }); - it('should render a tabular legend layout by default', () => { expect(findLegend().props('layout')).toBe('table'); }); |