Add test for namespace select vue component

app/assets/javascripts/pages/admin/projects/components/namespace_select.vue

@@ -92,7 +92,13 @@ export default {
 
 <template>
   <div class="gl-display-flex">
-    <input v-if="fieldName" :name="fieldName" :value="selectedNamespaceId" type="hidden" />
+    <input
+      v-if="fieldName"
+      :name="fieldName"
+      :value="selectedNamespaceId"
+      type="hidden"
+      data-testid="hidden-input"
+    />
     <gl-dropdown
       :text="selectedNamespaceName"
       :header-text="$options.i18n.dropdownHeader"

spec/frontend/pages/admin/projects/components/namespace_select_spec.js

+import { mount } from '@vue/test-utils';
+import Api from '~/api';
+import NamespaceSelect from '~/pages/admin/projects/components/namespace_select.vue';
+
+describe('Dropdown select component', () => {
+  let wrapper;
+
+  const mountDropdown = (propsData) => {
+    wrapper = mount(NamespaceSelect, { propsData });
+  };
+
+  const findDropdownToggle = () => wrapper.find('button.dropdown-toggle');
+  const findNamespaceInput = () => wrapper.find('[data-testid="hidden-input"]');
+  const findFilterInput = () => wrapper.find('.namespace-search-box input');
+  const findDropdownOption = (match) => {
+    const buttons = wrapper
+      .findAll('button.dropdown-item')
+      .filter((node) => node.text().match(match));
+    return buttons.length ? buttons.at(0) : buttons;
+  };
+
+  const setFieldValue = async (field, value) => {
+    await field.setValue(value);
+    field.trigger('blur');
+  };
+
+  beforeEach(() => {
+    setFixtures('<div class="test-container"></div>');
+
+    jest.spyOn(Api, 'namespaces').mockImplementation((_, callback) =>
+      callback([
+        { id: 10, kind: 'user', full_path: 'Administrator' },
+        { id: 20, kind: 'group', full_path: 'GitLab Org' },
+      ]),
+    );
+  });
+
+  it('creates a hidden input if fieldName is provided', () => {
+    mountDropdown({ fieldName: 'namespace-input' });
+
+    expect(findNamespaceInput()).toExist();
+    expect(findNamespaceInput().attributes('name')).toBe('namespace-input');
+  });
+
+  describe('clicking dropdown options', () => {
+    it('retrieves namespaces based on filter query', async () => {
+      mountDropdown();
+
+      await setFieldValue(findFilterInput(), 'test');
+
+      expect(Api.namespaces).toHaveBeenCalledWith('test', expect.anything());
+    });
+
+    it('updates the dropdown value based upon selection', async () => {
+      mountDropdown({ fieldName: 'namespace-input' });
+
+      // wait for dropdown options to populate
+      await wrapper.vm.$nextTick();
+
+      expect(findDropdownOption('user: Administrator')).toExist();
+      expect(findDropdownOption('group: GitLab Org')).toExist();
+      expect(findDropdownOption('group: Foobar')).not.toExist();
+
+      findDropdownOption('user: Administrator').trigger('click');
+      await wrapper.vm.$nextTick();
+
+      expect(findNamespaceInput().attributes('value')).toBe('10');
+      expect(findDropdownToggle().text()).toBe('user: Administrator');
+    });
+
+    it('triggers a setNamespace event upon selection', async () => {
+      mountDropdown();
+
+      // wait for dropdown options to populate
+      await wrapper.vm.$nextTick();
+
+      findDropdownOption('group: GitLab Org').trigger('click');
+
+      expect(wrapper.emitted('setNamespace')).toHaveLength(1);
+      expect(wrapper.emitted('setNamespace')[0][0]).toBe(20);
+    });
+
+    it('displays "Any Namespace" option when showAny prop provided', () => {
+      mountDropdown({ showAny: true });
+      expect(wrapper.text()).toContain('Any namespace');
+    });
+
+    it('does not display "Any Namespace" option when showAny prop not provided', () => {
+      mountDropdown();
+      expect(wrapper.text()).not.toContain('Any namespace');
+    });
+  });
+});