1 files changed, 143 insertions, 10 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 70edd36669b..7b8d69df35e 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,7 +1,10 @@
 import Vuex from 'vuex';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import { GlDeprecatedButton } from '@gitlab/ui';
+import { AWS_ACCESS_KEY_ID } from '~/ci_variable_list/constants';
 import CiVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue';
+import CiKeyField from '~/ci_variable_list/components/ci_key_field.vue';
+import { awsTokens } from '~/ci_variable_list/components/ci_variable_autocomplete_tokens';
 import createStore from '~/ci_variable_list/store';
 import mockData from '../services/mock_data';
 import ModalStub from '../stubs';
@@ -13,14 +16,17 @@ describe('Ci variable modal', () => {
   let wrapper;
   let store;
 
-  const createComponent = () => {
+  const createComponent = (method, options = {}) => {
     store = createStore();
-    wrapper = shallowMount(CiVariableModal, {
+    wrapper = method(CiVariableModal, {
+      attachToDocument: true,
+      provide: { glFeatures: { ciKeyAutocomplete: true } },
       stubs: {
         GlModal: ModalStub,
       },
       localVue,
       store,
+      ...options,
     });
   };
 
@@ -34,22 +40,46 @@ describe('Ci variable modal', () => {
       .findAll(GlDeprecatedButton)
       .at(1);
 
-  beforeEach(() => {
-    createComponent();
-    jest.spyOn(store, 'dispatch').mockImplementation();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('button is disabled when no key/value pair are present', () => {
-    expect(addOrUpdateButton(1).attributes('disabled')).toBeTruthy();
+  describe('Feature flag', () => {
+    describe('when off', () => {
+      beforeEach(() => {
+        createComponent(shallowMount, { provide: { glFeatures: { ciKeyAutocomplete: false } } });
+      });
+
+      it('does not render the autocomplete dropdown', () => {
+        expect(wrapper.contains(CiKeyField)).toBe(false);
+      });
+    });
+
+    describe('when on', () => {
+      beforeEach(() => {
+        createComponent(shallowMount);
+      });
+      it('renders the autocomplete dropdown', () => {
+        expect(wrapper.find(CiKeyField).exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('Basic interactions', () => {
+    beforeEach(() => {
+      createComponent(shallowMount);
+    });
+
+    it('button is disabled when no key/value pair are present', () => {
+      expect(addOrUpdateButton(1).attributes('disabled')).toBeTruthy();
+    });
   });
 
   describe('Adding a new variable', () => {
     beforeEach(() => {
       const [variable] = mockData.mockVariables;
+      createComponent(shallowMount);
+      jest.spyOn(store, 'dispatch').mockImplementation();
       store.state.variable = variable;
     });
 
@@ -71,6 +101,8 @@ describe('Ci variable modal', () => {
   describe('Editing a variable', () => {
     beforeEach(() => {
       const [variable] = mockData.mockVariables;
+      createComponent(shallowMount);
+      jest.spyOn(store, 'dispatch').mockImplementation();
       store.state.variableBeingEdited = variable;
     });
 
@@ -96,4 +128,105 @@ describe('Ci variable modal', () => {
       expect(store.dispatch).toHaveBeenCalledWith('deleteVariable', mockData.mockVariables[0]);
     });
   });
+
+  describe('Validations', () => {
+    const maskError = 'This variable can not be masked.';
+
+    describe('when the key state is invalid', () => {
+      beforeEach(() => {
+        const [variable] = mockData.mockVariables;
+        const invalidKeyVariable = {
+          ...variable,
+          key: AWS_ACCESS_KEY_ID,
+          value: 'AKIAIOSFODNN7EXAMPLEjdhy',
+          secret_value: 'AKIAIOSFODNN7EXAMPLEjdhy',
+        };
+        createComponent(mount);
+        store.state.variable = invalidKeyVariable;
+      });
+
+      it('disables the submit button', () => {
+        expect(addOrUpdateButton(1).attributes('disabled')).toBeTruthy();
+      });
+
+      it('shows the correct error text', () => {
+        const errorText = awsTokens[AWS_ACCESS_KEY_ID].invalidMessage;
+        expect(findModal().text()).toContain(errorText);
+      });
+    });
+
+    describe('when the mask state is invalid', () => {
+      beforeEach(() => {
+        const [variable] = mockData.mockVariables;
+        const invalidMaskVariable = {
+          ...variable,
+          key: 'qs',
+          value: 'd:;',
+          secret_value: 'd:;',
+          masked: true,
+        };
+        createComponent(mount);
+        store.state.variable = invalidMaskVariable;
+      });
+
+      it('disables the submit button', () => {
+        expect(addOrUpdateButton(1).attributes('disabled')).toBeTruthy();
+      });
+
+      it('shows the correct error text', () => {
+        expect(findModal().text()).toContain(maskError);
+      });
+    });
+
+    describe('when the mask and key states are invalid', () => {
+      beforeEach(() => {
+        const [variable] = mockData.mockVariables;
+        const invalidMaskandKeyVariable = {
+          ...variable,
+          key: AWS_ACCESS_KEY_ID,
+          value: 'AKIAIOSFODNN7EXAMPLEjdhyd:;',
+          secret_value: 'AKIAIOSFODNN7EXAMPLEjdhyd:;',
+          masked: true,
+        };
+        createComponent(mount);
+        store.state.variable = invalidMaskandKeyVariable;
+      });
+
+      it('disables the submit button', () => {
+        expect(addOrUpdateButton(1).attributes('disabled')).toBeTruthy();
+      });
+
+      it('shows the correct error text', () => {
+        const errorText = awsTokens[AWS_ACCESS_KEY_ID].invalidMessage;
+        expect(findModal().text()).toContain(maskError);
+        expect(findModal().text()).toContain(errorText);
+      });
+    });
+
+    describe('when both states are valid', () => {
+      beforeEach(() => {
+        const [variable] = mockData.mockVariables;
+        const validMaskandKeyVariable = {
+          ...variable,
+          key: AWS_ACCESS_KEY_ID,
+          value: 'AKIAIOSFODNN7EXAMPLE',
+          secret_value: 'AKIAIOSFODNN7EXAMPLE',
+          masked: true,
+        };
+        createComponent(mount);
+        store.state.variable = validMaskandKeyVariable;
+        store.state.maskableRegex = /^[a-zA-Z0-9_+=/@:-]{8,}$/;
+      });
+
+      it('does not disable the submit button', () => {
+        expect(addOrUpdateButton(1).attributes('disabled')).toBeFalsy();
+      });
+
+      it('shows no error text', () => {
+        const errorText = awsTokens[AWS_ACCESS_KEY_ID].invalidMessage;
+        expect(findModal().text()).not.toContain(maskError);
+        expect(findModal().text()).not.toContain(errorText);
+      });
+    });
+  });
 });