From ab85af0f318ccbcfdd508e7a2f85788f26831785 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Sat, 22 Feb 2020 00:09:11 +0000 Subject: Add latest changes from gitlab-org/gitlab@master --- .../components/ci_variable_modal_spec.js | 93 ++++++++++++++++++++++ .../components/ci_variable_settings_spec.js | 39 +++++++++ .../components/ci_variable_table_spec.js | 89 +++++++++++++++++++++ .../ci_variable_list/services/mock_data.js | 18 ----- spec/frontend/ci_variable_list/store/utils_spec.js | 8 +- 5 files changed, 225 insertions(+), 22 deletions(-) create mode 100644 spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js create mode 100644 spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js create mode 100644 spec/frontend/ci_variable_list/components/ci_variable_table_spec.js (limited to 'spec/frontend/ci_variable_list') 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 new file mode 100644 index 00000000000..be2c017cc7e --- /dev/null +++ b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js @@ -0,0 +1,93 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { GlModal } from '@gitlab/ui'; +import CiVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue'; +import createStore from '~/ci_variable_list/store'; +import mockData from '../services/mock_data'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Ci variable modal', () => { + let wrapper; + let store; + + const createComponent = () => { + store = createStore(); + wrapper = shallowMount(CiVariableModal, { + localVue, + store, + }); + }; + + const findModal = () => wrapper.find(GlModal); + + beforeEach(() => { + createComponent(); + jest.spyOn(store, 'dispatch').mockImplementation(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('button is disabled when no key/value pair are present', () => { + expect(findModal().props('actionPrimary').attributes.disabled).toBeTruthy(); + }); + + it('masked checkbox is disabled when value does not meet regex requirements', () => { + expect(wrapper.find({ ref: 'masked-ci-variable' }).attributes('disabled')).toBeTruthy(); + }); + + describe('Adding a new variable', () => { + beforeEach(() => { + const [variable] = mockData.mockVariables; + store.state.variable = variable; + }); + + it('button is enabled when key/value pair are present', () => { + expect(findModal().props('actionPrimary').attributes.disabled).toBeFalsy(); + }); + + it('masked checkbox is enabled when value meets regex requirements', () => { + store.state.maskableRegex = '^[a-zA-Z0-9_+=/@:-]{8,}$'; + return wrapper.vm.$nextTick(() => { + expect(wrapper.find({ ref: 'masked-ci-variable' }).attributes('disabled')).toBeFalsy(); + }); + }); + + it('Add variable button dispatches addVariable action', () => { + findModal().vm.$emit('ok'); + expect(store.dispatch).toHaveBeenCalledWith('addVariable'); + }); + + it('Clears the modal state once modal is hidden', () => { + findModal().vm.$emit('hidden'); + expect(store.dispatch).toHaveBeenCalledWith('clearModal'); + }); + }); + + describe('Editing a variable', () => { + beforeEach(() => { + const [variable] = mockData.mockVariables; + store.state.variableBeingEdited = variable; + }); + + it('button text is Update variable when updating', () => { + expect(wrapper.vm.modalActionText).toBe('Update Variable'); + }); + + it('Update variable button dispatches updateVariable with correct variable', () => { + findModal().vm.$emit('ok'); + expect(store.dispatch).toHaveBeenCalledWith( + 'updateVariable', + store.state.variableBeingEdited, + ); + }); + + it('Resets the editing state once modal is hidden', () => { + findModal().vm.$emit('hidden'); + expect(store.dispatch).toHaveBeenCalledWith('resetEditing'); + }); + }); +}); diff --git a/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js new file mode 100644 index 00000000000..7dcd82eac5e --- /dev/null +++ b/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js @@ -0,0 +1,39 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import CiVariableSettings from '~/ci_variable_list/components/ci_variable_settings.vue'; +import createStore from '~/ci_variable_list/store'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Ci variable table', () => { + let wrapper; + let store; + let isGroup; + + const createComponent = groupState => { + store = createStore(); + store.state.isGroup = groupState; + jest.spyOn(store, 'dispatch').mockImplementation(); + wrapper = shallowMount(CiVariableSettings, { + localVue, + store, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + it('dispatches fetchEnvironments when mounted', () => { + isGroup = false; + createComponent(isGroup); + expect(store.dispatch).toHaveBeenCalledWith('fetchEnvironments'); + }); + + it('does not dispatch fetchenvironments when in group context', () => { + isGroup = true; + createComponent(isGroup); + expect(store.dispatch).not.toHaveBeenCalled(); + }); +}); 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 new file mode 100644 index 00000000000..973a9c51f16 --- /dev/null +++ b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js @@ -0,0 +1,89 @@ +import Vuex from 'vuex'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { GlTable } from '@gitlab/ui'; +import CiVariableTable from '~/ci_variable_list/components/ci_variable_table.vue'; +import createStore from '~/ci_variable_list/store'; +import mockData from '../services/mock_data'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Ci variable table', () => { + let wrapper; + let store; + + const createComponent = () => { + store = createStore(); + store.state.isGroup = true; + jest.spyOn(store, 'dispatch').mockImplementation(); + wrapper = mount(CiVariableTable, { + localVue, + store, + }); + }; + + const findDeleteButton = () => wrapper.find({ ref: 'delete-ci-variable' }); + 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(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('dispatches fetchVariables when mounted', () => { + 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); + }); + + it('displays correct amount of variables present and no empty message', () => { + store.state.variables = mockData.mockVariables; + + return wrapper.vm.$nextTick(() => { + expect(wrapper.findAll('.js-ci-variable-row').length).toBe(1); + expect(findEmptyVariablesPlaceholder().exists()).toBe(false); + }); + }); + }); + + describe('Table click actions', () => { + beforeEach(() => { + store.state.variables = mockData.mockVariables; + }); + + it('dispatches deleteVariable with correct variable to delete', () => { + findDeleteButton().trigger('click'); + expect(store.dispatch).toHaveBeenCalledWith('deleteVariable', mockData.mockVariables[0]); + }); + + it('reveals secret values when button is clicked', () => { + findRevealButton().trigger('click'); + expect(store.dispatch).toHaveBeenCalledWith('toggleValues', false); + }); + + it('dispatches editVariable with correct variable to edit', () => { + findEditButton().trigger('click'); + expect(store.dispatch).toHaveBeenCalledWith('editVariable', mockData.mockVariables[0]); + }); + }); +}); diff --git a/spec/frontend/ci_variable_list/services/mock_data.js b/spec/frontend/ci_variable_list/services/mock_data.js index 89473b57af9..b04cd223d42 100644 --- a/spec/frontend/ci_variable_list/services/mock_data.js +++ b/spec/frontend/ci_variable_list/services/mock_data.js @@ -9,24 +9,6 @@ export default { value: 'test_val', variable_type: 'Variable', }, - { - environment_scope: 'All environments', - id: 114, - key: 'test_var_2', - masked: false, - protected: false, - value: 'test_val_2', - variable_type: 'Variable', - }, - { - environment_scope: 'All environments', - id: 115, - key: 'test_var_3', - masked: false, - protected: false, - value: 'test_val_3', - variable_type: 'Variable', - }, ], mockVariablesApi: [ diff --git a/spec/frontend/ci_variable_list/store/utils_spec.js b/spec/frontend/ci_variable_list/store/utils_spec.js index 9d5dd6b4f29..070bc996d75 100644 --- a/spec/frontend/ci_variable_list/store/utils_spec.js +++ b/spec/frontend/ci_variable_list/store/utils_spec.js @@ -17,8 +17,8 @@ describe('CI variables store utils', () => { environment_scope: '*', id: 113, key: 'test_var', - masked: false, - protected: false, + masked: 'false', + protected: 'false', value: 'test_val', variable_type: 'env_var', }); @@ -27,8 +27,8 @@ describe('CI variables store utils', () => { environment_scope: '*', id: 114, key: 'test_var_2', - masked: false, - protected: false, + masked: 'false', + protected: 'false', value: 'test_val_2', variable_type: 'file', }); -- cgit v1.2.3