diff options
Diffstat (limited to 'spec/frontend/pipelines/components/pipeline_tabs_spec.js')
-rw-r--r-- | spec/frontend/pipelines/components/pipeline_tabs_spec.js | 46 |
1 files changed, 36 insertions, 10 deletions
diff --git a/spec/frontend/pipelines/components/pipeline_tabs_spec.js b/spec/frontend/pipelines/components/pipeline_tabs_spec.js index 89002ee47a8..e0210307823 100644 --- a/spec/frontend/pipelines/components/pipeline_tabs_spec.js +++ b/spec/frontend/pipelines/components/pipeline_tabs_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import { GlTab } from '@gitlab/ui'; 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'; @@ -21,35 +22,35 @@ describe('The Pipeline Tabs', () => { const findPipelineApp = () => wrapper.findComponent(PipelineGraphWrapper); const findTestsApp = () => wrapper.findComponent(TestReports); + const findFailedJobsBadge = () => wrapper.findByTestId('failed-builds-counter'); + const findJobsBadge = () => wrapper.findByTestId('builds-counter'); + const defaultProvide = { defaultTabValue: '', + failedJobsCount: 1, + failedJobsSummary: [], + totalJobCount: 10, }; - const createComponent = (propsData = {}) => { + const createComponent = (provide = {}) => { wrapper = extendedWrapper( shallowMount(PipelineTabs, { - propsData, provide: { ...defaultProvide, + ...provide, }, stubs: { - JobsApp: { template: '<div class="jobs" />' }, + GlTab, 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 @@ -58,9 +59,34 @@ describe('The Pipeline Tabs', () => { ${'Jobs'} | ${findJobsTab} | ${findJobsApp} ${'Failed Jobs'} | ${findFailedJobsTab} | ${findFailedJobsApp} ${'Tests'} | ${findTestsTab} | ${findTestsApp} - `('shows $tabName tab and its associated component', ({ appComponent, tabComponent }) => { + `('shows $tabName tab with its associated component', ({ appComponent, tabComponent }) => { + createComponent(); + expect(tabComponent().exists()).toBe(true); expect(appComponent().exists()).toBe(true); }); + + describe('with no failed jobs', () => { + beforeEach(() => { + createComponent({ failedJobsCount: 0 }); + }); + + it('hides the failed jobs tab', () => { + expect(findFailedJobsTab().exists()).toBe(false); + }); + }); + }); + + describe('Tabs badges', () => { + it.each` + tabName | badgeComponent | badgeText + ${'Jobs'} | ${findJobsBadge} | ${String(defaultProvide.totalJobCount)} + ${'Failed Jobs'} | ${findFailedJobsBadge} | ${String(defaultProvide.failedJobsCount)} + `('shows badge for $tabName with the correct text', ({ badgeComponent, badgeText }) => { + createComponent(); + + expect(badgeComponent().exists()).toBe(true); + expect(badgeComponent().text()).toBe(badgeText); + }); }); }); |