diff options
Diffstat (limited to 'spec/frontend/jobs/components/manual_variables_form_spec.js')
-rw-r--r-- | spec/frontend/jobs/components/manual_variables_form_spec.js | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/spec/frontend/jobs/components/manual_variables_form_spec.js b/spec/frontend/jobs/components/manual_variables_form_spec.js new file mode 100644 index 00000000000..82fd73ef033 --- /dev/null +++ b/spec/frontend/jobs/components/manual_variables_form_spec.js @@ -0,0 +1,103 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { GlDeprecatedButton } from '@gitlab/ui'; +import Form from '~/jobs/components/manual_variables_form.vue'; + +const localVue = createLocalVue(); + +describe('Manual Variables Form', () => { + let wrapper; + + const requiredProps = { + action: { + path: '/play', + method: 'post', + button_title: 'Trigger this manual action', + }, + variablesSettingsUrl: '/settings', + }; + + const factory = (props = {}) => { + wrapper = shallowMount(localVue.extend(Form), { + propsData: props, + localVue, + }); + }; + + beforeEach(() => { + factory(requiredProps); + }); + + afterEach(done => { + // The component has a `nextTick` callback after some events so we need + // to wait for those to finish before destroying. + setImmediate(() => { + wrapper.destroy(); + wrapper = null; + + done(); + }); + }); + + it('renders empty form with correct placeholders', () => { + expect(wrapper.find({ ref: 'inputKey' }).attributes('placeholder')).toBe('Input variable key'); + expect(wrapper.find({ ref: 'inputSecretValue' }).attributes('placeholder')).toBe( + 'Input variable value', + ); + }); + + it('renders help text with provided link', () => { + expect(wrapper.find('p').text()).toBe( + 'Specify variable values to be used in this run. The values specified in CI/CD settings will be used as default', + ); + + expect(wrapper.find('a').attributes('href')).toBe(requiredProps.variablesSettingsUrl); + }); + + describe('when adding a new variable', () => { + it('creates a new variable when user types a new key and resets the form', done => { + wrapper.vm + .$nextTick() + .then(() => wrapper.find({ ref: 'inputKey' }).setValue('new key')) + .then(() => { + expect(wrapper.vm.variables.length).toBe(1); + expect(wrapper.vm.variables[0].key).toBe('new key'); + expect(wrapper.find({ ref: 'inputKey' }).attributes('value')).toBe(undefined); + }) + .then(done) + .catch(done.fail); + }); + + it('creates a new variable when user types a new value and resets the form', done => { + wrapper.vm + .$nextTick() + .then(() => wrapper.find({ ref: 'inputSecretValue' }).setValue('new value')) + .then(() => { + expect(wrapper.vm.variables.length).toBe(1); + expect(wrapper.vm.variables[0].secret_value).toBe('new value'); + expect(wrapper.find({ ref: 'inputSecretValue' }).attributes('value')).toBe(undefined); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('when deleting a variable', () => { + beforeEach(done => { + wrapper.vm.variables = [ + { + key: 'new key', + secret_value: 'value', + id: '1', + }, + ]; + + wrapper.vm.$nextTick(done); + }); + + it('removes the variable row', () => { + wrapper.find(GlDeprecatedButton).vm.$emit('click'); + + expect(wrapper.vm.variables.length).toBe(0); + }); + }); +}); |