mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 03:13:42 -05:00
3a39d910b3
* First commit * Removed govuk for webpack. Modernized javascript importing. Removed dead js * Fixed tests, a few styling bugs * Fixed some table errors and regenerated backstop ref images * Updated tests for coverage * Changes from carlo suggestions
665 lines
19 KiB
JavaScript
665 lines
19 KiB
JavaScript
const helpers = require('./support/helpers');
|
|
|
|
beforeAll(() => {
|
|
// TODO: remove this when tests for sticky JS are written
|
|
require('../../app/assets/javascripts/stick-to-window-when-scrolling.js');
|
|
|
|
require('../../app/assets/javascripts/collapsibleCheckboxes.js');
|
|
});
|
|
|
|
afterAll(() => {
|
|
require('./support/teardown.js');
|
|
});
|
|
|
|
|
|
describe('Collapsible fieldset', () => {
|
|
|
|
const _checkboxes = (start, end) => {
|
|
let result = '';
|
|
|
|
for (let num = start; num <= end; num++) {
|
|
let id = `folder-permissions-${num}`;
|
|
|
|
result += `<li class="usa-checkbox">
|
|
<input class="usa-checkbox__input" id="${id}" name="folder-permissions" type="checkbox" value="${id}">
|
|
<label class="usa-checkbox__label" for="${id}">
|
|
Folder ${id}
|
|
</label>
|
|
</li>`;
|
|
}
|
|
|
|
return result;
|
|
};
|
|
let wrapper;
|
|
let formGroup;
|
|
let fieldset;
|
|
let checkboxesContainer;
|
|
let checkboxes;
|
|
|
|
beforeEach(() => {
|
|
|
|
// set up DOM
|
|
document.body.innerHTML =
|
|
`<div class="selection-wrapper" data-module="collapsible-checkboxes" data-field-label="folder">
|
|
<div class="usa-form-group">
|
|
<fieldset class="usa-fieldset" id="folder_permissions" aria-describedby="users_with_permission-hint">
|
|
<legend class="usa-fieldset__legend usa-fieldset__legend--s">
|
|
Folders this team member can see
|
|
<span class="usa-hint" id="users_with_permission-hint">
|
|
<div class="selection-summary" role="region" aria-live="polite"></div>
|
|
</span>
|
|
</legend>
|
|
<ul class="usa-checkbox-group">
|
|
${_checkboxes(1, 10)}
|
|
</ul>
|
|
</fieldset>
|
|
</div>
|
|
</div>`;
|
|
|
|
wrapper = document.querySelector('.selection-wrapper');
|
|
formGroup = wrapper.querySelector('.usa-form-group');
|
|
fieldset = formGroup.querySelector('fieldset');
|
|
checkboxesContainer = fieldset.querySelector('.usa-checkbox-group');
|
|
checkboxes = checkboxesContainer.querySelectorAll('input[type=checkbox]');
|
|
|
|
});
|
|
|
|
afterEach(() => {
|
|
|
|
document.body.innerHTML = '';
|
|
|
|
});
|
|
|
|
describe('when started', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
});
|
|
|
|
afterEach(() => {
|
|
|
|
// reset checkboxes to default state
|
|
checkboxes.forEach(el => el.removeAttribute('checked'));
|
|
|
|
});
|
|
|
|
test("adds the right classes to the group and fieldset", () => {
|
|
|
|
expect(formGroup.classList.contains('selection-wrapper')).toBe(true);
|
|
expect(fieldset.classList.contains('selection-content')).toBe(true);
|
|
|
|
});
|
|
|
|
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 and classes to the summary", () => {
|
|
|
|
const summary = formGroup.querySelector('.selection-summary__text');
|
|
|
|
expect(summary).not.toBeNull();
|
|
expect(summary.classList.contains('selection-summary__text--folders')).toBe(true);
|
|
|
|
});
|
|
|
|
test("the legend of the fieldset is visually hidden", () => {
|
|
|
|
const legend = helpers.element(fieldset.querySelector('legend'));
|
|
|
|
expect(legend.hasClass('usa-sr-only')).toBe(true);
|
|
|
|
});
|
|
|
|
test("has a button to expand the fieldset", () => {
|
|
|
|
const button = formGroup.querySelector('.selection-footer__button');
|
|
|
|
expect(button).not.toBeNull();
|
|
expect(button.textContent.trim()).toEqual('Choose folders');
|
|
|
|
});
|
|
|
|
test("has the correct aria attributes on the button", () => {
|
|
|
|
expect(helpers.element(formGroup.querySelector('.selection-footer__button')).hasAttributesSetTo({
|
|
'aria-controls': fieldset.getAttribute('id'),
|
|
'aria-expanded': 'false'
|
|
})).toBe(true);
|
|
|
|
});
|
|
|
|
test("hides the checkboxes", () => {
|
|
|
|
expect(helpers.element(fieldset).is('hidden')).toEqual(true);
|
|
|
|
});
|
|
|
|
test("the hint is removed", () => {
|
|
|
|
expect(document.querySelector('.usa-hint')).toBeNull();
|
|
|
|
});
|
|
|
|
describe("the live region that was inside the hint", () => {
|
|
|
|
test("is moved above the fieldset", () => {
|
|
|
|
expect(fieldset.previousElementSibling.matches('.selection-summary')).toBe(true);
|
|
|
|
});
|
|
|
|
test("has an id matching the aria-describedby on the fieldset", () => {
|
|
|
|
const fieldsetDescribedby = fieldset.getAttribute('aria-describedby');
|
|
expect(fieldset.previousElementSibling.getAttribute('id')).toEqual(fieldsetDescribedby);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
test('has the right summary text when started with no checkboxes selected', () => {
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// default state is for none to be selected
|
|
expect(summaryText.textContent.trim()).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.NotifyModules.start();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
expect(summaryText.textContent.trim()).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.NotifyModules.start();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
expect(summaryText.textContent.trim()).toEqual("All folders");
|
|
|
|
});
|
|
|
|
test("the summary doesn't have a folder icon if fields aren't called 'folder'", () => {
|
|
|
|
wrapper.dataset.fieldLabel = 'team member';
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
expect(summaryText.classList.contains('.selection-summary__text-label')).toBe(false);
|
|
|
|
});
|
|
|
|
describe("when button is clicked while the fieldset is collapsed", () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__button'), '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(formGroup.querySelector('.selection-footer__button').getAttribute('aria-expanded')).toEqual('true');
|
|
|
|
});
|
|
|
|
test("it changes it's text to indicate it's new action", () => {
|
|
|
|
expect(formGroup.querySelector('.selection-footer__button').textContent.trim()).toEqual("Done choosing folders");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe("when button is clicked when the fieldset is expanded", () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
// show the checkboxes
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__button'), 'click');
|
|
|
|
// click the button
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__button'), '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(formGroup.querySelector('.selection-footer__button').getAttribute('aria-expanded')).toEqual('false');
|
|
|
|
});
|
|
|
|
test("it changes it's text to indicate it's new action", () => {
|
|
|
|
expect(formGroup.querySelector('.selection-footer__button').textContent.trim()).toEqual("Choose folders");
|
|
|
|
});
|
|
});
|
|
|
|
describe("the footer (that wraps the button)", () => {
|
|
|
|
describe("is inserted", () => {
|
|
|
|
test("after the fieldset", () => {
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
// show the checkboxes
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__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 = 'usa-form-group usa-form-group--nested';
|
|
nestedCheckboxes.innerHTML = _checkboxes(11, 20);
|
|
checkboxesContainer.querySelector('.usa-checkbox').appendChild(nestedCheckboxes);
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
// show the checkboxes
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__button'), 'click');
|
|
|
|
expect(formGroup.querySelector('.selection-footer').previousElementSibling.nodeName).toBe('FIELDSET');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe("its stickiness", () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
// track calls to sticky JS
|
|
window.NotifyModules.stickAtBottomWhenScrolling = window.NotifyModules.stickAtBottomWhenScrolling || {};
|
|
window.NotifyModules.stickAtBottomWhenScrolling.recalculate = jest.fn(() => {});
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
// show the checkboxes
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__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);
|
|
|
|
});
|
|
|
|
test("is removed when the fieldset is collapsed", () => {
|
|
|
|
// click the button to collapse the fieldset
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__button'), 'click');
|
|
|
|
expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe("check/uncheck all functionality", () => {
|
|
|
|
beforeEach(() => {
|
|
window.NotifyModules.start();
|
|
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__button'), 'click');
|
|
});
|
|
|
|
test("adds a 'Select all' button when checkboxes are shown", () => {
|
|
const toggleButton = document.querySelector('.usa-button--small');
|
|
|
|
expect(toggleButton).not.toBeNull();
|
|
expect(toggleButton.textContent).toEqual('Select all');
|
|
});
|
|
|
|
test("clicking 'Select all' checks all checkboxes", () => {
|
|
const toggleButton = document.querySelector('.usa-button--small');
|
|
|
|
expect(checkboxes[0].checked).toBe(false);
|
|
expect(checkboxes[9].checked).toBe(false);
|
|
|
|
helpers.triggerEvent(toggleButton, 'click');
|
|
|
|
expect(checkboxes[0].checked).toBe(true);
|
|
expect(checkboxes[9].checked).toBe(true);
|
|
});
|
|
|
|
test("button changes to 'Deselect all' when all are checked", () => {
|
|
const toggleButton = document.querySelector('.usa-button--small');
|
|
|
|
helpers.triggerEvent(toggleButton, 'click');
|
|
|
|
expect(toggleButton.textContent).toEqual('Deselect all');
|
|
});
|
|
|
|
test("clicking 'Deselect all' unchecks all checkboxes", () => {
|
|
const toggleButton = document.querySelector('.usa-button--small');
|
|
|
|
helpers.triggerEvent(toggleButton, 'click');
|
|
expect(checkboxes[0].checked).toBe(true);
|
|
|
|
helpers.triggerEvent(toggleButton, 'click');
|
|
|
|
expect(checkboxes[0].checked).toBe(false);
|
|
expect(checkboxes[9].checked).toBe(false);
|
|
});
|
|
|
|
test("button is hidden when fieldset is collapsed", () => {
|
|
const toggleButton = document.querySelector('.usa-button--small');
|
|
const doneButton = formGroup.querySelector('.selection-footer__button');
|
|
|
|
expect(toggleButton.parentElement.style.display).not.toEqual('none');
|
|
|
|
helpers.triggerEvent(doneButton, 'click');
|
|
|
|
expect(toggleButton.parentElement.style.display).toEqual('none');
|
|
});
|
|
|
|
test("clicking 'Select all' does not collapse the fieldset", () => {
|
|
const toggleButton = document.querySelector('.usa-button--small');
|
|
const doneButton = formGroup.querySelector('.selection-footer__button');
|
|
|
|
expect(helpers.element(fieldset).is('hidden')).toBe(false);
|
|
expect(doneButton.getAttribute('aria-expanded')).toEqual('true');
|
|
|
|
helpers.triggerEvent(toggleButton, 'click');
|
|
|
|
expect(helpers.element(fieldset).is('hidden')).toBe(false);
|
|
expect(doneButton.getAttribute('aria-expanded')).toEqual('true');
|
|
expect(doneButton.textContent.trim()).toEqual("Done choosing folders");
|
|
});
|
|
|
|
test("clicking 'Deselect all' does not collapse the fieldset", () => {
|
|
const toggleButton = document.querySelector('.usa-button--small');
|
|
const doneButton = formGroup.querySelector('.selection-footer__button');
|
|
|
|
helpers.triggerEvent(toggleButton, 'click');
|
|
|
|
expect(helpers.element(fieldset).is('hidden')).toBe(false);
|
|
expect(doneButton.getAttribute('aria-expanded')).toEqual('true');
|
|
|
|
helpers.triggerEvent(toggleButton, 'click');
|
|
|
|
expect(helpers.element(fieldset).is('hidden')).toBe(false);
|
|
expect(doneButton.getAttribute('aria-expanded')).toEqual('true');
|
|
expect(doneButton.textContent.trim()).toEqual("Done choosing folders");
|
|
});
|
|
|
|
});
|
|
|
|
describe("toggle button visibility on re-expansion", () => {
|
|
|
|
test("shows toggle button again when fieldset is re-opened", () => {
|
|
window.NotifyModules.start();
|
|
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__button'), 'click');
|
|
const toggleButton = document.querySelector('.usa-button--small');
|
|
expect(toggleButton).not.toBeNull();
|
|
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__button'), 'click');
|
|
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__button'), 'click');
|
|
|
|
const toggleButtonAfter = document.querySelector('.usa-button--small');
|
|
expect(toggleButtonAfter).not.toBeNull();
|
|
expect(toggleButtonAfter.parentElement.style.display).not.toEqual('none');
|
|
});
|
|
|
|
});
|
|
|
|
describe("when the selection changes", () => {
|
|
|
|
const showCheckboxes = () => {
|
|
helpers.triggerEvent(formGroup.querySelector('.selection-footer__button'), '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;
|
|
}
|
|
});
|
|
};
|
|
|
|
describe("from some to none the summary updates to reflect that", () => {
|
|
|
|
test("if fields are called 'folders'", () => {
|
|
|
|
wrapper.dataset.fieldLabel = 'folder';
|
|
|
|
checkFirstCheckbox();
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// click the first checkbox
|
|
helpers.triggerEvent(checkboxes[0], 'click');
|
|
|
|
expect(summaryText.textContent.trim()).toEqual("No folders (only templates outside a folder)");
|
|
|
|
});
|
|
|
|
test("if fields are called 'team member'", () => {
|
|
|
|
wrapper.dataset.fieldLabel = 'team member';
|
|
|
|
checkFirstCheckbox();
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// click the first checkbox
|
|
helpers.triggerEvent(checkboxes[0], 'click');
|
|
|
|
expect(summaryText.textContent.trim()).toEqual("No team members (only you)");
|
|
|
|
});
|
|
|
|
test("if fields are called 'arbitrary thing'", () => {
|
|
|
|
wrapper.dataset.fieldLabel = 'arbitrary thing';
|
|
|
|
checkFirstCheckbox();
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// click the first checkbox
|
|
helpers.triggerEvent(checkboxes[0], 'click');
|
|
|
|
expect(summaryText.textContent.trim()).toEqual("No arbitrary things");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe("from all to some the summary updates to reflect that", () => {
|
|
|
|
test("if fields are called 'folder'", () => {
|
|
|
|
wrapper.dataset.fieldLabel = 'folder';
|
|
|
|
checkAllCheckboxes();
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// click the first checkbox
|
|
helpers.triggerEvent(checkboxes[1], 'click');
|
|
|
|
expect(summaryText.textContent.trim()).toEqual("9 of 10 folders");
|
|
|
|
});
|
|
|
|
test("if fields are called 'team member'", () => {
|
|
|
|
wrapper.dataset.fieldLabel = 'team member';
|
|
|
|
checkAllCheckboxes();
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
// click the first checkbox
|
|
helpers.triggerEvent(checkboxes[1], 'click');
|
|
|
|
expect(summaryText.textContent.trim()).toEqual("9 of 10 team members");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe("from some to all the summary updates to reflect that", () => {
|
|
|
|
test("if fields are called 'folder'", () => {
|
|
|
|
wrapper.dataset.fieldLabel = 'folder';
|
|
|
|
checkAllCheckboxesButTheLast();
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
helpers.triggerEvent(checkboxes[0], 'click');
|
|
|
|
expect(summaryText.textContent.trim()).toEqual("All folders");
|
|
|
|
});
|
|
|
|
test("if fields are called 'team member'", () => {
|
|
|
|
wrapper.dataset.fieldLabel = 'team member';
|
|
|
|
checkAllCheckboxesButTheLast();
|
|
|
|
// start module
|
|
window.NotifyModules.start();
|
|
|
|
showCheckboxes();
|
|
|
|
const summaryText = document.querySelector('.selection-summary__text');
|
|
|
|
helpers.triggerEvent(checkboxes[0], 'click');
|
|
|
|
expect(summaryText.textContent.trim()).toEqual("All team members");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|