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

Update previewPane JS and JS radios test helpers

Browse Source 
The previewPane JS used selectors that targeted
the old form of radios HTML.

The JS tests also contained selectors like this
and fragments of HTML, used for fixtures, modelled
on the old radios HTML.
This commit is contained in:
Tom Byers
2020-12-10 17:00:55 +00:00
parent 4fc6bc10c7
commit 4e47b62aa3
3 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/previewPane.js
View File

@@ -4,7 +4,7 @@
$ = global.jQuery; $ = global.jQuery;
let branding_style = $('.multiple-choice input[name="branding_style"]:checked'); let branding_style = $('.govuk-radios__item input[name="branding_style"]:checked');
if (!branding_style.length) { return; } if (!branding_style.length) { return; }

2
tests/javascripts/previewPane.test.js
View File

@@ -65,7 +65,7 @@ describe('Preview pane', () => {
<div class="govuk-grid-row"> <div class="govuk-grid-row">
<div class="govuk-grid-column-full"> <div class="govuk-grid-column-full">
<div data-module="autofocus"> <div data-module="autofocus">
<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">
Search branding styles by name Search branding styles by name

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

@@ -7,9 +7,9 @@ function getRadios (fields, name) {
const count = idx + 1; const count = idx + 1;
return ` return `
<div class="multiple-choice"> <div class="govuk-radios__item">
<input id="${name}-1" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}> <input class="govuk-radios__input" id="${name}-1" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
<label class="block-label" for="${name}-1"> <label class="govuk-label govuk-radios__label" for="${name}-1">
${field.label} ${field.label}
</label> </label>
</div>`; </div>`;
@@ -19,16 +19,17 @@ function getRadios (fields, name) {
function getRadioGroup (data) { function getRadioGroup (data) {
let radioGroup = document.createElement('div'); let radioGroup = document.createElement('div');
radioGroup.classList.add('govuk-form-group');
data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass)); data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
radioGroup.innerHTML = ` radioGroup.innerHTML = `
<div class="form-group "> <fieldset class="govuk-fieldset" id="${data.name}">
<fieldset id="${data.name}"> <legend class="govuk-fieldset__legend">
<legend class="form-label"> ${data.label}
${data.label} </legend>
</legend> <div class="govuk-radios">
${getRadios(data.fields, data.name)} ${getRadios(data.fields, data.name)}
</fieldset> </div>
</div>`; </fieldset>`;
return radioGroup; return radioGroup;
}; };