Add specs for TriggerFields

- Refactor and improve other related specs
- Make "fields" prop optional in IntegrationForm
- Refactor TriggerFields to use startCase method directly.

app/assets/javascripts/integrations/edit/components/trigger_fields.vue

@@ -35,12 +35,10 @@ export default {
     checkboxName(name) {
       return `service[${name}]`;
     },
-    checkboxTitle(title) {
-      return startCase(title);
-    },
     fieldName(name) {
       return `service[${name}]`;
     },
+    startCase,
   },
 };
 </script>
@@ -51,10 +49,10 @@ export default {
       <gl-form-group v-for="event in events" :key="event.title" :description="event.description">
         <input :name="checkboxName(event.name)" type="hidden" value="false" />
         <gl-form-checkbox v-model="event.value" :name="checkboxName(event.name)">
-          {{ checkboxTitle(event.title) }}
+          {{ startCase(event.title) }}
         </gl-form-checkbox>
         <gl-form-input
-          v-if="event.field.name"
+          v-if="event.field"
           v-model="event.field.value"
           :name="fieldName(event.field.name)"
           :placeholder="placeholder"

spec/frontend/integrations/edit/components/active_toggle_spec.js

@@ -18,7 +18,10 @@ describe('ActiveToggle', () => {
   };
 
   afterEach(() => {
-    if (wrapper) wrapper.destroy();
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
   });
 
   const findGlToggle = () => wrapper.find(GlToggle);

spec/frontend/integrations/edit/components/integration_form_spec.js

@@ -2,6 +2,7 @@ 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;
@@ -38,6 +39,7 @@ describe('IntegrationForm', () => {
 
   const findActiveToggle = () => wrapper.find(ActiveToggle);
   const findJiraTriggerFields = () => wrapper.find(JiraTriggerFields);
+  const findTriggerFields = () => wrapper.find(TriggerFields);
 
   describe('template', () => {
     describe('showActive is true', () => {
@@ -77,5 +79,21 @@ describe('IntegrationForm', () => {
         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);
+      });
+    });
   });
 });

spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js

@@ -18,7 +18,10 @@ describe('JiraTriggerFields', () => {
   };
 
   afterEach(() => {
-    if (wrapper) wrapper.destroy();
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
   });
 
   const findCommentSettings = () => wrapper.find('[data-testid="comment-settings"]');

spec/frontend/integrations/edit/components/trigger_fields_spec.js

+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('label[for="trigger-fields"]');
+
+      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);
+        expect(
+          groups
+            .at(0)
+            .find('small')
+            .text(),
+        ).toBe(events[0].description);
+        expect(
+          groups
+            .at(1)
+            .find('small')
+            .text(),
+        ).toBe(events[1].description);
+      });
+
+      it('renders GlFormCheckbox for each event', () => {
+        const checkboxes = findAllGlFormCheckboxes();
+
+        expect(checkboxes).toHaveLength(2);
+
+        expect(
+          checkboxes
+            .at(0)
+            .find('label')
+            .text(),
+        ).toBe('Push');
+        expect(
+          checkboxes
+            .at(0)
+            .find('input')
+            .attributes('name'),
+        ).toBe('service[push_event]');
+        expect(checkboxes.at(0).vm.$attrs.checked).toBe(true);
+
+        expect(
+          checkboxes
+            .at(1)
+            .find('label')
+            .text(),
+        ).toBe('Merge Request');
+        expect(
+          checkboxes
+            .at(1)
+            .find('input')
+            .attributes('name'),
+        ).toBe('service[merge_requests_event]');
+        expect(checkboxes.at(1).vm.$attrs.checked).toBe(false);
+      });
+    });
+
+    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();
+
+        expect(fields).toHaveLength(2);
+
+        expect(fields.at(0).attributes()).toMatchObject({
+          name: 'service[push_channel]',
+          placeholder: 'Slack channels (e.g. general, development)',
+        });
+        expect(fields.at(0).vm.$attrs.value).toBe('');
+
+        expect(fields.at(1).attributes()).toMatchObject({
+          name: 'service[merge_request_channel]',
+          placeholder: 'Slack channels (e.g. general, development)',
+        });
+        expect(fields.at(1).vm.$attrs.value).toBe('gitlab-development');
+      });
+    });
+  });
+});