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 | 43 |
1 files changed, 33 insertions, 10 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 index 9adc6dba51e..cafb3f231bd 100644 --- 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 @@ -1,6 +1,6 @@ -import { GlSegmentedControl } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; +import { GlSegmentedControl } from '@gitlab/ui'; +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 { transformedAreaChartData, chartOptions } from '../mock_data'; @@ -29,12 +29,15 @@ const DEFAULT_PROPS = { describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', () => { let wrapper; - const createWrapper = (props = {}) => - shallowMount(CiCdAnalyticsCharts, { + const createWrapper = (props = {}, slots = {}) => + shallowMountExtended(CiCdAnalyticsCharts, { propsData: { ...DEFAULT_PROPS, ...props, }, + scopedSlots: { + ...slots, + }, }); afterEach(() => { @@ -44,20 +47,20 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', ( } }); - describe('segmented control', () => { - let segmentedControl; + const findMetricsSlot = () => wrapper.findByTestId('metrics-slot'); + const findSegmentedControl = () => wrapper.findComponent(GlSegmentedControl); + describe('segmented control', () => { beforeEach(() => { wrapper = createWrapper(); - segmentedControl = wrapper.find(GlSegmentedControl); }); it('should default to the first chart', () => { - expect(segmentedControl.props('checked')).toBe(0); + expect(findSegmentedControl().props('checked')).toBe(0); }); it('should use the title and index as values', () => { - const options = segmentedControl.props('options'); + const options = findSegmentedControl().props('options'); expect(options).toHaveLength(3); expect(options).toEqual([ { @@ -76,7 +79,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', ( }); it('should select a different chart on change', async () => { - segmentedControl.vm.$emit('input', 1); + findSegmentedControl().vm.$emit('input', 1); const chart = wrapper.find(CiCdAnalyticsAreaChart); @@ -91,4 +94,24 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', ( 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}`); + }); + }); }); |