debian-mirror-gitlab/spec/frontend/monitoring/components/charts/column_spec.js

123 lines
3.3 KiB
JavaScript
Raw Normal View History

2020-03-13 15:44:24 +05:30
import { shallowMount } from '@vue/test-utils';
2020-06-23 00:09:42 +05:30
import timezoneMock from 'timezone-mock';
2019-09-30 21:07:59 +05:30
import { GlColumnChart } from '@gitlab/ui/dist/charts';
import ColumnChart from '~/monitoring/components/charts/column.vue';
2020-01-01 13:55:28 +05:30
jest.mock('~/lib/utils/icon_utils', () => ({
getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
}));
2020-04-08 14:13:33 +05:30
const yAxisName = 'Y-axis mock name';
const yAxisFormat = 'bytes';
const yAxisPrecistion = 3;
const dataValues = [
[1495700554.925, '8.0390625'],
[1495700614.925, '8.0390625'],
[1495700674.925, '8.0390625'],
];
2019-09-30 21:07:59 +05:30
describe('Column component', () => {
2020-04-08 14:13:33 +05:30
let wrapper;
2020-06-23 00:09:42 +05:30
const createWrapper = (props = {}) => {
2020-04-08 14:13:33 +05:30
wrapper = shallowMount(ColumnChart, {
2019-09-30 21:07:59 +05:30
propsData: {
graphData: {
2020-04-08 14:13:33 +05:30
yAxis: {
name: yAxisName,
format: yAxisFormat,
precision: yAxisPrecistion,
},
2020-01-01 13:55:28 +05:30
metrics: [
2019-09-30 21:07:59 +05:30
{
2021-01-29 00:20:46 +05:30
label: 'Mock data',
2019-09-30 21:07:59 +05:30
result: [
{
metric: {},
2020-04-08 14:13:33 +05:30
values: dataValues,
2019-09-30 21:07:59 +05:30
},
],
},
],
},
2020-06-23 00:09:42 +05:30
...props,
2019-09-30 21:07:59 +05:30
},
});
2020-06-23 00:09:42 +05:30
};
const findChart = () => wrapper.find(GlColumnChart);
const chartProps = prop => findChart().props(prop);
beforeEach(() => {
createWrapper();
2019-09-30 21:07:59 +05:30
});
afterEach(() => {
2020-04-08 14:13:33 +05:30
wrapper.destroy();
2019-09-30 21:07:59 +05:30
});
2020-06-23 00:09:42 +05:30
describe('xAxisLabel', () => {
const mockDate = Date.UTC(2020, 4, 26, 20); // 8:00 PM in GMT
const useXAxisFormatter = date => {
const { xAxis } = chartProps('option');
const { formatter } = xAxis.axisLabel;
return formatter(date);
};
2020-07-28 23:09:34 +05:30
it('x-axis is formatted correctly in m/d h:MM TT format', () => {
expect(useXAxisFormatter(mockDate)).toEqual('5/26 8:00 PM');
2020-06-23 00:09:42 +05:30
});
describe('when in PT timezone', () => {
beforeAll(() => {
timezoneMock.register('US/Pacific');
});
afterAll(() => {
timezoneMock.unregister();
});
it('by default, values are formatted in PT', () => {
createWrapper();
2020-07-28 23:09:34 +05:30
expect(useXAxisFormatter(mockDate)).toEqual('5/26 1:00 PM');
2020-06-23 00:09:42 +05:30
});
it('when the chart uses local timezone, y-axis is formatted in PT', () => {
createWrapper({ timezone: 'LOCAL' });
2020-07-28 23:09:34 +05:30
expect(useXAxisFormatter(mockDate)).toEqual('5/26 1:00 PM');
2020-06-23 00:09:42 +05:30
});
it('when the chart uses UTC, y-axis is formatted in UTC', () => {
createWrapper({ timezone: 'UTC' });
2020-07-28 23:09:34 +05:30
expect(useXAxisFormatter(mockDate)).toEqual('5/26 8:00 PM');
2020-06-23 00:09:42 +05:30
});
});
});
2019-09-30 21:07:59 +05:30
describe('wrapped components', () => {
describe('GitLab UI column chart', () => {
2020-04-08 14:13:33 +05:30
it('receives data properties needed for proper chart render', () => {
2021-01-29 00:20:46 +05:30
expect(chartProps('bars')).toEqual([{ name: 'Mock data', data: dataValues }]);
2019-09-30 21:07:59 +05:30
});
2020-04-08 14:13:33 +05:30
it('passes the y axis name correctly', () => {
expect(chartProps('yAxisTitle')).toBe(yAxisName);
2019-09-30 21:07:59 +05:30
});
2020-04-08 14:13:33 +05:30
it('passes the y axis configuration correctly', () => {
expect(chartProps('option').yAxis).toMatchObject({
name: yAxisName,
axisLabel: {
formatter: expect.any(Function),
},
scale: false,
});
});
2019-09-30 21:07:59 +05:30
2020-04-08 14:13:33 +05:30
it('passes a dataZoom configuration', () => {
expect(chartProps('option').dataZoom).toBeDefined();
2019-09-30 21:07:59 +05:30
});
});
});
});