Commit 5ff4d045 authored by Nathan Friend's avatar Nathan Friend

Merge branch...

Merge branch '212325-track-the-adoption-and-usage-of-the-quick-setup-button-in-the-container-registry-ui' into 'master'

Add event tracking to Container registry quickstart

See merge request gitlab-org/gitlab!27990
parents 74587f63 36eaedcc
<script> <script>
import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui'; import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import Tracking from '~/tracking';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import { import {
QUICK_START, QUICK_START,
...@@ -19,6 +20,7 @@ export default { ...@@ -19,6 +20,7 @@ export default {
GlFormInputGroup, GlFormInputGroup,
ClipboardButton, ClipboardButton,
}, },
mixins: [Tracking.mixin({ label: 'quickstart_dropdown' })],
i18n: { i18n: {
dropdownTitle: QUICK_START, dropdownTitle: QUICK_START,
loginCommandLabel: LOGIN_COMMAND_LABEL, loginCommandLabel: LOGIN_COMMAND_LABEL,
...@@ -34,7 +36,13 @@ export default { ...@@ -34,7 +36,13 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-dropdown :text="$options.i18n.dropdownTitle" variant="primary" size="sm" right> <gl-dropdown
:text="$options.i18n.dropdownTitle"
variant="primary"
size="sm"
right
@shown="track('click_dropdown')"
>
<!-- This li is used as a container since gl-dropdown produces a root ul, this mimics the functionality exposed by b-dropdown-form --> <!-- This li is used as a container since gl-dropdown produces a root ul, this mimics the functionality exposed by b-dropdown-form -->
<li role="presentation" class="px-2 py-1 dropdown-menu-large"> <li role="presentation" class="px-2 py-1 dropdown-menu-large">
<form> <form>
...@@ -49,6 +57,7 @@ export default { ...@@ -49,6 +57,7 @@ export default {
class="border" class="border"
:text="dockerLoginCommand" :text="dockerLoginCommand"
:title="$options.i18n.copyLoginTitle" :title="$options.i18n.copyLoginTitle"
@click.native="track('click_copy_login')"
/> />
</template> </template>
</gl-form-input-group> </gl-form-input-group>
...@@ -65,6 +74,7 @@ export default { ...@@ -65,6 +74,7 @@ export default {
class="border" class="border"
:text="dockerBuildCommand" :text="dockerBuildCommand"
:title="$options.i18n.copyBuildTitle" :title="$options.i18n.copyBuildTitle"
@click.native="track('click_copy_build')"
/> />
</template> </template>
</gl-form-input-group> </gl-form-input-group>
...@@ -82,6 +92,7 @@ export default { ...@@ -82,6 +92,7 @@ export default {
class="border" class="border"
:text="dockerPushCommand" :text="dockerPushCommand"
:title="$options.i18n.copyPushTitle" :title="$options.i18n.copyPushTitle"
@click.native="track('click_copy_push')"
/> />
</template> </template>
</gl-form-input-group> </gl-form-input-group>
......
---
title: Add event tracking to Container regstry quickstart
merge_request: 27990
author:
type: changed
import Vuex from 'vuex'; import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils'; import { mount, createLocalVue } from '@vue/test-utils';
import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui'; import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
import Tracking from '~/tracking';
import * as getters from '~/registry/explorer/stores/getters'; import * as getters from '~/registry/explorer/stores/getters';
import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue'; import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
...@@ -42,6 +43,7 @@ describe('quickstart_dropdown', () => { ...@@ -42,6 +43,7 @@ describe('quickstart_dropdown', () => {
}; };
beforeEach(() => { beforeEach(() => {
jest.spyOn(Tracking, 'event');
mountComponent(); mountComponent();
}); });
...@@ -55,12 +57,21 @@ describe('quickstart_dropdown', () => { ...@@ -55,12 +57,21 @@ describe('quickstart_dropdown', () => {
expect(findDropdownButton().text()).toContain(QUICK_START); expect(findDropdownButton().text()).toContain(QUICK_START);
}); });
it('clicking on the dropdown emit a tracking event', () => {
findDropdownButton().vm.$emit('shown');
expect(Tracking.event).toHaveBeenCalledWith(
undefined,
'click_dropdown',
expect.objectContaining({ label: 'quickstart_dropdown' }),
);
});
describe.each` describe.each`
index | id | labelText | titleText | getter index | id | labelText | titleText | getter | trackedEvent
${0} | ${'docker-login-btn'} | ${LOGIN_COMMAND_LABEL} | ${COPY_LOGIN_TITLE} | ${'dockerLoginCommand'} ${0} | ${'docker-login-btn'} | ${LOGIN_COMMAND_LABEL} | ${COPY_LOGIN_TITLE} | ${'dockerLoginCommand'} | ${'click_copy_login'}
${1} | ${'docker-build-btn'} | ${BUILD_COMMAND_LABEL} | ${COPY_BUILD_TITLE} | ${'dockerBuildCommand'} ${1} | ${'docker-build-btn'} | ${BUILD_COMMAND_LABEL} | ${COPY_BUILD_TITLE} | ${'dockerBuildCommand'} | ${'click_copy_build'}
${2} | ${'docker-push-btn'} | ${PUSH_COMMAND_LABEL} | ${COPY_PUSH_TITLE} | ${'dockerPushCommand'} ${2} | ${'docker-push-btn'} | ${PUSH_COMMAND_LABEL} | ${COPY_PUSH_TITLE} | ${'dockerPushCommand'} | ${'click_copy_push'}
`('form group at $index', ({ index, id, labelText, titleText, getter }) => { `('form group at $index', ({ index, id, labelText, titleText, getter, trackedEvent }) => {
let formGroup; let formGroup;
const findFormInputGroup = parent => parent.find(GlFormInputGroup); const findFormInputGroup = parent => parent.find(GlFormInputGroup);
...@@ -91,5 +102,19 @@ describe('quickstart_dropdown', () => { ...@@ -91,5 +102,19 @@ describe('quickstart_dropdown', () => {
expect(clipBoardButton.props('title')).toBe(titleText); expect(clipBoardButton.props('title')).toBe(titleText);
expect(clipBoardButton.props('text')).toBe(store.getters[getter]); expect(clipBoardButton.props('text')).toBe(store.getters[getter]);
}); });
it('clipboard button tracks click event', () => {
const clipBoardButton = findClipboardButton(formGroup);
clipBoardButton.trigger('click');
/* This expect to be called with first argument undefined so that
* the function internally can default to document.body.dataset.page
* https://docs.gitlab.com/ee/telemetry/frontend.html#tracking-within-vue-components
*/
expect(Tracking.event).toHaveBeenCalledWith(
undefined,
trackedEvent,
expect.objectContaining({ label: 'quickstart_dropdown' }),
);
});
}); });
}); });
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