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

Update liveSearch JS tests and test helpers

Browse Source 
Includes a change to make these tests use the
getRadioGroup helper to reduce duplication across
the tests. This also makes a few changes to the
helper so it can produce the HTML required.
This commit is contained in:
Tom Byers
2020-12-15 12:07:28 +00:00
parent d620d9ea08
commit 88e85ea01c
2 changed files with 47 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
tests/javascripts/liveSearch.test.js
View File

@@ -29,51 +29,42 @@ describe('Live search', () => {
searchLabelText = "Search branding styles by name"; searchLabelText = "Search branding styles by name";
function getRadiosHTML (departments) {
let result = '';
departments.forEach((department, idx) => result += `
<div class="multiple-choice">
<input id="${department.id}" name="${department.name}" type="radio" value="${department.id}">
<label class="block-label" for="${department.id}">
${department.label}
</label>
</div>
`);
return result;
};
beforeEach(() => { beforeEach(() => {
const departments = [ const departmentData = {
{ name: 'departments',
'label': 'NHS', hideLegend: true,
'id': 'nhs', fields: [
'name': 'branding' {
}, 'label': 'NHS',
{ 'id': 'nhs',
'label': 'Department for Work and Pensions', 'name': 'branding',
'id': 'dwp', 'value': 'nhs'
'name': 'branding' },
}, {
{ 'label': 'Department for Work and Pensions',
'label': 'Department for Education', 'id': 'dwp',
'id': 'dfe', 'name': 'branding',
'name': 'branding' 'value': 'dwp'
}, },
{ {
'label': 'Home Office', 'label': 'Department for Education',
'id': 'home-office', 'id': 'dfe',
'name': 'branding' 'name': 'branding',
} 'value': 'dfe'
]; },
{
'label': 'Home Office',
'id': 'home-office',
'name': 'branding',
'value': 'home-office'
}
]
};
// set up DOM // set up DOM
document.body.innerHTML = ` document.body.innerHTML = `
<div class="live-search js-header" data-module="live-search" data-targets=".multiple-choice"> <div class="live-search js-header" data-module="live-search" data-targets=".govuk-radios__item">
<div class="form-group"> <div class="form-group">
<label class="form-label" for="search"> <label class="form-label" for="search">
${searchLabelText} ${searchLabelText}
@@ -83,13 +74,15 @@ describe('Live search', () => {
</div> </div>
</div> </div>
<form method="post" autocomplete="off" novalidate> <form method="post" autocomplete="off" novalidate>
${getRadiosHTML(departments)}
</form>`; </form>`;
searchTextbox = document.getElementById('search'); searchTextbox = document.getElementById('search');
liveRegion = document.querySelector('.live-search__status'); liveRegion = document.querySelector('.live-search__status');
list = document.querySelector('form'); list = document.querySelector('form');
// getRadioGroup returns a DOM node so append once DOM is set up
list.appendChild(helpers.getRadioGroup(departmentData));
}); });
describe("When the page loads", () => { describe("When the page loads", () => {
@@ -99,7 +92,7 @@ describe('Live search', () => {
// start the module // start the module
window.GOVUK.modules.start(); window.GOVUK.modules.start();
const listItems = list.querySelectorAll('.multiple-choice'); const listItems = list.querySelectorAll('.govuk-radios__item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none'); const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(listItems.length); expect(listItemsShowing.length).toEqual(listItems.length);
@@ -114,7 +107,7 @@ describe('Live search', () => {
// start the module // start the module
window.GOVUK.modules.start(); window.GOVUK.modules.start();
const listItems = list.querySelectorAll('.multiple-choice'); const listItems = list.querySelectorAll('.govuk-radios__item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none'); const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(2); expect(listItemsShowing.length).toEqual(2);
@@ -130,7 +123,7 @@ describe('Live search', () => {
// start the module // start the module
window.GOVUK.modules.start(); window.GOVUK.modules.start();
const listItems = list.querySelectorAll('.multiple-choice'); const listItems = list.querySelectorAll('.govuk-radios__item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none'); const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(1); expect(listItemsShowing.length).toEqual(1);
@@ -169,7 +162,7 @@ describe('Live search', () => {
searchTextbox.value = ''; searchTextbox.value = '';
helpers.triggerEvent(searchTextbox, 'input'); helpers.triggerEvent(searchTextbox, 'input');
const listItems = list.querySelectorAll('.multiple-choice'); const listItems = list.querySelectorAll('.govuk-radios__item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none'); const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(listItems.length); expect(listItemsShowing.length).toEqual(listItems.length);
@@ -188,7 +181,7 @@ describe('Live search', () => {
searchTextbox.value = 'Home'; searchTextbox.value = 'Home';
helpers.triggerEvent(searchTextbox, 'input'); helpers.triggerEvent(searchTextbox, 'input');
const listItems = list.querySelectorAll('.multiple-choice'); const listItems = list.querySelectorAll('.govuk-radios__item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none'); const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(1); expect(listItemsShowing.length).toEqual(1);
@@ -207,7 +200,7 @@ describe('Live search', () => {
searchTextbox.value = 'Department for'; searchTextbox.value = 'Department for';
helpers.triggerEvent(searchTextbox, 'input'); helpers.triggerEvent(searchTextbox, 'input');
const listItems = list.querySelectorAll('.multiple-choice'); const listItems = list.querySelectorAll('.govuk-radios__item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none'); const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(2); expect(listItemsShowing.length).toEqual(2);

11
tests/javascripts/support/helpers/html.js
View File

@@ -5,11 +5,12 @@ function getRadios (fields, name) {
return fields.map((field, idx) => { return fields.map((field, idx) => {
const count = idx + 1; const count = idx + 1;
const id = field.id || `${name}-${count}`;
return ` return `
<div class="govuk-radios__item"> <div class="govuk-radios__item">
<input class="govuk-radios__input" id="${name}-1" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}> <input class="govuk-radios__input" id="${id}" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
<label class="govuk-label govuk-radios__label" for="${name}-1"> <label class="govuk-label govuk-radios__label" for="${id}">
${field.label} ${field.label}
</label> </label>
</div>`; </div>`;
@@ -20,10 +21,12 @@ function getRadioGroup (data) {
let radioGroup = document.createElement('div'); let radioGroup = document.createElement('div');
radioGroup.classList.add('govuk-form-group'); radioGroup.classList.add('govuk-form-group');
data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass)); if ('cssClasses' in data) {
data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
}
radioGroup.innerHTML = ` radioGroup.innerHTML = `
<fieldset class="govuk-fieldset" id="${data.name}"> <fieldset class="govuk-fieldset" id="${data.name}">
<legend class="govuk-fieldset__legend"> <legend class="govuk-fieldset__legend${data.hideLegend ? " govuk-visually-hidden" : ""}">
${data.label} ${data.label}
</legend> </legend>
<div class="govuk-radios"> <div class="govuk-radios">