mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-09 02:44:10 -04:00
remove email branding
This commit is contained in:
stvnrlly
@@ -25,451 +25,6 @@ describe('Live search', () => {
|
||||
}
|
||||
};
|
||||
|
||||
describe("With a list of radios", () => {
|
||||
|
||||
searchLabelText = "Search branding styles by name";
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
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=".usa-radio">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="search">
|
||||
${searchLabelText}
|
||||
</label>
|
||||
<input autocomplete="off" class="form-control form-control-1-1 " id="search" name="search" rows="8" type="search" value="">
|
||||
<div role="region" aria-live="polite" class="live-search__status usa-sr-only"></div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="post" autocomplete="off" novalidate>
|
||||
</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", () => {
|
||||
|
||||
test("If there is no search term, the results should be unchanged", () => {
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
const listItems = list.querySelectorAll('.usa-radio');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(listItems.length);
|
||||
expect(searchTextbox.hasAttribute('aria-label')).toBe(false);
|
||||
|
||||
});
|
||||
|
||||
test("If there is a single word search term, only the results that match should show", () => {
|
||||
|
||||
searchTextbox.value = 'Department';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
const listItems = list.querySelectorAll('.usa-radio');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(2);
|
||||
expect(searchTextbox.hasAttribute('aria-label')).toBe(true);
|
||||
expect(searchTextbox.getAttribute('aria-label')).toEqual(`${searchLabelText}, ${liveRegionResults(2)}`);
|
||||
|
||||
});
|
||||
|
||||
test("If there is a search term made of several words, only the results that match should show", () => {
|
||||
|
||||
searchTextbox.value = 'Department for Work';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
const listItems = list.querySelectorAll('.usa-radio');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(1);
|
||||
expect(searchTextbox.hasAttribute('aria-label')).toBe(true);
|
||||
expect(searchTextbox.getAttribute('aria-label')).toEqual(`${searchLabelText}, ${liveRegionResults(1)}`);
|
||||
|
||||
});
|
||||
|
||||
test("If an item doesn't match the search term but is selected, it should still show in the results", () => {
|
||||
|
||||
searchTextbox.value = 'Department for Work';
|
||||
|
||||
// mark an item as selected
|
||||
checkedItem = list.querySelector('input[id=nhs]');
|
||||
checkedItem.checked = true;
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
expect(window.getComputedStyle(checkedItem).display).not.toEqual('none');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("When the search text changes", () => {
|
||||
|
||||
test("If there is no search term, the results should be unchanged", () => {
|
||||
|
||||
searchTextbox.value = 'Department';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
// simulate the input of new search text
|
||||
searchTextbox.value = '';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
const listItems = list.querySelectorAll('.usa-radio');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(listItems.length);
|
||||
expect(liveRegion.textContent.trim()).toEqual(liveRegionResults(listItemsShowing.length));
|
||||
|
||||
});
|
||||
|
||||
test("If there is a single word search term, only the results that match should show", () => {
|
||||
|
||||
searchTextbox.value = 'Department';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
// simulate the input of new search text
|
||||
searchTextbox.value = 'Home';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
const listItems = list.querySelectorAll('.usa-radio');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(1);
|
||||
expect(liveRegion.textContent.trim()).toEqual(liveRegionResults(1));
|
||||
|
||||
});
|
||||
|
||||
test("If there is a search term made of several words, only the results that match should show", () => {
|
||||
|
||||
searchTextbox.value = 'Department';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
// simulate the input of new search text
|
||||
searchTextbox.value = 'Department for';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
const listItems = list.querySelectorAll('.usa-radio');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(2);
|
||||
expect(liveRegion.textContent.trim()).toEqual(liveRegionResults(2));
|
||||
|
||||
});
|
||||
|
||||
test("If an item doesn't match the search term but is selected, it should still show in the results", () => {
|
||||
|
||||
searchTextbox.value = 'Department';
|
||||
|
||||
// mark an item as selected
|
||||
checkedItem = list.querySelector('input[id=nhs]');
|
||||
checkedItem.checked = true;
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
// simulate the input of new search text
|
||||
searchTextbox.value = 'Home Office';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
expect(window.getComputedStyle(checkedItem).display).not.toEqual('none');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("With a list of checkboxes", () => {
|
||||
|
||||
searchLabelText = "Search branding styles by name";
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
const templatesAndFolders = [
|
||||
{
|
||||
"label": "Appointments",
|
||||
"type": "folder",
|
||||
"meta": "2 templates"
|
||||
},
|
||||
{
|
||||
"label": "New patient",
|
||||
"type": "template",
|
||||
"meta": "Email template"
|
||||
},
|
||||
{
|
||||
"label": "Prescriptions",
|
||||
"type": "folder",
|
||||
"meta": "1 template, 1 folder"
|
||||
},
|
||||
{
|
||||
"label": "New doctor",
|
||||
"type": "template",
|
||||
"meta": "Email template"
|
||||
}
|
||||
];
|
||||
|
||||
// set up DOM
|
||||
document.body.innerHTML = `
|
||||
<div class="live-search js-header" data-module="live-search" data-targets="#template-list .template-list-item">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="search">
|
||||
${searchLabelText}
|
||||
</label>
|
||||
<input autocomplete="off" class="form-control form-control-1-1 " id="search" name="search" rows="8" type="search" value="">
|
||||
<div role="region" aria-live="polite" class="live-search__status govuk-visually=hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="post" autocomplete="off" novalidate>
|
||||
<nav id="template-list">
|
||||
${helpers.templatesAndFoldersCheckboxes(templatesAndFolders)}
|
||||
</nav>
|
||||
</form>`;
|
||||
|
||||
searchTextbox = document.getElementById('search');
|
||||
liveRegion = document.querySelector('.live-search__status');
|
||||
list = document.querySelector('form');
|
||||
|
||||
});
|
||||
|
||||
describe("When the page loads", () => {
|
||||
|
||||
test("If there is no search term, the results should be unchanged", () => {
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
const listItems = list.querySelectorAll('.template-list-item');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(listItems.length);
|
||||
expect(searchTextbox.hasAttribute('aria-label')).toBe(false);
|
||||
|
||||
});
|
||||
|
||||
test("If there is a single word search term, only the results that match should show", () => {
|
||||
|
||||
searchTextbox.value = 'New';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
const listItems = list.querySelectorAll('.template-list-item');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
// should match 'New patient' and 'New doctor'
|
||||
expect(listItemsShowing.length).toEqual(2);
|
||||
expect(searchTextbox.hasAttribute('aria-label')).toBe(true);
|
||||
expect(searchTextbox.getAttribute('aria-label')).toEqual(`${searchLabelText}, ${liveRegionResults(2)}`);
|
||||
|
||||
});
|
||||
|
||||
test("If there is a search term made of several words, only the results that match should show", () => {
|
||||
|
||||
searchTextbox.value = 'New patient';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
const listItems = list.querySelectorAll('.template-list-item');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(1);
|
||||
expect(searchTextbox.hasAttribute('aria-label')).toBe(true);
|
||||
expect(searchTextbox.getAttribute('aria-label')).toEqual(`${searchLabelText}, ${liveRegionResults(1)}`);
|
||||
|
||||
});
|
||||
|
||||
test("If an item doesn't match the search term but is selected, it should still show in the results", () => {
|
||||
|
||||
searchTextbox.value = 'New patient';
|
||||
|
||||
// mark 'Appointments' item as selected
|
||||
checkedItem = list.querySelector('input[id=templates-or-folder-0]');
|
||||
checkedItem.checked = true;
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
// should show despite not matching
|
||||
expect(window.getComputedStyle(checkedItem).display).not.toEqual('none');
|
||||
|
||||
});
|
||||
|
||||
test("If the items have a block of text to match against, only results that match it should show", () => {
|
||||
|
||||
searchTextbox.value = 'Email template';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
const listItems = list.querySelectorAll('.template-list-item');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
// 2 items contain the "Email template" text
|
||||
// only the text containing the name of the item is matched against (ie 'New patient')
|
||||
expect(listItemsShowing.length).toEqual(0);
|
||||
expect(searchTextbox.getAttribute('aria-label')).toEqual(`${searchLabelText}, ${liveRegionResults(0)}`);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("When the search text changes", () => {
|
||||
|
||||
test("If there is no search term, the results should be unchanged", () => {
|
||||
|
||||
searchTextbox.value = 'Appointments';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
// simulate input of new search text
|
||||
searchTextbox.value = '';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
const listItems = list.querySelectorAll('.template-list-item');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(listItems.length);
|
||||
expect(liveRegion.textContent.trim()).toEqual(liveRegionResults(listItemsShowing.length));
|
||||
|
||||
});
|
||||
|
||||
test("If there is a single word search term, only the results that match should show", () => {
|
||||
|
||||
searchTextbox.value = 'Appointments';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
// simulate input of new search text
|
||||
searchTextbox.value = 'Prescriptions';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
const listItems = list.querySelectorAll('.template-list-item');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(1);
|
||||
expect(liveRegion.textContent.trim()).toEqual(liveRegionResults(1));
|
||||
|
||||
});
|
||||
|
||||
test("If there is a search term made of several words, only the results that match should show", () => {
|
||||
|
||||
searchTextbox.value = 'Appointments';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
// simulate input of new search text
|
||||
searchTextbox.value = 'New doctor';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
const listItems = list.querySelectorAll('.template-list-item');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
expect(listItemsShowing.length).toEqual(1);
|
||||
expect(liveRegion.textContent.trim()).toEqual(liveRegionResults(1));
|
||||
|
||||
});
|
||||
|
||||
test("If an item doesn't match the search term but is selected, it should still show in the results", () => {
|
||||
|
||||
searchTextbox.value = 'Appointments';
|
||||
|
||||
// mark 'Appointments' item as selected
|
||||
checkedItem = list.querySelector('input[id=templates-or-folder-0]');
|
||||
checkedItem.checked = true;
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
// simulate input of new search text
|
||||
searchTextbox.value = 'Prescriptions';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
// should show despite not matching
|
||||
expect(window.getComputedStyle(checkedItem).display).not.toEqual('none');
|
||||
|
||||
});
|
||||
|
||||
test("If the items have a block of text to match against, only results that match it should show", () => {
|
||||
|
||||
searchTextbox.value = 'Appointments';
|
||||
|
||||
// start the module
|
||||
window.GOVUK.modules.start();
|
||||
|
||||
// simulate input of new search text
|
||||
searchTextbox.value = 'Email template';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
const listItems = list.querySelectorAll('.template-list-item');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
|
||||
|
||||
// 2 items contain the "Email template" text
|
||||
// only the text containing the name of the item is matched against (ie 'New patient')
|
||||
expect(listItemsShowing.length).toEqual(0);
|
||||
expect(liveRegion.textContent.trim()).toEqual(liveRegionResults(0));
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
describe("With a list of content items", () => {
|
||||
|
||||
searchLabelText = "Search by name or email address";
|
||||
|
||||
Reference in New Issue
Block a user