2020-05-14 15:08:14 +00:00
|
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
|
2020-08-17 21:09:56 +00:00
|
|
|
import TriggerFields from '~/integrations/edit/components/trigger_fields.vue';
|
2020-05-14 15:08:14 +00:00
|
|
|
|
|
|
|
describe('TriggerFields', () => {
|
|
|
|
let wrapper;
|
|
|
|
|
|
|
|
const defaultProps = {
|
|
|
|
type: 'slack',
|
|
|
|
};
|
|
|
|
|
2020-07-17 03:09:14 +00:00
|
|
|
const createComponent = (props, isInheriting = false) => {
|
2020-05-14 15:08:14 +00:00
|
|
|
wrapper = mount(TriggerFields, {
|
|
|
|
propsData: { ...defaultProps, ...props },
|
2020-07-17 03:09:14 +00:00
|
|
|
computed: {
|
|
|
|
isInheriting: () => isInheriting,
|
|
|
|
},
|
2020-05-14 15:08:14 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
if (wrapper) {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2020-07-17 03:09:14 +00:00
|
|
|
const findAllGlFormGroups = () => wrapper.find('#trigger-fields').findAll(GlFormGroup);
|
2020-05-14 15:08:14 +00:00
|
|
|
const findAllGlFormCheckboxes = () => wrapper.findAll(GlFormCheckbox);
|
|
|
|
const findAllGlFormInputs = () => wrapper.findAll(GlFormInput);
|
|
|
|
|
2020-12-23 21:10:24 +00:00
|
|
|
describe.each([true, false])('template, isInheriting = `%p`', (isInheriting) => {
|
2020-05-14 15:08:14 +00:00
|
|
|
it('renders a label with text "Trigger"', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
const triggerLabel = wrapper.find('[data-testid="trigger-fields-group"]').find('label');
|
|
|
|
expect(triggerLabel.exists()).toBe(true);
|
|
|
|
expect(triggerLabel.text()).toBe('Trigger');
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('events without field property', () => {
|
|
|
|
const events = [
|
|
|
|
{
|
|
|
|
title: 'push',
|
|
|
|
name: 'push_event',
|
|
|
|
description: 'Event on push',
|
|
|
|
value: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'merge_request',
|
|
|
|
name: 'merge_requests_event',
|
|
|
|
description: 'Event on merge_request',
|
|
|
|
value: false,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2020-07-17 03:09:14 +00:00
|
|
|
createComponent(
|
|
|
|
{
|
|
|
|
events,
|
|
|
|
},
|
|
|
|
isInheriting,
|
|
|
|
);
|
2020-05-14 15:08:14 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render GlFormInput for each event', () => {
|
|
|
|
expect(findAllGlFormInputs().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders GlFormInput with description for each event', () => {
|
|
|
|
const groups = wrapper.find('#trigger-fields').findAll(GlFormGroup);
|
|
|
|
|
|
|
|
expect(groups).toHaveLength(2);
|
|
|
|
groups.wrappers.forEach((group, index) => {
|
|
|
|
expect(group.find('small').text()).toBe(events[index].description);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-07-17 03:09:14 +00:00
|
|
|
it(`renders GlFormCheckbox and corresponding hidden input for each event, which ${
|
|
|
|
isInheriting ? 'is' : 'is not'
|
|
|
|
} disabled`, () => {
|
|
|
|
const checkboxes = findAllGlFormGroups();
|
2020-05-14 15:08:14 +00:00
|
|
|
const expectedResults = [
|
|
|
|
{ labelText: 'Push', inputName: 'service[push_event]' },
|
|
|
|
{ labelText: 'Merge Request', inputName: 'service[merge_requests_event]' },
|
|
|
|
];
|
|
|
|
expect(checkboxes).toHaveLength(2);
|
|
|
|
|
|
|
|
checkboxes.wrappers.forEach((checkbox, index) => {
|
2020-07-17 03:09:14 +00:00
|
|
|
const checkBox = checkbox.find(GlFormCheckbox);
|
|
|
|
|
2020-05-14 15:08:14 +00:00
|
|
|
expect(checkbox.find('label').text()).toBe(expectedResults[index].labelText);
|
2020-07-17 03:09:14 +00:00
|
|
|
expect(checkbox.find('[type=hidden]').attributes('name')).toBe(
|
|
|
|
expectedResults[index].inputName,
|
|
|
|
);
|
|
|
|
expect(checkbox.find('[type=hidden]').attributes('value')).toBe(
|
|
|
|
events[index].value.toString(),
|
|
|
|
);
|
|
|
|
expect(checkBox.vm.$attrs.disabled).toBe(isInheriting);
|
|
|
|
expect(checkBox.vm.$attrs.checked).toBe(events[index].value);
|
2020-05-14 15:08:14 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-07-17 03:09:14 +00:00
|
|
|
describe('events with field property, isInheriting = `%p`', () => {
|
2020-05-14 15:08:14 +00:00
|
|
|
const events = [
|
|
|
|
{
|
|
|
|
field: {
|
|
|
|
name: 'push_channel',
|
|
|
|
value: '',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
field: {
|
|
|
|
name: 'merge_request_channel',
|
|
|
|
value: 'gitlab-development',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2020-07-17 03:09:14 +00:00
|
|
|
createComponent(
|
|
|
|
{
|
|
|
|
events,
|
|
|
|
},
|
|
|
|
isInheriting,
|
|
|
|
);
|
2020-05-14 15:08:14 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders GlFormCheckbox for each event', () => {
|
|
|
|
expect(findAllGlFormCheckboxes()).toHaveLength(2);
|
|
|
|
});
|
|
|
|
|
2020-07-17 03:09:14 +00:00
|
|
|
it(`renders GlFormInput for each event, which ${
|
|
|
|
isInheriting ? 'is' : 'is not'
|
|
|
|
} readonly`, () => {
|
2020-05-14 15:08:14 +00:00
|
|
|
const fields = findAllGlFormInputs();
|
|
|
|
const expectedResults = [
|
|
|
|
{
|
|
|
|
name: 'service[push_channel]',
|
|
|
|
placeholder: 'Slack channels (e.g. general, development)',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'service[merge_request_channel]',
|
|
|
|
placeholder: 'Slack channels (e.g. general, development)',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
expect(fields).toHaveLength(2);
|
|
|
|
|
|
|
|
fields.wrappers.forEach((field, index) => {
|
|
|
|
expect(field.attributes()).toMatchObject(expectedResults[index]);
|
2020-07-17 03:09:14 +00:00
|
|
|
expect(field.vm.$attrs.readonly).toBe(isInheriting);
|
2020-05-14 15:08:14 +00:00
|
|
|
expect(field.vm.$attrs.value).toBe(events[index].field.value);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|