2 files changed, 189 insertions, 17 deletions

diff --git a/spec/frontend/protected_branches/protected_branch_create_spec.js b/spec/frontend/protected_branches/protected_branch_create_spec.js
new file mode 100644
index 00000000000..b3de2d5e031
--- /dev/null
+++ b/spec/frontend/protected_branches/protected_branch_create_spec.js
@@ -0,0 +1,114 @@
+import ProtectedBranchCreate from '~/protected_branches/protected_branch_create';
+
+const FORCE_PUSH_TOGGLE_TESTID = 'force-push-toggle';
+const CODE_OWNER_TOGGLE_TESTID = 'code-owner-toggle';
+const IS_CHECKED_CLASS = 'is-checked';
+const IS_DISABLED_CLASS = 'is-disabled';
+const IS_LOADING_CLASS = 'toggle-loading';
+
+describe('ProtectedBranchCreate', () => {
+  beforeEach(() => {
+    jest.spyOn(ProtectedBranchCreate.prototype, 'buildDropdowns').mockImplementation();
+  });
+
+  const findForcePushToggle = () =>
+    document.querySelector(`div[data-testid="${FORCE_PUSH_TOGGLE_TESTID}"] button`);
+  const findCodeOwnerToggle = () =>
+    document.querySelector(`div[data-testid="${CODE_OWNER_TOGGLE_TESTID}"] button`);
+
+  const create = ({
+    forcePushToggleChecked = false,
+    codeOwnerToggleChecked = false,
+    hasLicense = true,
+  } = {}) => {
+    setFixtures(`
+      <form class="js-new-protected-branch">
+        <span
+          class="js-force-push-toggle"
+          data-label="Toggle allowed to force push"
+          data-is-checked="${forcePushToggleChecked}"
+          data-testid="${FORCE_PUSH_TOGGLE_TESTID}"></span>
+        <span
+          class="js-code-owner-toggle"
+          data-label="Toggle code owner approval"
+          data-is-checked="${codeOwnerToggleChecked}"
+          data-testid="${CODE_OWNER_TOGGLE_TESTID}"></span>
+        <input type="submit" />
+      </form>
+    `);
+
+    return new ProtectedBranchCreate({ hasLicense });
+  };
+
+  describe('when license supports code owner approvals', () => {
+    it('instantiates the code owner toggle', () => {
+      create();
+
+      expect(findCodeOwnerToggle()).not.toBe(null);
+    });
+  });
+
+  describe('when license does not support code owner approvals', () => {
+    it('does not instantiate the code owner toggle', () => {
+      create({ hasLicense: false });
+
+      expect(findCodeOwnerToggle()).toBe(null);
+    });
+  });
+
+  describe.each`
+    description     | checkedOption               | finder
+    ${'force push'} | ${'forcePushToggleChecked'} | ${findForcePushToggle}
+    ${'code owner'} | ${'codeOwnerToggleChecked'} | ${findCodeOwnerToggle}
+  `('when unchecked $description toggle button', ({ checkedOption, finder }) => {
+    it('is not changed', () => {
+      create({ [checkedOption]: false });
+
+      const toggle = finder();
+
+      expect(toggle).not.toHaveClass(IS_CHECKED_CLASS);
+      expect(toggle.querySelector(`.${IS_LOADING_CLASS}`)).toBe(null);
+      expect(toggle).not.toHaveClass(IS_DISABLED_CLASS);
+    });
+  });
+
+  describe('form data', () => {
+    let protectedBranchCreate;
+
+    beforeEach(() => {
+      protectedBranchCreate = create({
+        forcePushToggleChecked: false,
+        codeOwnerToggleChecked: true,
+      });
+
+      // Mock access levels. This should probably be improved in future iterations.
+      protectedBranchCreate.merge_access_levels_dropdown = {
+        getSelectedItems: () => [],
+      };
+      protectedBranchCreate.push_access_levels_dropdown = {
+        getSelectedItems: () => [],
+      };
+    });
+
+    afterEach(() => {
+      protectedBranchCreate = null;
+    });
+
+    it('returns the default form data if toggles are untouched', () => {
+      expect(protectedBranchCreate.getFormData().protected_branch).toMatchObject({
+        allow_force_push: false,
+        code_owner_approval_required: true,
+      });
+    });
+
+    it('reflects toggles changes if any', () => {
+      findForcePushToggle().click();
+      findCodeOwnerToggle().click();
+
+      expect(protectedBranchCreate.getFormData().protected_branch).toMatchObject({
+        allow_force_push: true,
+        code_owner_approval_required: false,
+      });
+    });
+  });
+});
diff --git a/spec/frontend/protected_branches/protected_branch_edit_spec.js b/spec/frontend/protected_branches/protected_branch_edit_spec.js
index b41b5028736..959ca6ecde2 100644
--- a/spec/frontend/protected_branches/protected_branch_edit_spec.js
+++ b/spec/frontend/protected_branches/protected_branch_edit_spec.js
@@ -8,59 +8,116 @@ import ProtectedBranchEdit from '~/protected_branches/protected_branch_edit';
 jest.mock('~/flash');
 
 const TEST_URL = `${TEST_HOST}/url`;
+const FORCE_PUSH_TOGGLE_TESTID = 'force-push-toggle';
+const CODE_OWNER_TOGGLE_TESTID = 'code-owner-toggle';
 const IS_CHECKED_CLASS = 'is-checked';
