1 files changed, 71 insertions, 0 deletions
diff --git a/spec/frontend/integrations/edit/components/trigger_field_spec.js b/spec/frontend/integrations/edit/components/trigger_field_spec.js
new file mode 100644
index 00000000000..6a68337813e
--- /dev/null
+++ b/spec/frontend/integrations/edit/components/trigger_field_spec.js
@@ -0,0 +1,71 @@
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlFormCheckbox } from '@gitlab/ui';
+
+import TriggerField from '~/integrations/edit/components/trigger_field.vue';
+import { integrationTriggerEventTitles } from '~/integrations/constants';
+
+describe('TriggerField', () => {
+  let wrapper;
+
+  const defaultProps = {
+    event: { name: 'push_events' },
+  };
+
+  const createComponent = ({ props = {}, isInheriting = false } = {}) => {
+    wrapper = shallowMount(TriggerField, {
+      propsData: { ...defaultProps, ...props },
+      computed: {
+        isInheriting: () => isInheriting,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGlFormCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findHiddenInput = () => wrapper.find('input[type="hidden"]');
+
+  describe('template', () => {
+    it('renders enabled GlFormCheckbox', () => {
+      createComponent();
+
+      expect(findGlFormCheckbox().attributes('disabled')).toBeUndefined();
+    });
+
+    it('when isInheriting is true, renders disabled GlFormCheckbox', () => {
+      createComponent({ isInheriting: true });
+
+      expect(findGlFormCheckbox().attributes('disabled')).toBe('true');
+    });
+
+    it('renders correct title', () => {
+      createComponent();
+
+      expect(findGlFormCheckbox().text()).toMatchInterpolatedText(
+        integrationTriggerEventTitles[defaultProps.event.name],
+      );
+    });
+
+    it('sets default value for hidden input', () => {
+      createComponent();
+
+      expect(findHiddenInput().attributes('value')).toBe('false');
+    });
+
+    it('toggles value of hidden input on checkbox input', async () => {
+      createComponent({
+        props: { event: { name: 'push_events', value: true } },
+      });
+      await nextTick;
+
+      expect(findHiddenInput().attributes('value')).toBe('true');
+
+      await findGlFormCheckbox().vm.$emit('input', false);
+
+      expect(findHiddenInput().attributes('value')).toBe('false');
+    });
+  });
+});