Add latest changes from gitlab-org/gitlab@master

2 files changed, 38 insertions, 7 deletions

diff --git a/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js
index 1937e3b34b7..415a1d0bfa3 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js
@@ -1,4 +1,10 @@
-import { GlListboxItem, GlCollapsibleListbox, GlDropdownItem, GlIcon } from '@gitlab/ui';
+import {
+  GlListboxItem,
+  GlCollapsibleListbox,
+  GlDropdownDivider,
+  GlDropdownItem,
+  GlIcon,
+} from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { allEnvironments, ENVIRONMENT_QUERY_LIMIT } from '~/ci/ci_variable_list/constants';
 import CiEnvironmentsDropdown from '~/ci/ci_variable_list/components/ci_environments_dropdown.vue';
@@ -19,6 +25,7 @@ describe('Ci environments dropdown', () => {
   const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findListboxText = () => findListbox().props('toggleText');
   const findCreateWildcardButton = () => wrapper.findComponent(GlDropdownItem);
+  const findDropdownDivider = () => wrapper.findComponent(GlDropdownDivider);
   const findMaxEnvNote = () => wrapper.findByTestId('max-envs-notice');
 
   const createComponent = ({ props = {}, searchTerm = '', enableFeatureFlag = false } = {}) => {
@@ -42,6 +49,10 @@ describe('Ci environments dropdown', () => {
       createComponent({ searchTerm: 'stable' });
     });
 
+    it('renders dropdown divider', () => {
+      expect(findDropdownDivider().exists()).toBe(true);
+    });
+
     it('renders create button with search term if environments do not contain search term', () => {
       const button = findCreateWildcardButton();
       expect(button.exists()).toBe(true);
@@ -125,12 +136,32 @@ describe('Ci environments dropdown', () => {
       createComponent({ enableFeatureFlag: true });
     });
 
+    it('renders dropdown divider', () => {
+      expect(findDropdownDivider().exists()).toBe(true);
+    });
+
     it('renders environments passed down to it', async () => {
       await findListbox().vm.$emit('search', currentEnv);
 
       expect(findAllListboxItems()).toHaveLength(envs.length);
     });
 
+    it('renders dropdown loading icon while fetch query is loading', () => {
+      createComponent({ enableFeatureFlag: true, props: { areEnvironmentsLoading: true } });
+
+      expect(findListbox().props('loading')).toBe(true);
+      expect(findListbox().props('searching')).toBe(false);
+      expect(findDropdownDivider().exists()).toBe(false);
+    });
+
+    it('renders search loading icon while search query is loading and dropdown is open', async () => {
+      createComponent({ enableFeatureFlag: true, props: { areEnvironmentsLoading: true } });
+      await findListbox().vm.$emit('shown');
+
+      expect(findListbox().props('loading')).toBe(false);
+      expect(findListbox().props('searching')).toBe(true);
+    });
+
     it('emits event when searching', async () => {
       expect(wrapper.emitted('search-environment-scope')).toHaveLength(1);
 
@@ -140,12 +171,6 @@ describe('Ci environments dropdown', () => {
       expect(wrapper.emitted('search-environment-scope')[1]).toEqual([currentEnv]);
     });
 
-    it('renders loading icon while search query is loading', () => {
-      createComponent({ enableFeatureFlag: true, props: { areEnvironmentsLoading: true } });
-
-      expect(findListbox().props('searching')).toBe(true);
-    });
-
     it('displays note about max environments shown', () => {
       expect(findMaxEnvNote().exists()).toBe(true);
       expect(findMaxEnvNote().text()).toContain(String(ENVIRONMENT_QUERY_LIMIT));
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js
index f7b90c3da30..2f4d48aacfc 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js
@@ -251,6 +251,12 @@ describe('Ci Variable Shared Component', () => {
               expect.objectContaining({ search: 'staging' }),
             );
           });
+
+          it('does not show loading icon in table while searching for environments', () => {
+            findCiSettings().vm.$emit('search-environment-scope', 'staging');
+
+            expect(findLoadingIcon().exists()).toBe(false);
+          });
         });
 
         describe('when Limit Environment Scope FF is disabled', () => {