125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
|
|
import Vue from 'vue';
|
|
import Vuex from 'vuex';
|
|
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
|
|
import Form from '~/jobs/components/manual_variables_form.vue';
|
|
|
|
const localVue = createLocalVue();
|
|
|
|
Vue.use(Vuex);
|
|
|
|
describe('Manual Variables Form', () => {
|
|
let wrapper;
|
|
let store;
|
|
|
|
const requiredProps = {
|
|
action: {
|
|
path: '/play',
|
|
method: 'post',
|
|
button_title: 'Trigger this manual action',
|
|
},
|
|
variablesSettingsUrl: '/settings',
|
|
};
|
|
|
|
const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => {
|
|
store = new Vuex.Store({
|
|
actions: {
|
|
triggerManualJob: jest.fn(),
|
|
},
|
|
});
|
|
|
|
wrapper = extendedWrapper(
|
|
mountFn(localVue.extend(Form), {
|
|
propsData: { ...requiredProps, ...props },
|
|
localVue,
|
|
store,
|
|
}),
|
|
);
|
|
};
|
|
|
|
const findInputKey = () => wrapper.findComponent({ ref: 'inputKey' });
|
|
const findInputValue = () => wrapper.findComponent({ ref: 'inputSecretValue' });
|
|
|
|
const findTriggerBtn = () => wrapper.findByTestId('trigger-manual-job-btn');
|
|
const findHelpText = () => wrapper.findByTestId('form-help-text');
|
|
const findDeleteVarBtn = () => wrapper.findByTestId('delete-variable-btn');
|
|
const findCiVariableKey = () => wrapper.findByTestId('ci-variable-key');
|
|
const findCiVariableValue = () => wrapper.findByTestId('ci-variable-value');
|
|
const findAllVariables = () => wrapper.findAllByTestId('ci-variable-row');
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
describe('shallowMount', () => {
|
|
beforeEach(() => {
|
|
createComponent();
|
|
});
|
|
|
|
it('renders empty form with correct placeholders', () => {
|
|
expect(findInputKey().attributes('placeholder')).toBe('Input variable key');
|
|
expect(findInputValue().attributes('placeholder')).toBe('Input variable value');
|
|
});
|
|
|
|
it('renders help text with provided link', () => {
|
|
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',
|
|
);
|
|
|
|
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', async () => {
|
|
await findInputKey().setValue('new key');
|
|
|
|
expect(findAllVariables()).toHaveLength(1);
|
|
expect(findCiVariableKey().element.value).toBe('new key');
|
|
expect(findInputKey().attributes('value')).toBe(undefined);
|
|
});
|
|
|
|
it('creates a new variable when user types a new value and resets the form', async () => {
|
|
await findInputValue().setValue('new value');
|
|
|
|
expect(findAllVariables()).toHaveLength(1);
|
|
expect(findCiVariableValue().element.value).toBe('new value');
|
|
expect(findInputValue().attributes('value')).toBe(undefined);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('mount', () => {
|
|
beforeEach(() => {
|
|
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 () => {
|
|
expect(findTriggerBtn().props('disabled')).toBe(false);
|
|
|
|
await findTriggerBtn().trigger('click');
|
|
|
|
expect(findTriggerBtn().props('disabled')).toBe(true);
|
|
});
|
|
});
|
|
});
|