darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 03:13:42 -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

14
app/assets/javascripts/radioSelect.js
View File

@@ -57,11 +57,8 @@
`)
};
let focusSelected = function() {
setTimeout(
() => $('[type=radio]:checked').next('label').blur().trigger('focus').addClass('selected'),
50
);
let focusSelected = function(component) {
$('[type=radio]:checked', component).focus();
};
Modules.RadioSelect = function() {
@@ -96,7 +93,7 @@
),
'name': name
});
focusSelected();
focusSelected(component);
};
const trackMouseup = (event) => {
const parentNode = event.target.parentNode;
@@ -124,7 +121,7 @@
),
'name': name
});
focusSelected();
focusSelected(component);
})
.on('mousedown', '.js-option', function(event) {
@@ -164,13 +161,14 @@
reset();
}
focusSelected();
focusSelected(component);
})
.on('click', '.js-reset-button', function(event) {
event.preventDefault();
reset();
focusSelected(component);
});

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'));
});
});
});