diff options
Diffstat (limited to 'spec/frontend/pipelines/components/pipeline_tabs_spec.js')
-rw-r--r-- | spec/frontend/pipelines/components/pipeline_tabs_spec.js | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/spec/frontend/pipelines/components/pipeline_tabs_spec.js b/spec/frontend/pipelines/components/pipeline_tabs_spec.js new file mode 100644 index 00000000000..e18c3edbad9 --- /dev/null +++ b/spec/frontend/pipelines/components/pipeline_tabs_spec.js @@ -0,0 +1,61 @@ +import { shallowMount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import PipelineTabs from '~/pipelines/components/pipeline_tabs.vue'; +import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_wrapper.vue'; +import Dag from '~/pipelines/components/dag/dag.vue'; +import JobsApp from '~/pipelines/components/jobs/jobs_app.vue'; +import TestReports from '~/pipelines/components/test_reports/test_reports.vue'; + +describe('The Pipeline Tabs', () => { + let wrapper; + + const findDagTab = () => wrapper.findByTestId('dag-tab'); + const findFailedJobsTab = () => wrapper.findByTestId('failed-jobs-tab'); + const findJobsTab = () => wrapper.findByTestId('jobs-tab'); + const findPipelineTab = () => wrapper.findByTestId('pipeline-tab'); + const findTestsTab = () => wrapper.findByTestId('tests-tab'); + + const findDagApp = () => wrapper.findComponent(Dag); + const findFailedJobsApp = () => wrapper.findComponent(JobsApp); + const findJobsApp = () => wrapper.findComponent(JobsApp); + const findPipelineApp = () => wrapper.findComponent(PipelineGraphWrapper); + const findTestsApp = () => wrapper.findComponent(TestReports); + + const createComponent = (propsData = {}) => { + wrapper = extendedWrapper( + shallowMount(PipelineTabs, { + propsData, + stubs: { + Dag: { template: '<div id="dag"/>' }, + JobsApp: { template: '<div class="jobs" />' }, + PipelineGraph: { template: '<div id="graph" />' }, + TestReports: { template: '<div id="tests" />' }, + }, + }), + ); + }; + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + // The failed jobs MUST be removed from here and tested individually once + // the logic for the tab is implemented. + describe('Tabs', () => { + it.each` + tabName | tabComponent | appComponent + ${'Pipeline'} | ${findPipelineTab} | ${findPipelineApp} + ${'Dag'} | ${findDagTab} | ${findDagApp} + ${'Jobs'} | ${findJobsTab} | ${findJobsApp} + ${'Failed Jobs'} | ${findFailedJobsTab} | ${findFailedJobsApp} + ${'Tests'} | ${findTestsTab} | ${findTestsApp} + `('shows $tabName tab and its associated component', ({ appComponent, tabComponent }) => { + expect(tabComponent().exists()).toBe(true); + expect(appComponent().exists()).toBe(true); + }); + }); +}); |