2 files changed, 100 insertions, 8 deletions

diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js
index adbbc04ce78..fd2164d05fc 100644
--- a/spec/frontend/error_tracking/components/error_details_spec.js
+++ b/spec/frontend/error_tracking/components/error_details_spec.js
@@ -18,6 +18,12 @@ import {
   severityLevelVariant,
   errorStatus,
 } from '~/error_tracking/components/constants';
+import Tracking from '~/tracking';
+import {
+  trackClickErrorLinkToSentryOptions,
+  trackErrorDetailsViewsOptions,
+  trackErrorStatusUpdateOptions,
+} from '~/error_tracking/utils';
 
 jest.mock('~/flash');
 
@@ -30,12 +36,19 @@ describe('ErrorDetails', () => {
   let actions;
   let getters;
   let mocks;
+  const externalUrl = 'https://sentry.io/organizations/test-sentry-nk/issues/1/?project=1';
 
   const findInput = name => {
     const inputs = wrapper.findAll(GlFormInput).filter(c => c.attributes('name') === name);
     return inputs.length ? inputs.at(0) : inputs;
   };
 
+  const findUpdateIgnoreStatusButton = () =>
+    wrapper.find('[data-testid="update-ignore-status-btn"]');
+  const findUpdateResolveStatusButton = () =>
+    wrapper.find('[data-testid="update-resolve-status-btn"]');
+  const findExternalUrl = () => wrapper.find('[data-testid="external-url-link"]');
+
   function mountComponent() {
     wrapper = shallowMount(ErrorDetails, {
       stubs: { GlDeprecatedButton, GlSprintf },
@@ -57,7 +70,7 @@ describe('ErrorDetails', () => {
   beforeEach(() => {
     actions = {
       startPollingStacktrace: () => {},
-      updateIgnoreStatus: jest.fn(),
+      updateIgnoreStatus: jest.fn().mockResolvedValue({}),
       updateResolveStatus: jest.fn().mockResolvedValue({ closed_issue_iid: 1 }),
     };
 
@@ -170,6 +183,9 @@ describe('ErrorDetails', () => {
           count: 12,
           userCount: 2,
         },
+        stacktraceData: {
+          date_received: '2020-05-20',
+        },
       });
     });
 
@@ -235,7 +251,7 @@ describe('ErrorDetails', () => {
             },
           });
           return wrapper.vm.$nextTick().then(() => {
-            expect(wrapper.find(GlBadge).attributes('variant')).toEqual(
+            expect(wrapper.find(GlBadge).props('variant')).toEqual(
               severityLevelVariant[severityLevel[level]],
             );
           });
@@ -249,7 +265,7 @@ describe('ErrorDetails', () => {
           },
         });
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(GlBadge).attributes('variant')).toEqual(
+          expect(wrapper.find(GlBadge).props('variant')).toEqual(
             severityLevelVariant[severityLevel.ERROR],
           );
         });
@@ -302,11 +318,6 @@ describe('ErrorDetails', () => {
     });
 
     describe('Status update', () => {
-      const findUpdateIgnoreStatusButton = () =>
-        wrapper.find('[data-qa-selector="update_ignore_status_button"]');
-      const findUpdateResolveStatusButton = () =>
-        wrapper.find('[data-qa-selector="update_resolve_status_button"]');
-
       afterEach(() => {
         actions.updateIgnoreStatus.mockClear();
         actions.updateResolveStatus.mockClear();
@@ -491,4 +502,49 @@ describe('ErrorDetails', () => {
       });
     });
   });
+
+  describe('Snowplow tracking', () => {
+    beforeEach(() => {
+      jest.spyOn(Tracking, 'event');
+      mocks.$apollo.queries.error.loading = false;
+      mountComponent();
+      wrapper.setData({
+        error: { externalUrl },
+      });
+    });
+
+    it('should track detail page views', () => {
+      const { category, action } = trackErrorDetailsViewsOptions;
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
+    });
+
+    it('should track IGNORE status update', () => {
+      Tracking.event.mockClear();
+      findUpdateIgnoreStatusButton().vm.$emit('click');
+      setImmediate(() => {
+        const { category, action } = trackErrorStatusUpdateOptions('ignored');
+        expect(Tracking.event).toHaveBeenCalledWith(category, action);
+      });
+    });
+
+    it('should track RESOLVE status update', () => {
+      Tracking.event.mockClear();
+      findUpdateResolveStatusButton().vm.$emit('click');
+      setImmediate(() => {
+        const { category, action } = trackErrorStatusUpdateOptions('resolved');
+        expect(Tracking.event).toHaveBeenCalledWith(category, action);
+      });
+    });
+
+    it('should track external Sentry link views', () => {
+      Tracking.event.mockClear();
+      findExternalUrl().trigger('click');
+      setImmediate(() => {
+        const { category, action, label, property } = trackClickErrorLinkToSentryOptions(
+          externalUrl,
+        );
+        expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property });
+      });
+    });
+  });
 });
diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
index a6cb074f481..d88a412fb50 100644
--- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
@@ -4,7 +4,9 @@ import { GlEmptyState, GlLoadingIcon, GlFormInput, GlPagination, GlDropdown } fr
 import stubChildren from 'helpers/stub_children';
 import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue';
 import ErrorTrackingActions from '~/error_tracking/components/error_tracking_actions.vue';
+import { trackErrorListViewsOptions, trackErrorStatusUpdateOptions } from '~/error_tracking/utils';
 import errorsList from './list_mock.json';
+import Tracking from '~/tracking';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -460,4 +462,38 @@ describe('ErrorTrackingList', () => {
       });
     });
   });
+
+  describe('Snowplow tracking', () => {
+    beforeEach(() => {
+      jest.spyOn(Tracking, 'event');
+      store.state.list.loading = false;
+      store.state.list.errors = errorsList;
+      mountComponent({
+        stubs: {
+          GlTable: false,
+          GlLink: false,
+          GlDeprecatedButton: false,
+        },
+      });
+    });
+
+    it('should track list views', () => {
+      const { category, action } = trackErrorListViewsOptions;
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
+    });
+
+    it('should track status updates', () => {
+      Tracking.event.mockClear();
+      const status = 'ignored';
+      findErrorActions().vm.$emit('update-issue-status', {
+        errorId: 1,
+        status,
+      });
+
+      setImmediate(() => {
+        const { category, action } = trackErrorStatusUpdateOptions(status);
+        expect(Tracking.event).toHaveBeenCalledWith(category, action);
+      });
+    });
+  });
 });