130 lines
4.3 KiB
JavaScript
130 lines
4.3 KiB
JavaScript
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 'helpers/mock_apollo_helper';
|
|
import Component from '~/projects/pipelines/charts/components/app.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';
|
|
|
|
const projectPath = 'gitlab-org/gitlab';
|
|
const localVue = createLocalVue();
|
|
localVue.use(VueApollo);
|
|
|
|
const DeploymentFrequencyChartsStub = { name: 'DeploymentFrequencyCharts', render: () => {} };
|
|
|
|
describe('ProjectsPipelinesChartsApp', () => {
|
|
let wrapper;
|
|
|
|
function createMockApolloProvider() {
|
|
const requestHandlers = [
|
|
[getPipelineCountByStatus, jest.fn().mockResolvedValue(mockPipelineCount)],
|
|
[getProjectPipelineStatistics, jest.fn().mockResolvedValue(mockPipelineStatistics)],
|
|
];
|
|
|
|
return createMockApollo(requestHandlers);
|
|
}
|
|
|
|
function createComponent(mountOptions = {}) {
|
|
wrapper = shallowMount(
|
|
Component,
|
|
merge(
|
|
{},
|
|
{
|
|
provide: {
|
|
projectPath,
|
|
shouldRenderDeploymentFrequencyCharts: false,
|
|
},
|
|
localVue,
|
|
apolloProvider: createMockApolloProvider(),
|
|
stubs: {
|
|
DeploymentFrequencyCharts: DeploymentFrequencyChartsStub,
|
|
},
|
|
},
|
|
mountOptions,
|
|
),
|
|
);
|
|
}
|
|
|
|
beforeEach(() => {
|
|
createComponent();
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
});
|
|
|
|
describe('pipelines charts', () => {
|
|
it('displays the pipeline charts', () => {
|
|
const chart = wrapper.find(PipelineCharts);
|
|
const analytics = mockPipelineStatistics.data.project.pipelineAnalytics;
|
|
|
|
const {
|
|
totalPipelines: total,
|
|
successfulPipelines: success,
|
|
failedPipelines: failed,
|
|
} = mockPipelineCount.data.project;
|
|
|
|
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 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);
|
|
});
|
|
});
|
|
|
|
describe('when shouldRenderDeploymentFrequencyCharts is false', () => {
|
|
beforeEach(() => {
|
|
createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: false } });
|
|
});
|
|
|
|
it('does not render the deployment frequency charts in a tab', () => {
|
|
expect(findGlTabs().exists()).toBe(false);
|
|
expect(findDeploymentFrequencyCharts().exists()).toBe(false);
|
|
});
|
|
});
|
|
});
|