import { mount } from '@vue/test-utils'; import TriggerFields from '~/integrations/edit/components/trigger_fields.vue'; import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui'; describe('TriggerFields', () => { let wrapper; const defaultProps = { type: 'slack', }; const createComponent = props => { wrapper = mount(TriggerFields, { propsData: { ...defaultProps, ...props }, }); }; afterEach(() => { if (wrapper) { wrapper.destroy(); wrapper = null; } }); const findAllGlFormCheckboxes = () => wrapper.findAll(GlFormCheckbox); const findAllGlFormInputs = () => wrapper.findAll(GlFormInput); describe('template', () => { 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(() => { createComponent({ events, }); }); 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); }); }); it('renders GlFormCheckbox for each event', () => { const checkboxes = findAllGlFormCheckboxes(); 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) => { expect(checkbox.find('label').text()).toBe(expectedResults[index].labelText); expect(checkbox.find('input').attributes('name')).toBe(expectedResults[index].inputName); expect(checkbox.vm.$attrs.checked).toBe(events[index].value); }); }); }); describe('events with field property', () => { const events = [ { field: { name: 'push_channel', value: '', }, }, { field: { name: 'merge_request_channel', value: 'gitlab-development', }, }, ]; beforeEach(() => { createComponent({ events, }); }); it('renders GlFormCheckbox for each event', () => { expect(findAllGlFormCheckboxes()).toHaveLength(2); }); it('renders GlFormInput for each event', () => { 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]); expect(field.vm.$attrs.value).toBe(events[index].field.value); }); }); }); }); });