1 files changed, 35 insertions, 45 deletions

diff --git a/spec/frontend/feature_flags/components/new_environments_dropdown_spec.js b/spec/frontend/feature_flags/components/new_environments_dropdown_spec.js
index 6156addd63f..b503a6f829e 100644
--- a/spec/frontend/feature_flags/components/new_environments_dropdown_spec.js
+++ b/spec/frontend/feature_flags/components/new_environments_dropdown_spec.js
@@ -1,7 +1,6 @@
-import { GlLoadingIcon, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NewEnvironmentsDropdown from '~/feature_flags/components/new_environments_dropdown.vue';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
@@ -13,87 +12,78 @@ describe('New Environments Dropdown', () => {
   let wrapper;
   let axiosMock;
 
-  beforeEach(() => {
+  const createWrapper = (axiosResult = []) => {
     axiosMock = new MockAdapter(axios);
-    wrapper = shallowMount(NewEnvironmentsDropdown, {
+    axiosMock.onGet(TEST_HOST).reply(HTTP_STATUS_OK, axiosResult);
+
+    wrapper = shallowMountExtended(NewEnvironmentsDropdown, {
       provide: { environmentsEndpoint: TEST_HOST },
+      stubs: {
+        GlCollapsibleListbox,
+      },
     });
-  });
+  };
+
+  const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
+  const findCreateEnvironmentButton = () => wrapper.findByTestId('add-environment-button');
 
   afterEach(() => {
     axiosMock.restore();
   });
 
   describe('before results', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
     it('should show a loading icon', () => {
-      axiosMock.onGet(TEST_HOST).reply(() => {
-        expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
-      });
-      wrapper.findComponent(GlSearchBoxByType).vm.$emit('focus');
-      return axios.waitForAll();
+      expect(findListbox().props('searching')).toBe(true);
     });
 
     it('should not show any dropdown items', () => {
-      axiosMock.onGet(TEST_HOST).reply(() => {
-        expect(wrapper.findAllComponents(GlDropdownItem)).toHaveLength(0);
-      });
-      wrapper.findComponent(GlSearchBoxByType).vm.$emit('focus');
-      return axios.waitForAll();
+      expect(findListbox().props('items')).toEqual([]);
     });
   });
 
   describe('with empty results', () => {
-    let item;
     beforeEach(async () => {
-      axiosMock.onGet(TEST_HOST).reply(HTTP_STATUS_OK, []);
-      wrapper.findComponent(GlSearchBoxByType).vm.$emit('focus');
-      wrapper.findComponent(GlSearchBoxByType).vm.$emit('input', TEST_SEARCH);
+      createWrapper();
+      findListbox().vm.$emit('search', TEST_SEARCH);
       await axios.waitForAll();
-      await nextTick();
-      item = wrapper.findComponent(GlDropdownItem);
     });
 
     it('should display a Create item label', () => {
-      expect(item.text()).toBe('Create production');
-    });
-
-    it('should display that no matching items are found', () => {
-      expect(wrapper.findComponent({ ref: 'noResults' }).exists()).toBe(true);
+      expect(findCreateEnvironmentButton().text()).toBe(`Create ${TEST_SEARCH}`);
     });
 
     it('should emit a new scope when selected', () => {
-      item.vm.$emit('click');
+      findCreateEnvironmentButton().vm.$emit('click');
       expect(wrapper.emitted('add')).toEqual([[TEST_SEARCH]]);
     });
   });
 
   describe('with results', () => {
-    let items;
-    beforeEach(() => {
-      axiosMock.onGet(TEST_HOST).reply(HTTP_STATUS_OK, ['prod', 'production']);
-      wrapper.findComponent(GlSearchBoxByType).vm.$emit('focus');
-      wrapper.findComponent(GlSearchBoxByType).vm.$emit('input', 'prod');
-      return axios.waitForAll().then(() => {
-        items = wrapper.findAllComponents(GlDropdownItem);
-      });
+    beforeEach(async () => {
+      createWrapper(['prod', 'production']);
+      findListbox().vm.$emit('search', TEST_SEARCH);
+      await axios.waitForAll();
     });
 
-    it('should display one item per result', () => {
-      expect(items).toHaveLength(2);
+    it('should populate results properly', () => {
+      expect(findListbox().props().items).toHaveLength(2);
     });
 
-    it('should emit an add if an item is clicked', () => {
-      items.at(0).vm.$emit('click');
+    it('should emit an add on selection', () => {
+      findListbox().vm.$emit('select', ['prod']);
       expect(wrapper.emitted('add')).toEqual([['prod']]);
     });
 
-    it('should not display a create label', () => {
-      items = items.filter((i) => i.text().startsWith('Create'));
-      expect(items).toHaveLength(0);
-    });
-
     it('should not display a message about no results', () => {
       expect(wrapper.findComponent({ ref: 'noResults' }).exists()).toBe(false);
     });
+
+    it('should not display a footer with the create button', () => {
+      expect(findCreateEnvironmentButton().exists()).toBe(false);
+    });
   });
 });