1 files changed, 69 insertions, 12 deletions

diff --git a/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js b/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js
index c11b20a692e..2c14d65186b 100644
--- a/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js
+++ b/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js
@@ -1,5 +1,12 @@
 import { nextTick } from 'vue';
-import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, GlSearchBoxByType } from '@gitlab/ui';
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownSectionHeader,
+  GlSearchBoxByType,
+  GlIntersectionObserver,
+  GlLoadingIcon,
+} from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NamespaceSelect, {
   i18n,
@@ -7,7 +14,7 @@ import NamespaceSelect, {
 } from '~/vue_shared/components/namespace_select/namespace_select.vue';
 import { userNamespaces, groupNamespaces } from './mock_data';
 
-const FLAT_NAMESPACES = [...groupNamespaces, ...userNamespaces];
+const FLAT_NAMESPACES = [...userNamespaces, ...groupNamespaces];
 const EMPTY_NAMESPACE_TITLE = 'Empty namespace TEST';
 const EMPTY_NAMESPACE_ITEM = { id: EMPTY_NAMESPACE_ID, humanName: EMPTY_NAMESPACE_TITLE };
 
@@ -31,6 +38,8 @@ describe('Namespace Select', () => {
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownText = () => findDropdown().props('text');
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findGroupDropdownItems = () =>
+    wrapper.findByTestId('namespace-list-groups').findAllComponents(GlDropdownItem);
   const findDropdownItemsTexts = () => findDropdownItems().wrappers.map((x) => x.text());
   const findSectionHeaders = () => wrapper.findAllComponents(GlDropdownSectionHeader);
   const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
@@ -59,7 +68,7 @@ describe('Namespace Select', () => {
 
     it('splits group and user namespaces', () => {
       const headers = findSectionHeaders();
-      expect(wrappersText(headers)).toEqual([i18n.GROUPS, i18n.USERS]);
+      expect(wrappersText(headers)).toEqual([i18n.USERS, i18n.GROUPS]);
     });
 
     it('does not render wrapper as full width', () => {
@@ -89,18 +98,20 @@ describe('Namespace Select', () => {
 
   describe('with search', () => {
     it.each`
-      term           | includeEmptyNamespace | expectedItems
-      ${''}          | ${false}              | ${[...groupNamespaces, ...userNamespaces]}
-      ${'sub'}       | ${false}              | ${[groupNamespaces[1]]}
-      ${'User'}      | ${false}              | ${[...userNamespaces]}
-      ${'User'}      | ${true}               | ${[...userNamespaces]}
-      ${'namespace'} | ${true}               | ${[EMPTY_NAMESPACE_ITEM, ...userNamespaces]}
+      term           | includeEmptyNamespace | shouldFilterNamespaces | expectedItems
+      ${''}          | ${false}              | ${true}                | ${[...userNamespaces, ...groupNamespaces]}
+      ${'sub'}       | ${false}              | ${true}                | ${[groupNamespaces[1]]}
+      ${'User'}      | ${false}              | ${true}                | ${[...userNamespaces]}
+      ${'User'}      | ${true}               | ${true}                | ${[...userNamespaces]}
+      ${'namespace'} | ${true}               | ${true}                | ${[EMPTY_NAMESPACE_ITEM, ...userNamespaces]}
+      ${'sub'}       | ${false}              | ${false}               | ${[...userNamespaces, ...groupNamespaces]}
     `(
-      'with term=$term and includeEmptyNamespace=$includeEmptyNamespace, should show $expectedItems.length',
-      async ({ term, includeEmptyNamespace, expectedItems }) => {
+      'with term=$term, includeEmptyNamespace=$includeEmptyNamespace, and shouldFilterNamespaces=$shouldFilterNamespaces should show $expectedItems.length',
+      async ({ term, includeEmptyNamespace, shouldFilterNamespaces, expectedItems }) => {
         wrapper = createComponent({
           includeEmptyNamespace,
           emptyNamespaceTitle: EMPTY_NAMESPACE_TITLE,
+          shouldFilterNamespaces,
         });
 
         search(term);
@@ -114,6 +125,18 @@ describe('Namespace Select', () => {
     );
   });
 
+  describe('when search is typed in', () => {
+    it('emits `search` event', async () => {
+      wrapper = createComponent();
+
+      wrapper.findComponent(GlSearchBoxByType).vm.$emit('input', 'foo');
+
+      await nextTick();
+
+      expect(wrapper.emitted('search')).toEqual([['foo']]);
+    });
+  });
+
   describe('with a selected namespace', () => {
     const selectedGroupIndex = 1;
     const selectedItem = groupNamespaces[selectedGroupIndex];
@@ -121,7 +144,8 @@ describe('Namespace Select', () => {
     beforeEach(() => {
       wrapper = createComponent();
 
-      findDropdownItems().at(selectedGroupIndex).vm.$emit('click');
+      wrapper.findComponent(GlSearchBoxByType).vm.$emit('input', 'foo');
+      findGroupDropdownItems().at(selectedGroupIndex).vm.$emit('click');
     });
 
     it('sets the dropdown text', () => {
@@ -132,6 +156,10 @@ describe('Namespace Select', () => {
       const args = [selectedItem];
       expect(wrapper.emitted('select')).toEqual([args]);
     });
+
+    it('clears search', () => {
+      expect(wrapper.findComponent(GlSearchBoxByType).props('value')).toBe('');
+    });
   });
 
   describe('with an empty namespace option', () => {
@@ -166,4 +194,33 @@ describe('Namespace Select', () => {
       expect(findDropdownItemsTexts().includes(EMPTY_NAMESPACE_TITLE)).toBe(shouldShow);
     });
   });
+
+  describe('when `hasNextPageOfGroups` prop is `true`', () => {
+    it('renders `GlIntersectionObserver` and emits `load-more-groups` event when bottom is reached', () => {
+      wrapper = createComponent({ hasNextPageOfGroups: true });
+
+      const intersectionObserver = wrapper.findComponent(GlIntersectionObserver);
+
+      intersectionObserver.vm.$emit('appear');
+
+      expect(intersectionObserver.exists()).toBe(true);
+      expect(wrapper.emitted('load-more-groups')).toEqual([[]]);
+    });
+
+    describe('when `isLoadingMoreGroups` prop is `true`', () => {
+      it('renders a loading icon', () => {
+        wrapper = createComponent({ hasNextPageOfGroups: true, isLoadingMoreGroups: true });
+
+        expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('when `isSearchLoading` prop is `true`', () => {
+    it('sets `isLoading` prop to `true`', () => {
+      wrapper = createComponent({ isSearchLoading: true });
+
+      expect(wrapper.findComponent(GlSearchBoxByType).props('isLoading')).toBe(true);
+    });
+  });
 });