+const IS_DISABLED_CLASS = 'is-disabled';
+const IS_LOADING_SELECTOR = '.toggle-loading';
 
 describe('ProtectedBranchEdit', () => {
   let mock;
 
   beforeEach(() => {
-    setFixtures(`<div id="wrap" data-url="${TEST_URL}">
-      <button class="js-force-push-toggle">Toggle</button>
-    </div>`);
-
     jest.spyOn(ProtectedBranchEdit.prototype, 'buildDropdowns').mockImplementation();
 
     mock = new MockAdapter(axios);
   });
 
-  const findForcePushesToggle = () => document.querySelector('.js-force-push-toggle');
+  const findForcePushToggle = () =>
+    document.querySelector(`div[data-testid="${FORCE_PUSH_TOGGLE_TESTID}"] button`);
+  const findCodeOwnerToggle = () =>
+    document.querySelector(`div[data-testid="${CODE_OWNER_TOGGLE_TESTID}"] button`);
 
-  const create = ({ isChecked = false }) => {
-    if (isChecked) {
-      findForcePushesToggle().classList.add(IS_CHECKED_CLASS);
-    }
+  const create = ({
+    forcePushToggleChecked = false,
+    codeOwnerToggleChecked = false,
+    hasLicense = true,
+  } = {}) => {
+    setFixtures(`<div id="wrap" data-url="${TEST_URL}">
+      <span
+        class="js-force-push-toggle"
+        data-label="Toggle allowed to force push"
+        data-is-checked="${forcePushToggleChecked}"
+        data-testid="${FORCE_PUSH_TOGGLE_TESTID}"></span>
+      <span
+        class="js-code-owner-toggle"
+        data-label="Toggle code owner approval"
+        data-is-checked="${codeOwnerToggleChecked}"
+        data-testid="${CODE_OWNER_TOGGLE_TESTID}"></span>
+    </div>`);
 
-    return new ProtectedBranchEdit({ $wrap: $('#wrap'), hasLicense: false });
+    return new ProtectedBranchEdit({ $wrap: $('#wrap'), hasLicense });
   };
 
   afterEach(() => {
     mock.restore();
   });
 
-  describe('when unchecked toggle button', () => {
+  describe('when license supports code owner approvals', () => {
+    beforeEach(() => {
+      create();
+    });
+
+    it('instantiates the code owner toggle', () => {
+      expect(findCodeOwnerToggle()).not.toBe(null);
+    });
+  });
+
+  describe('when license does not support code owner approvals', () => {
+    beforeEach(() => {
+      create({ hasLicense: false });
+    });
+
+    it('does not instantiate the code owner toggle', () => {
+      expect(findCodeOwnerToggle()).toBe(null);
+    });
+  });
+
+  describe('when toggles are not available in the DOM on page load', () => {
+    beforeEach(() => {
+      create({ hasLicense: true });
+      setFixtures('');
+    });
+
+    it('does not instantiate the force push toggle', () => {
+      expect(findForcePushToggle()).toBe(null);
+    });
+
+    it('does not instantiate the code owner toggle', () => {
+      expect(findCodeOwnerToggle()).toBe(null);
+    });
+  });
+
+  describe.each`
+    description     | checkedOption               | patchParam                        | finder
+    ${'force push'} | ${'forcePushToggleChecked'} | ${'allow_force_push'}             | ${findForcePushToggle}
+    ${'code owner'} | ${'codeOwnerToggleChecked'} | ${'code_owner_approval_required'} | ${findCodeOwnerToggle}
+  `('when unchecked $description toggle button', ({ checkedOption, patchParam, finder }) => {
     let toggle;
 
     beforeEach(() => {
-      create({ isChecked: false });
+      create({ [checkedOption]: false });
 
-      toggle = findForcePushesToggle();
+      toggle = finder();
     });
 
     it('is not changed', () => {
       expect(toggle).not.toHaveClass(IS_CHECKED_CLASS);
-      expect(toggle).not.toBeDisabled();
+      expect(toggle.querySelector(IS_LOADING_SELECTOR)).toBe(null);
+      expect(toggle).not.toHaveClass(IS_DISABLED_CLASS);
     });
 
     describe('when clicked', () => {
       beforeEach(() => {
-        mock.onPatch(TEST_URL, { protected_branch: { allow_force_push: true } }).replyOnce(200, {});
+        mock.onPatch(TEST_URL, { protected_branch: { [patchParam]: true } }).replyOnce(200, {});
 
         toggle.click();
       });
 
       it('checks and disables button', () => {
         expect(toggle).toHaveClass(IS_CHECKED_CLASS);
-        expect(toggle).toBeDisabled();
+        expect(toggle.querySelector(IS_LOADING_SELECTOR)).not.toBe(null);
+        expect(toggle).toHaveClass(IS_DISABLED_CLASS);
       });
 
       it('sends update to BE', () =>
@@ -68,7 +125,8 @@ describe('ProtectedBranchEdit', () => {
           // Args are asserted in the `.onPatch` call
           expect(mock.history.patch).toHaveLength(1);
 
-          expect(toggle).not.toBeDisabled();
+          expect(toggle).not.toHaveClass(IS_DISABLED_CLASS);
+          expect(toggle.querySelector(IS_LOADING_SELECTOR)).toBe(null);
           expect(createFlash).not.toHaveBeenCalled();
         }));
     });