gitlab-org--gitlab-foss/spec/frontend/serverless/components/area_spec.js

121 lines
3.3 KiB
JavaScript

import { shallowMount } from '@vue/test-utils';
import Area from '~/serverless/components/area.vue';
import { mockNormalizedMetrics } from '../mock_data';
describe('Area component', () => {
const mockWidgets = 'mockWidgets';
const mockGraphData = mockNormalizedMetrics;
let areaChart;
beforeEach(() => {
areaChart = shallowMount(Area, {
propsData: {
graphData: mockGraphData,
containerWidth: 0,
},
slots: {
default: mockWidgets,
},
});
});
afterEach(() => {
areaChart.destroy();
});
it('renders chart title', () => {
expect(areaChart.find({ ref: 'graphTitle' }).text()).toBe(mockGraphData.title);
});
it('contains graph widgets from slot', () => {
expect(areaChart.find({ ref: 'graphWidgets' }).text()).toBe(mockWidgets);
});
describe('methods', () => {
describe('formatTooltipText', () => {
const mockDate = mockNormalizedMetrics.queries[0].result[0].values[0].time;
const generateSeriesData = type => ({
seriesData: [
{
componentSubType: type,
value: [mockDate, 4],
},
],
value: mockDate,
});
describe('series is of line type', () => {
beforeEach(() => {
areaChart.vm.formatTooltipText(generateSeriesData('line'));
});
it('formats tooltip title', () => {
expect(areaChart.vm.tooltipPopoverTitle).toBe('28 Feb 2019, 11:11AM');
});
it('formats tooltip content', () => {
expect(areaChart.vm.tooltipPopoverContent).toBe('Invocations (requests): 4');
});
});
it('verify default interval value of 1', () => {
expect(areaChart.vm.getInterval).toBe(1);
});
});
describe('onResize', () => {
const mockWidth = 233;
beforeEach(() => {
jest.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(() => ({
width: mockWidth,
}));
areaChart.vm.onResize();
});
it('sets area chart width', () => {
expect(areaChart.vm.width).toBe(mockWidth);
});
});
});
describe('computed', () => {
describe('chartData', () => {
it('utilizes all data points', () => {
expect(Object.keys(areaChart.vm.chartData)).toEqual(['requests']);
expect(areaChart.vm.chartData.requests.length).toBe(2);
});
it('creates valid data', () => {
const data = areaChart.vm.chartData.requests;
expect(
data.filter(
datum => new Date(datum.time).getTime() > 0 && typeof datum.value === 'number',
).length,
).toBe(data.length);
});
});
describe('generateSeries', () => {
it('utilizes correct time data', () => {
expect(areaChart.vm.generateSeries.data).toEqual([
['2019-02-28T11:11:38.756Z', 0],
['2019-02-28T11:12:38.756Z', 0],
]);
});
});
describe('xAxisLabel', () => {
it('constructs a label for the chart x-axis', () => {
expect(areaChart.vm.xAxisLabel).toBe('invocations / minute');
});
});
describe('yAxisLabel', () => {
it('constructs a label for the chart y-axis', () => {
expect(areaChart.vm.yAxisLabel).toBe('Invocations (requests)');
});
});
});
});