Add latest changes from gitlab-org/gitlab@master

4 files changed, 237 insertions, 14 deletions

diff --git a/spec/frontend/ci_variable_list/components/ci_enviroments_dropdown_spec.js b/spec/frontend/ci_variable_list/components/ci_enviroments_dropdown_spec.js
new file mode 100644
index 00000000000..a52b38599f7
--- /dev/null
+++ b/spec/frontend/ci_variable_list/components/ci_enviroments_dropdown_spec.js
@@ -0,0 +1,103 @@
+import Vuex from 'vuex';
+import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlDropdownItem, GlIcon } from '@gitlab/ui';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Ci environments dropdown', () => {
+  let wrapper;
+  let store;
+
+  const createComponent = term => {
+    store = new Vuex.Store({
+      getters: {
+        joinedEnvironments: () => ['dev', 'prod', 'staging'],
+      },
+    });
+
+    wrapper = shallowMount(CiEnvironmentsDropdown, {
+      store,
+      localVue,
+      propsData: {
+        value: term,
+      },
+    });
+  };
+
+  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
+  const findDropdownItemByIndex = index => wrapper.findAll(GlDropdownItem).at(index);
+  const findActiveIconByIndex = index => wrapper.findAll(GlIcon).at(index);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('No enviroments found', () => {
+    beforeEach(() => {
+      createComponent('stable');
+    });
+
+    it('renders create button with search term if enviroments do not contain search term', () => {
+      expect(findAllDropdownItems()).toHaveLength(2);
+      expect(findDropdownItemByIndex(1).text()).toBe('Create wildcard: stable');
+    });
+
+    it('renders empty results message', () => {
+      expect(findDropdownItemByIndex(0).text()).toBe('No matching results');
+    });
+  });
+
+  describe('Search term is empty', () => {
+    beforeEach(() => {
+      createComponent('');
+    });
+
+    it('renders all enviroments when search term is empty', () => {
+      expect(findAllDropdownItems()).toHaveLength(3);
+      expect(findDropdownItemByIndex(0).text()).toBe('dev');
+      expect(findDropdownItemByIndex(1).text()).toBe('prod');
+      expect(findDropdownItemByIndex(2).text()).toBe('staging');
+    });
+  });
+
+  describe('Enviroments found', () => {
+    beforeEach(() => {
+      createComponent('prod');
+    });
+
+    it('renders only the enviroment searched for', () => {
+      expect(findAllDropdownItems()).toHaveLength(1);
+      expect(findDropdownItemByIndex(0).text()).toBe('prod');
+    });
+
+    it('should not display create button', () => {
+      const enviroments = findAllDropdownItems().filter(env => env.text().startsWith('Create'));
+      expect(enviroments).toHaveLength(0);
+      expect(findAllDropdownItems()).toHaveLength(1);
+    });
+
+    it('should not display empty results message', () => {
+      expect(wrapper.find({ ref: 'noMatchingResults' }).exists()).toBe(false);
+    });
+
+    it('should display active checkmark if active', () => {
+      expect(findActiveIconByIndex(0).classes('invisible')).toBe(false);
+    });
+
+    describe('Custom events', () => {
+      it('should emit selectEnvironment if an environment is clicked', () => {
+        findDropdownItemByIndex(0).vm.$emit('click');
+        expect(wrapper.emitted('selectEnvironment')).toEqual([['prod']]);
+      });
+
+      it('should emit createClicked if an environment is clicked', () => {
+        createComponent('newscope');
+        findDropdownItemByIndex(1).vm.$emit('click');
+        expect(wrapper.emitted('createClicked')).toEqual([['newscope']]);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ci_variable_list/services/mock_data.js b/spec/frontend/ci_variable_list/services/mock_data.js
index 5e0fa55a20c..09c6cd9de21 100644
--- a/spec/frontend/ci_variable_list/services/mock_data.js
+++ b/spec/frontend/ci_variable_list/services/mock_data.js
@@ -1,7 +1,7 @@
 export default {
   mockVariables: [
     {
-      environment_scope: 'All environments',
+      environment_scope: 'All (default)',
       id: 113,
       key: 'test_var',
       masked: false,
@@ -37,7 +37,7 @@ export default {
 
   mockVariablesDisplay: [
     {
-      environment_scope: 'All',
+      environment_scope: 'All (default)',
       id: 113,
       key: 'test_var',
       masked: false,
@@ -47,7 +47,7 @@ export default {
       variable_type: 'Var',
     },
     {
-      environment_scope: 'All',
+      environment_scope: 'All (default)',
       id: 114,
       key: 'test_var_2',
       masked: false,
@@ -88,4 +88,67 @@ export default {
   ozakE+8p06BpxegR4BR3FMHf6p+0jQxUEAkAyb/mVgm66TyghDGC6/YkiKoZptXQ
   98TwDIK/39WEB/V607As+KoYazQG8drorw==
   -----END CERTIFICATE REQUEST-----`,
+
+  mockVariableScopes: [
+    {
+      id: 13,
+      key: 'test_var_1',
+      value: 'test_val_1',
+      variable_type: 'File',
+      protected: true,
+      masked: true,
+      environment_scope: 'All (default)',
+      secret_value: 'test_val_1',
+    },
+    {
+      id: 28,
+      key: 'goku_var',
+      value: 'goku_val',
+      variable_type: 'Var',
+      protected: true,
+      masked: true,
+      environment_scope: 'staging',
+      secret_value: 'goku_val',
+    },
+    {
+      id: 25,
+      key: 'test_var_4',
+      value: 'test_val_4',
+      variable_type: 'Var',
+      protected: false,
+      masked: false,
+      environment_scope: 'production',
+      secret_value: 'test_val_4',
+    },
+    {
+      id: 14,
+      key: 'test_var_2',
+      value: 'test_val_2',
+      variable_type: 'File',
+      protected: false,
+      masked: false,
+      environment_scope: 'staging',
+      secret_value: 'test_val_2',
+    },
+    {
+      id: 24,
+      key: 'test_var_3',
+      value: 'test_val_3',
+      variable_type: 'Var',
+      protected: false,
+      masked: false,
+      environment_scope: 'All (default)',
+      secret_value: 'test_val_3',
+    },
+    {
+      id: 26,
+      key: 'test_var_5',
+      value: 'test_val_5',
+      variable_type: 'Var',
+      protected: false,
+      masked: false,
+      environment_scope: 'production',
+      secret_value: 'test_val_5',
+    },
+  ],
 };
diff --git a/spec/frontend/ci_variable_list/store/getters_spec.js b/spec/frontend/ci_variable_list/store/getters_spec.js
new file mode 100644
index 00000000000..7ad96545652
--- /dev/null
+++ b/spec/frontend/ci_variable_list/store/getters_spec.js
@@ -0,0 +1,21 @@
+import * as getters from '~/ci_variable_list/store/getters';
+import mockData from '../services/mock_data';
+
+describe('Ci variable getters', () => {
+  describe('joinedEnvironments', () => {
+    it('should join fetched enviroments with variable environment scopes', () => {
+      const state = {
+        environments: ['All (default)', 'staging', 'deployment', 'prod'],
+        variables: mockData.mockVariableScopes,
+      };
+
+      expect(getters.joinedEnvironments(state)).toEqual([
+        'All (default)',
+        'deployment',
+        'prod',
+        'production',
+        'staging',
+      ]);
+    });
+  });
+});
diff --git a/spec/frontend/ci_variable_list/store/mutations_spec.js b/spec/frontend/ci_variable_list/store/mutations_spec.js
index 05513edff7b..8652359f3df 100644
--- a/spec/frontend/ci_variable_list/store/mutations_spec.js
+++ b/spec/frontend/ci_variable_list/store/mutations_spec.js
@@ -4,6 +4,15 @@ import * as types from '~/ci_variable_list/store/mutation_types';
 
 describe('CI variable list mutations', () => {
   let stateCopy;
+  const variableBeingEdited = {
+    environment_scope: '*',
+    id: 63,
+    key: 'test_var',
+    masked: false,
+    protected: false,
+    value: 'test_val',
+    variable_type: 'env_var',
+  };
 
   beforeEach(() => {
     stateCopy = state();
@@ -21,16 +30,6 @@ describe('CI variable list mutations', () => {
 
   describe('VARIABLE_BEING_EDITED', () => {
     it('should set variable that is being edited', () => {
-      const variableBeingEdited = {
-        environment_scope: '*',
-        id: 63,
-        key: 'test_var',
-        masked: false,
-        protected: false,
-        value: 'test_val',
-        variable_type: 'env_var',
-      };
-
       mutations[types.VARIABLE_BEING_EDITED](stateCopy, variableBeingEdited);
 
       expect(stateCopy.variableBeingEdited).toEqual(variableBeingEdited);
@@ -53,7 +52,7 @@ describe('CI variable list mutations', () => {
         secret_value: '',
         protected: false,
         masked: false,
-        environment_scope: 'All',
+        environment_scope: 'All (default)',
       };
 
       mutations[types.CLEAR_MODAL](stateCopy);
@@ -61,4 +60,41 @@ describe('CI variable list mutations', () => {
       expect(stateCopy.variable).toEqual(modalState);
     });
   });
+
+  describe('RECEIVE_ENVIRONMENTS_SUCCESS', () => {
+    it('should set environments', () => {
+      const environments = ['env1', 'env2'];
+
+      mutations[types.RECEIVE_ENVIRONMENTS_SUCCESS](stateCopy, environments);
+
+      expect(stateCopy.environments).toEqual(['All (default)', 'env1', 'env2']);
+    });
+  });
+
+  describe('SET_ENVIRONMENT_SCOPE', () => {
+    const environment = 'production';
+
+    it('should set scope to variable being updated if updating variable', () => {
+      stateCopy.variableBeingEdited = variableBeingEdited;
+
+      mutations[types.SET_ENVIRONMENT_SCOPE](stateCopy, environment);
+
+      expect(stateCopy.variableBeingEdited.environment_scope).toBe('production');
+    });
+
+    it('should set scope to variable if adding new variable', () => {
+      mutations[types.SET_ENVIRONMENT_SCOPE](stateCopy, environment);
+
+      expect(stateCopy.variable.environment_scope).toBe('production');
+    });
+  });
+
+  describe('ADD_WILD_CARD_SCOPE', () => {
+    it('should add wild card scope to enviroments array and sort', () => {
+      stateCopy.environments = ['dev', 'staging'];
+      mutations[types.ADD_WILD_CARD_SCOPE](stateCopy, 'production');
+
+      expect(stateCopy.environments).toEqual(['dev', 'production', 'staging']);
+    });
+  });
 });