diff options
Diffstat (limited to 'spec/frontend/integrations/edit/components/trigger_fields_spec.js')
-rw-r--r-- | spec/frontend/integrations/edit/components/trigger_fields_spec.js | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/spec/frontend/integrations/edit/components/trigger_fields_spec.js b/spec/frontend/integrations/edit/components/trigger_fields_spec.js new file mode 100644 index 00000000000..337876c6d16 --- /dev/null +++ b/spec/frontend/integrations/edit/components/trigger_fields_spec.js @@ -0,0 +1,136 @@ +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); + }); + }); + }); + }); +}); |