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

Test and then fix focus when module state changes

Browse Source 
Includes tests for this.
This commit is contained in:
Tom Byers
2019-07-09 10:02:18 +01:00
parent c11c054323
commit 551f7b91f4
2 changed files with 55 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
tests/javascripts/radioSelect.test.js
View File

@@ -156,27 +156,41 @@ describe('RadioSelect', () => {
CATEGORIES.forEach((category, idx) => {
test(`clicking the button for ${category} should show the options for it, with the right label and value`, () => {
describe(`clicking the button for ${category} should`, () => {
// get all the options in the original page for this category
originalOptionsForCategory = originalOptionsForAllCategories.filter(option => option.label === category);
beforeEach(() => {
// start module
window.GOVUK.modules.start();
// get all the options in the original page for this category
originalOptionsForCategory = originalOptionsForAllCategories.filter(option => option.label === category);
clickButtonForCategory(category);
// start module
window.GOVUK.modules.start();
// check options this reveals against those originally in the page for this category
const options = document.querySelector('.radio-select-column:nth-child(2) .multiple-choice');
clickButtonForCategory(category);
});
test("show the options for it, with the right label and value", () => {
// check options this reveals against those originally in the page for this category
const options = document.querySelector('.radio-select-column:nth-child(2) .multiple-choice');
const optionsThatMatchOriginals = Array.from(options).filter((option, idx) => {
const optionData = getDataFromOption(option);
const originalOption = originalOptionsForCategory[idx];
return optionData.value === originalOption.value && optionData.label === originalOption.label;
});
expect(optionsThatMatchOriginals.length).toEqual(originalOptionsForCategory.length);
const optionsThatMatchOriginals = Array.from(options).filter((option, idx) => {
const optionData = getDataFromOption(option);
const originalOption = originalOptionsForCategory[idx];
return optionData.value === originalOption.value && optionData.label === originalOption.label;
});
expect(optionsThatMatchOriginals.length).toEqual(originalOptionsForCategory.length);
test("keep focus on the default time slot", () => {
expect(document.activeElement).toBe(document.getElementById('scheduled_for-0'));
});
});
@@ -245,6 +259,14 @@ describe('RadioSelect', () => {
})
test("focus the selected option", () => {
selectedOption = document.querySelector('.radio-select-column:nth-child(2) input[checked=checked]');
expect(document.activeElement).toBe(selectedOption);
});
});
describe("selecting an option with the space key should", () => {
@@ -355,25 +377,35 @@ describe('RadioSelect', () => {
});
describe("after selecting an option", () => {
describe("after selecting an option clicking the 'Choose a different time' button should", () => {
test("clicking the 'Choose a different time' button should reset the module", () => {
beforeEach(() => {
// select the first option
const firstOption = document.querySelector('.radio-select-column:nth-child(2) input[type=radio]');
helpers.triggerEvent(firstOption, 'click');
helpers.clickElementWithMouse(firstOption);
// click the 'Choose a different time' button
const resetButton = document.querySelector('.radio-select-column:nth-child(3) input[type=button]');
helpers.triggerEvent(resetButton, 'click');
});
test("reset the module", () => {
categoryButtons = document.querySelectorAll('.radio-select-column:nth-child(2) .js-category-button');
expect(categoryButtons.length).toEqual(CATEGORIES.length);
});
test("focus the default option", () => {
expect(document.activeElement).toBe(document.getElementById('scheduled_for-0'));
});
});
});