diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/web_ide_link_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/web_ide_link_spec.js | 65 |
1 files changed, 47 insertions, 18 deletions
diff --git a/spec/frontend/vue_shared/components/web_ide_link_spec.js b/spec/frontend/vue_shared/components/web_ide_link_spec.js index 063f1d793ef..56d89d428f7 100644 --- a/spec/frontend/vue_shared/components/web_ide_link_spec.js +++ b/spec/frontend/vue_shared/components/web_ide_link_spec.js @@ -1,4 +1,5 @@ import { GlModal, GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui'; +import { omit } from 'lodash'; import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; @@ -6,13 +7,14 @@ import getWritableForksResponse from 'test_fixtures/graphql/vue_shared/component import WebIdeLink, { i18n } from '~/vue_shared/components/web_ide_link.vue'; import ConfirmForkModal from '~/vue_shared/components/web_ide/confirm_fork_modal.vue'; +import createMockApollo from 'helpers/mock_apollo_helper'; import { stubComponent } from 'helpers/stub_component'; +import { mockTracking } from 'helpers/tracking_helper'; import { shallowMountExtended, mountExtended, extendedWrapper, } from 'helpers/vue_test_utils_helper'; -import createMockApollo from 'helpers/mock_apollo_helper'; import { visitUrl } from '~/lib/utils/url_utility'; import getWritableForksQuery from '~/vue_shared/components/web_ide/get_writable_forks.query.graphql'; @@ -34,8 +36,10 @@ const ACTION_EDIT = { secondaryText: 'Edit this file only.', attrs: { 'data-qa-selector': 'edit_menu_item', - 'data-track-action': 'click_consolidated_edit', - 'data-track-label': 'edit', + }, + tracking: { + action: 'click_consolidated_edit', + label: 'single_file', }, }; const ACTION_EDIT_CONFIRM_FORK = { @@ -48,11 +52,13 @@ const ACTION_WEB_IDE = { text: 'Web IDE', attrs: { 'data-qa-selector': 'webide_menu_item', - 'data-track-action': 'click_consolidated_edit_ide', - 'data-track-label': 'web_ide', }, href: undefined, handle: expect.any(Function), + tracking: { + action: 'click_consolidated_edit', + label: 'web_ide', + }, }; const ACTION_WEB_IDE_CONFIRM_FORK = { ...ACTION_WEB_IDE, @@ -67,6 +73,10 @@ const ACTION_GITPOD = { attrs: { 'data-qa-selector': 'gitpod_menu_item', }, + tracking: { + action: 'click_consolidated_edit', + label: 'gitpod', + }, }; const ACTION_GITPOD_ENABLE = { ...ACTION_GITPOD, @@ -79,8 +89,10 @@ const ACTION_PIPELINE_EDITOR = { text: 'Edit in pipeline editor', attrs: { 'data-qa-selector': 'pipeline_editor_menu_item', - 'data-track-action': 'click_consolidated_pipeline_editor', - 'data-track-label': 'pipeline_editor', + }, + tracking: { + action: 'click_consolidated_edit', + label: 'pipeline_editor', }, }; @@ -88,6 +100,7 @@ describe('vue_shared/components/web_ide_link', () => { Vue.use(VueApollo); let wrapper; + let trackingSpy; function createComponent(props, { mountFn = shallowMountExtended, slots = {} } = {}) { const fakeApollo = createMockApollo([ @@ -116,6 +129,8 @@ describe('vue_shared/components/web_ide_link', () => { }, apolloProvider: fakeApollo, }); + + trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); } const findDisclosureDropdown = () => wrapper.findComponent(GlDisclosureDropdown); @@ -135,13 +150,12 @@ describe('vue_shared/components/web_ide_link', () => { handle: props.item.handle, attrs: { 'data-qa-selector': attributes['data-qa-selector'], - 'data-track-action': attributes['data-track-action'], - 'data-track-label': attributes['data-track-label'], }, }; }); + const omitTrackingParams = (actions) => actions.map((action) => omit(action, 'tracking')); - it.each([ + describe.each([ { props: {}, expectedActions: [ACTION_WEB_IDE, ACTION_EDIT], @@ -231,10 +245,27 @@ describe('vue_shared/components/web_ide_link', () => { props: { showEditButton: false }, expectedActions: [ACTION_WEB_IDE], }, - ])('renders actions with appropriately for given props', ({ props, expectedActions }) => { - createComponent(props); + ])('for a set of props', ({ props, expectedActions }) => { + beforeEach(() => { + createComponent(props); + }); + + it('renders the appropiate actions', () => { + // omit tracking property because it is not included in the dropdown item + expect(getDropdownItemsAsData()).toEqual(omitTrackingParams(expectedActions)); + }); + + describe('when an action is clicked', () => { + it('tracks event', () => { + expectedActions.forEach((action, index) => { + findDisclosureDropdownItems().at(index).vm.$emit('action'); - expect(getDropdownItemsAsData()).toEqual(expectedActions); + expect(trackingSpy).toHaveBeenCalledWith(undefined, action.tracking.action, { + label: action.tracking.label, + }); + }); + }); + }); }); it('bubbles up shown and hidden events triggered by actions button component', () => { @@ -272,11 +303,9 @@ describe('vue_shared/components/web_ide_link', () => { }); it('displays Pipeline Editor as the first action', () => { - expect(getDropdownItemsAsData()).toEqual([ - ACTION_PIPELINE_EDITOR, - ACTION_WEB_IDE, - ACTION_GITPOD, - ]); + expect(getDropdownItemsAsData()).toEqual( + omitTrackingParams([ACTION_PIPELINE_EDITOR, ACTION_WEB_IDE, ACTION_GITPOD]), + ); }); it('when web ide button is clicked it opens in a new tab', async () => { |