diff options
Diffstat (limited to 'spec/frontend/projects/pipelines/charts/components')
3 files changed, 44 insertions, 18 deletions
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js index 574756322c7..9c94925c817 100644 --- a/spec/frontend/projects/pipelines/charts/components/app_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js @@ -1,5 +1,6 @@ import { GlTabs, GlTab } from '@gitlab/ui'; import { merge } from 'lodash'; +import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import setWindowLocation from 'helpers/set_window_location_helper'; import { TEST_HOST } from 'helpers/test_constants'; @@ -99,7 +100,7 @@ describe('ProjectsPipelinesChartsApp', () => { tabs.vm.$emit('input', 1); - await wrapper.vm.$nextTick(); + await nextTick(); expect(tabs.attributes('value')).toBe('1'); }); @@ -115,7 +116,7 @@ describe('ProjectsPipelinesChartsApp', () => { tabs.vm.$emit('input', 0); - await wrapper.vm.$nextTick(); + await nextTick(); expect(updateHistory).not.toHaveBeenCalled(); }); @@ -183,7 +184,7 @@ describe('ProjectsPipelinesChartsApp', () => { popstateHandler(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findGlTabs().attributes('value')).toBe('1'); }); 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}`); + }); + }); }); diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js index 6ef49390c47..3c91b913e67 100644 --- a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js @@ -1,7 +1,9 @@ import { GlColumnChart } from '@gitlab/ui/dist/charts'; -import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue'; import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue'; import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql'; @@ -10,8 +12,7 @@ import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_a import { mockPipelineCount, mockPipelineStatistics } from '../mock_data'; const projectPath = 'gitlab-org/gitlab'; -const localVue = createLocalVue(); -localVue.use(VueApollo); +Vue.use(VueApollo); describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => { let wrapper; @@ -25,14 +26,15 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => { return createMockApollo(requestHandlers); } - beforeEach(() => { + beforeEach(async () => { wrapper = shallowMount(PipelineCharts, { provide: { projectPath, }, - localVue, apolloProvider: createMockApolloProvider(), }); + + await waitForPromises(); }); afterEach(() => { |