Commit 9a6f5546 authored by Jackie Fraser's avatar Jackie Fraser

Send event for popover dismiss on pipeline nudge 3

There are two clicks tracked on this step of the nudge. The
first click is on the Vue component. The other click is outside
of this component.
parent 006814da
...@@ -23,6 +23,8 @@ const popoverStates = { ...@@ -23,6 +23,8 @@ const popoverStates = {
}, },
}; };
export default { export default {
dismissTrackValue: 10,
clickTrackValue: 'click_button',
components: { components: {
GlPopover, GlPopover,
GlSprintf, GlSprintf,
...@@ -109,7 +111,16 @@ export default { ...@@ -109,7 +111,16 @@ export default {
<template #title> <template #title>
<span v-html="suggestTitle"></span> <span v-html="suggestTitle"></span>
<span class="ml-auto"> <span class="ml-auto">
<gl-deprecated-button :aria-label="__('Close')" class="btn-blank" @click="onDismiss"> <gl-deprecated-button
:aria-label="__('Close')"
class="btn-blank"
name="dismiss"
:data-track-property="humanAccess"
:data-track-value="$options.dismissTrackValue"
:data-track-event="$options.clickTrackValue"
:data-track-label="trackLabel"
@click="onDismiss"
>
<gl-icon name="close" aria-hidden="true" /> <gl-icon name="close" aria-hidden="true" />
</gl-deprecated-button> </gl-deprecated-button>
</span> </span>
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue'; import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue';
import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
import * as utils from '~/lib/utils/common_utils'; import * as utils from '~/lib/utils/common_utils';
import { GlDeprecatedButton } from '@gitlab/ui';
jest.mock('~/lib/utils/common_utils', () => ({ jest.mock('~/lib/utils/common_utils', () => ({
...jest.requireActual('~/lib/utils/common_utils'), ...jest.requireActual('~/lib/utils/common_utils'),
...@@ -27,6 +28,9 @@ describe('Suggest gitlab-ci.yml Popover', () => { ...@@ -27,6 +28,9 @@ describe('Suggest gitlab-ci.yml Popover', () => {
dismissKey, dismissKey,
humanAccess, humanAccess,
}, },
stubs: {
'gl-popover': '<div><slot name="title"></slot><slot></slot></div>',
},
}); });
} }
...@@ -88,6 +92,22 @@ describe('Suggest gitlab-ci.yml Popover', () => { ...@@ -88,6 +92,22 @@ describe('Suggest gitlab-ci.yml Popover', () => {
property: expectedProperty, property: expectedProperty,
}); });
}); });
it('sends a tracking event when the popover is dismissed', () => {
const expectedLabel = commitTrackLabel;
const expectedAction = 'click_button';
const expectedProperty = 'owner';
const expectedValue = '10';
const dismissButton = wrapper.find(GlDeprecatedButton);
triggerEvent(dismissButton.element);
expect(trackingSpy).toHaveBeenCalledWith('_category_', expectedAction, {
label: expectedLabel,
property: expectedProperty,
value: expectedValue,
});
});
}); });
describe('when the popover is mounted with the trackLabel of the Confirm button popover at the bottom of the page', () => { describe('when the popover is mounted with the trackLabel of the Confirm button popover at the bottom of the page', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment