1 files changed, 20 insertions, 7 deletions
diff --git a/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js b/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js
index 75c6e8e4540..5c5ea102f12 100644
--- a/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
@@ -10,6 +10,9 @@ describe('Ci environments dropdown', () => {
   let wrapper;
   let store;
 
+  const enterSearchTerm = (value) =>
+    wrapper.find('[data-testid="ci-environment-search"]').setValue(value);
+
   const createComponent = (term) => {
     store = new Vuex.Store({
       getters: {
@@ -24,11 +27,12 @@ describe('Ci environments dropdown', () => {
         value: term,
       },
     });
+    enterSearchTerm(term);
   };
 
-  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
-  const findDropdownItemByIndex = (index) => wrapper.findAll(GlDropdownItem).at(index);
-  const findActiveIconByIndex = (index) => findDropdownItemByIndex(index).find(GlIcon);
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findDropdownItemByIndex = (index) => wrapper.findAllComponents(GlDropdownItem).at(index);
+  const findActiveIconByIndex = (index) => findDropdownItemByIndex(index).findComponent(GlIcon);
 
   afterEach(() => {
     wrapper.destroy();
@@ -68,8 +72,9 @@ describe('Ci environments dropdown', () => {
   });
 
   describe('Environments found', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       createComponent('prod');
+      await wrapper.vm.$nextTick();
     });
 
     it('renders only the environment searched for', () => {
@@ -84,21 +89,29 @@ describe('Ci environments dropdown', () => {
     });
 
     it('should not display empty results message', () => {
-      expect(wrapper.find({ ref: 'noMatchingResults' }).exists()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'noMatchingResults' }).exists()).toBe(false);
     });
 
     it('should display active checkmark if active', () => {
       expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(false);
     });
 
+    it('should clear the search term when showing the dropdown', () => {
+      wrapper.findComponent(GlDropdown).trigger('click');
+
+      expect(wrapper.find('[data-testid="ci-environment-search"]').text()).toBe('');
+    });
+
     describe('Custom events', () => {
       it('should emit selectEnvironment if an environment is clicked', () => {
         findDropdownItemByIndex(0).vm.$emit('click');
         expect(wrapper.emitted('selectEnvironment')).toEqual([['prod']]);
       });
 
-      it('should emit createClicked if an environment is clicked', () => {
+      it('should emit createClicked if an environment is clicked', async () => {
         createComponent('newscope');
+
+        await wrapper.vm.$nextTick();
         findDropdownItemByIndex(1).vm.$emit('click');
         expect(wrapper.emitted('createClicked')).toEqual([['newscope']]);
       });