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

Add tests for different selection methods

Browse Source 
Adds tests for selection by keyboard, involving
making a selection with the arrow keys and
confirming it with the space or enter keys.
This commit is contained in:
Tom Byers
2019-07-04 18:38:27 +01:00
parent 6854361375
commit 5186402958
1 changed files with 110 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -209,15 +209,7 @@ describe('RadioSelect', () => {
});
test("clicking the 'Done' button should reset the module to its initial state, showing the category buttons again", () => {
const doneButton = document.querySelector('.radio-select-column:nth-child(2) input[type=button]');
helpers.triggerEvent(doneButton, 'click');
});
describe("clicking on an option should", () => {
describe("clicking on an option with the mouse/trackpad should", () => {
let optionsColumn;
let firstOptionLabel;
@@ -229,7 +221,7 @@ describe('RadioSelect', () => {
const firstOption = optionsColumn.querySelector('input[type=radio]');
firstOptionLabel = firstOption.parentNode.querySelector('label').textContent.trim();
helpers.triggerEvent(firstOption, 'click');
helpers.clickElementWithMouse(firstOption);
});
@@ -254,6 +246,114 @@ describe('RadioSelect', () => {
});
describe("selecting an option with the space key should", () => {
let optionsColumn;
let secondOptionLabel;
beforeEach(() => {
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)');
const options = optionsColumn.querySelectorAll('input[type=radio]');
secondOptionLabel = options[1].parentNode.querySelector('label').textContent.trim();
helpers.moveSelectionToRadio(options[1], { 'direction': 'down' });
helpers.activateRadioWithSpace(options[1]);
});
test("remove all the other options", () => {
// module replaces the column node so this needs querying again
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)');
expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1);
expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(secondOptionLabel);
});
test("add a button for choosing a different time", () => {
const button = document.querySelector('.radio-select-column:nth-child(3) input[type=button]');
expect(button).not.toBeNull();
expect(button.getAttribute('value')).toEqual('Choose a different time');
})
});
describe("selecting an option with the enter key should", () => {
let optionsColumn;
let secondOptionLabel;
beforeEach(() => {
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)');
const options = optionsColumn.querySelectorAll('input[type=radio]');
secondOptionLabel = options[1].parentNode.querySelector('label').textContent.trim();
// simulate events for arrow key press moving selection to 2nd option
// event for down arrow key press
helpers.triggerEvent(options[1], 'keydown', {
eventInit: { which: 40 }
});
// click event fired from option radio being activated
helpers.triggerEvent(options[1], 'click', {
eventInit: { pageX: 0 }
});
// simulate events for enter key press to confirm selection
// event for enter key press
helpers.triggerEvent(options[1], 'keydown', {
eventInit: { which: 13 }
});
});
test("remove all the other options", () => {
// module replaces the column node so this needs querying again
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)');
expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1);
expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(secondOptionLabel);
});
test("add a button for choosing a different time", () => {
const button = document.querySelector('.radio-select-column:nth-child(3) input[type=button]');
expect(button).not.toBeNull();
expect(button.getAttribute('value')).toEqual('Choose a different time');
})
});
test("clicking the 'Done' button should choose whatever time is selected", () => {
let optionsColumn = document.querySelector('.radio-select-column:nth-child(2)');
const secondOption = optionsColumn.querySelectorAll('input[type=radio]')[1];
const secondOptionLabel = document.querySelector('label[for=' + secondOption.getAttribute('id')).textContent.trim();
const doneButton = document.querySelector('.radio-select-column:nth-child(2) input[type=button]');
// select second option
secondOption.checked = true;
secondOption.setAttribute('checked', '');
helpers.triggerEvent(doneButton, 'click');
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)');
expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1);
expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(secondOptionLabel);
});
describe("after selecting an option", () => {
test("clicking the 'Choose a different time' button should reset the module", () => {