1 files changed, 51 insertions, 6 deletions

diff --git a/spec/frontend/vue_shared/components/registry/registry_search_spec.js b/spec/frontend/vue_shared/components/registry/registry_search_spec.js
index 28bdb275756..f5ef5b3d443 100644
--- a/spec/frontend/vue_shared/components/registry/registry_search_spec.js
+++ b/spec/frontend/vue_shared/components/registry/registry_search_spec.js
@@ -1,5 +1,6 @@
 import { GlSorting, GlSortingItem, GlFilteredSearch } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 import component from '~/vue_shared/components/registry/registry_search.vue';
 
 describe('Registry Search', () => {
@@ -12,8 +13,18 @@ describe('Registry Search', () => {
   const defaultProps = {
     filter: [],
     sorting: { sort: 'asc', orderBy: 'name' },
-    tokens: ['foo'],
-    sortableFields: [{ label: 'name', orderBy: 'name' }, { label: 'baz' }],
+    tokens: [{ type: 'foo' }],
+    sortableFields: [
+      { label: 'name', orderBy: 'name' },
+      { label: 'baz', orderBy: 'bar' },
+    ],
+  };
+
+  const defaultQueryChangedPayload = {
+    foo: '',
+    orderBy: 'name',
+    search: [],
+    sort: 'asc',
   };
 
   const mountComponent = (propsData = defaultProps) => {
@@ -55,20 +66,22 @@ describe('Registry Search', () => {
       expect(wrapper.emitted('filter:changed')).toEqual([['foo']]);
     });
 
-    it('emits filter:submit on submit event', () => {
+    it('emits filter:submit and query:changed on submit event', () => {
       mountComponent();
 
       findFilteredSearch().vm.$emit('submit');
       expect(wrapper.emitted('filter:submit')).toEqual([[]]);
+      expect(wrapper.emitted('query:changed')).toEqual([[defaultQueryChangedPayload]]);
     });
 
-    it('emits filter:changed and filter:submit on clear event', () => {
+    it('emits filter:changed, filter:submit and query:changed on clear event', () => {
       mountComponent();
 
       findFilteredSearch().vm.$emit('clear');
 
       expect(wrapper.emitted('filter:changed')).toEqual([[[]]]);
       expect(wrapper.emitted('filter:submit')).toEqual([[]]);
+      expect(wrapper.emitted('query:changed')).toEqual([[defaultQueryChangedPayload]]);
     });
 
     it('binds tokens prop', () => {
@@ -90,15 +103,47 @@ describe('Registry Search', () => {
 
       findPackageListSorting().vm.$emit('sortDirectionChange');
       expect(wrapper.emitted('sorting:changed')).toEqual([[{ sort: 'desc' }]]);
+      expect(wrapper.emitted('query:changed')).toEqual([
+        [{ ...defaultQueryChangedPayload, sort: 'desc' }],
+      ]);
     });
 
     it('on sort item click emits sorting:changed event ', () => {
       mountComponent();
 
-      findSortingItems().at(0).vm.$emit('click');
+      findSortingItems().at(1).vm.$emit('click');
 
       expect(wrapper.emitted('sorting:changed')).toEqual([
-        [{ orderBy: defaultProps.sortableFields[0].orderBy }],
+        [{ orderBy: defaultProps.sortableFields[1].orderBy }],
+      ]);
+      expect(wrapper.emitted('query:changed')).toEqual([
+        [{ ...defaultQueryChangedPayload, orderBy: 'bar' }],
+      ]);
+    });
+  });
+
+  describe('query string calculation', () => {
+    const filter = [
+      { type: FILTERED_SEARCH_TERM, value: { data: 'one' } },
+      { type: FILTERED_SEARCH_TERM, value: { data: 'two' } },
+      { type: 'typeOne', value: { data: 'value_one' } },
+      { type: 'typeTwo', value: { data: 'value_two' } },
+    ];
+
+    it('aggregates the filter in the correct object', () => {
+      mountComponent({ ...defaultProps, filter });
+
+      findFilteredSearch().vm.$emit('submit');
+
+      expect(wrapper.emitted('query:changed')).toEqual([
+        [
+          {
+            ...defaultQueryChangedPayload,
+            search: ['one', 'two'],
+            typeOne: 'value_one',
+            typeTwo: 'value_two',
+          },
+        ],
       ]);
     });
   });