Add latest changes from gitlab-org/gitlab@master

2 files changed, 54 insertions, 66 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 45056927940..14e1f34bc59 100644
--- a/spec/frontend/feature_flags/components/new_environments_dropdown_spec.js
+++ b/spec/frontend/feature_flags/components/new_environments_dropdown_spec.js
@@ -1,4 +1,4 @@
-import { GlTokenSelector } from '@gitlab/ui';
+import { GlLoadingIcon, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
@@ -13,102 +13,91 @@ describe('New Environments Dropdown', () => {
   let wrapper;
   let axiosMock;
 
-  const findTokenSelector = () => wrapper.findComponent(GlTokenSelector);
-  const dropdownItems = () => findTokenSelector().props('dropdownItems');
-
-  const factory = (props = {}) =>
-    shallowMount(NewEnvironmentsDropdown, {
-      propsData: { selected: [], ...props },
+  beforeEach(() => {
+    axiosMock = new MockAdapter(axios);
+    wrapper = shallowMount(NewEnvironmentsDropdown, {
       provide: { environmentsEndpoint: TEST_HOST },
     });
+  });
 
   afterEach(() => {
     axiosMock.restore();
-
-    wrapper = null;
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
   });
 
   describe('before results', () => {
-    beforeEach(async () => {
-      axiosMock = new MockAdapter(axios);
-      wrapper = factory();
+    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();
     });
 
-    it('should show the loading state while fetching environments', async () => {
-      expect(findTokenSelector().props('loading')).toBe(false);
-
-      findTokenSelector().vm.$emit('text-input', 'prod');
-
-      await nextTick();
-
-      expect(findTokenSelector().props('loading')).toBe(true);
-
-      await axios.waitForAll();
-
-      expect(findTokenSelector().props('loading')).toBe(false);
-    });
-
-    it('should not show any dropdown items', async () => {
-      expect(dropdownItems()).toHaveLength(0);
+    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();
     });
   });
 
   describe('with empty results', () => {
+    let item;
     beforeEach(async () => {
-      axiosMock = new MockAdapter(axios);
-      wrapper = factory();
-
       axiosMock.onGet(TEST_HOST).reply(HTTP_STATUS_OK, []);
-
-      findTokenSelector().vm.$emit('text-input', TEST_SEARCH);
+      wrapper.findComponent(GlSearchBoxByType).vm.$emit('focus');
+      wrapper.findComponent(GlSearchBoxByType).vm.$emit('input', TEST_SEARCH);
+      await axios.waitForAll();
+      await nextTick();
+      item = wrapper.findComponent(GlDropdownItem);
     });
 
     it('should display a Create item label', () => {
-      expect(wrapper.text()).toContain('Create production');
+      expect(item.text()).toBe('Create production');
     });
-  });
-
-  describe('with a selected environment', () => {
-    beforeEach(async () => {
-      axiosMock = new MockAdapter(axios);
-      wrapper = factory({ selected: [{ id: 1, name: TEST_SEARCH }] });
 
-      axiosMock.onGet(TEST_HOST).reply(HTTP_STATUS_OK, []);
+    it('should display that no matching items are found', () => {
+      expect(wrapper.findComponent({ ref: 'noResults' }).exists()).toBe(true);
     });
 
-    it('should not display a Create item label when item already selected', async () => {
-      expect(findTokenSelector().attributes('allowuserdefinedtokens')).toBe('true');
-
-      findTokenSelector().vm.$emit('text-input', TEST_SEARCH);
-      await nextTick();
-
-      expect(findTokenSelector().attributes('allowuserdefinedtokens')).toBeUndefined();
+    it('should emit a new scope when selected', () => {
+      item.vm.$emit('click');
+      expect(wrapper.emitted('add')).toEqual([[TEST_SEARCH]]);
     });
   });
 
   describe('with results', () => {
-    beforeEach(async () => {
-      axiosMock = new MockAdapter(axios);
-      wrapper = factory();
-
+    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);
+      });
     });
 
-    it('should display one item per result', async () => {
-      expect(dropdownItems()).toHaveLength(0);
-
-      findTokenSelector().vm.$emit('text-input', 'prod');
-      await axios.waitForAll();
-
-      expect(dropdownItems()).toHaveLength(2);
+    it('should display one item per result', () => {
+      expect(items).toHaveLength(2);
     });
 
     it('should emit an add if an item is clicked', () => {
-      expect(wrapper.emitted('add')).toBeUndefined();
+      items.at(0).vm.$emit('click');
+      expect(wrapper.emitted('add')).toEqual([['prod']]);
+    });
 
-      findTokenSelector().vm.$emit('token-add', { id: 'fake-id', name: 'prod' });
+    it('should not display a create label', () => {
+      items = items.filter((i) => i.text().startsWith('Create'));
+      expect(items).toHaveLength(0);
+    });
 
-      expect(wrapper.emitted('add')).toEqual([['prod']]);
+    it('should not display a message about no results', () => {
+      expect(wrapper.findComponent({ ref: 'noResults' }).exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/feature_flags/components/strategy_spec.js b/spec/frontend/feature_flags/components/strategy_spec.js
index 1fd4866a9ab..84d4180fe63 100644
--- a/spec/frontend/feature_flags/components/strategy_spec.js
+++ b/spec/frontend/feature_flags/components/strategy_spec.js
@@ -189,10 +189,9 @@ describe('Feature flags strategy', () => {
 
       it('should display all selected scopes', async () => {
         const dropdown = wrapper.findComponent(NewEnvironmentsDropdown);
-
-        await dropdown.vm.$emit('add', 'production');
-        await dropdown.vm.$emit('add', 'staging');
-
+        dropdown.vm.$emit('add', 'production');
+        dropdown.vm.$emit('add', 'staging');
+        await nextTick();
         const tokens = wrapper.findAllComponents(GlToken);
         expect(tokens).toHaveLength(2);
         expect(tokens.at(0).text()).toBe('production');