debian-mirror-gitlab/spec/frontend/protected_branches/protected_branch_edit_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

153 lines
4.6 KiB
JavaScript
Raw Normal View History

2021-04-17 20:07:23 +05:30
import MockAdapter from 'axios-mock-adapter';
import $ from 'jquery';
2022-07-16 23:28:13 +05:30
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
2021-04-17 20:07:23 +05:30
import { TEST_HOST } from 'helpers/test_constants';
2021-09-04 01:27:46 +05:30
import createFlash from '~/flash';
2021-04-17 20:07:23 +05:30
import axios from '~/lib/utils/axios_utils';
import ProtectedBranchEdit from '~/protected_branches/protected_branch_edit';
jest.mock('~/flash');
const TEST_URL = `${TEST_HOST}/url`;
2022-05-07 20:08:51 +05:30
const FORCE_PUSH_TOGGLE_TESTID = 'force-push-toggle';
const CODE_OWNER_TOGGLE_TESTID = 'code-owner-toggle';
2021-04-17 20:07:23 +05:30
const IS_CHECKED_CLASS = 'is-checked';
2022-05-07 20:08:51 +05:30
const IS_DISABLED_CLASS = 'is-disabled';
const IS_LOADING_SELECTOR = '.toggle-loading';
2021-04-17 20:07:23 +05:30
describe('ProtectedBranchEdit', () => {
let mock;
beforeEach(() => {
jest.spyOn(ProtectedBranchEdit.prototype, 'buildDropdowns').mockImplementation();
mock = new MockAdapter(axios);
});
2022-05-07 20:08:51 +05:30
const findForcePushToggle = () =>
document.querySelector(`div[data-testid="${FORCE_PUSH_TOGGLE_TESTID}"] button`);
const findCodeOwnerToggle = () =>
document.querySelector(`div[data-testid="${CODE_OWNER_TOGGLE_TESTID}"] button`);
2021-04-17 20:07:23 +05:30
2022-05-07 20:08:51 +05:30
const create = ({
forcePushToggleChecked = false,
codeOwnerToggleChecked = false,
hasLicense = true,
} = {}) => {
2022-07-16 23:28:13 +05:30
setHTMLFixture(`<div id="wrap" data-url="${TEST_URL}">
2022-05-07 20:08:51 +05:30
<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>`);
2021-04-17 20:07:23 +05:30
2022-05-07 20:08:51 +05:30
return new ProtectedBranchEdit({ $wrap: $('#wrap'), hasLicense });
2021-04-17 20:07:23 +05:30
};
afterEach(() => {
mock.restore();
2022-07-16 23:28:13 +05:30
resetHTMLFixture();
2021-04-17 20:07:23 +05:30
});
2022-05-07 20:08:51 +05:30
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 });
2022-07-16 23:28:13 +05:30
setHTMLFixture('');
});
afterEach(() => {
resetHTMLFixture();
2022-05-07 20:08:51 +05:30
});
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 }) => {
2021-04-17 20:07:23 +05:30
let toggle;
beforeEach(() => {
2022-05-07 20:08:51 +05:30
create({ [checkedOption]: false });
2021-04-17 20:07:23 +05:30
2022-05-07 20:08:51 +05:30
toggle = finder();
2021-04-17 20:07:23 +05:30
});
it('is not changed', () => {
expect(toggle).not.toHaveClass(IS_CHECKED_CLASS);
2022-05-07 20:08:51 +05:30
expect(toggle.querySelector(IS_LOADING_SELECTOR)).toBe(null);
expect(toggle).not.toHaveClass(IS_DISABLED_CLASS);
2021-04-17 20:07:23 +05:30
});
describe('when clicked', () => {
beforeEach(() => {
2022-05-07 20:08:51 +05:30
mock.onPatch(TEST_URL, { protected_branch: { [patchParam]: true } }).replyOnce(200, {});
2021-04-17 20:07:23 +05:30
toggle.click();
});
it('checks and disables button', () => {
expect(toggle).toHaveClass(IS_CHECKED_CLASS);
2022-05-07 20:08:51 +05:30
expect(toggle.querySelector(IS_LOADING_SELECTOR)).not.toBe(null);
expect(toggle).toHaveClass(IS_DISABLED_CLASS);
2021-04-17 20:07:23 +05:30
});
it('sends update to BE', () =>
axios.waitForAll().then(() => {
// Args are asserted in the `.onPatch` call
expect(mock.history.patch).toHaveLength(1);
2022-05-07 20:08:51 +05:30
expect(toggle).not.toHaveClass(IS_DISABLED_CLASS);
expect(toggle.querySelector(IS_LOADING_SELECTOR)).toBe(null);
2021-09-04 01:27:46 +05:30
expect(createFlash).not.toHaveBeenCalled();
2021-04-17 20:07:23 +05:30
}));
});
describe('when clicked and BE error', () => {
beforeEach(() => {
mock.onPatch(TEST_URL).replyOnce(500);
toggle.click();
});
it('flashes error', () =>
axios.waitForAll().then(() => {
2021-09-04 01:27:46 +05:30
expect(createFlash).toHaveBeenCalled();
2021-04-17 20:07:23 +05:30
}));
});
});
});