1 files changed, 60 insertions, 1 deletions
diff --git a/spec/frontend/projects/settings/branch_rules/rule_edit_spec.js b/spec/frontend/projects/settings/branch_rules/rule_edit_spec.js
index 66ae6ddc02d..b0b2b9191d4 100644
--- a/spec/frontend/projects/settings/branch_rules/rule_edit_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/rule_edit_spec.js
@@ -3,9 +3,12 @@ import { getParameterByName } from '~/lib/utils/url_utility';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RuleEdit from '~/projects/settings/branch_rules/components/rule_edit.vue';
 import BranchDropdown from '~/projects/settings/branch_rules/components/branch_dropdown.vue';
+import Protections from '~/projects/settings/branch_rules/components/protections/index.vue';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   getParameterByName: jest.fn().mockImplementation(() => 'main'),
+  joinPaths: jest.fn(),
+  setUrlFragment: jest.fn(),
 }));
 
 describe('Edit branch rule', () => {
@@ -16,10 +19,15 @@ describe('Edit branch rule', () => {
     wrapper = shallowMountExtended(RuleEdit, { propsData: { projectPath } });
   };
 
-  const findBranchDropdown = () => wrapper.find(BranchDropdown);
+  const findBranchDropdown = () => wrapper.findComponent(BranchDropdown);
+  const findProtections = () => wrapper.findComponent(Protections);
 
   beforeEach(() => createComponent());
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   it('gets the branch param from url', () => {
     expect(getParameterByName).toHaveBeenCalledWith('branch');
   });
@@ -46,4 +54,55 @@ describe('Edit branch rule', () => {
       expect(findBranchDropdown().props('value')).toBe(wildcard);
     });
   });
+
+  describe('Protections', () => {
+    it('renders a Protections component with the correct props', () => {
+      expect(findProtections().props('protections')).toMatchObject({
+        membersAllowedToPush: [],
+        allowForcePush: false,
+        membersAllowedToMerge: [],
+        requireCodeOwnersApproval: false,
+      });
+    });
+
+    it('updates protections when change-allowed-to-push-members is emitted', async () => {
+      const membersAllowedToPush = ['test'];
+      findProtections().vm.$emit('change-allowed-to-push-members', membersAllowedToPush);
+      await nextTick();
+
+      expect(findProtections().props('protections')).toEqual(
+        expect.objectContaining({ membersAllowedToPush }),
+      );
+    });
+
+    it('updates protections when change-allow-force-push is emitted', async () => {
+      const allowForcePush = true;
+      findProtections().vm.$emit('change-allow-force-push', allowForcePush);
+      await nextTick();
+
+      expect(findProtections().props('protections')).toEqual(
+        expect.objectContaining({ allowForcePush }),
+      );
+    });
+
+    it('updates protections when change-allowed-to-merge-members is emitted', async () => {
+      const membersAllowedToMerge = ['test'];
+      findProtections().vm.$emit('change-allowed-to-merge-members', membersAllowedToMerge);
+      await nextTick();
+
+      expect(findProtections().props('protections')).toEqual(
+        expect.objectContaining({ membersAllowedToMerge }),
+      );
+    });
+
+    it('updates protections when change-require-code-owners-approval is emitted', async () => {
+      const requireCodeOwnersApproval = true;
+      findProtections().vm.$emit('change-require-code-owners-approval', requireCodeOwnersApproval);
+      await nextTick();
+
+      expect(findProtections().props('protections')).toEqual(
+        expect.objectContaining({ requireCodeOwnersApproval }),
+      );
+    });
+  });
 });