Commit a34703b8 authored by Jose Vargas's avatar Jose Vargas

Add tests to cover multiple time series

This adds a test to cover multiple time series
and their respective colors in the component
of the same name
parent 9d990969
...@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils'; ...@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
import { setTestTimeout } from 'helpers/timeout'; import { setTestTimeout } from 'helpers/timeout';
import { GlLink } from '@gitlab/ui'; import { GlLink } from '@gitlab/ui';
import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
import { cloneDeep } from 'lodash';
import { shallowWrapperContainsSlotText } from 'helpers/vue_test_utils_helper'; import { shallowWrapperContainsSlotText } from 'helpers/vue_test_utils_helper';
import { chartColorValues } from '~/monitoring/constants'; import { chartColorValues } from '~/monitoring/constants';
import { createStore } from '~/monitoring/stores'; import { createStore } from '~/monitoring/stores';
...@@ -32,501 +33,563 @@ jest.mock('~/lib/utils/icon_utils', () => ({ ...@@ -32,501 +33,563 @@ jest.mock('~/lib/utils/icon_utils', () => ({
describe('Time series component', () => { describe('Time series component', () => {
let mockGraphData; let mockGraphData;
let makeTimeSeriesChart;
let store; let store;
beforeEach(() => { const makeTimeSeriesChart = (graphData, type) =>
setTestTimeout(1000); shallowMount(TimeSeries, {
propsData: {
store = createStore(); graphData: { ...graphData, type },
deploymentData: store.state.monitoringDashboard.deploymentData,
store.commit( projectPath: `${mockHost}${mockProjectDir}`,
`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, },
metricsDashboardPayload, store,
); });
store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
// Mock data contains 2 panel groups, with 1 and 2 panels respectively describe('With a single time series', () => {
store.commit( beforeEach(() => {
`monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`, setTestTimeout(1000);
mockedQueryResultPayload,
);
// Pick the second panel group and the first panel in it store = createStore();
[mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[1].panels;
makeTimeSeriesChart = (graphData, type) => store.commit(
shallowMount(TimeSeries, { `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
propsData: { metricsDashboardPayload,
graphData: { ...graphData, type }, );
deploymentData: store.state.monitoringDashboard.deploymentData,
projectPath: `${mockHost}${mockProjectDir}`,
},
store,
});
});
describe('general functions', () => { store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
let timeSeriesChart;
const findChart = () => timeSeriesChart.find({ ref: 'chart' }); // Mock data contains 2 panel groups, with 1 and 2 panels respectively
store.commit(
`monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
mockedQueryResultPayload,
);
beforeEach(done => { // Pick the second panel group and the first panel in it
timeSeriesChart = makeTimeSeriesChart(mockGraphData, 'area-chart'); [mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[1].panels;
timeSeriesChart.vm.$nextTick(done);
}); });
it('allows user to override max value label text using prop', () => { describe('general functions', () => {
timeSeriesChart.setProps({ legendMaxText: 'legendMaxText' }); let timeSeriesChart;
return timeSeriesChart.vm.$nextTick().then(() => {
expect(timeSeriesChart.props().legendMaxText).toBe('legendMaxText');
});
});
it('allows user to override average value label text using prop', () => { const findChart = () => timeSeriesChart.find({ ref: 'chart' });
timeSeriesChart.setProps({ legendAverageText: 'averageText' });
return timeSeriesChart.vm.$nextTick().then(() => { beforeEach(done => {
expect(timeSeriesChart.props().legendAverageText).toBe('averageText'); timeSeriesChart = makeTimeSeriesChart(mockGraphData, 'area-chart');
timeSeriesChart.vm.$nextTick(done);
}); });
});
describe('events', () => { it('allows user to override max value label text using prop', () => {
describe('datazoom', () => { timeSeriesChart.setProps({ legendMaxText: 'legendMaxText' });
let eChartMock;
let startValue;
let endValue;
beforeEach(done => {
eChartMock = {
handlers: {},
getOption: () => ({
dataZoom: [
{
startValue,
endValue,
},
],
}),
off: jest.fn(eChartEvent => {
delete eChartMock.handlers[eChartEvent];
}),
on: jest.fn((eChartEvent, fn) => {
eChartMock.handlers[eChartEvent] = fn;
}),
};
timeSeriesChart = makeTimeSeriesChart(mockGraphData);
timeSeriesChart.vm.$nextTick(() => {
findChart().vm.$emit('created', eChartMock);
done();
});
});
it('handles datazoom event from chart', () => { return timeSeriesChart.vm.$nextTick().then(() => {
startValue = 1577836800000; // 2020-01-01T00:00:00.000Z expect(timeSeriesChart.props().legendMaxText).toBe('legendMaxText');
endValue = 1577840400000; // 2020-01-01T01:00:00.000Z
eChartMock.handlers.datazoom();
expect(timeSeriesChart.emitted('datazoom')).toHaveLength(1);
expect(timeSeriesChart.emitted('datazoom')[0]).toEqual([
{
start: new Date(startValue).toISOString(),
end: new Date(endValue).toISOString(),
},
]);
}); });
}); });
});
describe('methods', () => { it('allows user to override average value label text using prop', () => {
describe('formatTooltipText', () => { timeSeriesChart.setProps({ legendAverageText: 'averageText' });
let mockDate;
let mockCommitUrl;
let generateSeriesData;
beforeEach(() => { return timeSeriesChart.vm.$nextTick().then(() => {
mockDate = deploymentData[0].created_at; expect(timeSeriesChart.props().legendAverageText).toBe('averageText');
mockCommitUrl = deploymentData[0].commitUrl;
generateSeriesData = type => ({
seriesData: [
{
seriesName: timeSeriesChart.vm.chartData[0].name,
componentSubType: type,
value: [mockDate, 5.55555],
dataIndex: 0,
},
],
value: mockDate,
});
}); });
});
it('does not throw error if data point is outside the zoom range', () => { describe('events', () => {
const seriesDataWithoutValue = generateSeriesData('line'); describe('datazoom', () => {
expect( let eChartMock;
timeSeriesChart.vm.formatTooltipText({ let startValue;
...seriesDataWithoutValue, let endValue;
seriesData: seriesDataWithoutValue.seriesData.map(data => ({
...data,
value: undefined,
})),
}),
).toBeUndefined();
});
describe('when series is of line type', () => {
beforeEach(done => { beforeEach(done => {
timeSeriesChart.vm.formatTooltipText(generateSeriesData('line')); eChartMock = {
timeSeriesChart.vm.$nextTick(done); handlers: {},
}); getOption: () => ({
dataZoom: [
{
startValue,
endValue,
},
],
}),
off: jest.fn(eChartEvent => {
delete eChartMock.handlers[eChartEvent];
}),
on: jest.fn((eChartEvent, fn) => {
eChartMock.handlers[eChartEvent] = fn;
}),
};
it('formats tooltip title', () => { timeSeriesChart = makeTimeSeriesChart(mockGraphData);
expect(timeSeriesChart.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM'); timeSeriesChart.vm.$nextTick(() => {
findChart().vm.$emit('created', eChartMock);
done();
});
}); });
it('formats tooltip content', () => { it('handles datazoom event from chart', () => {
const name = 'Pod average'; startValue = 1577836800000; // 2020-01-01T00:00:00.000Z
const value = '5.556'; endValue = 1577840400000; // 2020-01-01T01:00:00.000Z
const dataIndex = 0; eChartMock.handlers.datazoom();
const seriesLabel = timeSeriesChart.find(GlChartSeriesLabel);
expect(seriesLabel.vm.color).toBe(''); expect(timeSeriesChart.emitted('datazoom')).toHaveLength(1);
expect(shallowWrapperContainsSlotText(seriesLabel, 'default', name)).toBe(true); expect(timeSeriesChart.emitted('datazoom')[0]).toEqual([
expect(timeSeriesChart.vm.tooltip.content).toEqual([ {
{ name, value, dataIndex, color: undefined }, start: new Date(startValue).toISOString(),
end: new Date(endValue).toISOString(),
},
]); ]);
expect(
shallowWrapperContainsSlotText(
timeSeriesChart.find(GlAreaChart),
'tooltipContent',
value,
),
).toBe(true);
}); });
}); });
});
describe('methods', () => {
describe('formatTooltipText', () => {
let mockDate;
let mockCommitUrl;
let generateSeriesData;
describe('when series is of scatter type, for deployments', () => {
beforeEach(() => { beforeEach(() => {
timeSeriesChart.vm.formatTooltipText(generateSeriesData('scatter')); mockDate = deploymentData[0].created_at;
mockCommitUrl = deploymentData[0].commitUrl;
generateSeriesData = type => ({
seriesData: [
{
seriesName: timeSeriesChart.vm.chartData[0].name,
componentSubType: type,
value: [mockDate, 5.55555],
dataIndex: 0,
},
],
value: mockDate,
});
}); });
it('formats tooltip title', () => { it('does not throw error if data point is outside the zoom range', () => {
expect(timeSeriesChart.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM'); const seriesDataWithoutValue = generateSeriesData('line');
expect(
timeSeriesChart.vm.formatTooltipText({
...seriesDataWithoutValue,
seriesData: seriesDataWithoutValue.seriesData.map(data => ({
...data,
value: undefined,
})),
}),
).toBeUndefined();
}); });
it('formats tooltip sha', () => { describe('when series is of line type', () => {
expect(timeSeriesChart.vm.tooltip.sha).toBe('f5bcd1d9'); beforeEach(done => {
timeSeriesChart.vm.formatTooltipText(generateSeriesData('line'));
timeSeriesChart.vm.$nextTick(done);
});
it('formats tooltip title', () => {
expect(timeSeriesChart.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM');
});
it('formats tooltip content', () => {
const name = 'Pod average';
const value = '5.556';
const dataIndex = 0;
const seriesLabel = timeSeriesChart.find(GlChartSeriesLabel);
expect(seriesLabel.vm.color).toBe('');
expect(shallowWrapperContainsSlotText(seriesLabel, 'default', name)).toBe(true);
expect(timeSeriesChart.vm.tooltip.content).toEqual([
{ name, value, dataIndex, color: undefined },
]);
expect(
shallowWrapperContainsSlotText(
timeSeriesChart.find(GlAreaChart),
'tooltipContent',
value,
),
).toBe(true);
});
}); });
it('formats tooltip commit url', () => { describe('when series is of scatter type, for deployments', () => {
expect(timeSeriesChart.vm.tooltip.commitUrl).toBe(mockCommitUrl); beforeEach(() => {
timeSeriesChart.vm.formatTooltipText(generateSeriesData('scatter'));
});
it('formats tooltip title', () => {
expect(timeSeriesChart.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM');
});
it('formats tooltip sha', () => {
expect(timeSeriesChart.vm.tooltip.sha).toBe('f5bcd1d9');
});
it('formats tooltip commit url', () => {
expect(timeSeriesChart.vm.tooltip.commitUrl).toBe(mockCommitUrl);
});
}); });
}); });
});
describe('setSvg', () => { describe('setSvg', () => {
const mockSvgName = 'mockSvgName'; const mockSvgName = 'mockSvgName';
beforeEach(done => { beforeEach(done => {
timeSeriesChart.vm.setSvg(mockSvgName); timeSeriesChart.vm.setSvg(mockSvgName);
timeSeriesChart.vm.$nextTick(done); timeSeriesChart.vm.$nextTick(done);
}); });
it('gets svg path content', () => { it('gets svg path content', () => {
expect(iconUtils.getSvgIconPathContent).toHaveBeenCalledWith(mockSvgName); expect(iconUtils.getSvgIconPathContent).toHaveBeenCalledWith(mockSvgName);
}); });
it('sets svg path content', () => { it('sets svg path content', () => {
timeSeriesChart.vm.$nextTick(() => { timeSeriesChart.vm.$nextTick(() => {
expect(timeSeriesChart.vm.svgs[mockSvgName]).toBe(`path://${mockSvgPathContent}`); expect(timeSeriesChart.vm.svgs[mockSvgName]).toBe(`path://${mockSvgPathContent}`);
});
}); });
});
it('contains an svg object within an array to properly render icon', () => { it('contains an svg object within an array to properly render icon', () => {
timeSeriesChart.vm.$nextTick(() => { timeSeriesChart.vm.$nextTick(() => {
expect(timeSeriesChart.vm.chartOptions.dataZoom).toEqual([ expect(timeSeriesChart.vm.chartOptions.dataZoom).toEqual([
{ {
handleIcon: `path://${mockSvgPathContent}`, handleIcon: `path://${mockSvgPathContent}`,
}, },
]); ]);
});
}); });
}); });
});
describe('onResize', () => { describe('onResize', () => {
const mockWidth = 233; const mockWidth = 233;
beforeEach(() => { beforeEach(() => {
jest.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(() => ({ jest.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(() => ({
width: mockWidth, width: mockWidth,
})); }));
timeSeriesChart.vm.onResize(); timeSeriesChart.vm.onResize();
}); });
it('sets area chart width', () => { it('sets area chart width', () => {
expect(timeSeriesChart.vm.width).toBe(mockWidth); expect(timeSeriesChart.vm.width).toBe(mockWidth);
});
}); });
}); });
});
describe('computed', () => { describe('computed', () => {
const getChartOptions = () => findChart().props('option'); const getChartOptions = () => findChart().props('option');
describe('chartData', () => { describe('chartData', () => {
let chartData; let chartData;
const seriesData = () => chartData[0]; const seriesData = () => chartData[0];
beforeEach(() => { beforeEach(() => {
({ chartData } = timeSeriesChart.vm); ({ chartData } = timeSeriesChart.vm);
}); });
it('utilizes all data points', () => { it('utilizes all data points', () => {
const { values } = mockGraphData.metrics[0].result[0]; const { values } = mockGraphData.metrics[0].result[0];
expect(chartData.length).toBe(1); expect(chartData.length).toBe(1);
expect(seriesData().data.length).toBe(values.length); expect(seriesData().data.length).toBe(values.length);
}); });
it('creates valid data', () => { it('creates valid data', () => {
const { data } = seriesData(); const { data } = seriesData();
expect( expect(
data.filter( data.filter(
([time, value]) => new Date(time).getTime() > 0 && typeof value === 'number', ([time, value]) => new Date(time).getTime() > 0 && typeof value === 'number',
).length, ).length,
).toBe(data.length); ).toBe(data.length);
}); });
it('formats line width correctly', () => { it('formats line width correctly', () => {
expect(chartData[0].lineStyle.width).toBe(2); expect(chartData[0].lineStyle.width).toBe(2);
}); });
it('formats line color correctly', () => { it('formats line color correctly', () => {
expect(chartData[0].lineStyle.color).toBe(chartColorValues[0]); expect(chartData[0].lineStyle.color).toBe(chartColorValues[0]);
});
}); });
});
describe('chartOptions', () => { describe('chartOptions', () => {
describe('are extended by `option`', () => { describe('are extended by `option`', () => {
const mockSeriesName = 'Extra series 1'; const mockSeriesName = 'Extra series 1';
const mockOption = { const mockOption = {
option1: 'option1', option1: 'option1',
option2: 'option2', option2: 'option2',
}; };
it('arbitrary options', () => {
timeSeriesChart.setProps({
option: mockOption,
});
return timeSeriesChart.vm.$nextTick().then(() => { it('arbitrary options', () => {
expect(getChartOptions()).toEqual(expect.objectContaining(mockOption)); timeSeriesChart.setProps({
}); option: mockOption,
}); });
it('additional series', () => { return timeSeriesChart.vm.$nextTick().then(() => {
timeSeriesChart.setProps({ expect(getChartOptions()).toEqual(expect.objectContaining(mockOption));
option: { });
series: [
{
name: mockSeriesName,
},
],
},
}); });
return timeSeriesChart.vm.$nextTick().then(() => { it('additional series', () => {
const optionSeries = getChartOptions().series; timeSeriesChart.setProps({
option: {
series: [
{
name: mockSeriesName,
},
],
},
});
return timeSeriesChart.vm.$nextTick().then(() => {
const optionSeries = getChartOptions().series;
expect(optionSeries.length).toEqual(2); expect(optionSeries.length).toEqual(2);
expect(optionSeries[0].name).toEqual(mockSeriesName); expect(optionSeries[0].name).toEqual(mockSeriesName);
});
}); });
});
it('additional y axis data', () => { it('additional y axis data', () => {
const mockCustomYAxisOption = { const mockCustomYAxisOption = {
name: 'Custom y axis label', name: 'Custom y axis label',
axisLabel: { axisLabel: {
formatter: jest.fn(), formatter: jest.fn(),
}, },
}; };
timeSeriesChart.setProps({ timeSeriesChart.setProps({
option: { option: {
yAxis: mockCustomYAxisOption, yAxis: mockCustomYAxisOption,
}, },
});
return timeSeriesChart.vm.$nextTick().then(() => {
const { yAxis } = getChartOptions();
expect(yAxis[0]).toMatchObject(mockCustomYAxisOption);
});
}); });
return timeSeriesChart.vm.$nextTick().then(() => { it('additional x axis data', () => {
const { yAxis } = getChartOptions(); const mockCustomXAxisOption = {
name: 'Custom x axis label',
};
timeSeriesChart.setProps({
option: {
xAxis: mockCustomXAxisOption,
},
});
return timeSeriesChart.vm.$nextTick().then(() => {
const { xAxis } = getChartOptions();
expect(yAxis[0]).toMatchObject(mockCustomYAxisOption); expect(xAxis).toMatchObject(mockCustomXAxisOption);
});
}); });
}); });
it('additional x axis data', () => { describe('yAxis formatter', () => {
const mockCustomXAxisOption = { let dataFormatter;
name: 'Custom x axis label', let deploymentFormatter;
};
timeSeriesChart.setProps({ beforeEach(() => {
option: { dataFormatter = getChartOptions().yAxis[0].axisLabel.formatter;
xAxis: mockCustomXAxisOption, deploymentFormatter = getChartOptions().yAxis[1].axisLabel.formatter;
},
}); });
return timeSeriesChart.vm.$nextTick().then(() => { it('rounds to 3 decimal places', () => {
const { xAxis } = getChartOptions(); expect(dataFormatter(0.88888)).toBe('0.889');
});
expect(xAxis).toMatchObject(mockCustomXAxisOption); it('deployment formatter is set as is required to display a tooltip', () => {
expect(deploymentFormatter).toEqual(expect.any(Function));
}); });
}); });
}); });
describe('yAxis formatter', () => { describe('deploymentSeries', () => {
let dataFormatter; it('utilizes deployment data', () => {
let deploymentFormatter; expect(timeSeriesChart.vm.deploymentSeries.yAxisIndex).toBe(1); // same as deployment y axis
expect(timeSeriesChart.vm.deploymentSeries.data).toEqual([
['2019-07-16T10:14:25.589Z', expect.any(Number)],
['2019-07-16T11:14:25.589Z', expect.any(Number)],
['2019-07-16T12:14:25.589Z', expect.any(Number)],
]);
beforeEach(() => { expect(timeSeriesChart.vm.deploymentSeries.symbolSize).toBe(14);
dataFormatter = getChartOptions().yAxis[0].axisLabel.formatter;
deploymentFormatter = getChartOptions().yAxis[1].axisLabel.formatter;
}); });
});
it('rounds to 3 decimal places', () => { describe('yAxisLabel', () => {
expect(dataFormatter(0.88888)).toBe('0.889'); it('y axis is configured correctly', () => {
const { yAxis } = getChartOptions();
expect(yAxis).toHaveLength(2);
const [dataAxis, deploymentAxis] = yAxis;
expect(dataAxis.boundaryGap).toHaveLength(2);
expect(dataAxis.scale).toBe(true);
expect(deploymentAxis.show).toBe(false);
expect(deploymentAxis.min).toEqual(expect.any(Number));
expect(deploymentAxis.max).toEqual(expect.any(Number));
expect(deploymentAxis.min).toBeLessThan(deploymentAxis.max);
}); });
it('deployment formatter is set as is required to display a tooltip', () => { it('constructs a label for the chart y-axis', () => {
expect(deploymentFormatter).toEqual(expect.any(Function)); const { yAxis } = getChartOptions();
expect(yAxis[0].name).toBe('Memory Used per Pod');
}); });
}); });
}); });
describe('deploymentSeries', () => { afterEach(() => {
it('utilizes deployment data', () => { timeSeriesChart.destroy();
expect(timeSeriesChart.vm.deploymentSeries.yAxisIndex).toBe(1); // same as deployment y axis
expect(timeSeriesChart.vm.deploymentSeries.data).toEqual([
['2019-07-16T10:14:25.589Z', expect.any(Number)],
['2019-07-16T11:14:25.589Z', expect.any(Number)],
['2019-07-16T12:14:25.589Z', expect.any(Number)],
]);
expect(timeSeriesChart.vm.deploymentSeries.symbolSize).toBe(14);
});
}); });
});
describe('yAxisLabel', () => { describe('wrapped components', () => {
it('y axis is configured correctly', () => { const glChartComponents = [
const { yAxis } = getChartOptions(); {
chartType: 'area-chart',
component: GlAreaChart,
},
{
chartType: 'line-chart',
component: GlLineChart,
},
];
expect(yAxis).toHaveLength(2); glChartComponents.forEach(dynamicComponent => {
describe(`GitLab UI: ${dynamicComponent.chartType}`, () => {
let timeSeriesAreaChart;
const findChartComponent = () => timeSeriesAreaChart.find(dynamicComponent.component);
const [dataAxis, deploymentAxis] = yAxis; beforeEach(done => {
timeSeriesAreaChart = makeTimeSeriesChart(mockGraphData, dynamicComponent.chartType);
timeSeriesAreaChart.vm.$nextTick(done);
});
expect(dataAxis.boundaryGap).toHaveLength(2); afterEach(() => {
expect(dataAxis.scale).toBe(true); timeSeriesAreaChart.destroy();
});
expect(deploymentAxis.show).toBe(false); it('is a Vue instance', () => {
expect(deploymentAxis.min).toEqual(expect.any(Number)); expect(findChartComponent().exists()).toBe(true);
expect(deploymentAxis.max).toEqual(expect.any(Number)); expect(findChartComponent().isVueInstance()).toBe(true);
expect(deploymentAxis.min).toBeLessThan(deploymentAxis.max); });
});
it('constructs a label for the chart y-axis', () => { it('receives data properties needed for proper chart render', () => {
const { yAxis } = getChartOptions(); const props = findChartComponent().props();
expect(yAxis[0].name).toBe('Memory Used per Pod'); expect(props.data).toBe(timeSeriesAreaChart.vm.chartData);
}); expect(props.option).toBe(timeSeriesAreaChart.vm.chartOptions);
}); expect(props.formatTooltipText).toBe(timeSeriesAreaChart.vm.formatTooltipText);
}); expect(props.thresholds).toBe(timeSeriesAreaChart.vm.thresholds);
});
afterEach(() => { it('recieves a tooltip title', done => {
timeSeriesChart.destroy(); const mockTitle = 'mockTitle';
}); timeSeriesAreaChart.vm.tooltip.title = mockTitle;
});
describe('wrapped components', () => { timeSeriesAreaChart.vm.$nextTick(() => {
const glChartComponents = [ expect(
{ shallowWrapperContainsSlotText(findChartComponent(), 'tooltipTitle', mockTitle),
chartType: 'area-chart', ).toBe(true);
component: GlAreaChart, done();
}, });
{ });
chartType: 'line-chart',
component: GlLineChart,
},
];
glChartComponents.forEach(dynamicComponent => { describe('when tooltip is showing deployment data', () => {
describe(`GitLab UI: ${dynamicComponent.chartType}`, () => { const mockSha = 'mockSha';
let timeSeriesAreaChart; const commitUrl = `${mockProjectDir}/-/commit/${mockSha}`;
const findChartComponent = () => timeSeriesAreaChart.find(dynamicComponent.component);
beforeEach(done => { beforeEach(done => {
timeSeriesAreaChart = makeTimeSeriesChart(mockGraphData, dynamicComponent.chartType); timeSeriesAreaChart.vm.tooltip.isDeployment = true;
timeSeriesAreaChart.vm.$nextTick(done); timeSeriesAreaChart.vm.$nextTick(done);
}); });
afterEach(() => { it('uses deployment title', () => {
timeSeriesAreaChart.destroy(); expect(
}); shallowWrapperContainsSlotText(findChartComponent(), 'tooltipTitle', 'Deployed'),
).toBe(true);
});
it('is a Vue instance', () => { it('renders clickable commit sha in tooltip content', done => {
expect(findChartComponent().exists()).toBe(true); timeSeriesAreaChart.vm.tooltip.sha = mockSha;
expect(findChartComponent().isVueInstance()).toBe(true); timeSeriesAreaChart.vm.tooltip.commitUrl = commitUrl;
});
it('receives data properties needed for proper chart render', () => { timeSeriesAreaChart.vm.$nextTick(() => {
const props = findChartComponent().props(); const commitLink = timeSeriesAreaChart.find(GlLink);
expect(props.data).toBe(timeSeriesAreaChart.vm.chartData); expect(shallowWrapperContainsSlotText(commitLink, 'default', mockSha)).toBe(true);
expect(props.option).toBe(timeSeriesAreaChart.vm.chartOptions); expect(commitLink.attributes('href')).toEqual(commitUrl);
expect(props.formatTooltipText).toBe(timeSeriesAreaChart.vm.formatTooltipText); done();
expect(props.thresholds).toBe(timeSeriesAreaChart.vm.thresholds); });
});
});
}); });
});
});
});
it('recieves a tooltip title', done => { describe('with multiple time series', () => {
const mockTitle = 'mockTitle'; const mockedResultMultipleSeries = [];
timeSeriesAreaChart.vm.tooltip.title = mockTitle; const [, , panelData] = metricsDashboardPayload.panel_groups[1].panels;
timeSeriesAreaChart.vm.$nextTick(() => { for (let i = 0; i < panelData.metrics.length; i += 1) {
expect( mockedResultMultipleSeries.push(cloneDeep(mockedQueryResultPayload));
shallowWrapperContainsSlotText(findChartComponent(), 'tooltipTitle', mockTitle), mockedResultMultipleSeries[
).toBe(true); i
done(); ].metricId = `${panelData.metrics[i].metric_id}_${panelData.metrics[i].id}`;
}); }
});
describe('when tooltip is showing deployment data', () => { beforeEach(() => {
const mockSha = 'mockSha'; setTestTimeout(1000);
const commitUrl = `${mockProjectDir}/-/commit/${mockSha}`;
beforeEach(done => { store = createStore();
timeSeriesAreaChart.vm.tooltip.isDeployment = true;
timeSeriesAreaChart.vm.$nextTick(done);
});
it('uses deployment title', () => { store.commit(
expect( `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
shallowWrapperContainsSlotText(findChartComponent(), 'tooltipTitle', 'Deployed'), metricsDashboardPayload,
).toBe(true); );
});
it('renders clickable commit sha in tooltip content', done => { store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
timeSeriesAreaChart.vm.tooltip.sha = mockSha;
timeSeriesAreaChart.vm.tooltip.commitUrl = commitUrl;
timeSeriesAreaChart.vm.$nextTick(() => { // Mock data contains the metric_id for a multiple time series panel
const commitLink = timeSeriesAreaChart.find(GlLink); for (let i = 0; i < panelData.metrics.length; i += 1) {
store.commit(
`monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
mockedResultMultipleSeries[i],
);
}
expect(shallowWrapperContainsSlotText(commitLink, 'default', mockSha)).toBe(true); // Pick the second panel group and the second panel in it
expect(commitLink.attributes('href')).toEqual(commitUrl); [, , mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[1].panels;
done(); });
});
}); describe('General functions', () => {
let timeSeriesChart;
beforeEach(done => {
timeSeriesChart = makeTimeSeriesChart(mockGraphData, 'area-chart');
timeSeriesChart.vm.$nextTick(done);
});
describe('computed', () => {
let chartData;
beforeEach(() => {
({ chartData } = timeSeriesChart.vm);
});
it('should contain different colors for each time series', () => {
expect(chartData[0].lineStyle.color).toBe('#1f78d1');
expect(chartData[1].lineStyle.color).toBe('#1aaa55');
expect(chartData[2].lineStyle.color).toBe('#fc9403');
expect(chartData[3].lineStyle.color).toBe('#6d49cb');
expect(chartData[4].lineStyle.color).toBe('#1f78d1');
}); });
}); });
}); });
......
...@@ -22,7 +22,7 @@ import { ...@@ -22,7 +22,7 @@ import {
} from '../mock_data'; } from '../mock_data';
const localVue = createLocalVue(); const localVue = createLocalVue();
const expectedPanelCount = 2; const expectedPanelCount = 3;
describe('Dashboard', () => { describe('Dashboard', () => {
let store; let store;
......
...@@ -513,6 +513,48 @@ export const metricsDashboardPayload = { ...@@ -513,6 +513,48 @@ export const metricsDashboardPayload = {
}, },
], ],
}, },
{
title: 'memories',
type: 'area-chart',
y_label: 'memories',
metrics: [
{
id: 'metric_of_ages_1000',
label: 'memory_1000',
unit: 'count',
prometheus_endpoint_path: '/root',
metric_id: 20,
},
{
id: 'metric_of_ages_1001',
label: 'memory_1000',
unit: 'count',
prometheus_endpoint_path: '/root',
metric_id: 21,
},
{
id: 'metric_of_ages_1002',
label: 'memory_1000',
unit: 'count',
prometheus_endpoint_path: '/root',
metric_id: 22,
},
{
id: 'metric_of_ages_1003',
label: 'memory_1000',
unit: 'count',
prometheus_endpoint_path: '/root',
metric_id: 23,
},
{
id: 'metric_of_ages_1004',
label: 'memory_1004',
unit: 'count',
prometheus_endpoint_path: '/root',
metric_id: 24,
},
],
},
], ],
}, },
], ],
......
...@@ -50,9 +50,10 @@ describe('Monitoring mutations', () => { ...@@ -50,9 +50,10 @@ describe('Monitoring mutations', () => {
expect(groups[0].panels).toHaveLength(1); expect(groups[0].panels).toHaveLength(1);
expect(groups[0].panels[0].metrics).toHaveLength(1); expect(groups[0].panels[0].metrics).toHaveLength(1);
expect(groups[1].panels).toHaveLength(2); expect(groups[1].panels).toHaveLength(3);
expect(groups[1].panels[0].metrics).toHaveLength(1); expect(groups[1].panels[0].metrics).toHaveLength(1);
expect(groups[1].panels[1].metrics).toHaveLength(1); expect(groups[1].panels[1].metrics).toHaveLength(1);
expect(groups[1].panels[2].metrics).toHaveLength(5);
}); });
it('assigns metrics a metric id', () => { it('assigns metrics a metric id', () => {
mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload); mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment