Commit 0ef163b1 authored by Illya Klymov's avatar Illya Klymov

Merge branch 'pb-manual-variables-from-spec-refactor' into 'master'

Clean up manual variables form spec

See merge request gitlab-org/gitlab!58493
parents 3ead8054 3f50321e
...@@ -117,7 +117,12 @@ export default { ...@@ -117,7 +117,12 @@ export default {
<div class="table-section section-50" role="rowheader">{{ s__('CiVariables|Value') }}</div> <div class="table-section section-50" role="rowheader">{{ s__('CiVariables|Value') }}</div>
</div> </div>
<div v-for="variable in variables" :key="variable.id" class="gl-responsive-table-row"> <div
v-for="variable in variables"
:key="variable.id"
class="gl-responsive-table-row"
data-testid="ci-variable-row"
>
<div class="table-section section-50"> <div class="table-section section-50">
<div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div> <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div>
<div class="table-mobile-content gl-mr-3"> <div class="table-mobile-content gl-mr-3">
...@@ -126,6 +131,7 @@ export default { ...@@ -126,6 +131,7 @@ export default {
v-model="variable.key" v-model="variable.key"
:placeholder="$options.i18n.keyPlaceholder" :placeholder="$options.i18n.keyPlaceholder"
class="ci-variable-body-item form-control" class="ci-variable-body-item form-control"
data-testid="ci-variable-key"
/> />
</div> </div>
</div> </div>
...@@ -138,6 +144,7 @@ export default { ...@@ -138,6 +144,7 @@ export default {
v-model="variable.secret_value" v-model="variable.secret_value"
:placeholder="$options.i18n.valuePlaceholder" :placeholder="$options.i18n.valuePlaceholder"
class="ci-variable-body-item form-control" class="ci-variable-body-item form-control"
data-testid="ci-variable-value"
/> />
</div> </div>
</div> </div>
...@@ -149,6 +156,7 @@ export default { ...@@ -149,6 +156,7 @@ export default {
category="tertiary" category="tertiary"
icon="clear" icon="clear"
:aria-label="__('Delete variable')" :aria-label="__('Delete variable')"
data-testid="delete-variable-btn"
@click="deleteVariable(variable.id)" @click="deleteVariable(variable.id)"
/> />
</div> </div>
...@@ -181,7 +189,7 @@ export default { ...@@ -181,7 +189,7 @@ export default {
</div> </div>
</div> </div>
<div class="d-flex gl-mt-3 justify-content-center"> <div class="d-flex gl-mt-3 justify-content-center">
<p class="text-muted" v-html="helpText"></p> <p class="text-muted" data-testid="form-help-text" v-html="helpText"></p>
</div> </div>
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<gl-button <gl-button
......
import { GlButton } from '@gitlab/ui';
import { createLocalVue, mount, shallowMount } from '@vue/test-utils'; import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import Form from '~/jobs/components/manual_variables_form.vue'; import Form from '~/jobs/components/manual_variables_form.vue';
const localVue = createLocalVue(); const localVue = createLocalVue();
...@@ -21,49 +21,48 @@ describe('Manual Variables Form', () => { ...@@ -21,49 +21,48 @@ describe('Manual Variables Form', () => {
variablesSettingsUrl: '/settings', variablesSettingsUrl: '/settings',
}; };
const createComponent = (props = {}, mountFn = shallowMount) => { const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => {
store = new Vuex.Store({ store = new Vuex.Store({
actions: { actions: {
triggerManualJob: jest.fn(), triggerManualJob: jest.fn(),
}, },
}); });
wrapper = mountFn(localVue.extend(Form), { wrapper = extendedWrapper(
propsData: props, mountFn(localVue.extend(Form), {
localVue, propsData: { ...requiredProps, ...props },
store, localVue,
}); store,
}),
);
}; };
const findTriggerBtn = () => wrapper.find('[data-testid="trigger-manual-job-btn"]'); const findInputKey = () => wrapper.findComponent({ ref: 'inputKey' });
const findInputValue = () => wrapper.findComponent({ ref: 'inputSecretValue' });
afterEach((done) => { const findTriggerBtn = () => wrapper.findByTestId('trigger-manual-job-btn');
// The component has a `nextTick` callback after some events so we need const findHelpText = () => wrapper.findByTestId('form-help-text');
// to wait for those to finish before destroying. const findDeleteVarBtn = () => wrapper.findByTestId('delete-variable-btn');
setImmediate(() => { const findCiVariableKey = () => wrapper.findByTestId('ci-variable-key');
wrapper.destroy(); const findCiVariableValue = () => wrapper.findByTestId('ci-variable-value');
wrapper = null; const findAllVariables = () => wrapper.findAllByTestId('ci-variable-row');
done(); afterEach(() => {
}); wrapper.destroy();
}); });
describe('shallowMount', () => { describe('shallowMount', () => {
beforeEach(() => { beforeEach(() => {
createComponent(requiredProps); createComponent();
}); });
it('renders empty form with correct placeholders', () => { it('renders empty form with correct placeholders', () => {
expect(wrapper.find({ ref: 'inputKey' }).attributes('placeholder')).toBe( expect(findInputKey().attributes('placeholder')).toBe('Input variable key');
'Input variable key', expect(findInputValue().attributes('placeholder')).toBe('Input variable value');
);
expect(wrapper.find({ ref: 'inputSecretValue' }).attributes('placeholder')).toBe(
'Input variable value',
);
}); });
it('renders help text with provided link', () => { it('renders help text with provided link', () => {
expect(wrapper.find('p').text()).toBe( expect(findHelpText().text()).toBe(
'Specify variable values to be used in this run. The values specified in CI/CD settings will be used as default', 'Specify variable values to be used in this run. The values specified in CI/CD settings will be used as default',
); );
...@@ -71,57 +70,47 @@ describe('Manual Variables Form', () => { ...@@ -71,57 +70,47 @@ describe('Manual Variables Form', () => {
}); });
describe('when adding a new variable', () => { describe('when adding a new variable', () => {
it('creates a new variable when user types a new key and resets the form', (done) => { it('creates a new variable when user types a new key and resets the form', async () => {
wrapper.vm await findInputKey().setValue('new key');
.$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) => { expect(findAllVariables()).toHaveLength(1);
wrapper.vm expect(findCiVariableKey().element.value).toBe('new key');
.$nextTick() expect(findInputKey().attributes('value')).toBe(undefined);
.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', () => { it('creates a new variable when user types a new value and resets the form', async () => {
beforeEach((done) => { await findInputValue().setValue('new value');
wrapper.vm.variables = [
{
key: 'new key',
secret_value: 'value',
id: '1',
},
];
wrapper.vm.$nextTick(done);
});
it('removes the variable row', () => {
wrapper.find(GlButton).vm.$emit('click');
expect(wrapper.vm.variables.length).toBe(0); expect(findAllVariables()).toHaveLength(1);
expect(findCiVariableValue().element.value).toBe('new value');
expect(findInputValue().attributes('value')).toBe(undefined);
}); });
}); });
}); });
describe('mount', () => { describe('mount', () => {
beforeEach(() => { beforeEach(() => {
createComponent(requiredProps, mount); createComponent({ mountFn: mount });
});
describe('when deleting a variable', () => {
it('removes the variable row', async () => {
await wrapper.setData({
variables: [
{
key: 'new key',
secret_value: 'value',
id: '1',
},
],
});
findDeleteVarBtn().trigger('click');
await wrapper.vm.$nextTick();
expect(findAllVariables()).toHaveLength(0);
});
}); });
it('trigger button is disabled after trigger action', async () => { it('trigger button is disabled after trigger action', async () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment