Merge branch '213925-use-debounce-prop' into 'master'

Geo Node Form - Use debounce prop

Closes #213925

See merge request gitlab-org/gitlab!39630

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_namespaces.vue

 <script>
 import { GlIcon, GlSearchBoxByType, GlDeprecatedDropdown, GlDeprecatedButton } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
-import { debounce } from 'lodash';
 import { __, n__ } from '~/locale';
 import { SELECTIVE_SYNC_NAMESPACES } from '../constants';
 
@@ -37,9 +36,9 @@ export default {
     },
   },
   watch: {
-    namespaceSearch: debounce(function debounceSearch() {
+    namespaceSearch() {
       this.fetchSyncNamespaces(this.namespaceSearch);
-    }, 500),
+    },
   },
   methods: {
     ...mapActions(['fetchSyncNamespaces']),
@@ -60,7 +59,7 @@ export default {
 
 <template>
   <gl-deprecated-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces(namespaceSearch)">
-    <gl-search-box-by-type v-model="namespaceSearch" class="m-2" />
+    <gl-search-box-by-type v-model="namespaceSearch" class="m-2" :debounce="500" />
     <li v-for="namespace in synchronizationNamespaces" :key="namespace.id">
       <gl-deprecated-button class="d-flex align-items-center" @click="toggleNamespace(namespace)">
         <gl-icon :class="[{ invisible: !isSelected(namespace) }]" name="mobile-issue-close" />

ee/spec/frontend/geo_node_form/components/geo_node_form_namespaces_spec.js

@@ -56,10 +56,16 @@ describe('GeoNodeFormNamespaces', () => {
       expect(findGlDropdown().exists()).toBe(true);
     });
 
-    it('renders findGlDropdownSearch', () => {
+    describe('findGlDropdownSearch', () => {
+      it('renders always', () => {
         expect(findGlDropdownSearch().exists()).toBe(true);
       });
 
+      it('has debounce prop', () => {
+        expect(findGlDropdownSearch().attributes('debounce')).toBe('500');
+      });
+    });
+
     describe('findDropdownItems', () => {
       beforeEach(() => {
         delete actionSpies.isSelected;
@@ -79,37 +85,17 @@ describe('GeoNodeFormNamespaces', () => {
     });
   });
 
-  // 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('watchers', () => {
+  describe('watchers', () => {
     describe('namespaceSearch', () => {
       const namespaceSearch = 'test search';
 
       beforeEach(() => {
         createComponent();
-        wrapper.setData({
-          namespaceSearch,
+        findGlDropdownSearch().vm.$emit('input', namespaceSearch);
       });
-      });
-
-      it('should wait 500ms before calling fetchSyncNamespaces', () => {
-        expect(actionSpies.fetchSyncNamespaces).not.toHaveBeenCalledWith(namespaceSearch);
 
-        jest.advanceTimersByTime(500); // Debounce
+      it('calls fetchSyncNamespaces when input event is fired from GlSearchBoxByType', () => {
         expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledWith(namespaceSearch);
-        expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledTimes(1);
-      });
-
-      it('should call fetchSyncNamespaces once with the latest search term', () => {
-        expect(actionSpies.fetchSyncNamespaces).not.toHaveBeenCalledWith(namespaceSearch);
-        wrapper.setData({
-          namespaceSearch: 'test search2',
-        });
-
-        jest.advanceTimersByTime(500); // Debounce
-        expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledWith('test search2');
-        expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledTimes(1);
       });
     });
   });