2 files changed, 71 insertions, 33 deletions

diff --git a/spec/frontend/groups/components/overview_tabs_spec.js b/spec/frontend/groups/components/overview_tabs_spec.js
index 93e087e10f2..b615679dcc5 100644
--- a/spec/frontend/groups/components/overview_tabs_spec.js
+++ b/spec/frontend/groups/components/overview_tabs_spec.js
@@ -67,6 +67,7 @@ describe('OverviewTabs', () => {
   const findTabPanels = () => wrapper.findAllComponents(GlTab);
   const findTab = (name) => wrapper.findByRole('tab', { name });
   const findSelectedTab = () => wrapper.findByRole('tab', { selected: true });
+  const findSearchInput = () => wrapper.findByPlaceholderText(OverviewTabs.i18n.searchPlaceholder);
 
   beforeEach(() => {
     axiosMock = new AxiosMockAdapter(axios);
@@ -244,18 +245,39 @@ describe('OverviewTabs', () => {
     };
 
     describe('when search is typed in', () => {
-      const search = 'Foo bar';
+      describe('when search is greater than or equal to 3 characters', () => {
+        const search = 'Foo bar';
 
-      beforeEach(async () => {
-        await setup();
-        await wrapper.findByPlaceholderText(OverviewTabs.i18n.searchPlaceholder).setValue(search);
-      });
+        beforeEach(async () => {
+          await setup();
+          await findSearchInput().setValue(search);
+        });
 
-      it('updates query string with `filter` key', () => {
-        expect(routerMock.push).toHaveBeenCalledWith({ query: { filter: search } });
+        it('updates query string with `filter` key', () => {
+          expect(routerMock.push).toHaveBeenCalledWith({ query: { filter: search } });
+        });
+
+        sharedAssertions({ search, sort: defaultProvide.initialSort });
       });
 
-      sharedAssertions({ search, sort: defaultProvide.initialSort });
+      describe('when search is less than 3 characters', () => {
+        const search = 'Fo';
+
+        beforeEach(async () => {
+          await setup();
+          await findSearchInput().setValue(search);
+        });
+
+        it('does not emit `fetchFilteredAndSortedGroups` event from `eventHub`', () => {
+          expect(eventHub.$emit).not.toHaveBeenCalledWith(
+            `${ACTIVE_TAB_SUBGROUPS_AND_PROJECTS}fetchFilteredAndSortedGroups`,
+            {
+              filterGroupsBy: search,
+              sortBy: defaultProvide.initialSort,
+            },
+          );
+        });
+      });
     });
 
     describe('when sort is changed', () => {
@@ -308,6 +330,16 @@ describe('OverviewTabs', () => {
         ).toBe('Foo bar');
       });
 
+      describe('when search is cleared', () => {
+        it('removes `filter` key from query string', async () => {
+          await findSearchInput().setValue('');
+
+          expect(routerMock.push).toHaveBeenCalledWith({
+            query: { sort: SORTING_ITEM_UPDATED.desc },
+          });
+        });
+      });
+
       it('sets sort dropdown', () => {
         expect(wrapper.findComponent(GlSorting).props()).toMatchObject({
           text: SORTING_ITEM_UPDATED.label,
diff --git a/spec/frontend/groups/components/transfer_group_form_spec.js b/spec/frontend/groups/components/transfer_group_form_spec.js
index 7cbe6e5bbab..0065820f78f 100644
--- a/spec/frontend/groups/components/transfer_group_form_spec.js
+++ b/spec/frontend/groups/components/transfer_group_form_spec.js
@@ -1,8 +1,13 @@
 import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import Component from '~/groups/components/transfer_group_form.vue';
+import TransferLocationsForm, { i18n } from '~/groups/components/transfer_group_form.vue';
 import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
-import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select_deprecated.vue';
+import TransferLocations from '~/groups_projects/components/transfer_locations.vue';
+import { getGroupTransferLocations } from '~/api/groups_api';
+
+jest.mock('~/api/groups_api', () => ({
+  getGroupTransferLocations: jest.fn(),
+}));
 
 describe('Transfer group form', () => {
   let wrapper;
@@ -22,25 +27,25 @@ describe('Transfer group form', () => {
   ];
 
   const defaultProps = {
-    groupNamespaces,
     paidGroupHelpLink,
     isPaidGroup: false,
     confirmationPhrase,
     confirmButtonText,
   };
 
-  const createComponent = (propsData = {}) =>
-    shallowMountExtended(Component, {
+  const createComponent = (propsData = {}) => {
+    wrapper = shallowMountExtended(TransferLocationsForm, {
       propsData: {
         ...defaultProps,
         ...propsData,
       },
       stubs: { GlSprintf },
     });
+  };
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findConfirmDanger = () => wrapper.findComponent(ConfirmDanger);
-  const findNamespaceSelect = () => wrapper.findComponent(NamespaceSelect);
+  const findTransferLocations = () => wrapper.findComponent(TransferLocations);
   const findHiddenInput = () => wrapper.find('[name="new_parent_group_id"]');
 
   afterEach(() => {
@@ -49,21 +54,17 @@ describe('Transfer group form', () => {
 
   describe('default', () => {
     beforeEach(() => {
-      wrapper = createComponent();
+      createComponent();
     });
 
-    it('renders the namespace select component', () => {
-      expect(findNamespaceSelect().exists()).toBe(true);
-    });
+    it('renders the transfer locations dropdown and passes correct props', () => {
+      findTransferLocations().props('groupTransferLocationsApiMethod')();
 
-    it('sets the namespace select properties', () => {
-      expect(findNamespaceSelect().props()).toMatchObject({
-        defaultText: 'Select parent group',
-        fullWidth: false,
-        includeHeaders: false,
-        emptyNamespaceTitle: 'No parent group',
-        includeEmptyNamespace: true,
-        groupNamespaces,
+      expect(getGroupTransferLocations).toHaveBeenCalled();
+      expect(findTransferLocations().props()).toMatchObject({
+        value: null,
+        label: i18n.dropdownLabel,
+        additionalDropdownItems: TransferLocationsForm.additionalDropdownItems,
       });
     });
 
@@ -90,10 +91,15 @@ describe('Transfer group form', () => {
   });
 
   describe('with a selected project', () => {
-    const [firstGroup] = groupNamespaces;
+    const [selectedItem] = groupNamespaces;
+
     beforeEach(() => {
-      wrapper = createComponent();
-      findNamespaceSelect().vm.$emit('select', firstGroup);
+      createComponent();
+      findTransferLocations().vm.$emit('input', selectedItem);
+    });
+
+    it('sets `value` prop on `TransferLocations` component', () => {
+      expect(findTransferLocations().props('value')).toEqual(selectedItem);
     });
 
     it('sets the confirm danger disabled property to false', () => {
@@ -102,7 +108,7 @@ describe('Transfer group form', () => {
 
     it('sets the hidden input field', () => {
       expect(findHiddenInput().exists()).toBe(true);
-      expect(parseInt(findHiddenInput().attributes('value'), 10)).toBe(firstGroup.id);
+      expect(findHiddenInput().attributes('value')).toBe(String(selectedItem.id));
     });
 
     it('emits "confirm" event when the danger modal is confirmed', () => {
@@ -116,15 +122,15 @@ describe('Transfer group form', () => {
 
   describe('isPaidGroup = true', () => {
     beforeEach(() => {
-      wrapper = createComponent({ isPaidGroup: true });
+      createComponent({ isPaidGroup: true });
     });
 
     it('disables the transfer button', () => {
       expect(findConfirmDanger().props()).toMatchObject({ disabled: true });
     });
 
-    it('hides the namespace selector button', () => {
-      expect(findNamespaceSelect().exists()).toBe(false);
+    it('hides the transfer locations dropdown', () => {
+      expect(findTransferLocations().exists()).toBe(false);
     });
   });
 });