2 files changed, 41 insertions, 16 deletions

diff --git a/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
index 991dc8592e9..752783a306a 100644
--- a/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
@@ -1,6 +1,7 @@
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlFormInput } from '@gitlab/ui';
 import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
+import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
 import CiVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue';
 import { AWS_ACCESS_KEY_ID } from '~/ci_variable_list/constants';
 import createStore from '~/ci_variable_list/store';
@@ -15,7 +16,7 @@ describe('Ci variable modal', () => {
   let store;
 
   const createComponent = (method, options = {}) => {
-    store = createStore();
+    store = createStore({ isGroup: options.isGroup });
     wrapper = method(CiVariableModal, {
       attachTo: document.body,
       stubs: {
@@ -27,6 +28,7 @@ describe('Ci variable modal', () => {
     });
   };
 
+  const findCiEnvironmentsDropdown = () => wrapper.find(CiEnvironmentsDropdown);
   const findModal = () => wrapper.find(ModalStub);
   const findAddorUpdateButton = () =>
     findModal()
@@ -149,6 +151,43 @@ describe('Ci variable modal', () => {
     });
   });
 
+  describe('Environment scope', () => {
+    describe('group level variables', () => {
+      it('renders the environment dropdown', () => {
+        createComponent(shallowMount, {
+          isGroup: true,
+          provide: {
+            glFeatures: {
+              groupScopedCiVariables: true,
+            },
+          },
+        });
+
+        expect(findCiEnvironmentsDropdown().exists()).toBe(true);
+        expect(findCiEnvironmentsDropdown().isVisible()).toBe(true);
+      });
+
+      describe('licensed feature is not available', () => {
+        it('disables the dropdown', () => {
+          createComponent(mount, {
+            isGroup: true,
+            provide: {
+              glFeatures: {
+                groupScopedCiVariables: false,
+              },
+            },
+          });
+
+          const environmentScopeInput = wrapper
+            .find('[data-testid="environment-scope"]')
+            .find(GlFormInput);
+          expect(findCiEnvironmentsDropdown().exists()).toBe(false);
+          expect(environmentScopeInput.attributes('readonly')).toBe('readonly');
+        });
+      });
+    });
+  });
+
   describe('Validations', () => {
     const maskError = 'This variable can not be masked.';
 
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
index ade2d65b857..8367c3f6bb8 100644
--- a/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
@@ -1,4 +1,3 @@
-import { GlTable } from '@gitlab/ui';
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import CiVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
@@ -14,7 +13,6 @@ describe('Ci variable table', () => {
 
   const createComponent = () => {
     store = createStore();
-    store.state.isGroup = true;
     jest.spyOn(store, 'dispatch').mockImplementation();
     wrapper = mount(CiVariableTable, {
       attachTo: document.body,
@@ -26,7 +24,6 @@ describe('Ci variable table', () => {
   const findRevealButton = () => wrapper.find({ ref: 'secret-value-reveal-button' });
   const findEditButton = () => wrapper.find({ ref: 'edit-ci-variable' });
   const findEmptyVariablesPlaceholder = () => wrapper.find({ ref: 'empty-variables' });
-  const findTable = () => wrapper.find(GlTable);
 
   beforeEach(() => {
     createComponent();
@@ -40,17 +37,6 @@ describe('Ci variable table', () => {
     expect(store.dispatch).toHaveBeenCalledWith('fetchVariables');
   });
 
-  it('fields prop does not contain environment_scope if group', () => {
-    expect(findTable().props('fields')).not.toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          key: 'environment_scope',
-          label: 'Environment Scope',
-        }),
-      ]),
-    );
-  });
-
   describe('Renders correct data', () => {
     it('displays empty message when variables are not present', () => {
       expect(findEmptyVariablesPlaceholder().exists()).toBe(true);