mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-04-14 06:11:45 -04:00
42a9a0cf23
Live regions need to be in the original HTML of the page to work. We were generating the summary in JS. This changes the JS to only generate the contents of the summary so changes to its contents are announces by the existing live-region.
444 lines
11 KiB
JavaScript
444 lines
11 KiB
JavaScript
const helpers = require('./support/helpers');
|
|
|
|
beforeAll(() => {
|
|
// set up jQuery
|
|
window.jQuery = require('jquery');
|
|
$ = window.jQuery;
|
|
|
|
// load module code
|
|
require('govuk_frontend_toolkit/javascripts/govuk/modules.js');
|
|
require('../../app/assets/javascripts/collapsibleCheckboxes.js');
|
|
});
|
|
|
|
afterAll(() => {
|
|
window.jQuery = null;
|
|
$ = null;
|
|
|
|
delete window.GOVUK;
|
|
});
|
|
|
|
|
|
describe('Collapsible fieldset', () => {
|
|
|
|
let fieldset;
|
|
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="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>
|
|
</div>
|
|
</fieldset>
|
|
</div>`;
|
|
|
|
formGroup = document.querySelector('.form-group');
|
|
fieldset = formGroup.querySelector('fieldset');
|
|
checkboxesContainer = fieldset.querySelector('.checkboxes-nested');
|
|
checkboxes = checkboxesContainer.querySelectorAll('input[type=checkbox]');
|
|
|
|
});
|
|
|
|
afterEach(() => {
|
|
|
|
document.body.innerHTML = '';
|
|
|
|
});
|
|
|
|
describe('when started', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
});
|
|
|
|
afterEach(() => {
|
|
|
|
// reset checkboxes to default state
|
|
checkboxes.forEach(el => el.removeAttribute('checked'));
|
|
|
|
});
|
|
|
|
test("adds a heading before the selected fieldset", () => {
|
|
|
|
const heading = helpers.element(fieldset).getPreviousSibling(
|
|
el => (el.nodeName === 'h2') && (el.hasClass('heading-small'))
|
|
);
|
|
|
|
expect(heading).not.toBeNull();
|
|
|
|
});
|
|
|
|
test("adds the right content to the summary", () => {
|
|
|
|
const summary = formGroup.querySelector('.selection-summary');
|
|
|
|
expect(summary.querySelector('p')).not.toBeNull();
|
|
expect(summary.querySelector('p .selection-summary__text')).not.toBeNull();
|
|
|
|
});
|
|
|
|
test("the legend of the fieldset is visually hidden", () => {
|
|
|
|
const legend = helpers.element(fieldset.querySelector('legend'));
|
|
|
|
expect(legend.hasClass('visuallyhidden')).toBe(true);
|
|
|
|
});
|
|
|
|
test("has a change button", () => {
|
|
|
|
const changeButton = document.querySelector('.selection-summary .button');
|
|
|
|
expect(changeButton).not.toBeNull();
|
|
expect(changeButton.textContent).toEqual('Change Folders this team member can see');
|
|
|
|
});
|
|
|
|
test("has a 'Done' button", () => {
|
|
|
|
const nextEl = fieldset.querySelector('.button');
|
|
|
|
expect(helpers.element(nextEl).nodeName).toEqual('button');
|
|
|
|
});
|
|
|
|
test("has the correct aria attributes on both buttons", () => {
|
|
|
|
const changeButton = document.querySelector('.selection-summary .button');
|
|
const doneButton = fieldset.querySelector('.button');
|
|
|
|
// check change button
|
|
expect(helpers.element(changeButton).hasAttributesSetTo({
|
|
'aria-controls': fieldset.getAttribute('id'),
|
|
'aria-expanded': 'false'
|
|
})).toBe(true);
|
|
|
|
// check done button
|
|
expect(helpers.element(doneButton).hasAttributesSetTo({
|
|
'aria-controls': fieldset.getAttribute('id'),
|
|
'aria-expanded': 'false'
|
|
})).toBe(true);
|
|
|
|
});
|
|
|
|
test("hides the checkboxes", () => {
|
|
|
|
expect(helpers.element(fieldset).is('hidden')).toEqual(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
test('has the right summary text when started with no checkboxes selected', () => {
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// default state is for none to be selected
|
|
expect(summaryText.textContent).toEqual("No folders (only templates outside a folder)");
|
|
|
|
});
|
|
|
|
test('has the right summary text when started with some checkboxes selected', () => {
|
|
|
|
// select the first 3 checkboxes
|
|
checkboxes.forEach((el, idx) => {
|
|
if ([0,1,2].includes(idx)) { el.setAttribute('checked', ''); }
|
|
});
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
expect(summaryText.textContent).toEqual("3 of 10 folders");
|
|
|
|
});
|
|
|
|
test('has the right summary text when started with all checkboxes selected', () => {
|
|
|
|
// select all the checkboxes
|
|
checkboxes.forEach(el => el.setAttribute('checked', ''));
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
expect(summaryText.textContent).toEqual("All folders");
|
|
|
|
});
|
|
|
|
describe("when 'change' is clicked", () => {
|
|
|
|
let changeButton;
|
|
let doneButton;
|
|
|
|
beforeEach(() => {
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
doneButton = fieldset.querySelector('.button');
|
|
changeButton = document.querySelector('.selection-summary .button');
|
|
|
|
helpers.triggerEvent(changeButton, 'click');
|
|
|
|
});
|
|
|
|
test("it shows the checkboxes", () => {
|
|
|
|
expect(helpers.element(fieldset).is('hidden')).toBe(false);
|
|
|
|
});
|
|
test("it focuses the fieldset", () => {
|
|
|
|
expect(document.activeElement).toBe(fieldset);
|
|
|
|
});
|
|
test("it uses ARIA to mark the checkboxes as expanded", () => {
|
|
|
|
expect(changeButton.getAttribute('aria-expanded')).toEqual('true');
|
|
expect(doneButton.getAttribute('aria-expanded')).toEqual('true');
|
|
|
|
});
|
|
});
|
|
|
|
describe("when 'done' is clicked", () => {
|
|
|
|
let changeButton;
|
|
let doneButton;
|
|
|
|
beforeEach(() => {
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
doneButton = fieldset.querySelector('.button');
|
|
changeButton = document.querySelector('.selection-summary .button');
|
|
|
|
// show the checkboxes
|
|
helpers.triggerEvent(changeButton, 'click');
|
|
|
|
// click the done button
|
|
helpers.triggerEvent(doneButton, 'click');
|
|
|
|
});
|
|
|
|
test("it hides the checkboxes", () => {
|
|
|
|
expect(helpers.element(fieldset).is('hidden')).toBe(true);
|
|
|
|
});
|
|
|
|
test("it focuses the summary text", () => {
|
|
|
|
expect(document.activeElement).toBe(document.querySelector('.selection-summary__text'));
|
|
|
|
});
|
|
|
|
test("it uses ARIA to mark the checkboxes as collapsed", () => {
|
|
|
|
expect(changeButton.getAttribute('aria-expanded')).toEqual('false');
|
|
expect(doneButton.getAttribute('aria-expanded')).toEqual('false');
|
|
|
|
});
|
|
});
|
|
|
|
describe("when the selection changes", () => {
|
|
|
|
const showCheckboxes = () => {
|
|
changeButton = document.querySelector('.selection-summary .button');
|
|
helpers.triggerEvent(changeButton, 'click');
|
|
};
|
|
|
|
const checkFirstCheckbox = () => {
|
|
checkboxes[0].setAttribute('checked', '');
|
|
checkboxes[0].checked = true;
|
|
};
|
|
|
|
const checkAllCheckboxes = () => {
|
|
Array.from(checkboxes).forEach(checkbox => {
|
|
checkbox.setAttribute('checked', '');
|
|
checkbox.checked = true;
|
|
});
|
|
};
|
|
|
|
const checkAllCheckboxesButTheLast = () => {
|
|
Array.from(checkboxes).forEach((checkbox, idx) => {
|
|
if (idx > 0) {
|
|
checkbox.setAttribute('checked', '');
|
|
checkbox.checked = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
let changeButton;
|
|
|
|
describe("from some to none the summary updates to reflect that", () => {
|
|
|
|
test("if fields are called 'folders'", () => {
|
|
|
|
formGroup.dataset.fieldLabel = 'folder';
|
|
|
|
checkFirstCheckbox();
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// click the first checkbox
|
|
helpers.triggerEvent(checkboxes[0], 'click');
|
|
|
|
expect(summaryText.textContent).toEqual("No folders (only templates outside a folder)");
|
|
|
|
});
|
|
|
|
test("if fields are called 'team member'", () => {
|
|
|
|
formGroup.dataset.fieldLabel = 'team member';
|
|
|
|
checkFirstCheckbox();
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// click the first checkbox
|
|
helpers.triggerEvent(checkboxes[0], 'click');
|
|
|
|
expect(summaryText.textContent).toEqual("No team members");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe("from all to some the summary updates to reflect that", () => {
|
|
|
|
test("if fields are called 'folder'", () => {
|
|
|
|
formGroup.dataset.fieldLabel = 'folder';
|
|
|
|
checkAllCheckboxes();
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// click the first checkbox
|
|
helpers.triggerEvent(checkboxes[1], 'click');
|
|
|
|
expect(summaryText.textContent).toEqual("9 of 10 folders");
|
|
|
|
});
|
|
|
|
test("if fields are called 'team member'", () => {
|
|
|
|
formGroup.dataset.fieldLabel = 'team member';
|
|
|
|
checkAllCheckboxes();
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// click the first checkbox
|
|
helpers.triggerEvent(checkboxes[1], 'click');
|
|
|
|
expect(summaryText.textContent).toEqual("9 of 10 team members");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe("from some to all the summary updates to reflect that", () => {
|
|
|
|
test("if fields are called 'folder'", () => {
|
|
|
|
formGroup.dataset.fieldLabel = 'folder';
|
|
|
|
checkAllCheckboxesButTheLast();
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
helpers.triggerEvent(checkboxes[0], 'click');
|
|
|
|
expect(summaryText.textContent).toEqual("All folders");
|
|
|
|
});
|
|
|
|
test("if fields are called 'team member'", () => {
|
|
|
|
formGroup.dataset.fieldLabel = 'team member';
|
|
|
|
checkAllCheckboxesButTheLast();
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
helpers.triggerEvent(checkboxes[0], 'click');
|
|
|
|
expect(summaryText.textContent).toEqual("All team members");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|