diff options
Diffstat (limited to 'spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js')
-rw-r--r-- | spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js | 86 |
1 files changed, 64 insertions, 22 deletions
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js index 8b0253dc01a..d6c996f7501 100644 --- a/spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js +++ b/spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js @@ -1,37 +1,44 @@ import { mount } from '@vue/test-utils'; -import { GlLink } from '@gitlab/ui'; +import { GlLink, GlSprintf } from '@gitlab/ui'; import suggestPipelineComponent from '~/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue'; -import stubChildren from 'helpers/stub_children'; -import PipelineTourState from '~/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue'; import MrWidgetIcon from '~/vue_merge_request_widget/components/mr_widget_icon.vue'; import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper'; +import { popoverProps, iconName } from './pipeline_tour_mock_data'; -describe('MRWidgetHeader', () => { +describe('MRWidgetSuggestPipeline', () => { let wrapper; - const pipelinePath = '/foo/bar/add/pipeline/path'; - const pipelineSvgPath = '/foo/bar/pipeline/svg/path'; - const humanAccess = 'maintainer'; - const iconName = 'status_notfound'; + let trackingSpy; + + const mockTrackingOnWrapper = () => { + unmockTracking(); + trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn); + }; beforeEach(() => { + document.body.dataset.page = 'projects:merge_requests:show'; + trackingSpy = mockTracking('_category_', undefined, jest.spyOn); + wrapper = mount(suggestPipelineComponent, { - propsData: { pipelinePath, pipelineSvgPath, humanAccess }, + propsData: popoverProps, stubs: { - ...stubChildren(PipelineTourState), + GlSprintf, }, }); }); afterEach(() => { wrapper.destroy(); + unmockTracking(); }); describe('template', () => { + const findOkBtn = () => wrapper.find('[data-testid="ok"]'); + it('renders add pipeline file link', () => { const link = wrapper.find(GlLink); expect(link.exists()).toBe(true); - expect(link.attributes().href).toBe(pipelinePath); + expect(link.attributes().href).toBe(popoverProps.pipelinePath); }); it('renders the expected text', () => { @@ -51,25 +58,60 @@ describe('MRWidgetHeader', () => { ); }); + it('renders the show me how button', () => { + const button = findOkBtn(); + + expect(button.exists()).toBe(true); + expect(button.classes('btn-info')).toEqual(true); + expect(button.attributes('href')).toBe(popoverProps.pipelinePath); + }); + + it('renders the help link', () => { + const link = wrapper.find('[data-testid="help"]'); + + expect(link.exists()).toBe(true); + expect(link.attributes('href')).toBe(wrapper.vm.$options.helpURL); + }); + + it('renders the empty pipelines image', () => { + const image = wrapper.find('[data-testid="pipeline-image"]'); + + expect(image.exists()).toBe(true); + expect(image.attributes().src).toBe(popoverProps.pipelineSvgPath); + }); + describe('tracking', () => { - let spy; + it('send event for basic view of the suggest pipeline widget', () => { + const expectedCategory = undefined; + const expectedAction = undefined; - beforeEach(() => { - spy = mockTracking('_category_', wrapper.element, jest.spyOn); + expect(trackingSpy).toHaveBeenCalledWith(expectedCategory, expectedAction, { + label: wrapper.vm.$options.trackLabel, + property: popoverProps.humanAccess, + }); }); - afterEach(() => { - unmockTracking(); + it('send an event when add pipeline link is clicked', () => { + mockTrackingOnWrapper(); + const link = wrapper.find('[data-testid="add-pipeline-link"]'); + triggerEvent(link.element); + + expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_link', { + label: wrapper.vm.$options.trackLabel, + property: popoverProps.humanAccess, + value: '30', + }); }); it('send an event when ok button is clicked', () => { - const link = wrapper.find(GlLink); - triggerEvent(link.element); + mockTrackingOnWrapper(); + const okBtn = findOkBtn(); + triggerEvent(okBtn.element); - expect(spy).toHaveBeenCalledWith('_category_', 'click_link', { - label: 'no_pipeline_noticed', - property: humanAccess, - value: '30', + expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_button', { + label: wrapper.vm.$options.trackLabel, + property: popoverProps.humanAccess, + value: '10', }); }); }); |