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

Merge pull request #3554 from alphagov/convert-single-line-textboxes-to-govuk-frontend

Browse Source 
Convert single line textboxes to govuk frontend
This commit is contained in:
Pea M. Tyczynska
2020-08-18 11:29:44 +01:00
committed by GitHub
parent 8e9e169961 67da2c28bf
commit 9b69d16963
94 changed files with 787 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
tests/javascripts/colourPreview.test.js
View File

@@ -18,14 +18,14 @@ describe('Colour preview', () => {
// set up DOM
document.body.innerHTML = `
<div class="form-group" data-module="colour-preview">
<label class="form-label" for="colour">
<div class="govuk-form-group">
<label class="govuk-form-label" for="colour">
Colour
</label>
<input class="form-control form-control-1-4" id="colour" name="colour" rows="8" type="text" value="">
<input class="govuk-input govuk-input--width-6" id="colour" name="colour" rows="8" type="text" value="" data-module="colour-preview">
</div>`;
field = document.querySelector('.form-group');
field = document.querySelector('.govuk-form-group');
textbox = document.querySelector('input[type=text]');
});

50
tests/javascripts/listEntry.test.js
View File

@@ -49,10 +49,12 @@ describe("List entry", () => {
for (let idx = 0; idx < 10; idx++) {
result += `
<div class="list-entry">
<label for="input-domains-${idx}" class="text-box-number-label">
<span class="visuallyhidden">domain number </span>${idx + 1}.
</label>
<input type="text" name="domains-${idx}" id="input-domains-${idx}" class="form-control form-control-1-1" value="" autocomplete="off">
<div class="govuk-form-group">
<label for="domains-${idx + 1}" class="govuk-label govuk-input--numbered__label">
<span class="govuk-visually-hidden">domain number </span>${idx + 1}.
</label>
<input type="text" name="domains-${idx + 1}" id="domains-${idx + 1}" class="govuk-input govuk-input--numbered govuk-!-width-full" autocomplete="off">
</div>
</div>`;
}
@@ -60,15 +62,14 @@ describe("List entry", () => {
};
document.body.innerHTML =
`<fieldset class="form-group" id="domains">
<legend>
<span class="form-label">
Domain names
<span class="form-hint">
For example cabinet-office.gov.uk
</span>
`<fieldset class="govuk-form-group" aria-describedby="domains-hint">
<legend class="govuk-fieldset__legend">
Domain names
</span>
</legend>
<span id="domains-hint" class="govuk-hint">
For example cabinet-office.gov.uk
</span>
<div class="input-list" data-module="list-entry" data-list-item-name="domain" id="list-entry-domains">
${entries()} }
</div>
@@ -180,6 +181,31 @@ describe("List entry", () => {
});
test("Should copy all unique attributes into the new fields", () => {
name_value_pairs = [];
inputList.querySelectorAll('.list-entry input[type=text]').forEach((field, idx) => {
name_value_pairs.push({
'name': field.getAttribute('name'),
'value': field.getAttribute('value')
});
});
// start module
window.GOVUK.modules.start();
// re-select fields, based on updated DOM
fields = inputList.querySelectorAll('.list-entry input[type=text]').forEach((field, idx) => {
expect(field.getAttribute('name')).toEqual(name_value_pairs[idx].name);
expect(field.getAttribute('value')).toEqual(name_value_pairs[idx].value);
});
});
test("Should copy all shared attributes into the new fields", () => {
inputList.querySelectorAll('.list-entry input[type=text]').forEach((field, idx) => {
@@ -223,7 +249,7 @@ describe("List entry", () => {
triggerEvent(inputList.querySelectorAll('.input-list__button--remove')[0], 'click');
const newNums = Array.from(
inputList.querySelectorAll('.text-box-number-label')
inputList.querySelectorAll('.govuk-input--numbered__label')
)
.map((itemNum, idx) => {
return parseInt(itemNum.lastChild.nodeValue, 10);

12
tests/javascripts/templateFolderForm.test.js
View File

@@ -53,11 +53,11 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
<div id="move_to_new_folder_form">
<fieldset class="js-will-stick-at-bottom-when-scrolling">
<legend class="visuallyhidden">Add to new folder</legend>
<div class="form-group">
<label class="form-label" for="move_to_new_folder_name">
<div class="govuk-form-group">
<label class="govuk-label" for="move_to_new_folder_name">
Folder name
</label>
<input class="form-control form-control-1-1 " id="move_to_new_folder_name" name="move_to_new_folder_name" rows="8" type="text" value="">
<input class="govuk-input govuk-!-width-full" id="move_to_new_folder_name" name="move_to_new_folder_name" type="text">
</div>
<div class="page-footer">
<button type="submit" class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" name="operation" value="move-to-new-folder">Add to new folder</button>
@@ -67,11 +67,11 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
<div id="add_new_folder_form">
<fieldset class="js-will-stick-at-bottom-when-scrolling">
<legend class="visuallyhidden">Add new folder</legend>
<div class="form-group">
<label class="form-label" for="add_new_folder_name">
<div class="govuk-form-group">
<label class="govuk-label" for="add_new_folder_name">
Folder name
</label>
<input class="form-control form-control-1-1 " id="add_new_folder_name" name="add_new_folder_name" rows="8" type="text" value="">
<input class="govuk-input govuk-!-width-full" id="add_new_folder_name" name="add_new_folder_name" type="text">
</div>
<div class="page-footer">
<button type="submit" class="govuk-button page-footer__button" name="operation" value="add-new-folder">Add new folder</button>