diff options
Diffstat (limited to 'spec/frontend/projects/pipelines/charts/components/app_spec.js')
-rw-r--r-- | spec/frontend/projects/pipelines/charts/components/app_spec.js | 134 |
1 files changed, 84 insertions, 50 deletions
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js index f8737dda5f6..44329944097 100644 --- a/spec/frontend/projects/pipelines/charts/components/app_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js @@ -1,10 +1,10 @@ +import { merge } from 'lodash'; import { createLocalVue, shallowMount } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; -import createMockApollo from 'jest/helpers/mock_apollo_helper'; -import { GlColumnChart } from '@gitlab/ui/dist/charts'; +import { GlTabs, GlTab } from '@gitlab/ui'; +import createMockApollo from 'helpers/mock_apollo_helper'; import Component from '~/projects/pipelines/charts/components/app.vue'; -import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue'; -import PipelinesAreaChart from '~/projects/pipelines/charts/components/pipelines_area_chart.vue'; +import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue'; import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql'; import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql'; import { mockPipelineCount, mockPipelineStatistics } from '../mock_data'; @@ -13,6 +13,8 @@ const projectPath = 'gitlab-org/gitlab'; const localVue = createLocalVue(); localVue.use(VueApollo); +const DeploymentFrequencyChartsStub = { name: 'DeploymentFrequencyCharts', render: () => {} }; + describe('ProjectsPipelinesChartsApp', () => { let wrapper; @@ -25,21 +27,29 @@ describe('ProjectsPipelinesChartsApp', () => { return createMockApollo(requestHandlers); } - function createComponent(options = {}) { - const { fakeApollo } = options; - - return shallowMount(Component, { - provide: { - projectPath, - }, - localVue, - apolloProvider: fakeApollo, - }); + function createComponent(mountOptions = {}) { + wrapper = shallowMount( + Component, + merge( + {}, + { + provide: { + projectPath, + shouldRenderDeploymentFrequencyCharts: false, + }, + localVue, + apolloProvider: createMockApolloProvider(), + stubs: { + DeploymentFrequencyCharts: DeploymentFrequencyChartsStub, + }, + }, + mountOptions, + ), + ); } beforeEach(() => { - const fakeApollo = createMockApolloProvider(); - wrapper = createComponent({ fakeApollo }); + createComponent(); }); afterEach(() => { @@ -47,50 +57,74 @@ describe('ProjectsPipelinesChartsApp', () => { wrapper = null; }); - describe('overall statistics', () => { - it('displays the statistics list', () => { - const list = wrapper.find(StatisticsList); - - expect(list.exists()).toBe(true); - expect(list.props('counts')).toMatchObject({ - failed: 1, - success: 23, - total: 34, - successRatio: 95.83333333333334, - totalDuration: 2471, - }); - }); + describe('pipelines charts', () => { + it('displays the pipeline charts', () => { + const chart = wrapper.find(PipelineCharts); + const analytics = mockPipelineStatistics.data.project.pipelineAnalytics; - it('displays the commit duration chart', () => { - const chart = wrapper.find(GlColumnChart); + const { + totalPipelines: total, + successfulPipelines: success, + failedPipelines: failed, + } = mockPipelineCount.data.project; expect(chart.exists()).toBe(true); - expect(chart.props('yAxisTitle')).toBe('Minutes'); - expect(chart.props('xAxisTitle')).toBe('Commit'); - expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData); - expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions); + expect(chart.props()).toMatchObject({ + counts: { + failed: failed.count, + success: success.count, + total: total.count, + successRatio: (success.count / (success.count + failed.count)) * 100, + }, + lastWeek: { + labels: analytics.weekPipelinesLabels, + totals: analytics.weekPipelinesTotals, + success: analytics.weekPipelinesSuccessful, + }, + lastMonth: { + labels: analytics.monthPipelinesLabels, + totals: analytics.monthPipelinesTotals, + success: analytics.monthPipelinesSuccessful, + }, + lastYear: { + labels: analytics.yearPipelinesLabels, + totals: analytics.yearPipelinesTotals, + success: analytics.yearPipelinesSuccessful, + }, + timesChart: { + labels: analytics.pipelineTimesLabels, + values: analytics.pipelineTimesValues, + }, + }); }); }); - describe('pipelines charts', () => { - it('displays 3 area charts', () => { - expect(wrapper.findAll(PipelinesAreaChart)).toHaveLength(3); + const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub); + const findGlTabs = () => wrapper.find(GlTabs); + const findAllGlTab = () => wrapper.findAll(GlTab); + const findGlTabAt = (i) => findAllGlTab().at(i); + + describe('when shouldRenderDeploymentFrequencyCharts is true', () => { + beforeEach(() => { + createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } }); }); - describe('displays individual correctly', () => { - it('renders with the correct data', () => { - const charts = wrapper.findAll(PipelinesAreaChart); + it('renders the deployment frequency charts in a tab', () => { + expect(findGlTabs().exists()).toBe(true); + expect(findGlTabAt(0).attributes('title')).toBe('Pipelines'); + expect(findGlTabAt(1).attributes('title')).toBe('Deployments'); + expect(findDeploymentFrequencyCharts().exists()).toBe(true); + }); + }); - for (let i = 0; i < charts.length; i += 1) { - const chart = charts.at(i); + describe('when shouldRenderDeploymentFrequencyCharts is false', () => { + beforeEach(() => { + createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: false } }); + }); - expect(chart.exists()).toBe(true); - // TODO: Refactor this to use the mocked data instead of the vm data - // https://gitlab.com/gitlab-org/gitlab/-/issues/292085 - expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data); - expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title); - } - }); + it('does not render the deployment frequency charts in a tab', () => { + expect(findGlTabs().exists()).toBe(false); + expect(findDeploymentFrequencyCharts().exists()).toBe(false); }); }); }); |