diff options
Diffstat (limited to 'spec/frontend/integrations/edit/components')
4 files changed, 337 insertions, 3 deletions
diff --git a/spec/frontend/integrations/edit/components/active_toggle_spec.js b/spec/frontend/integrations/edit/components/active_toggle_spec.js index 8a11c200c15..5469b45f708 100644 --- a/spec/frontend/integrations/edit/components/active_toggle_spec.js +++ b/spec/frontend/integrations/edit/components/active_toggle_spec.js @@ -9,17 +9,19 @@ describe('ActiveToggle', () => { const defaultProps = { initialActivated: true, - disabled: false, }; const createComponent = props => { wrapper = mount(ActiveToggle, { - propsData: Object.assign({}, defaultProps, props), + propsData: { ...defaultProps, ...props }, }); }; afterEach(() => { - if (wrapper) wrapper.destroy(); + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } }); const findGlToggle = () => wrapper.find(GlToggle); diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js new file mode 100644 index 00000000000..c93f63b11d0 --- /dev/null +++ b/spec/frontend/integrations/edit/components/integration_form_spec.js @@ -0,0 +1,99 @@ +import { shallowMount } from '@vue/test-utils'; +import IntegrationForm from '~/integrations/edit/components/integration_form.vue'; +import ActiveToggle from '~/integrations/edit/components/active_toggle.vue'; +import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue'; +import TriggerFields from '~/integrations/edit/components/trigger_fields.vue'; + +describe('IntegrationForm', () => { + let wrapper; + + const defaultProps = { + activeToggleProps: { + initialActivated: true, + }, + showActive: true, + triggerFieldsProps: { + initialTriggerCommit: false, + initialTriggerMergeRequest: false, + initialEnableComments: false, + }, + type: '', + }; + + const createComponent = props => { + wrapper = shallowMount(IntegrationForm, { + propsData: { ...defaultProps, ...props }, + stubs: { + ActiveToggle, + JiraTriggerFields, + }, + }); + }; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + const findActiveToggle = () => wrapper.find(ActiveToggle); + const findJiraTriggerFields = () => wrapper.find(JiraTriggerFields); + const findTriggerFields = () => wrapper.find(TriggerFields); + + describe('template', () => { + describe('showActive is true', () => { + it('renders ActiveToggle', () => { + createComponent(); + + expect(findActiveToggle().exists()).toBe(true); + }); + }); + + describe('showActive is false', () => { + it('does not render ActiveToggle', () => { + createComponent({ + showActive: false, + }); + + expect(findActiveToggle().exists()).toBe(false); + }); + }); + + describe('type is "slack"', () => { + it('does not render JiraTriggerFields', () => { + createComponent({ + type: 'slack', + }); + + expect(findJiraTriggerFields().exists()).toBe(false); + }); + }); + + describe('type is "jira"', () => { + it('renders JiraTriggerFields', () => { + createComponent({ + type: 'jira', + }); + + expect(findJiraTriggerFields().exists()).toBe(true); + }); + }); + + describe('triggerEvents is present', () => { + it('renders TriggerFields', () => { + const events = [{ title: 'push' }]; + const type = 'slack'; + + createComponent({ + triggerEvents: events, + type, + }); + + expect(findTriggerFields().exists()).toBe(true); + expect(findTriggerFields().props('events')).toBe(events); + expect(findTriggerFields().props('type')).toBe(type); + }); + }); + }); +}); diff --git a/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js b/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js new file mode 100644 index 00000000000..e4c2a0be6a3 --- /dev/null +++ b/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js @@ -0,0 +1,97 @@ +import { mount } from '@vue/test-utils'; +import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue'; +import { GlFormCheckbox } from '@gitlab/ui'; + +describe('JiraTriggerFields', () => { + let wrapper; + + const defaultProps = { + initialTriggerCommit: false, + initialTriggerMergeRequest: false, + initialEnableComments: false, + }; + + const createComponent = props => { + wrapper = mount(JiraTriggerFields, { + propsData: { ...defaultProps, ...props }, + }); + }; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + const findCommentSettings = () => wrapper.find('[data-testid="comment-settings"]'); + const findCommentDetail = () => wrapper.find('[data-testid="comment-detail"]'); + const findCommentSettingsCheckbox = () => findCommentSettings().find(GlFormCheckbox); + + describe('template', () => { + describe('initialTriggerCommit and initialTriggerMergeRequest are false', () => { + it('does not show comment settings', () => { + createComponent(); + + expect(findCommentSettings().isVisible()).toBe(false); + expect(findCommentDetail().isVisible()).toBe(false); + }); + }); + + describe('initialTriggerCommit is true', () => { + beforeEach(() => { + createComponent({ + initialTriggerCommit: true, + }); + }); + + it('shows comment settings', () => { + expect(findCommentSettings().isVisible()).toBe(true); + expect(findCommentDetail().isVisible()).toBe(false); + }); + + // As per https://vuejs.org/v2/guide/forms.html#Checkbox-1, + // browsers don't include unchecked boxes in form submissions. + it('includes comment settings as false even if unchecked', () => { + expect( + findCommentSettings() + .find('input[name="service[comment_on_event_enabled]"]') + .exists(), + ).toBe(true); + }); + + describe('on enable comments', () => { + it('shows comment detail', () => { + findCommentSettingsCheckbox().vm.$emit('input', true); + + return wrapper.vm.$nextTick().then(() => { + expect(findCommentDetail().isVisible()).toBe(true); + }); + }); + }); + }); + + describe('initialTriggerMergeRequest is true', () => { + it('shows comment settings', () => { + createComponent({ + initialTriggerMergeRequest: true, + }); + + expect(findCommentSettings().isVisible()).toBe(true); + expect(findCommentDetail().isVisible()).toBe(false); + }); + }); + + describe('initialTriggerCommit is true, initialEnableComments is true', () => { + it('shows comment settings and comment detail', () => { + createComponent({ + initialTriggerCommit: true, + initialEnableComments: true, + }); + + expect(findCommentSettings().isVisible()).toBe(true); + expect(findCommentDetail().isVisible()).toBe(true); + }); + }); + }); +}); 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); + }); + }); + }); + }); +}); |