1 files changed, 43 insertions, 22 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..64227872af3 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';
@@ -10,6 +16,7 @@ describe('Ci environments dropdown', () => {
   const defaultProps = {
     areEnvironmentsLoading: false,
     environments: envs,
+    hasEnvScopeQuery: false,
     selectedEnvironmentScope: '',
   };
 
@@ -19,19 +26,15 @@ 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 } = {}) => {
+  const createComponent = ({ props = {}, searchTerm = '' } = {}) => {
     wrapper = mountExtended(CiEnvironmentsDropdown, {
       propsData: {
         ...defaultProps,
         ...props,
       },
-      provide: {
-        glFeatures: {
-          ciLimitEnvironmentScope: enableFeatureFlag,
-        },
-      },
     });
 
     findListbox().vm.$emit('search', searchTerm);
@@ -42,6 +45,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);
@@ -51,14 +58,14 @@ describe('Ci environments dropdown', () => {
 
   describe('Search term is empty', () => {
     describe.each`
-      featureFlag | flagStatus    | defaultEnvStatus      | firstItemValue | envIndices
-      ${true}     | ${'enabled'}  | ${'prepends'}         | ${'*'}         | ${[1, 2, 3]}
-      ${false}    | ${'disabled'} | ${'does not prepend'} | ${envs[0]}     | ${[0, 1, 2]}
+      hasEnvScopeQuery | status              | defaultEnvStatus      | firstItemValue | envIndices
+      ${true}          | ${'exists'}         | ${'prepends'}         | ${'*'}         | ${[1, 2, 3]}
+      ${false}         | ${'does not exist'} | ${'does not prepend'} | ${envs[0]}     | ${[0, 1, 2]}
     `(
-      'when ciLimitEnvironmentScope feature flag is $flagStatus',
-      ({ featureFlag, defaultEnvStatus, firstItemValue, envIndices }) => {
+      'when query for fetching environment scope $status',
+      ({ defaultEnvStatus, firstItemValue, hasEnvScopeQuery, envIndices }) => {
         beforeEach(() => {
-          createComponent({ props: { environments: envs }, enableFeatureFlag: featureFlag });
+          createComponent({ props: { environments: envs, hasEnvScopeQuery } });
         });
 
         it(`${defaultEnvStatus} * in listbox`, () => {
@@ -91,7 +98,7 @@ describe('Ci environments dropdown', () => {
     });
   });
 
-  describe('When ciLimitEnvironmentScope feature flag is disabled', () => {
+  describe('when environments are not fetched via graphql', () => {
     const currentEnv = envs[2];
 
     beforeEach(() => {
@@ -118,11 +125,15 @@ describe('Ci environments dropdown', () => {
     });
   });
 
-  describe('When ciLimitEnvironmentScope feature flag is enabled', () => {
+  describe('when fetching environments via graphql', () => {
     const currentEnv = envs[2];
 
     beforeEach(() => {
-      createComponent({ enableFeatureFlag: true });
+      createComponent({ props: { hasEnvScopeQuery: true } });
+    });
+
+    it('renders dropdown divider', () => {
+      expect(findDropdownDivider().exists()).toBe(true);
     });
 
     it('renders environments passed down to it', async () => {
@@ -131,6 +142,22 @@ describe('Ci environments dropdown', () => {
       expect(findAllListboxItems()).toHaveLength(envs.length);
     });
 
+    it('renders dropdown loading icon while fetch query is loading', () => {
+      createComponent({ props: { areEnvironmentsLoading: true, hasEnvScopeQuery: 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({ props: { areEnvironmentsLoading: true, hasEnvScopeQuery: 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 +167,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));