1 files changed, 53 insertions, 0 deletions
diff --git a/spec/frontend/projects/settings/branch_rules/components/protections/merge_protections_spec.js b/spec/frontend/projects/settings/branch_rules/components/protections/merge_protections_spec.js
new file mode 100644
index 00000000000..0e168a2ad78
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/protections/merge_protections_spec.js
@@ -0,0 +1,53 @@
+import { GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import MergeProtections, {
+  i18n,
+} from '~/projects/settings/branch_rules/components/protections/merge_protections.vue';
+import { membersAllowedToMerge, requireCodeOwnersApproval } from '../../mock_data';
+
+describe('Merge Protections', () => {
+  let wrapper;
+
+  const propsData = {
+    membersAllowedToMerge,
+    requireCodeOwnersApproval,
+  };
+
+  const createComponent = () => {
+    wrapper = mountExtended(MergeProtections, {
+      propsData,
+    });
+  };
+
+  const findFormGroup = () => wrapper.findComponent(GlFormGroup);
+  const findCodeOwnersApprovalCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a form group with the correct label', () => {
+    expect(findFormGroup().text()).toContain(i18n.allowedToMerge);
+  });
+
+  describe('Require code owners approval checkbox', () => {
+    it('renders a checkbox with the correct props', () => {
+      expect(findCodeOwnersApprovalCheckbox().vm.$attrs.checked).toBe(
+        propsData.requireCodeOwnersApproval,
+      );
+    });
+
+    it('renders help text', () => {
+      expect(findCodeOwnersApprovalCheckbox().text()).toContain(i18n.requireApprovalTitle);
+      expect(findCodeOwnersApprovalCheckbox().text()).toContain(i18n.requireApprovalHelpText);
+    });
+
+    it('emits a change-allow-force-push event when changed', () => {
+      findCodeOwnersApprovalCheckbox().vm.$emit('change', false);
+
+      expect(wrapper.emitted('change-require-code-owners-approval')[0]).toEqual([false]);
+    });
+  });
+});