Commit ec2e6fa9 authored by Phil Hughes's avatar Phil Hughes

Merge branch...

Merge branch '300728-add-tracking-to-the-trial-status-sidebar-widget-experiment-part2' into 'master'

Add basic link click tracking to the trial status widget experiment

See merge request gitlab-org/gitlab!55411
parents 1b0db20e 85d0e28d
......@@ -9,6 +9,11 @@ import Tracking from '~/tracking';
const RESIZE_EVENT_DEBOUNCE_MS = 150;
export default {
tracking: {
event: 'click_button',
labels: { upgrade: 'upgrade_to_ultimate', compare: 'compare_all_plans' },
property: 'experiment:show_trial_status_in_sidebar',
},
components: {
GlButton,
GlPopover,
......@@ -123,6 +128,10 @@ export default {
size="small"
class="gl-mb-0"
block
data-testid="upgradeBtn"
:data-track-event="$options.tracking.event"
:data-track-label="$options.tracking.labels.upgrade"
:data-track-property="$options.tracking.property"
>
<span class="gl-font-sm">
<gl-sprintf :message="$options.i18n.upgradeButtonTitle">
......@@ -138,7 +147,11 @@ export default {
size="small"
class="gl-mb-0"
block
data-testid="compareBtn"
:title="$options.i18n.compareAllButtonTitle"
:data-track-event="$options.tracking.event"
:data-track-label="$options.tracking.labels.compare"
:data-track-property="$options.tracking.property"
>
<span class="gl-font-sm">{{ $options.i18n.compareAllButtonTitle }}</span>
</gl-button>
......
......@@ -3,6 +3,11 @@ import { GlLink, GlProgressBar } from '@gitlab/ui';
import { n__, sprintf } from '~/locale';
export default {
tracking: {
event: 'click_link',
label: 'trial_status_widget',
property: 'experiment:show_trial_status_in_sidebar',
},
components: {
GlLink,
GlProgressBar,
......@@ -53,7 +58,14 @@ export default {
</script>
<template>
<gl-link :id="containerId" :title="widgetTitle" :href="plansHref">
<gl-link
:id="containerId"
:title="widgetTitle"
:href="plansHref"
:data-track-event="$options.tracking.event"
:data-track-label="$options.tracking.label"
:data-track-property="$options.tracking.property"
>
<div class="gl-display-flex gl-flex-direction-column gl-align-items-stretch gl-w-full">
<span class="gl-display-flex gl-align-items-center">
<span class="nav-icon-container svg-container">
......
......@@ -22,6 +22,10 @@ exports[`TrialStatusPopover component matches the snapshot 1`] = `
buttontextclasses=""
category="primary"
class="gl-mb-0"
data-testid="upgradeBtn"
data-track-event="click_button"
data-track-label="upgrade_to_ultimate"
data-track-property="experiment:show_trial_status_in_sidebar"
href="transactions/new"
icon=""
size="small"
......@@ -41,6 +45,10 @@ exports[`TrialStatusPopover component matches the snapshot 1`] = `
buttontextclasses=""
category="secondary"
class="gl-mb-0"
data-testid="compareBtn"
data-track-event="click_button"
data-track-label="compare_all_plans"
data-track-property="experiment:show_trial_status_in_sidebar"
href="billing/path-for/group"
icon=""
size="small"
......
......@@ -2,6 +2,9 @@
exports[`TrialStatusWidget component without the optional containerId prop matches the snapshot 1`] = `
<gl-link-stub
data-track-event="click_link"
data-track-label="trial_status_widget"
data-track-property="experiment:show_trial_status_in_sidebar"
href="billing/path-for/group"
title="Ultimate Trial – 20 days left"
>
......
......@@ -7,6 +7,8 @@ import TrialStatusPopover from 'ee/contextual_sidebar/components/trial_status_po
describe('TrialStatusPopover component', () => {
let wrapper;
const getGlButton = (testId) => wrapper.find(`[data-testid="${testId}"]`);
const createComponent = () => {
return shallowMount(TrialStatusPopover, {
propsData: {
......@@ -33,6 +35,20 @@ describe('TrialStatusPopover component', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('renders the upgrade button with correct tracking data attrs', () => {
const attrs = getGlButton('upgradeBtn').attributes();
expect(attrs['data-track-event']).toBe('click_button');
expect(attrs['data-track-label']).toBe('upgrade_to_ultimate');
expect(attrs['data-track-property']).toBe('experiment:show_trial_status_in_sidebar');
});
it('renders the compare plans button with correct tracking data attrs', () => {
const attrs = getGlButton('compareBtn').attributes();
expect(attrs['data-track-event']).toBe('click_button');
expect(attrs['data-track-label']).toBe('compare_all_plans');
expect(attrs['data-track-property']).toBe('experiment:show_trial_status_in_sidebar');
});
describe('methods', () => {
describe('onResize', () => {
const getGlPopover = () => wrapper.findComponent(GlPopover);
......
......@@ -38,6 +38,13 @@ describe('TrialStatusWidget component', () => {
it('renders without an id', () => {
expect(getGlLink().attributes('id')).toBe(undefined);
});
it('renders with the correct tracking data attributes', () => {
const attrs = getGlLink().attributes();
expect(attrs['data-track-event']).toBe('click_link');
expect(attrs['data-track-label']).toBe('trial_status_widget');
expect(attrs['data-track-property']).toBe('experiment:show_trial_status_in_sidebar');
});
});
describe('with the optional containerId prop', () => {
......
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