diff options
Diffstat (limited to 'spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js')
-rw-r--r-- | spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js new file mode 100644 index 00000000000..037530ddd48 --- /dev/null +++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js @@ -0,0 +1,94 @@ +import { GlSegmentedControl } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue'; +import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.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('~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue', () => { + let wrapper; + + const createWrapper = (props = {}) => + shallowMount(CiCdAnalyticsCharts, { + propsData: { + ...DEFAULT_PROPS, + ...props, + }, + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + describe('segmented control', () => { + let segmentedControl; + + beforeEach(() => { + wrapper = createWrapper(); + segmentedControl = wrapper.find(GlSegmentedControl); + }); + + it('should default to the first chart', () => { + expect(segmentedControl.props('checked')).toBe(0); + }); + + it('should use the title and index as values', () => { + const options = segmentedControl.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 () => { + segmentedControl.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); + }); +}); |