diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-14 21:10:59 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-14 21:10:59 +0300 |
commit | ea3306a15e945e694afba62dc93b17500ffaec7f (patch) | |
tree | aa444f7fe503e5650bfdb6500ed428b4619ff37b /spec/frontend/projects/pipelines/charts | |
parent | 8106ac487c3b52471e2ca894c65c13162c2fb1a8 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/projects/pipelines/charts')
3 files changed, 134 insertions, 80 deletions
diff --git a/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js b/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js index 99d0e910485..23f37073a0f 100644 --- a/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js @@ -1,8 +1,6 @@ import { shallowMount } from '@vue/test-utils'; -import { GlColumnChart } from '@gitlab/ui/dist/charts'; import Component from '~/projects/pipelines/charts/components/app_legacy.vue'; -import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue'; -import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue'; +import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue'; import { counts, timesChartData, @@ -38,41 +36,17 @@ describe('ProjectsPipelinesChartsApp', () => { wrapper = null; }); - describe('overall statistics', () => { - it('displays the statistics list', () => { - const list = wrapper.find(StatisticsList); - - expect(list.exists()).toBeTruthy(); - expect(list.props('counts')).toBe(counts); - }); - - it('displays the commit duration chart', () => { - const chart = wrapper.find(GlColumnChart); - - expect(chart.exists()).toBeTruthy(); - 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); - }); - }); - describe('pipelines charts', () => { - it('displays 3 area charts', () => { - expect(wrapper.findAll(CiCdAnalyticsAreaChart).length).toBe(3); - }); - - describe('displays individual correctly', () => { - it('renders with the correct data', () => { - const charts = wrapper.findAll(CiCdAnalyticsAreaChart); + it('displays the pipeline charts', () => { + const chart = wrapper.find(PipelineCharts); - for (let i = 0; i < charts.length; i += 1) { - const chart = charts.at(i); - - expect(chart.exists()).toBeTruthy(); - expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data); - expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title); - } + expect(chart.exists()).toBe(true); + expect(chart.props()).toMatchObject({ + counts, + lastWeek: lastWeekChartData, + lastMonth: lastMonthChartData, + lastYear: lastYearChartData, + timesChart: timesChartData, }); }); }); diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js index 1313a549f02..e1f84d7bf01 100644 --- a/spec/frontend/projects/pipelines/charts/components/app_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js @@ -1,11 +1,10 @@ import { merge } from 'lodash'; import { createLocalVue, shallowMount } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; +import { GlTabs, GlTab } from '@gitlab/ui'; import createMockApollo from 'jest/helpers/mock_apollo_helper'; -import { GlColumnChart } from '@gitlab/ui/dist/charts'; import Component from '~/projects/pipelines/charts/components/app.vue'; -import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue'; -import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_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'; @@ -58,60 +57,62 @@ 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, - }); - }); - - it('displays the commit duration chart', () => { - const chart = wrapper.find(GlColumnChart); - - 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); - }); - }); - describe('pipelines charts', () => { - it('displays 3 area charts', () => { - expect(wrapper.findAll(CiCdAnalyticsAreaChart)).toHaveLength(3); - }); - - describe('displays individual correctly', () => { - it('renders with the correct data', () => { - const charts = wrapper.findAll(CiCdAnalyticsAreaChart); + it('displays the pipeline charts', () => { + const chart = wrapper.find(PipelineCharts); + const analytics = mockPipelineStatistics.data.project.pipelineAnalytics; - for (let i = 0; i < charts.length; i += 1) { - const chart = charts.at(i); + const { + totalPipelines: total, + successfulPipelines: success, + failedPipelines: failed, + } = mockPipelineCount.data.project; - 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); - } + expect(chart.exists()).toBe(true); + 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, + }, }); }); }); 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 } }); }); - it('renders the deployment frequency charts', () => { + 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); }); }); @@ -121,7 +122,8 @@ describe('ProjectsPipelinesChartsApp', () => { createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: false } }); }); - it('does not render the deployment frequency charts', () => { + it('does not render the deployment frequency charts in a tab', () => { + expect(findGlTabs().exists()).toBe(false); expect(findDeploymentFrequencyCharts().exists()).toBe(false); }); }); diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js new file mode 100644 index 00000000000..598055d5828 --- /dev/null +++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js @@ -0,0 +1,78 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlColumnChart } from '@gitlab/ui/dist/charts'; +import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue'; +import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue'; +import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue'; +import { + counts, + timesChartData as timesChart, + areaChartData as lastWeek, + areaChartData as lastMonth, + lastYearChartData as lastYear, +} from '../mock_data'; + +describe('ProjectsPipelinesChartsApp', () => { + let wrapper; + + beforeEach(() => { + wrapper = shallowMount(PipelineCharts, { + propsData: { + counts, + timesChart, + lastWeek, + lastMonth, + lastYear, + }, + provide: { + projectPath: 'test/project', + shouldRenderDeploymentFrequencyCharts: true, + }, + stubs: { + DeploymentFrequencyCharts: true, + }, + }); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('overall statistics', () => { + it('displays the statistics list', () => { + const list = wrapper.find(StatisticsList); + + expect(list.exists()).toBe(true); + expect(list.props('counts')).toBe(counts); + }); + + it('displays the commit duration chart', () => { + const chart = wrapper.find(GlColumnChart); + + expect(chart.exists()).toBeTruthy(); + 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); + }); + }); + + describe('pipelines charts', () => { + it('displays 3 area charts', () => { + expect(wrapper.findAll(CiCdAnalyticsAreaChart)).toHaveLength(3); + }); + + describe('displays individual correctly', () => { + it('renders with the correct data', () => { + const charts = wrapper.findAll(CiCdAnalyticsAreaChart); + for (let i = 0; i < charts.length; i += 1) { + const chart = charts.at(i); + + expect(chart.exists()).toBeTruthy(); + expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data); + expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title); + } + }); + }); + }); +}); |