Merge branch '213925-fix-geo-replicables' into 'master'

Geo Replicables - Use debounce prop

See merge request gitlab-org/gitlab!39744

ee/app/assets/javascripts/geo_replicable/components/geo_replicable_filter_bar.vue

 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { debounce } from 'lodash';
 import {
   GlSearchBoxByType,
   GlDeprecatedDropdown,
@@ -25,10 +24,10 @@ export default {
       get() {
         return this.searchFilter;
       },
-      set: debounce(function debounceSearch(newVal) {
-        this.setSearch(newVal);
+      set(val) {
+        this.setSearch(val);
         this.fetchReplicableItems();
-      }, DEFAULT_SEARCH_DELAY),
+      },
     },
     resyncText() {
       return sprintf(__('Resync all %{replicableType}'), {
@@ -45,6 +44,7 @@ export default {
   },
   actionTypes: ACTION_TYPES,
   filterStates: FILTER_STATES,
+  debounce: DEFAULT_SEARCH_DELAY,
 };
 </script>
 
@@ -68,6 +68,7 @@ export default {
           </gl-deprecated-dropdown>
           <gl-search-box-by-type
             v-model="search"
+            :debounce="$options.debounce"
             class="px-1 my-1 my-sm-0 bg-white w-100"
             type="text"
             :placeholder="__('Filter by name')"

ee/spec/frontend/geo_replicable/components/geo_replicable_filter_bar_spec.js

 import Vuex from 'vuex';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import {
   GlDeprecatedDropdown,
   GlDeprecatedDropdownItem,
@@ -25,7 +25,7 @@ describe('GeoReplicableFilterBar', () => {
   };
 
   const createComponent = () => {
-    wrapper = mount(GeoReplicableFilterBar, {
+    wrapper = shallowMount(GeoReplicableFilterBar, {
       localVue,
       store: createStore({ replicableType: MOCK_REPLICABLE_TYPE, graphqlFieldName: null }),
       methods: {
@@ -75,51 +75,44 @@ describe('GeoReplicableFilterBar', () => {
         const index = 1;
         findGlDropdownItems()
           .at(index)
-          .find('button')
-          .trigger('click');
+          .vm.$emit('click');
 
         expect(actionSpies.setFilter).toHaveBeenCalledWith(index);
       });
     });
 
-    it('renders a search box always', () => {
-      expect(findGlSearchBox().exists()).toBeTruthy();
-    });
-
-    describe('Re-sync all button', () => {
+    describe('Search box', () => {
       it('renders always', () => {
-        expect(findGlButton().exists()).toBeTruthy();
+        expect(findGlSearchBox().exists()).toBe(true);
       });
 
-      it('calls initiateAllReplicableSyncs when clicked', () => {
-        findGlButton().trigger('click');
-        expect(actionSpies.initiateAllReplicableSyncs).toHaveBeenCalled();
+      it('has debounce prop', () => {
+        expect(findGlSearchBox().attributes('debounce')).toBe(DEFAULT_SEARCH_DELAY.toString());
       });
-    });
-  });
 
-  // TODO: These specs should fixed once we have a proper mock for debounce
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/213925
-  // eslint-disable-next-line jest/no-disabled-tests
-  describe.skip('when search changes', () => {
-    beforeEach(() => {
-      createComponent();
-      actionSpies.fetchReplicableItems.mockClear(); // Will get called on init
-      wrapper.vm.search = 'test search';
-    });
+      describe('onSearch', () => {
+        const testSearch = 'test search';
 
-    it(`should wait ${DEFAULT_SEARCH_DELAY}ms before calling setSearch`, () => {
-      expect(actionSpies.setSearch).not.toHaveBeenCalledWith('test search');
+        beforeEach(() => {
+          findGlSearchBox().vm.$emit('input', testSearch);
+        });
 
-      jest.runAllTimers(); // Debounce
-      expect(actionSpies.setSearch).toHaveBeenCalledWith('test search');
+        it('calls fetchSyncNamespaces when input event is fired from GlSearchBoxByType', () => {
+          expect(actionSpies.setSearch).toHaveBeenCalledWith(testSearch);
+          expect(actionSpies.fetchReplicableItems).toHaveBeenCalled();
+        });
+      });
     });
 
-    it(`should wait ${DEFAULT_SEARCH_DELAY}ms before calling fetchReplicableItems`, () => {
-      expect(actionSpies.fetchReplicableItems).not.toHaveBeenCalled();
+    describe('Re-sync all button', () => {
+      it('renders always', () => {
+        expect(findGlButton().exists()).toBeTruthy();
+      });
 
-      jest.runAllTimers(); // Debounce
-      expect(actionSpies.fetchReplicableItems).toHaveBeenCalled();
+      it('calls initiateAllReplicableSyncs when clicked', () => {
+        findGlButton().vm.$emit('click');
+        expect(actionSpies.initiateAllReplicableSyncs).toHaveBeenCalled();
+      });
     });
   });