diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue index 4643bfe58f621733e90054fc41be10bc4a6f5800..18c0a6173a2758669b756f83c12f3ebde3e12063 100644 --- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue +++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue @@ -2,8 +2,7 @@ import { GlTabs, GlTab } from '@gitlab/ui'; import API from '~/api'; import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility'; -import Tracking from '~/tracking'; -import { SNOWPLOW_DATA_SOURCE, SNOWPLOW_LABEL, SNOWPLOW_SCHEMA } from '../constants'; +import { InternalEvents } from '~/tracking'; import PipelineCharts from './pipeline_charts.vue'; export default { @@ -25,7 +24,7 @@ export default { leadTimeTabEvent: 'p_analytics_ci_cd_lead_time', timeToRestoreServiceTabEvent: 'p_analytics_ci_cd_time_to_restore_service', changeFailureRateTabEvent: 'p_analytics_ci_cd_change_failure_rate', - mixins: [Tracking.mixin()], + mixins: [InternalEvents.mixin()], inject: { shouldRenderDoraCharts: { type: Boolean, @@ -78,21 +77,12 @@ export default { updateHistory({ url: path, title: window.title }); } }, - trackTabClick(event, snowplow = false) { - API.trackRedisHllUserEvent(event); - - if (snowplow) { - this.track('click_tab', { - label: SNOWPLOW_LABEL, - context: { - schema: SNOWPLOW_SCHEMA, - data: { - event_name: event, - data_source: SNOWPLOW_DATA_SOURCE, - }, - }, - }); + trackTabClick(event, trackWithInternalEvents = false) { + if (trackWithInternalEvents) { + this.trackEvent(event); + return; } + API.trackRedisHllUserEvent(event); }, }, }; diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js index 94f421239daf25a9ece465226b9a98af39ab38f9..8012e124df1c114df0b736b41d1aca8f6b0d1391 100644 --- a/spec/frontend/projects/pipelines/charts/components/app_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js @@ -9,11 +9,7 @@ import Component from '~/projects/pipelines/charts/components/app.vue'; import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue'; import API from '~/api'; import { mockTracking } from 'helpers/tracking_helper'; -import { - SNOWPLOW_DATA_SOURCE, - SNOWPLOW_LABEL, - SNOWPLOW_SCHEMA, -} from '~/projects/pipelines/charts/constants'; +import { SNOWPLOW_DATA_SOURCE, SNOWPLOW_SCHEMA } from '~/projects/pipelines/charts/constants'; jest.mock('~/lib/utils/url_utility'); @@ -130,9 +126,6 @@ describe('ProjectsPipelinesChartsApp', () => { describe('RedisHLL events', () => { it.each` testId | event - ${'pipelines-tab'} | ${'p_analytics_ci_cd_pipelines'} - ${'deployment-frequency-tab'} | ${'p_analytics_ci_cd_deployment_frequency'} - ${'lead-time-tab'} | ${'p_analytics_ci_cd_lead_time'} ${'time-to-restore-service-tab'} | ${'p_analytics_ci_cd_time_to_restore_service'} ${'change-failure-rate-tab'} | ${'p_analytics_ci_cd_change_failure_rate'} `('tracks the $event event when clicked', ({ testId, event }) => { @@ -146,6 +139,23 @@ describe('ProjectsPipelinesChartsApp', () => { }); }); + describe('Internal Events RedisHLL events', () => { + it.each` + testId | event + ${'pipelines-tab'} | ${'p_analytics_ci_cd_pipelines'} + ${'deployment-frequency-tab'} | ${'p_analytics_ci_cd_deployment_frequency'} + ${'lead-time-tab'} | ${'p_analytics_ci_cd_lead_time'} + `('tracks the $event event when clicked', ({ testId, event }) => { + const trackApiSpy = jest.spyOn(API, 'trackInternalEvent'); + + expect(trackApiSpy).not.toHaveBeenCalled(); + + wrapper.findByTestId(testId).vm.$emit('click'); + + expect(trackApiSpy).toHaveBeenCalledWith(event); + }); + }); + describe('Snowplow events', () => { it.each` testId | event @@ -157,8 +167,7 @@ describe('ProjectsPipelinesChartsApp', () => { wrapper.findByTestId(testId).vm.$emit('click'); - expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', { - label: SNOWPLOW_LABEL, + expect(trackingSpy).toHaveBeenCalledWith(undefined, event, { context: { schema: SNOWPLOW_SCHEMA, data: {