Update previewPane JS and JS radios test helpers

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

View File

@@ -4,7 +4,7 @@
$ = 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; }

View File

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

View File

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