Merge branch 'fe-design-action-test' into 'master'

Add tests for tracking Design views

See merge request gitlab-org/gitlab!49320

app/assets/javascripts/design_management/utils/tracking.js

 import Tracking from '~/tracking';
-import api from '~/api';
+import Api from '~/api';
 
 // Snowplow tracking constants
 const DESIGN_TRACKING_CONTEXT_SCHEMAS = {
   VIEW_DESIGN_SCHEMA: 'iglu:com.gitlab/design_management_context/jsonschema/1-0-0',
 };
-const DESIGN_TRACKING_EVENTS = {
+
+export const DESIGN_TRACKING_PAGE_NAME = 'projects:issues:design';
+
+export const DESIGN_SNOWPLOW_EVENT_TYPES = {
   VIEW_DESIGN: 'view_design',
   CREATE_DESIGN: 'create_design',
   UPDATE_DESIGN: 'update_design',
 };
 
-// Usage ping tracking constants
-const DESIGN_ACTION = 'design_action';
-
-export const DESIGN_TRACKING_PAGE_NAME = 'projects:issues:design';
+export const DESIGN_USAGE_PING_EVENT_TYPES = {
+  DESIGN_ACTION: 'design_action',
+};
 
 /**
  * Track "design detail" view in Snowplow
@@ -25,7 +27,7 @@ export function trackDesignDetailView(
   designVersion = 1,
   latestVersion = false,
 ) {
-  const eventName = DESIGN_TRACKING_EVENTS.VIEW_DESIGN;
+  const eventName = DESIGN_SNOWPLOW_EVENT_TYPES.VIEW_DESIGN;
 
   Tracking.event(DESIGN_TRACKING_PAGE_NAME, eventName, {
     label: eventName,
@@ -42,16 +44,16 @@ export function trackDesignDetailView(
 }
 
 export function trackDesignCreate() {
-  return Tracking.event(DESIGN_TRACKING_PAGE_NAME, DESIGN_TRACKING_EVENTS.CREATE_DESIGN);
+  return Tracking.event(DESIGN_TRACKING_PAGE_NAME, DESIGN_SNOWPLOW_EVENT_TYPES.CREATE_DESIGN);
 }
 
 export function trackDesignUpdate() {
-  return Tracking.event(DESIGN_TRACKING_PAGE_NAME, DESIGN_TRACKING_EVENTS.UPDATE_DESIGN);
+  return Tracking.event(DESIGN_TRACKING_PAGE_NAME, DESIGN_SNOWPLOW_EVENT_TYPES.UPDATE_DESIGN);
 }
 
 /**
  * Track "design detail" view via usage ping
  */
 export function usagePingDesignDetailView() {
-  api.trackRedisHllUserEvent(DESIGN_ACTION);
+  Api.trackRedisHllUserEvent(DESIGN_USAGE_PING_EVENT_TYPES.DESIGN_ACTION);
 }

spec/frontend/design_management/pages/design/index_spec.js

@@ -2,7 +2,9 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router';
 import { GlAlert } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import createFlash from '~/flash';
+import Api from '~/api';
 import DesignIndex from '~/design_management/pages/design/index.vue';
 import DesignSidebar from '~/design_management/components/design_sidebar.vue';
 import DesignPresentation from '~/design_management/components/design_presentation.vue';
@@ -20,8 +22,14 @@ import design from '../../mock_data/design';
 import mockResponseWithDesigns from '../../mock_data/designs';
 import mockResponseNoDesigns from '../../mock_data/no_designs';
 import mockAllVersions from '../../mock_data/all_versions';
+import {
+  DESIGN_TRACKING_PAGE_NAME,
+  DESIGN_SNOWPLOW_EVENT_TYPES,
+  DESIGN_USAGE_PING_EVENT_TYPES,
+} from '~/design_management/utils/tracking';
 
 jest.mock('~/flash');
+jest.mock('~/api.js');
 
 const focusInput = jest.fn();
 const mutate = jest.fn().mockResolvedValue();
@@ -81,7 +89,10 @@ describe('Design management design index page', () => {
   const findSidebar = () => wrapper.find(DesignSidebar);
   const findDesignPresentation = () => wrapper.find(DesignPresentation);
 
-  function createComponent({ loading = false } = {}, { data = {}, intialRouteOptions = {} } = {}) {
+  function createComponent(
+    { loading = false } = {},
+    { data = {}, intialRouteOptions = {}, provide = {} } = {},
+  ) {
     const $apollo = {
       queries: {
         design: {
@@ -106,6 +117,7 @@ describe('Design management design index page', () => {
       provide: {
         issueIid: '1',
         projectPath: 'project-path',
+        ...provide,
       },
       data() {
         return {
@@ -343,4 +355,64 @@ describe('Design management design index page', () => {
       });
     });
   });
+
+  describe('tracking', () => {
+    let trackingSpy;
+
+    beforeEach(() => {
+      trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    describe('on mount', () => {
+      it('tracks design view in snowplow', () => {
+        createComponent({ loading: true });
+
+        expect(trackingSpy).toHaveBeenCalledTimes(1);
+        expect(trackingSpy).toHaveBeenCalledWith(
+          DESIGN_TRACKING_PAGE_NAME,
+          DESIGN_SNOWPLOW_EVENT_TYPES.VIEW_DESIGN,
+          {
+            context: {
+              data: {
+                'design-collection-owner': 'issue',
+                'design-is-current-version': true,
+                'design-version-number': 1,
+                'internal-object-referrer': 'issue-design-collection',
+              },
+              schema: 'iglu:com.gitlab/design_management_context/jsonschema/1-0-0',
+            },
+            label: DESIGN_SNOWPLOW_EVENT_TYPES.VIEW_DESIGN,
+          },
+        );
+      });
+
+      describe('with usage_data_design_action enabled', () => {
+        it('tracks design view usage ping', () => {
+          createComponent(
+            { loading: true },
+            {
+              provide: {
+                glFeatures: { usageDataDesignAction: true },
+              },
+            },
+          );
+          expect(Api.trackRedisHllUserEvent).toHaveBeenCalledTimes(1);
+          expect(Api.trackRedisHllUserEvent).toHaveBeenCalledWith(
+            DESIGN_USAGE_PING_EVENT_TYPES.DESIGN_ACTION,
+          );
+        });
+      });
+
+      describe('with usage_data_design_action disabled', () => {
+        it("doesn't track design view usage ping", () => {
+          createComponent({ loading: true });
+          expect(Api.trackRedisHllUserEvent).toHaveBeenCalledTimes(0);
+        });
+      });
+    });
+  });
 });

spec/frontend/design_management/pages/index_spec.js

@@ -31,7 +31,10 @@ import {
   moveDesignMutationResponseWithErrors,
 } from '../mock_data/apollo_mock';
 import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql';
-import { DESIGN_TRACKING_PAGE_NAME } from '~/design_management/utils/tracking';
+import {
+  DESIGN_TRACKING_PAGE_NAME,
+  DESIGN_SNOWPLOW_EVENT_TYPES,
+} from '~/design_management/utils/tracking';
 
 jest.mock('~/flash.js');
 const mockPageEl = {
@@ -509,14 +512,20 @@ describe('Design management index page', () => {
         wrapper.vm.onUploadDesignDone(designUploadMutationCreatedResponse);
 
         expect(trackingSpy).toHaveBeenCalledTimes(1);
-        expect(trackingSpy).toHaveBeenCalledWith(DESIGN_TRACKING_PAGE_NAME, 'create_design');
+        expect(trackingSpy).toHaveBeenCalledWith(
+          DESIGN_TRACKING_PAGE_NAME,
+          DESIGN_SNOWPLOW_EVENT_TYPES.CREATE_DESIGN,
+        );
       });
 
       it('tracks design modification', () => {
         wrapper.vm.onUploadDesignDone(designUploadMutationUpdatedResponse);
 
         expect(trackingSpy).toHaveBeenCalledTimes(1);
-        expect(trackingSpy).toHaveBeenCalledWith(DESIGN_TRACKING_PAGE_NAME, 'update_design');
+        expect(trackingSpy).toHaveBeenCalledWith(
+          DESIGN_TRACKING_PAGE_NAME,
+          DESIGN_SNOWPLOW_EVENT_TYPES.UPDATE_DESIGN,
+        );
       });
     });
   });