darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-03-11 05:42: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";
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(() => {
const departments = [
{
'label': 'NHS',
'id': 'nhs',
'name': 'branding'
},
{
'label': 'Department for Work and Pensions',
'id': 'dwp',
'name': 'branding'
},
{
'label': 'Department for Education',
'id': 'dfe',
'name': 'branding'
},
{
'label': 'Home Office',
'id': 'home-office',
'name': 'branding'
}
];
const departmentData = {
name: 'departments',
hideLegend: true,
fields: [
{
'label': 'NHS',
'id': 'nhs',
'name': 'branding',
'value': 'nhs'
},
{
'label': 'Department for Work and Pensions',
'id': 'dwp',
'name': 'branding',
'value': 'dwp'
},
{
'label': 'Department for Education',
'id': 'dfe',
'name': 'branding',
'value': 'dfe'
},
{
'label': 'Home Office',
'id': 'home-office',
'name': 'branding',
'value': 'home-office'
}
]
};
// set up DOM
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">
<label class="form-label" for="search">
${searchLabelText}
@@ -83,13 +74,15 @@ describe('Live search', () => {
</div>
</div>
<form method="post" autocomplete="off" novalidate>
${getRadiosHTML(departments)}
</form>`;
searchTextbox = document.getElementById('search');
liveRegion = document.querySelector('.live-search__status');
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", () => {
@@ -99,7 +92,7 @@ describe('Live search', () => {
// start the module
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');
expect(listItemsShowing.length).toEqual(listItems.length);
@@ -114,7 +107,7 @@ describe('Live search', () => {
// start the module
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');
expect(listItemsShowing.length).toEqual(2);
@@ -130,7 +123,7 @@ describe('Live search', () => {
// start the module
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');
expect(listItemsShowing.length).toEqual(1);
@@ -169,7 +162,7 @@ describe('Live search', () => {
searchTextbox.value = '';
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');
expect(listItemsShowing.length).toEqual(listItems.length);
@@ -188,7 +181,7 @@ describe('Live search', () => {
searchTextbox.value = 'Home';
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');
expect(listItemsShowing.length).toEqual(1);
@@ -207,7 +200,7 @@ describe('Live search', () => {
searchTextbox.value = 'Department for';
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');
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) => {
const count = idx + 1;
const id = field.id || `${name}-${count}`;
return `
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="${name}-1" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
<label class="govuk-label govuk-radios__label" for="${name}-1">
<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="${id}">
${field.label}
</label>
</div>`;
@@ -20,10 +21,12 @@ function getRadioGroup (data) {
let radioGroup = document.createElement('div');
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 = `
<fieldset class="govuk-fieldset" id="${data.name}">
<legend class="govuk-fieldset__legend">
<legend class="govuk-fieldset__legend${data.hideLegend ? " govuk-visually-hidden" : ""}">
${data.label}
</legend>
<div class="govuk-radios">