1 files changed, 5 insertions, 110 deletions

diff --git a/spec/frontend/projects/commit/components/branches_dropdown_spec.js b/spec/frontend/projects/commit/components/branches_dropdown_spec.js
index a84dd246f5d..7334e007e18 100644
--- a/spec/frontend/projects/commit/components/branches_dropdown_spec.js
+++ b/spec/frontend/projects/commit/components/branches_dropdown_spec.js
@@ -1,9 +1,8 @@
-import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import BranchesDropdown from '~/projects/commit/components/branches_dropdown.vue';
 
 Vue.use(Vuex);
@@ -34,12 +33,7 @@ describe('BranchesDropdown', () => {
       }),
     );
   };
-
-  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findSearchBoxByType = () => wrapper.findComponent(GlSearchBoxByType);
-  const findDropdownItemByIndex = (index) => wrapper.findAllComponents(GlDropdownItem).at(index);
-  const findNoResults = () => wrapper.findByTestId('empty-result-message');
-  const findLoading = () => wrapper.findByTestId('dropdown-text-loading-icon');
+  const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox);
 
   afterEach(() => {
     wrapper.destroy();
@@ -55,72 +49,6 @@ describe('BranchesDropdown', () => {
     it('invokes fetchBranches', () => {
       expect(spyFetchBranches).toHaveBeenCalled();
     });
-
-    describe('with a value but visually blanked', () => {
-      beforeEach(() => {
-        createComponent({ value: '_main_', blanked: true }, { branch: '_main_' });
-      });
-
-      it('renders all branches', () => {
-        expect(findAllDropdownItems()).toHaveLength(3);
-        expect(findDropdownItemByIndex(0).text()).toBe('_main_');
-        expect(findDropdownItemByIndex(1).text()).toBe('_branch_1_');
-        expect(findDropdownItemByIndex(2).text()).toBe('_branch_2_');
-      });
-
-      it('selects the active branch', () => {
-        expect(wrapper.vm.isSelected('_main_')).toBe(true);
-      });
-    });
-  });
-
-  describe('Loading states', () => {
-    it('shows loading icon while fetching', () => {
-      createComponent({ value: '' }, { isFetching: true });
-
-      expect(findLoading().isVisible()).toBe(true);
-    });
-
-    it('does not show loading icon', () => {
-      createComponent({ value: '' });
-
-      expect(findLoading().isVisible()).toBe(false);
-    });
-  });
-
-  describe('No branches found', () => {
-    beforeEach(() => {
-      createComponent({ value: '_non_existent_branch_' });
-    });
-
-    it('renders empty results message', () => {
-      expect(findNoResults().text()).toBe('No matching results');
-    });
-
-    it('shows GlSearchBoxByType with default attributes', () => {
-      expect(findSearchBoxByType().exists()).toBe(true);
-      expect(findSearchBoxByType().vm.$attrs).toMatchObject({
-        placeholder: 'Search branches',
-        debounce: DEFAULT_DEBOUNCE_AND_THROTTLE_MS,
-      });
-    });
-  });
-
-  describe('Search term is empty', () => {
-    beforeEach(() => {
-      createComponent({ value: '' });
-    });
-
-    it('renders all branches when search term is empty', () => {
-      expect(findAllDropdownItems()).toHaveLength(3);
-      expect(findDropdownItemByIndex(0).text()).toBe('_main_');
-      expect(findDropdownItemByIndex(1).text()).toBe('_branch_1_');
-      expect(findDropdownItemByIndex(2).text()).toBe('_branch_2_');
-    });
-
-    it('should not be selected on the inactive branch', () => {
-      expect(wrapper.vm.isSelected('_main_')).toBe(false);
-    });
   });
 
   describe('When searching', () => {
@@ -131,7 +59,7 @@ describe('BranchesDropdown', () => {
     it('invokes fetchBranches', async () => {
       const spy = jest.spyOn(wrapper.vm, 'fetchBranches');
 
-      findSearchBoxByType().vm.$emit('input', '_anything_');
+      findDropdown().vm.$emit('search', '_anything_');
 
       await nextTick();
 
@@ -140,46 +68,13 @@ describe('BranchesDropdown', () => {
     });
   });
 
-  describe('Branches found', () => {
-    beforeEach(() => {
-      createComponent({ value: '_branch_1_' }, { branch: '_branch_1_' });
-    });
-
-    it('renders only the branch searched for', () => {
-      expect(findAllDropdownItems()).toHaveLength(1);
-      expect(findDropdownItemByIndex(0).text()).toBe('_branch_1_');
-    });
-
-    it('should not display empty results message', () => {
-      expect(findNoResults().exists()).toBe(false);
-    });
-
-    it('should signify this branch is selected', () => {
-      expect(wrapper.vm.isSelected('_branch_1_')).toBe(true);
-    });
-
-    it('should signify the branch is not selected', () => {
-      expect(wrapper.vm.isSelected('_not_selected_branch_')).toBe(false);
-    });
-
-    describe('Custom events', () => {
-      it('should emit selectBranch if an branch is clicked', () => {
-        findDropdownItemByIndex(0).vm.$emit('click');
-
-        expect(wrapper.emitted('selectBranch')).toEqual([['_branch_1_']]);
-        expect(wrapper.vm.searchTerm).toBe('_branch_1_');
-      });
-    });
-  });
-
   describe('Case insensitive for search term', () => {
     beforeEach(() => {
       createComponent({ value: '_BrAnCh_1_' });
     });
 
-    it('renders only the branch searched for', () => {
-      expect(findAllDropdownItems()).toHaveLength(1);
-      expect(findDropdownItemByIndex(0).text()).toBe('_branch_1_');
+    it('returns only the branch searched for', () => {
+      expect(findDropdown().props('items')).toEqual([{ text: '_branch_1_', value: '_branch_1_' }]);
     });
   });
 });