diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-18 13:16:36 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-18 13:16:36 +0000 |
commit | 311b0269b4eb9839fa63f80c8d7a58f32b8138a0 (patch) | |
tree | 07e7870bca8aed6d61fdcc810731c50d2c40af47 /spec/frontend/jobs | |
parent | 27909cef6c4170ed9205afa7426b8d3de47cbb0c (diff) | |
download | gitlab-ce-311b0269b4eb9839fa63f80c8d7a58f32b8138a0.tar.gz |
Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42
Diffstat (limited to 'spec/frontend/jobs')
-rw-r--r-- | spec/frontend/jobs/components/manual_variables_form_spec.js | 152 |
1 files changed, 92 insertions, 60 deletions
diff --git a/spec/frontend/jobs/components/manual_variables_form_spec.js b/spec/frontend/jobs/components/manual_variables_form_spec.js index 7e42ee957d3..a5278af8e33 100644 --- a/spec/frontend/jobs/components/manual_variables_form_spec.js +++ b/spec/frontend/jobs/components/manual_variables_form_spec.js @@ -1,9 +1,9 @@ import { GlSprintf, GlLink } from '@gitlab/ui'; -import { createLocalVue, mount, shallowMount } from '@vue/test-utils'; -import Vue from 'vue'; +import { createLocalVue, mount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; -import Form from '~/jobs/components/manual_variables_form.vue'; +import ManualVariablesForm from '~/jobs/components/manual_variables_form.vue'; const localVue = createLocalVue(); @@ -21,7 +21,7 @@ describe('Manual Variables Form', () => { }, }; - const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => { + const createComponent = (props = {}) => { store = new Vuex.Store({ actions: { triggerManualJob: jest.fn(), @@ -29,7 +29,7 @@ describe('Manual Variables Form', () => { }); wrapper = extendedWrapper( - mountFn(localVue.extend(Form), { + mount(localVue.extend(ManualVariablesForm), { propsData: { ...requiredProps, ...props }, localVue, store, @@ -40,88 +40,120 @@ describe('Manual Variables Form', () => { ); }; - const findInputKey = () => wrapper.findComponent({ ref: 'inputKey' }); - const findInputValue = () => wrapper.findComponent({ ref: 'inputSecretValue' }); const findHelpText = () => wrapper.findComponent(GlSprintf); const findHelpLink = () => wrapper.findComponent(GlLink); const findTriggerBtn = () => wrapper.findByTestId('trigger-manual-job-btn'); const findDeleteVarBtn = () => wrapper.findByTestId('delete-variable-btn'); + const findAllDeleteVarBtns = () => wrapper.findAllByTestId('delete-variable-btn'); + const findDeleteVarBtnPlaceholder = () => wrapper.findByTestId('delete-variable-btn-placeholder'); const findCiVariableKey = () => wrapper.findByTestId('ci-variable-key'); + const findAllCiVariableKeys = () => wrapper.findAllByTestId('ci-variable-key'); const findCiVariableValue = () => wrapper.findByTestId('ci-variable-value'); const findAllVariables = () => wrapper.findAllByTestId('ci-variable-row'); + const setCiVariableKey = () => { + findCiVariableKey().setValue('new key'); + findCiVariableKey().vm.$emit('change'); + nextTick(); + }; + + const setCiVariableKeyByPosition = (position, value) => { + findAllCiVariableKeys().at(position).setValue(value); + findAllCiVariableKeys().at(position).vm.$emit('change'); + nextTick(); + }; + + beforeEach(() => { + createComponent(); + }); + afterEach(() => { wrapper.destroy(); }); - describe('shallowMount', () => { - beforeEach(() => { - createComponent(); - }); + it('creates a new variable when user enters a new key value', async () => { + expect(findAllVariables()).toHaveLength(1); - it('renders empty form with correct placeholders', () => { - expect(findInputKey().attributes('placeholder')).toBe('Input variable key'); - expect(findInputValue().attributes('placeholder')).toBe('Input variable value'); - }); + await setCiVariableKey(); - it('renders help text with provided link', () => { - expect(findHelpText().exists()).toBe(true); - expect(findHelpLink().attributes('href')).toBe( - '/help/ci/variables/index#add-a-cicd-variable-to-a-project', - ); - }); + expect(findAllVariables()).toHaveLength(2); + }); - describe('when adding a new variable', () => { - it('creates a new variable when user types a new key and resets the form', async () => { - await findInputKey().setValue('new key'); + it('does not create extra empty variables', async () => { + expect(findAllVariables()).toHaveLength(1); - expect(findAllVariables()).toHaveLength(1); - expect(findCiVariableKey().element.value).toBe('new key'); - expect(findInputKey().attributes('value')).toBe(undefined); - }); + await setCiVariableKey(); - it('creates a new variable when user types a new value and resets the form', async () => { - await findInputValue().setValue('new value'); + expect(findAllVariables()).toHaveLength(2); - expect(findAllVariables()).toHaveLength(1); - expect(findCiVariableValue().element.value).toBe('new value'); - expect(findInputValue().attributes('value')).toBe(undefined); - }); - }); + await setCiVariableKey(); + + expect(findAllVariables()).toHaveLength(2); }); - describe('mount', () => { - beforeEach(() => { - createComponent({ mountFn: mount }); - }); + it('removes the correct variable row', async () => { + const variableKeyNameOne = 'key-one'; + const variableKeyNameThree = 'key-three'; - describe('when deleting a variable', () => { - it('removes the variable row', async () => { - await wrapper.setData({ - variables: [ - { - key: 'new key', - secret_value: 'value', - id: '1', - }, - ], - }); + await setCiVariableKeyByPosition(0, variableKeyNameOne); - findDeleteVarBtn().trigger('click'); + await setCiVariableKeyByPosition(1, 'key-two'); - await wrapper.vm.$nextTick(); + await setCiVariableKeyByPosition(2, variableKeyNameThree); - expect(findAllVariables()).toHaveLength(0); - }); - }); + expect(findAllVariables()).toHaveLength(4); - it('trigger button is disabled after trigger action', async () => { - expect(findTriggerBtn().props('disabled')).toBe(false); + await findAllDeleteVarBtns().at(1).trigger('click'); - await findTriggerBtn().trigger('click'); + expect(findAllVariables()).toHaveLength(3); - expect(findTriggerBtn().props('disabled')).toBe(true); - }); + expect(findAllCiVariableKeys().at(0).element.value).toBe(variableKeyNameOne); + expect(findAllCiVariableKeys().at(1).element.value).toBe(variableKeyNameThree); + expect(findAllCiVariableKeys().at(2).element.value).toBe(''); + }); + + it('trigger button is disabled after trigger action', async () => { + expect(findTriggerBtn().props('disabled')).toBe(false); + + await findTriggerBtn().trigger('click'); + + expect(findTriggerBtn().props('disabled')).toBe(true); + }); + + it('delete variable button should only show when there is more than one variable', async () => { + expect(findDeleteVarBtn().exists()).toBe(false); + + await setCiVariableKey(); + + expect(findDeleteVarBtn().exists()).toBe(true); + }); + + it('delete variable button placeholder should only exist when a user cannot remove', async () => { + expect(findDeleteVarBtnPlaceholder().exists()).toBe(true); + }); + + it('renders help text with provided link', () => { + expect(findHelpText().exists()).toBe(true); + expect(findHelpLink().attributes('href')).toBe( + '/help/ci/variables/index#add-a-cicd-variable-to-a-project', + ); + }); + + it('passes variables in correct format', async () => { + jest.spyOn(store, 'dispatch'); + + await setCiVariableKey(); + + await findCiVariableValue().setValue('new value'); + + await findTriggerBtn().trigger('click'); + + expect(store.dispatch).toHaveBeenCalledWith('triggerManualJob', [ + { + key: 'new key', + secret_value: 'new value', + }, + ]); }); }); |