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);
+        });
+      });
+    });
+  });
+});