diff options
Diffstat (limited to 'spec/frontend/protected_branches/protected_branch_edit_spec.js')
-rw-r--r-- | spec/frontend/protected_branches/protected_branch_edit_spec.js | 92 |
1 files changed, 75 insertions, 17 deletions
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(); })); }); |