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 | 168 |
1 files changed, 103 insertions, 65 deletions
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js index 44329944097..e8aace14db4 100644 --- a/spec/frontend/projects/pipelines/charts/components/app_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js @@ -1,32 +1,19 @@ -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 { shallowMount } from '@vue/test-utils'; +import { merge } from 'lodash'; +import setWindowLocation from 'helpers/set_window_location_helper'; +import { TEST_HOST } from 'helpers/test_constants'; +import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility'; 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); +jest.mock('~/lib/utils/url_utility'); 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, @@ -34,11 +21,8 @@ describe('ProjectsPipelinesChartsApp', () => { {}, { provide: { - projectPath, shouldRenderDeploymentFrequencyCharts: false, }, - localVue, - apolloProvider: createMockApolloProvider(), stubs: { DeploymentFrequencyCharts: DeploymentFrequencyChartsStub, }, @@ -57,52 +41,15 @@ describe('ProjectsPipelinesChartsApp', () => { 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); + const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub); + const findPipelineCharts = () => wrapper.find(PipelineCharts); + + it('renders the pipeline charts', () => { + expect(findPipelineCharts().exists()).toBe(true); + }); describe('when shouldRenderDeploymentFrequencyCharts is true', () => { beforeEach(() => { @@ -115,6 +62,97 @@ describe('ProjectsPipelinesChartsApp', () => { expect(findGlTabAt(1).attributes('title')).toBe('Deployments'); expect(findDeploymentFrequencyCharts().exists()).toBe(true); }); + + it('sets the tab and url when a tab is clicked', async () => { + let chartsPath; + setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`); + + mergeUrlParams.mockImplementation(({ chart }, path) => { + expect(chart).toBe('deployments'); + expect(path).toBe(window.location.pathname); + chartsPath = `${path}?chart=${chart}`; + return chartsPath; + }); + + updateHistory.mockImplementation(({ url }) => { + expect(url).toBe(chartsPath); + }); + const tabs = findGlTabs(); + + expect(tabs.attributes('value')).toBe('0'); + + tabs.vm.$emit('input', 1); + + await wrapper.vm.$nextTick(); + + expect(tabs.attributes('value')).toBe('1'); + }); + + it('should not try to push history if the tab does not change', async () => { + setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`); + + mergeUrlParams.mockImplementation(({ chart }, path) => `${path}?chart=${chart}`); + + const tabs = findGlTabs(); + + expect(tabs.attributes('value')).toBe('0'); + + tabs.vm.$emit('input', 0); + + await wrapper.vm.$nextTick(); + + expect(updateHistory).not.toHaveBeenCalled(); + }); + }); + + describe('when provided with a query param', () => { + it.each` + chart | tab + ${'deployments'} | ${'1'} + ${'pipelines'} | ${'0'} + ${'fake'} | ${'0'} + ${''} | ${'0'} + `('shows the correct tab for URL parameter "$chart"', ({ chart, tab }) => { + setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts?chart=${chart}`); + getParameterValues.mockImplementation((name) => { + expect(name).toBe('chart'); + return chart ? [chart] : []; + }); + createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } }); + expect(findGlTabs().attributes('value')).toBe(tab); + }); + + it('should set the tab when the back button is clicked', async () => { + let popstateHandler; + + window.addEventListener = jest.fn(); + + window.addEventListener.mockImplementation((event, handler) => { + if (event === 'popstate') { + popstateHandler = handler; + } + }); + + getParameterValues.mockImplementation((name) => { + expect(name).toBe('chart'); + return []; + }); + + createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } }); + + expect(findGlTabs().attributes('value')).toBe('0'); + + getParameterValues.mockImplementationOnce((name) => { + expect(name).toBe('chart'); + return ['deployments']; + }); + + popstateHandler(); + + await wrapper.vm.$nextTick(); + + expect(findGlTabs().attributes('value')).toBe('1'); + }); }); describe('when shouldRenderDeploymentFrequencyCharts is false', () => { |