Add jest test for namespace select

Adds a new test suite for the namespace select
component

app/assets/javascripts/projects/settings/components/transfer_project_form.vue

 <script>
 import { GlFormGroup } from '@gitlab/ui';
-import { __ } from '~/locale';
-import NamespaceSelect from '~/vue_shared/components/namespace_select.vue';
+import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
 import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
 
 export default {
@@ -30,10 +29,7 @@ export default {
   },
   computed: {
     hasSelectedNamespace() {
-      return Boolean(this.selectedNamespace?.humanName);
-    },
-    dropdownText() {
-      return this.selectedNamespace?.humanName || this.$options.i18n.defaultText;
+      return Boolean(this.selectedNamespace?.id);
     },
   },
   methods: {
@@ -42,9 +38,6 @@ export default {
       this.$emit('selectNamespace', selectedNamespace.id);
     },
   },
-  i18n: {
-    defaultText: __('Select a namespace'),
-  },
 };
 </script>
 <template>
@@ -54,7 +47,7 @@ export default {
         data-testid="transfer-project-namespace"
         :full-width="true"
         :data="namespaces"
-        :dropdown-text="dropdownText"
+        :selected-namespace="selectedNamespace"
         @select="handleSelect"
       />
     </gl-form-group>

app/assets/javascripts/vue_shared/components/namespace_select.vue → app/assets/javascripts/vue_shared/components/namespace_select/namespace_select.vue

 <script>
 import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, GlSearchBoxByType } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export const i18n = {
+  DEFAULT_TEXT: __('Select a namespace'),
+};
 
 const filterByName = (data, searchTerm = '') =>
   data.filter((d) => d.humanName.toLowerCase().includes(searchTerm));
@@ -13,28 +18,20 @@ export default {
     GlSearchBoxByType,
   },
   props: {
-    fullWidth: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    dropdownText: {
-      type: String,
-      required: true,
-    },
     data: {
       type: Object,
       required: true,
     },
-    dropdownClasses: {
-      type: Array,
+    fullWidth: {
+      type: Boolean,
       required: false,
-      default: () => [],
+      default: false,
     },
   },
   data() {
     return {
       searchTerm: '',
+      selectedNamespace: null,
     };
   },
   computed: {
@@ -52,16 +49,21 @@ export default {
       if (!this.hasUserNamespaces) return [];
       return filterByName(this.data.user, this.searchTerm);
     },
+    selectedNamespaceText() {
+      return this.selectedNamespace?.humanName || this.$options.i18n.DEFAULT_TEXT;
+    },
   },
   methods: {
     handleSelect(item) {
+      this.selectedNamespace = item;
       this.$emit('select', item);
     },
   },
+  i18n,
 };
 </script>
 <template>
-  <gl-dropdown :text="dropdownText" :block="fullWidth">
+  <gl-dropdown :text="selectedNamespaceText" :block="fullWidth">
     <template #header>
       <gl-search-box-by-type v-model.trim="searchTerm" />
     </template>

spec/frontend/vue_shared/components/namespace_select/mock_data.js

+export const group = [
+  { id: 1, name: 'Group 1', humanName: 'Group 1' },
+  { id: 2, name: 'Subgroup 1', humanName: 'Group 1 / Subgroup 1' },
+];
+
+export const user = [{ id: 3, name: 'User namespace 1', humanName: 'User namespace 1' }];
+
+export const namespaces = {
+  group,
+  user,
+};

spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js

+import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, GlSearchBoxByType } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import NamespaceSelect, {
+  i18n,
+} from '~/vue_shared/components/namespace_select/namespace_select.vue';
+import { user, group, namespaces } from './mock_data';
+
+describe('Namespace Select', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) =>
+    shallowMountExtended(NamespaceSelect, {
+      propsData: {
+        data: namespaces,
+        ...props,
+      },
+    });
+
+  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 findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findSectionHeaders = () => wrapper.findAllComponents(GlDropdownSectionHeader);
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the dropdown', () => {
+    expect(findDropdown().exists()).toBe(true);
+  });
+
+  it('renders each dropdown item', () => {
+    const items = findDropdownItems().wrappers;
+    expect(items).toHaveLength(flatNamespaces().length);
+  });
+
+  it('renders the human name for each item', () => {
+    const dropdownItems = wrappersText(findDropdownItems());
+    const flatNames = flatNamespaces().map(({ humanName }) => humanName);
+    expect(dropdownItems).toEqual(flatNames);
+  });
+
+  it('sets the initial dropdown text', () => {
+    expect(selectedDropdownItemText()).toBe(i18n.DEFAULT_TEXT);
+  });
+
+  it('splits group and user namespaces', () => {
+    const headers = findSectionHeaders();
+    expect(headers).toHaveLength(2);
+    expect(wrappersText(headers)).toEqual(['Groups', 'Users']);
+  });
+
+  it('sets the dropdown to full width', () => {
+    expect(findDropdownAttributes('block')).toBeUndefined();
+
+    wrapper = createComponent({ fullWidth: true });
+
+    expect(findDropdownAttributes('block')).not.toBeUndefined();
+    expect(findDropdownAttributes('block')).toBe('true');
+  });
+
+  describe('with a selected namespace', () => {
+    const selectedGroupIndex = 1;
+    const selectedItem = group[selectedGroupIndex];
+
+    beforeEach(() => {
+      findDropdownItems().at(selectedGroupIndex).vm.$emit('click');
+    });
+
+    it('sets the dropdown text', () => {
+      expect(selectedDropdownItemText()).toBe(selectedItem.humanName);
+    });
+
+    it('emits the `select` event when a namespace is selected', () => {
+      const args = [selectedItem];
+      expect(wrapper.emitted('select')).toEqual([args]);
+    });
+  });
+});