darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 11:23:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Re-introduce govuk checkboxes"

Browse Source
This commit is contained in:
Tom Byers
2020-07-15 13:41:34 +01:00
committed by GitHub
parent 86f70ae9fa
commit dfcddb757e
33 changed files with 404 additions and 923 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
tests/javascripts/collapsibleCheckboxes.test.js
View File

@@ -14,52 +14,49 @@ afterAll(() => {
describe('Collapsible fieldset', () => {
const _checkboxes = (start, end) => {
result = '';
for (let num = start; num <= end; num++) {
let id = `folder-permissions-${num}`;
result += `<li class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="${id}" name="folder-permissions" type="checkbox" value="${id}">
<label class="govuk-label govuk-checkboxes__label" for="${id}">
Folder ${id}
</label>
</li>`;
}
return result;
};
let wrapper;
let formGroup;
let fieldset;
let checkboxesContainer;
let checkboxes;
beforeEach(() => {
const _checkboxes = (start, end, descendents) => {
result = '';
for (let num = start; num <= end; num++) {
let id = `folder-permissions-${num}`;
if (!descendents) { descendents = ''; }
result += `<li class="multiple-choice">
<input id="${id}" name="folder_permissions" type="checkbox" value="${id}">
<label class="block-label" for="{id}">
Folder 18
</label>
${descendents}
</li>`;
}
return result;
};
// set up DOM
document.body.innerHTML =
`<div class="selection-wrapper" data-module="collapsible-checkboxes" data-field-label="folder">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" id="folder_permissions">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
Folders this team member can see
<span class="govuk-hint">
<div class="selection-summary" role="region" aria-live="polite"></div>
</span>
</legend>
<ul class="govuk-checkboxes">
`<div class="form-group" data-module="collapsible-checkboxes" data-field-label="folder">
<div class="selection-summary"></div>
<fieldset id="folder_permissions">
<legend class="form-label heading-small">
Folders this team member can see
</legend>
<div class="checkboxes-nested">
<ul>
${_checkboxes(1, 10)}
</ul>
</fieldset>
</div>
</div>
</fieldset>
</div>`;
wrapper = document.querySelector('.selection-wrapper');
formGroup = wrapper.querySelector('.govuk-form-group');
formGroup = document.querySelector('.form-group');
fieldset = formGroup.querySelector('fieldset');
checkboxesContainer = fieldset.querySelector('.govuk-checkboxes');
checkboxesContainer = fieldset.querySelector('.checkboxes-nested');
checkboxes = checkboxesContainer.querySelectorAll('input[type=checkbox]');
});
@@ -144,12 +141,6 @@ describe('Collapsible fieldset', () => {
});
test("removes the hint", () => {
expect(document.querySelector('.govuk-hint')).toBeNull();
});
});
test('has the right summary text when started with no checkboxes selected', () => {
@@ -196,7 +187,7 @@ describe('Collapsible fieldset', () => {
test("the summary doesn't have a folder icon if fields aren't called 'folder'", () => {
wrapper.dataset.fieldLabel = 'team member';
formGroup.dataset.fieldLabel = 'team member';
// start module
window.GOVUK.modules.start();
@@ -286,74 +277,35 @@ describe('Collapsible fieldset', () => {
describe("the footer (that wraps the button)", () => {
describe("is inserted", () => {
beforeEach(() => {
test("after the fieldset", () => {
// track calls to sticky JS
window.GOVUK.stickAtBottomWhenScrolling.recalculate = jest.fn(() => {});
// start module
window.GOVUK.modules.start();
// start module
window.GOVUK.modules.start();
// show the checkboxes
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
expect(formGroup.querySelector('.selection-footer').previousElementSibling.nodeName).toBe('FIELDSET');
});
test("after the root fieldset if the checkboxes are nested", () => {
// add a nested list of checkboxes to the first checkbox item
const nestedCheckboxes = document.createElement('div');
nestedCheckboxes.className = 'govuk-form-group govuk-form-group--nested';
nestedCheckboxes.innerHTML = _checkboxes(11, 20);
checkboxesContainer.querySelector('.govuk-checkboxes__item').appendChild(nestedCheckboxes);
// start module
window.GOVUK.modules.start();
// show the checkboxes
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
expect(formGroup.querySelector('.selection-footer').previousElementSibling.nodeName).toBe('FIELDSET');
});
// show the checkboxes
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
});
describe("its stickiness", () => {
test("is made sticky when the fieldset is expanded", () => {
beforeEach(() => {
// track calls to sticky JS
window.GOVUK.stickAtBottomWhenScrolling.recalculate = jest.fn(() => {});
// start module
window.GOVUK.modules.start();
// show the checkboxes
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
});
test("is added when the fieldset is expanded", () => {
expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(true);
expect(window.GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toBe(1);
});
test("is removed when the fieldset is collapsed", () => {
// click the button to collapse the fieldset
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(false);
expect(window.GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toBe(2);
});
expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(true);
expect(window.GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toBe(1);
});
test("has its stickiness removed when the fieldset is collapsed", () => {
// click the button to collapse the fieldset
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(false);
expect(window.GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toBe(2);
});
});
describe("when the selection changes", () => {
@@ -387,7 +339,7 @@ describe('Collapsible fieldset', () => {
test("if fields are called 'folders'", () => {
wrapper.dataset.fieldLabel = 'folder';
formGroup.dataset.fieldLabel = 'folder';
checkFirstCheckbox();
@@ -407,7 +359,7 @@ describe('Collapsible fieldset', () => {
test("if fields are called 'team member'", () => {
wrapper.dataset.fieldLabel = 'team member';
formGroup.dataset.fieldLabel = 'team member';
checkFirstCheckbox();
@@ -427,7 +379,7 @@ describe('Collapsible fieldset', () => {
test("if fields are called 'arbitrary thing'", () => {
wrapper.dataset.fieldLabel = 'arbitrary thing';
formGroup.dataset.fieldLabel = 'arbitrary thing';
checkFirstCheckbox();
@@ -451,7 +403,7 @@ describe('Collapsible fieldset', () => {
test("if fields are called 'folder'", () => {
wrapper.dataset.fieldLabel = 'folder';
formGroup.dataset.fieldLabel = 'folder';
checkAllCheckboxes();
@@ -471,7 +423,7 @@ describe('Collapsible fieldset', () => {
test("if fields are called 'team member'", () => {
wrapper.dataset.fieldLabel = 'team member';
formGroup.dataset.fieldLabel = 'team member';
checkAllCheckboxes();
@@ -495,7 +447,7 @@ describe('Collapsible fieldset', () => {
test("if fields are called 'folder'", () => {
wrapper.dataset.fieldLabel = 'folder';
formGroup.dataset.fieldLabel = 'folder';
checkAllCheckboxesButTheLast();
@@ -514,7 +466,7 @@ describe('Collapsible fieldset', () => {
test("if fields are called 'team member'", () => {
wrapper.dataset.fieldLabel = 'team member';
formGroup.dataset.fieldLabel = 'team member';
checkAllCheckboxesButTheLast();