Added snowplow tracking to change direction

app/assets/javascripts/notes/components/sort_discussion.vue

@@ -2,6 +2,7 @@
 import { GlIcon } from '@gitlab/ui';
 import { mapActions, mapGetters } from 'vuex';
 import { __ } from '~/locale';
+import Tracking from '~/tracking';
 import { ASC, DESC } from '../constants';
 
 const SORT_OPTIONS = [
@@ -14,6 +15,7 @@ export default {
   components: {
     GlIcon,
   },
+  mixins: [Tracking.mixin()],
   computed: {
     ...mapGetters(['sortDirection']),
     selectedOption() {
@@ -31,6 +33,7 @@ export default {
       }
 
       this.setDiscussionSortDirection(direction);
+      this.track('change_discussion_sort_direction', { property: direction });
     },
     isDropdownItemActive(sortDir) {
       return sortDir === this.sortDirection;

spec/frontend/notes/components/sort_discussion_spec.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex';
 import SortDiscussion from '~/notes/components/sort_discussion.vue';
 import createStore from '~/notes/stores';
 import { ASC, DESC } from '~/notes/constants';
+import Tracking from '~/tracking';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -22,6 +23,7 @@ describe('Sort Discussion component', () => {
 
   beforeEach(() => {
     store = createStore();
+    jest.spyOn(Tracking, 'event');
   });
 
   afterEach(() => {
@@ -37,6 +39,9 @@ describe('Sort Discussion component', () => {
         wrapper.find('.js-newest-first').trigger('click');
 
         expect(store.dispatch).toHaveBeenCalledWith('setDiscussionSortDirection', DESC);
+        expect(Tracking.event).toHaveBeenCalledWith(undefined, 'change_discussion_sort_direction', {
+          property: DESC,
+        });
       });
     });
 
@@ -58,6 +63,9 @@ describe('Sort Discussion component', () => {
         wrapper.find('.js-oldest-first').trigger('click');
 
         expect(store.dispatch).toHaveBeenCalledWith('setDiscussionSortDirection', ASC);
+        expect(Tracking.event).toHaveBeenCalledWith(undefined, 'change_discussion_sort_direction', {
+          property: ASC,
+        });
       });
 
       it('applies the active class to the correct button in the dropdown', () => {