Test design event tracking

Adds tests for design tracking, and
finalises event names.

app/assets/javascripts/design_management/pages/index.vue

@@ -206,7 +206,7 @@ export default {
       this.trackUploadDesign(res);
     },
     trackUploadDesign(res) {
-      // NOTE: in the future, we can add skipped and deleted design tracking here
+      // NOTE: in the future, we can add "skipped" design tracking here
       res.data.designManagementUpload.designs.forEach(design => {
         if (design.event === 'CREATION') {
           trackDesignCreate();

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

 import Tracking from '~/tracking';
 
 // Tracking Constants
-const DESIGN_TRACKING_CONTEXT_SCHEMA = 'iglu:com.gitlab/design_management_context/jsonschema/1-0-0';
-const DESIGN_TRACKING_PAGE_NAME = 'projects:issues:design';
+const DESIGN_TRACKING_CONTEXT_SCHEMAS = {
+  VIEW_DESIGN_SCHEMA: 'iglu:com.gitlab/design_management_context/jsonschema/1-0-0',
+};
 const DESIGN_TRACKING_EVENTS = {
   VIEW_DESIGN: 'view_design',
   CREATE_DESIGN: 'create_design',
   UPDATE_DESIGN: 'update_design',
 };
 
+export const DESIGN_TRACKING_PAGE_NAME = 'projects:issues:design';
+
 export function trackDesignDetailView(
   referer = '',
   owner = '',
@@ -19,7 +22,7 @@ export function trackDesignDetailView(
   Tracking.event(DESIGN_TRACKING_PAGE_NAME, eventName, {
     label: eventName,
     context: {
-      schema: DESIGN_TRACKING_CONTEXT_SCHEMA,
+      schema: DESIGN_TRACKING_CONTEXT_SCHEMAS.VIEW_DESIGN_SCHEMA,
       data: {
         'design-version-number': designVersion,
         'design-is-current-version': latestVersion,
@@ -31,23 +34,9 @@ export function trackDesignDetailView(
 }
 
 export function trackDesignCreate() {
-  const eventName = DESIGN_TRACKING_EVENTS.CREATE_DESIGN;
-  Tracking.event(DESIGN_TRACKING_PAGE_NAME, eventName, {
-    label: eventName,
-    context: {
-      schema: DESIGN_TRACKING_CONTEXT_SCHEMA,
-      data: {},
-    },
-  });
+  return Tracking.event(DESIGN_TRACKING_PAGE_NAME, DESIGN_TRACKING_EVENTS.CREATE_DESIGN);
 }
 
 export function trackDesignUpdate() {
-  const eventName = DESIGN_TRACKING_EVENTS.UPDATE_DESIGN;
-  Tracking.event(DESIGN_TRACKING_PAGE_NAME, eventName, {
-    label: eventName,
-    context: {
-      schema: DESIGN_TRACKING_CONTEXT_SCHEMA,
-      data: {},
-    },
-  });
+  return Tracking.event(DESIGN_TRACKING_PAGE_NAME, DESIGN_TRACKING_EVENTS.UPDATE_DESIGN);
 }

changelogs/unreleased/design-tracking-create-update.yml

+---
+title: Add product analytics for design created and modified events
+merge_request: 44129
+author:
+type: added

spec/frontend/design_management/mock_data/apollo_mock.js

@@ -51,6 +51,34 @@ export const designListQueryResponse = {
   },
 };
 
+export const designUploadMutationCreatedResponse = {
+  data: {
+    designManagementUpload: {
+      designs: [
+        {
+          id: '1',
+          event: 'CREATION',
+          filename: 'fox_1.jpg',
+        },
+      ],
+    },
+  },
+};
+
+export const designUploadMutationUpdatedResponse = {
+  data: {
+    designManagementUpload: {
+      designs: [
+        {
+          id: '1',
+          event: 'MODIFICATION',
+          filename: 'fox_1.jpg',
+        },
+      ],
+    },
+  },
+};
+
 export const permissionsQueryResponse = {
   data: {
     project: {

spec/frontend/design_management/pages/index_spec.js

@@ -4,6 +4,7 @@ import VueDraggable from 'vuedraggable';
 import VueRouter from 'vue-router';
 import { GlEmptyState } from '@gitlab/ui';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import Index from '~/design_management/pages/index.vue';
 import uploadDesignQuery from '~/design_management/graphql/mutations/upload_design.mutation.graphql';
 import DesignDestroyer from '~/design_management/components/design_destroyer.vue';
@@ -21,6 +22,8 @@ import * as utils from '~/design_management/utils/design_management_utils';
 import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants';
 import {
   designListQueryResponse,
+  designUploadMutationCreatedResponse,
+  designUploadMutationUpdatedResponse,
   permissionsQueryResponse,
   moveDesignMutationResponse,
   reorderedDesigns,
@@ -29,7 +32,7 @@ import {
 import getDesignListQuery from '~/design_management/graphql/queries/get_design_list.query.graphql';
 import permissionsQuery from '~/design_management/graphql/queries/design_permissions.query.graphql';
 import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql';
-import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import { DESIGN_TRACKING_PAGE_NAME } from '~/design_management/utils/tracking';
 
 jest.mock('~/flash.js');
 const mockPageEl = {
@@ -489,6 +492,8 @@ describe('Design management index page', () => {
 
       beforeEach(() => {
         trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
+
+        createComponent({ stubs: { GlEmptyState } });
       });
 
       afterEach(() => {
@@ -496,16 +501,17 @@ describe('Design management index page', () => {
       });
 
       it('tracks design creation', () => {
-        createComponent({ stubs: { GlEmptyState } });
+        wrapper.vm.onUploadDesignDone(designUploadMutationCreatedResponse);
 
-        wrapper.vm.onUploadDesign([{ name: 'test' }]);
-        wrapper.vm.onUploadDesignDone();
-        // expect(trackingSpy).toHaveBeenCalledWith(undefined, 'create_design', {});
+        expect(trackingSpy).toHaveBeenCalledTimes(1);
+        expect(trackingSpy).toHaveBeenCalledWith(DESIGN_TRACKING_PAGE_NAME, 'create_design');
       });
 
       it('tracks design modification', () => {
-        wrapper.vm.onUploadDesignDone();
-        // expect(trackingSpy).toHaveBeenCalledWith(undefined, 'update_design', {});
+        wrapper.vm.onUploadDesignDone(designUploadMutationUpdatedResponse);
+
+        expect(trackingSpy).toHaveBeenCalledTimes(1);
+        expect(trackingSpy).toHaveBeenCalledWith(DESIGN_TRACKING_PAGE_NAME, 'update_design');
       });
     });
   });