118 lines
3.1 KiB
JavaScript
118 lines
3.1 KiB
JavaScript
import { nextTick } from 'vue';
|
|
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
|
|
import CiCdAnalyticsAreaChart from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue';
|
|
import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
|
|
import SegmentedControlButtonGroup from '~/vue_shared/components/segmented_control_button_group.vue';
|
|
import { transformedAreaChartData, chartOptions } from '../mock_data';
|
|
|
|
const DEFAULT_PROPS = {
|
|
chartOptions,
|
|
charts: [
|
|
{
|
|
range: 'test range 1',
|
|
title: 'title 1',
|
|
data: transformedAreaChartData,
|
|
},
|
|
{
|
|
range: 'test range 2',
|
|
title: 'title 2',
|
|
data: transformedAreaChartData,
|
|
},
|
|
{
|
|
range: 'test range 3',
|
|
title: 'title 3',
|
|
data: transformedAreaChartData,
|
|
},
|
|
],
|
|
};
|
|
|
|
describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', () => {
|
|
let wrapper;
|
|
|
|
const createWrapper = (props = {}, slots = {}) =>
|
|
shallowMountExtended(CiCdAnalyticsCharts, {
|
|
propsData: {
|
|
...DEFAULT_PROPS,
|
|
...props,
|
|
},
|
|
scopedSlots: {
|
|
...slots,
|
|
},
|
|
});
|
|
|
|
afterEach(() => {
|
|
if (wrapper) {
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
}
|
|
});
|
|
|
|
const findMetricsSlot = () => wrapper.findByTestId('metrics-slot');
|
|
const findSegmentedControl = () => wrapper.findComponent(SegmentedControlButtonGroup);
|
|
|
|
describe('segmented control', () => {
|
|
beforeEach(() => {
|
|
wrapper = createWrapper();
|
|
});
|
|
|
|
it('should default to the first chart', () => {
|
|
expect(findSegmentedControl().props('value')).toBe(0);
|
|
});
|
|
|
|
it('should use the title and index as values', () => {
|
|
const options = findSegmentedControl().props('options');
|
|
expect(options).toHaveLength(3);
|
|
expect(options).toEqual([
|
|
{
|
|
text: 'title 1',
|
|
value: 0,
|
|
},
|
|
{
|
|
text: 'title 2',
|
|
value: 1,
|
|
},
|
|
{
|
|
text: 'title 3',
|
|
value: 2,
|
|
},
|
|
]);
|
|
});
|
|
|
|
it('should select a different chart on change', async () => {
|
|
findSegmentedControl().vm.$emit('input', 1);
|
|
|
|
const chart = wrapper.find(CiCdAnalyticsAreaChart);
|
|
|
|
await nextTick();
|
|
|
|
expect(chart.props('chartData')).toEqual(transformedAreaChartData);
|
|
expect(chart.text()).toBe('Date range: test range 2');
|
|
});
|
|
});
|
|
|
|
it('should not display charts if there are no charts', () => {
|
|
wrapper = createWrapper({ charts: [] });
|
|
expect(wrapper.find(CiCdAnalyticsAreaChart).exists()).toBe(false);
|
|
});
|
|
|
|
describe('slots', () => {
|
|
beforeEach(() => {
|
|
wrapper = createWrapper(
|
|
{},
|
|
{
|
|
metrics: '<div data-testid="metrics-slot">selected chart: {{props.selectedChart}}</div>',
|
|
},
|
|
);
|
|
});
|
|
|
|
it('renders a metrics slot', async () => {
|
|
const selectedChart = 1;
|
|
findSegmentedControl().vm.$emit('input', selectedChart);
|
|
|
|
await nextTick();
|
|
|
|
expect(findMetricsSlot().text()).toBe(`selected chart: ${selectedChart}`);
|
|
});
|
|
});
|
|
});
|