1 files changed, 117 insertions, 34 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 8f07f63993d..c11b20a692e 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,9 +1,15 @@
-import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NamespaceSelect, {
   i18n,
+  EMPTY_NAMESPACE_ID,
 } from '~/vue_shared/components/namespace_select/namespace_select.vue';
-import { user, group, namespaces } from './mock_data';
+import { userNamespaces, groupNamespaces } from './mock_data';
+
+const FLAT_NAMESPACES = [...groupNamespaces, ...userNamespaces];
+const EMPTY_NAMESPACE_TITLE = 'Empty namespace TEST';
+const EMPTY_NAMESPACE_ITEM = { id: EMPTY_NAMESPACE_ID, humanName: EMPTY_NAMESPACE_TITLE };
 
 describe('Namespace Select', () => {
   let wrapper;
@@ -11,71 +17,115 @@ describe('Namespace Select', () => {
   const createComponent = (props = {}) =>
     shallowMountExtended(NamespaceSelect, {
       propsData: {
-        data: namespaces,
+        userNamespaces,
+        groupNamespaces,
         ...props,
       },
+      stubs: {
+        // We have to "full" mount GlDropdown so that slot children will render
+        GlDropdown,
+      },
     });
 
   const wrappersText = (arr) => arr.wrappers.map((w) => w.text());
-  const flatNamespaces = () => [...group, ...user];
   const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findDropdownAttributes = (attr) => findDropdown().attributes(attr);
-  const selectedDropdownItemText = () => findDropdownAttributes('text');
+  const findDropdownText = () => findDropdown().props('text');
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findDropdownItemsTexts = () => findDropdownItems().wrappers.map((x) => x.text());
   const findSectionHeaders = () => wrapper.findAllComponents(GlDropdownSectionHeader);
-
-  beforeEach(() => {
-    wrapper = createComponent();
-  });
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
+  const search = (term) => findSearchBox().vm.$emit('input', term);
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('renders the dropdown', () => {
-    expect(findDropdown().exists()).toBe(true);
-  });
+  describe('default', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
 
-  it('renders each dropdown item', () => {
-    const items = findDropdownItems().wrappers;
-    expect(items).toHaveLength(flatNamespaces().length);
-  });
+    it('renders the dropdown', () => {
+      expect(findDropdown().exists()).toBe(true);
+    });
 
-  it('renders the human name for each item', () => {
-    const dropdownItems = wrappersText(findDropdownItems());
-    const flatNames = flatNamespaces().map(({ humanName }) => humanName);
-    expect(dropdownItems).toEqual(flatNames);
-  });
+    it('renders each dropdown item', () => {
+      expect(findDropdownItemsTexts()).toEqual(FLAT_NAMESPACES.map((x) => x.humanName));
+    });
+
+    it('renders default dropdown text', () => {
+      expect(findDropdownText()).toBe(i18n.DEFAULT_TEXT);
+    });
+
+    it('splits group and user namespaces', () => {
+      const headers = findSectionHeaders();
+      expect(wrappersText(headers)).toEqual([i18n.GROUPS, i18n.USERS]);
+    });
 
-  it('sets the initial dropdown text', () => {
-    expect(selectedDropdownItemText()).toBe(i18n.DEFAULT_TEXT);
+    it('does not render wrapper as full width', () => {
+      expect(findDropdown().attributes('block')).toBeUndefined();
+    });
   });
 
-  it('splits group and user namespaces', () => {
-    const headers = findSectionHeaders();
-    expect(headers).toHaveLength(2);
-    expect(wrappersText(headers)).toEqual([i18n.GROUPS, i18n.USERS]);
+  it('with defaultText, it overrides dropdown text', () => {
+    const textOverride = 'Select an option';
+
+    wrapper = createComponent({ defaultText: textOverride });
+
+    expect(findDropdownText()).toBe(textOverride);
   });
 
-  it('sets the dropdown to full width', () => {
-    expect(findDropdownAttributes('block')).toBeUndefined();
+  it('with includeHeaders=false, hides group/user headers', () => {
+    wrapper = createComponent({ includeHeaders: false });
+
+    expect(findSectionHeaders()).toHaveLength(0);
+  });
 
+  it('with fullWidth=true, sets the dropdown to full width', () => {
     wrapper = createComponent({ fullWidth: true });
 
-    expect(findDropdownAttributes('block')).not.toBeUndefined();
-    expect(findDropdownAttributes('block')).toBe('true');
+    expect(findDropdown().attributes('block')).toBe('true');
+  });
+
+  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]}
+    `(
+      'with term=$term and includeEmptyNamespace=$includeEmptyNamespace, should show $expectedItems.length',
+      async ({ term, includeEmptyNamespace, expectedItems }) => {
+        wrapper = createComponent({
+          includeEmptyNamespace,
+          emptyNamespaceTitle: EMPTY_NAMESPACE_TITLE,
+        });
+
+        search(term);
+
+        await nextTick();
+
+        const expected = expectedItems.map((x) => x.humanName);
+
+        expect(findDropdownItemsTexts()).toEqual(expected);
+      },
+    );
   });
 
   describe('with a selected namespace', () => {
     const selectedGroupIndex = 1;
-    const selectedItem = group[selectedGroupIndex];
+    const selectedItem = groupNamespaces[selectedGroupIndex];
 
     beforeEach(() => {
+      wrapper = createComponent();
+
       findDropdownItems().at(selectedGroupIndex).vm.$emit('click');
     });
 
     it('sets the dropdown text', () => {
-      expect(selectedDropdownItemText()).toBe(selectedItem.humanName);
+      expect(findDropdownText()).toBe(selectedItem.humanName);
     });
 
     it('emits the `select` event when a namespace is selected', () => {
@@ -83,4 +133,37 @@ describe('Namespace Select', () => {
       expect(wrapper.emitted('select')).toEqual([args]);
     });
   });
+
+  describe('with an empty namespace option', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        includeEmptyNamespace: true,
+        emptyNamespaceTitle: EMPTY_NAMESPACE_TITLE,
+      });
+    });
+
+    it('includes the empty namespace', () => {
+      const first = findDropdownItems().at(0);
+
+      expect(first.text()).toBe(EMPTY_NAMESPACE_TITLE);
+    });
+
+    it('emits the `select` event when a namespace is selected', () => {
+      findDropdownItems().at(0).vm.$emit('click');
+
+      expect(wrapper.emitted('select')).toEqual([[EMPTY_NAMESPACE_ITEM]]);
+    });
+
+    it.each`
+      desc                          | term       | shouldShow
+      ${'should hide empty option'} | ${'group'} | ${false}
+      ${'should show empty option'} | ${'Empty'} | ${true}
+    `('when search for $term, $desc', async ({ term, shouldShow }) => {
+      search(term);
+
+      await nextTick();
+
+      expect(findDropdownItemsTexts().includes(EMPTY_NAMESPACE_TITLE)).toBe(shouldShow);
+    });
+  });
 });