Add latest changes from gitlab-org/gitlab@master

5 files changed, 119 insertions, 163 deletions

diff --git a/spec/frontend/analytics/shared/components/daterange_spec.js b/spec/frontend/analytics/shared/components/daterange_spec.js
index 8e4b60efa67..5f0847e0db6 100644
--- a/spec/frontend/analytics/shared/components/daterange_spec.js
+++ b/spec/frontend/analytics/shared/components/daterange_spec.js
@@ -86,18 +86,19 @@ describe('Daterange component', () => {
       });
 
       describe('set', () => {
-        it('emits the change event with an object containing startDate and endDate', () => {
+        it('emits the change event with an object containing startDate and endDate', async () => {
           const startDate = new Date('2019-10-01');
           const endDate = new Date('2019-10-05');
-          wrapper.vm.dateRange = { startDate, endDate };
 
-          expect(wrapper.emitted().change).toEqual([[{ startDate, endDate }]]);
+          await findDaterangePicker().vm.$emit('input', { startDate, endDate });
+
+          expect(wrapper.emitted('change')).toEqual([[{ startDate, endDate }]]);
         });
       });
 
       describe('get', () => {
-        it("returns value of dateRange from state's startDate and endDate", () => {
-          expect(wrapper.vm.dateRange).toEqual({
+        it("datepicker to have default of dateRange from state's startDate and endDate", () => {
+          expect(findDaterangePicker().props('value')).toEqual({
             startDate: defaultProps.startDate,
             endDate: defaultProps.endDate,
           });
diff --git a/spec/frontend/work_items/components/notes/activity_filter_spec.js b/spec/frontend/work_items/components/notes/activity_filter_spec.js
deleted file mode 100644
index 86c4ad9b361..00000000000
--- a/spec/frontend/work_items/components/notes/activity_filter_spec.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import ActivityFilter from '~/work_items/components/notes/activity_filter.vue';
-import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import {
-  WORK_ITEM_NOTES_FILTER_ALL_NOTES,
-  WORK_ITEM_NOTES_FILTER_ONLY_HISTORY,
-  WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS,
-  TRACKING_CATEGORY_SHOW,
-} from '~/work_items/constants';
-
-import { mockTracking } from 'helpers/tracking_helper';
-
-describe('Work Item Activity/Discussions Filtering', () => {
-  let wrapper;
-
-  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findOnlyCommentsItem = () => wrapper.findByTestId('comments-activity');
-  const findOnlyHistoryItem = () => wrapper.findByTestId('history-activity');
-
-  const createComponent = ({
-    discussionFilter = WORK_ITEM_NOTES_FILTER_ALL_NOTES,
-    loading = false,
-    workItemType = 'Task',
-  } = {}) => {
-    wrapper = shallowMountExtended(ActivityFilter, {
-      propsData: {
-        discussionFilter,
-        loading,
-        workItemType,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  describe('Default', () => {
-    it('has a dropdown with 3 options', () => {
-      expect(findDropdown().exists()).toBe(true);
-      expect(findAllDropdownItems()).toHaveLength(ActivityFilter.filterOptions.length);
-    });
-
-    it('has local storage sync with the correct props', () => {
-      expect(findLocalStorageSync().props('asString')).toBe(true);
-    });
-
-    it('emits `changeFilter` event when local storage input is emitted', () => {
-      findLocalStorageSync().vm.$emit('input', WORK_ITEM_NOTES_FILTER_ONLY_HISTORY);
-
-      expect(wrapper.emitted('changeFilter')).toEqual([[WORK_ITEM_NOTES_FILTER_ONLY_HISTORY]]);
-    });
-  });
-
-  describe('Changing filter value', () => {
-    it.each`
-      dropdownLabel      | filterValue                             | dropdownItem
-      ${'Comments only'} | ${WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS} | ${findOnlyCommentsItem}
-      ${'History only'}  | ${WORK_ITEM_NOTES_FILTER_ONLY_HISTORY}  | ${findOnlyHistoryItem}
-    `(
-      'when `$dropdownLabel` is clicked it emits `$filterValue` with tracking info',
-      ({ dropdownItem, filterValue }) => {
-        const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-        dropdownItem().vm.$emit('click');
-
-        expect(wrapper.emitted('changeFilter')).toEqual([[filterValue]]);
-
-        expect(trackingSpy).toHaveBeenCalledWith(
-          TRACKING_CATEGORY_SHOW,
-          'work_item_notes_filter_changed',
-          {
-            category: TRACKING_CATEGORY_SHOW,
-            label: 'item_track_notes_filtering',
-            property: 'type_Task',
-          },
-        );
-      },
-    );
-  });
-});
diff --git a/spec/frontend/work_items/components/notes/activity_sort_spec.js b/spec/frontend/work_items/components/notes/activity_sort_spec.js
deleted file mode 100644
index 289823dc59e..00000000000
--- a/spec/frontend/work_items/components/notes/activity_sort_spec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import ActivitySort from '~/work_items/components/notes/activity_sort.vue';
-import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { ASC, DESC } from '~/notes/constants';
-
-import { mockTracking } from 'helpers/tracking_helper';
-import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
-
-describe('Work Item Activity Sorting', () => {
-  let wrapper;
-
-  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findNewestFirstItem = () => wrapper.findByTestId('newest-first');
-
-  const createComponent = ({ sortOrder = ASC, loading = false, workItemType = 'Task' } = {}) => {
-    wrapper = shallowMountExtended(ActivitySort, {
-      propsData: {
-        sortOrder,
-        loading,
-        workItemType,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  describe('default', () => {
-    it('has a dropdown with 2 options', () => {
-      expect(findDropdown().exists()).toBe(true);
-      expect(findAllDropdownItems()).toHaveLength(ActivitySort.sortOptions.length);
-    });
-
-    it('has local storage sync with the correct props', () => {
-      expect(findLocalStorageSync().props('asString')).toBe(true);
-    });
-
-    it('emits `changeSort` event when update is emitted', () => {
-      findLocalStorageSync().vm.$emit('input', ASC);
-
-      expect(wrapper.emitted('changeSort')).toEqual([[ASC]]);
-    });
-  });
-
-  describe('when asc', () => {
-    describe('when the dropdown is clicked', () => {
-      it('calls the right actions', () => {
-        const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-        findNewestFirstItem().vm.$emit('click');
-
-        expect(wrapper.emitted('changeSort')).toEqual([[DESC]]);
-
-        expect(trackingSpy).toHaveBeenCalledWith(
-          TRACKING_CATEGORY_SHOW,
-          'work_item_notes_sort_order_changed',
-          {
-            category: TRACKING_CATEGORY_SHOW,
-            label: 'item_track_notes_sorting',
-            property: 'type_Task',
-          },
-        );
-      });
-    });
-  });
-});
diff --git a/spec/frontend/work_items/components/notes/work_item_activity_sort_filter_spec.js b/spec/frontend/work_items/components/notes/work_item_activity_sort_filter_spec.js
new file mode 100644
index 00000000000..5ed9d581446
--- /dev/null
+++ b/spec/frontend/work_items/components/notes/work_item_activity_sort_filter_spec.js
@@ -0,0 +1,109 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import WorkItemActivitySortFilter from '~/work_items/components/notes/work_item_activity_sort_filter.vue';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import { ASC, DESC } from '~/notes/constants';
+import {
+  WORK_ITEM_ACTIVITY_SORT_OPTIONS,
+  WORK_ITEM_NOTES_SORT_ORDER_KEY,
+  WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS,
+  WORK_ITEM_NOTES_FILTER_KEY,
+  WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+  WORK_ITEM_ACTIVITY_FILTER_OPTIONS,
+  TRACKING_CATEGORY_SHOW,
+} from '~/work_items/constants';
+
+import { mockTracking } from 'helpers/tracking_helper';
+
+describe('Work Item Activity/Discussions Filtering', () => {
+  let wrapper;
+
+  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findByDataTestId = (dataTestId) => wrapper.findByTestId(dataTestId);
+
+  const createComponent = ({
+    loading = false,
+    workItemType = 'Task',
+    sortFilterProp = ASC,
+    filterOptions = WORK_ITEM_ACTIVITY_SORT_OPTIONS,
+    trackingLabel = 'item_track_notes_sorting',
+    trackingAction = 'work_item_notes_sort_order_changed',
+    filterEvent = 'changeSort',
+    defaultSortFilterProp = ASC,
+    storageKey = WORK_ITEM_NOTES_SORT_ORDER_KEY,
+  } = {}) => {
+    wrapper = shallowMountExtended(WorkItemActivitySortFilter, {
+      propsData: {
+        loading,
+        workItemType,
+        sortFilterProp,
+        filterOptions,
+        trackingLabel,
+        trackingAction,
+        filterEvent,
+        defaultSortFilterProp,
+        storageKey,
+      },
+    });
+  };
+
+  describe.each`
+    usedFor        | filterOptions                        | storageKey                        | filterEvent       | newInputOption                          | trackingLabel                 | trackingAction                          | defaultSortFilterProp               | sortFilterProp                      | nonDefaultDataTestId
+    ${'Sorting'}   | ${WORK_ITEM_ACTIVITY_SORT_OPTIONS}   | ${WORK_ITEM_NOTES_SORT_ORDER_KEY} | ${'changeSort'}   | ${DESC}                                 | ${'item_track_notes_sorting'} | ${'work_item_notes_sort_order_changed'} | ${ASC}                              | ${ASC}                              | ${'newest-first'}
+    ${'Filtering'} | ${WORK_ITEM_ACTIVITY_FILTER_OPTIONS} | ${WORK_ITEM_NOTES_FILTER_KEY}     | ${'changeFilter'} | ${WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS} | ${'item_track_notes_sorting'} | ${'work_item_notes_filter_changed'}     | ${WORK_ITEM_NOTES_FILTER_ALL_NOTES} | ${WORK_ITEM_NOTES_FILTER_ALL_NOTES} | ${'comments-activity'}
+  `(
+    'When used for $usedFor',
+    ({
+      filterOptions,
+      storageKey,
+      filterEvent,
+      trackingLabel,
+      trackingAction,
+      newInputOption,
+      defaultSortFilterProp,
+      sortFilterProp,
+      nonDefaultDataTestId,
+    }) => {
+      beforeEach(() => {
+        createComponent({
+          sortFilterProp,
+          filterOptions,
+          trackingLabel,
+          trackingAction,
+          filterEvent,
+          defaultSortFilterProp,
+          storageKey,
+        });
+      });
+
+      it('has a dropdown with options equal to the length of `filterOptions`', () => {
+        expect(findDropdown().exists()).toBe(true);
+        expect(findAllDropdownItems()).toHaveLength(filterOptions.length);
+      });
+
+      it('has local storage sync with the correct props', () => {
+        expect(findLocalStorageSync().props('asString')).toBe(true);
+        expect(findLocalStorageSync().props('storageKey')).toBe(storageKey);
+      });
+
+      it(`emits ${filterEvent} event when local storage input is emitted`, () => {
+        findLocalStorageSync().vm.$emit('input', newInputOption);
+
+        expect(wrapper.emitted(filterEvent)).toEqual([[newInputOption]]);
+      });
+
+      it('emits tracking event when the a non default dropdown item is clicked', () => {
+        const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+        findByDataTestId(nonDefaultDataTestId).vm.$emit('click');
+
+        expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, trackingAction, {
+          category: TRACKING_CATEGORY_SHOW,
+          label: trackingLabel,
+          property: 'type_Task',
+        });
+      });
+    },
+  );
+});
diff --git a/spec/frontend/work_items/components/notes/work_item_notes_activity_header_spec.js b/spec/frontend/work_items/components/notes/work_item_notes_activity_header_spec.js
index 3b87a5e3e88..daf74f7a93b 100644
--- a/spec/frontend/work_items/components/notes/work_item_notes_activity_header_spec.js
+++ b/spec/frontend/work_items/components/notes/work_item_notes_activity_header_spec.js
@@ -1,7 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import WorkItemNotesActivityHeader from '~/work_items/components/notes/work_item_notes_activity_header.vue';
-import ActivitySort from '~/work_items/components/notes/activity_sort.vue';
-import ActivityFilter from '~/work_items/components/notes/activity_filter.vue';
 import { ASC } from '~/notes/constants';
 import {
   WORK_ITEM_NOTES_FILTER_ALL_NOTES,
@@ -12,8 +10,8 @@ describe('Work Item Note Activity Header', () => {
   let wrapper;
 
   const findActivityLabelHeading = () => wrapper.find('h3');
-  const findActivityFilterDropdown = () => wrapper.findComponent(ActivityFilter);
-  const findActivitySortDropdown = () => wrapper.findComponent(ActivitySort);
+  const findActivityFilterDropdown = () => wrapper.findByTestId('work-item-filter');
+  const findActivitySortDropdown = () => wrapper.findByTestId('work-item-sort');
 
   const createComponent = ({
     disableActivityFilterSort = false,
@@ -21,7 +19,7 @@ describe('Work Item Note Activity Header', () => {
     workItemType = 'Task',
     discussionFilter = WORK_ITEM_NOTES_FILTER_ALL_NOTES,
   } = {}) => {
-    wrapper = shallowMount(WorkItemNotesActivityHeader, {
+    wrapper = shallowMountExtended(WorkItemNotesActivityHeader, {
       propsData: {
         disableActivityFilterSort,
         sortOrder,