darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-04 18:08:24 -04: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() { let focusSelected = function(component) {
setTimeout( $('[type=radio]:checked', component).focus();
() => $('[type=radio]:checked').next('label').blur().trigger('focus').addClass('selected'),
50
);
}; };
Modules.RadioSelect = function() { Modules.RadioSelect = function() {
@@ -96,7 +93,7 @@
), ),
'name': name 'name': name
}); });
focusSelected(); focusSelected(component);
}; };
const trackMouseup = (event) => { const trackMouseup = (event) => {
const parentNode = event.target.parentNode; const parentNode = event.target.parentNode;
@@ -124,7 +121,7 @@
), ),
'name': name 'name': name
}); });
focusSelected(); focusSelected(component);
}) })
.on('mousedown', '.js-option', function(event) { .on('mousedown', '.js-option', function(event) {
@@ -164,13 +161,14 @@
reset(); reset();
} }
focusSelected(); focusSelected(component);
}) })
.on('click', '.js-reset-button', function(event) { .on('click', '.js-reset-button', function(event) {
event.preventDefault(); event.preventDefault();
reset(); reset();
focusSelected(component);
}); });

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

@@ -156,27 +156,41 @@ describe('RadioSelect', () => {
CATEGORIES.forEach((category, idx) => { 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 beforeEach(() => {
originalOptionsForCategory = originalOptionsForAllCategories.filter(option => option.label === category);
// start module // get all the options in the original page for this category
window.GOVUK.modules.start(); 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 clickButtonForCategory(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); 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);
});
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", () => { 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 // select the first option
const firstOption = document.querySelector('.radio-select-column:nth-child(2) input[type=radio]'); 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 // click the 'Choose a different time' button
const resetButton = document.querySelector('.radio-select-column:nth-child(3) input[type=button]'); const resetButton = document.querySelector('.radio-select-column:nth-child(3) input[type=button]');
helpers.triggerEvent(resetButton, 'click'); helpers.triggerEvent(resetButton, 'click');
});
test("reset the module", () => {
categoryButtons = document.querySelectorAll('.radio-select-column:nth-child(2) .js-category-button'); categoryButtons = document.querySelectorAll('.radio-select-column:nth-child(2) .js-category-button');
expect(categoryButtons.length).toEqual(CATEGORIES.length); expect(categoryButtons.length).toEqual(CATEGORIES.length);
}); });
test("focus the default option", () => {
expect(document.activeElement).toBe(document.getElementById('scheduled_for-0'));
});
}); });
}); });