mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-13 01:44:08 -04:00
Added more unit tests to increase code coverage
This commit is contained in:
@@ -1,6 +1,11 @@
|
||||
beforeAll(() => {
|
||||
// ErrorBanner module sets window.NotifyModules.ErrorBanner for backward compatibility
|
||||
const originalNotifyModules = window.NotifyModules;
|
||||
delete window.NotifyModules;
|
||||
|
||||
require('../../app/assets/javascripts/errorBanner.js');
|
||||
|
||||
expect(window.NotifyModules).toBeDefined();
|
||||
expect(window.NotifyModules.ErrorBanner).toBeDefined();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
@@ -20,6 +25,13 @@ describe("Error Banner", () => {
|
||||
window.NotifyModules.ErrorBanner.hideBanner();
|
||||
expect(document.querySelector('.banner-dangerous').classList).toContain('display-none')
|
||||
});
|
||||
|
||||
test("Will not error when no banner elements exist", () => {
|
||||
document.body.innerHTML = `<div>No banners here</div>`;
|
||||
expect(() => {
|
||||
window.NotifyModules.ErrorBanner.hideBanner();
|
||||
}).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe("The `showBanner` method", () => {
|
||||
@@ -34,6 +46,13 @@ describe("Error Banner", () => {
|
||||
test("Will show the element", () => {
|
||||
expect(document.querySelector('.banner-dangerous').classList).not.toContain('display-none')
|
||||
});
|
||||
|
||||
test("Will not error when no banner elements exist", () => {
|
||||
document.body.innerHTML = `<div>No banners here</div>`;
|
||||
expect(() => {
|
||||
window.NotifyModules.ErrorBanner.showBanner();
|
||||
}).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
test("Module exports ErrorBanner to window.NotifyModules", () => {
|
||||
|
||||
@@ -184,4 +184,15 @@ describe('announceUploadStatusFromElement', () => {
|
||||
// Still unchanged
|
||||
expect(srRegion.textContent).toBe('Old message');
|
||||
});
|
||||
|
||||
test('does nothing if upload-status-live element does not exist', () => {
|
||||
document.body.innerHTML = `
|
||||
<span id="upload-error" class="usa-sr-only">File upload failed</span>
|
||||
`;
|
||||
|
||||
expect(() => {
|
||||
announceUploadStatusFromElement();
|
||||
jest.advanceTimersByTime(300);
|
||||
}).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -420,4 +420,23 @@ describe("List entry", () => {
|
||||
expect(inputList.innerHTML).toContain('id="test-2"');
|
||||
});
|
||||
});
|
||||
|
||||
describe("when the container element has no id attribute", () => {
|
||||
test("the module should not initialize", () => {
|
||||
document.body.innerHTML = `
|
||||
<div class="input-list" data-module="list-entry" data-list-item-name="domain">
|
||||
<div class="list-entry">
|
||||
<input type="text" name="domains-1" class="usa-input">
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const inputList = document.querySelector('[data-module="list-entry"]');
|
||||
|
||||
expect(() => {
|
||||
window.NotifyModules.start();
|
||||
}).not.toThrow();
|
||||
|
||||
expect(inputList.querySelector('.input-list__button--add')).toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -276,4 +276,133 @@ describe('Live search', () => {
|
||||
|
||||
});
|
||||
|
||||
describe("When items have checked checkboxes", () => {
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
const users = [
|
||||
{
|
||||
"label": "Template editor",
|
||||
"email": "template-editor@nhs.uk",
|
||||
"permissions" : ["Add and edit templates"],
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"label": "Administrator",
|
||||
"email": "admin@nhs.uk",
|
||||
"permissions" : ["Send messages", "Add and edit templates", "Manage settings, team and usage", "API integration"],
|
||||
"checked": false
|
||||
}
|
||||
];
|
||||
|
||||
document.body.innerHTML = `
|
||||
<div class="live-search js-header" data-module="live-search" data-targets=".user-list-item">
|
||||
<div class="form-group" data-module="">
|
||||
<label class="form-label" for="search">
|
||||
${searchLabelText}
|
||||
</label>
|
||||
<input autocomplete="off" class="form-control form-control-1-1 " data-module="" 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>
|
||||
<div class="user-list-item">
|
||||
<input type="checkbox" checked>
|
||||
<span class="live-search-relevant">${users[0].label} (${users[0].email})</span>
|
||||
</div>
|
||||
<div class="user-list-item">
|
||||
<input type="checkbox">
|
||||
<span class="live-search-relevant">${users[1].label} (${users[1].email})</span>
|
||||
</div>
|
||||
</form>`;
|
||||
|
||||
searchTextbox = document.getElementById('search');
|
||||
liveRegion = document.querySelector('.live-search__status');
|
||||
list = document.querySelector('form');
|
||||
|
||||
});
|
||||
|
||||
test("Items with checked checkboxes should always be visible", () => {
|
||||
|
||||
searchTextbox.value = 'Administrator';
|
||||
|
||||
window.NotifyModules.start();
|
||||
|
||||
const listItems = list.querySelectorAll('.user-list-item');
|
||||
const listItemsShowing = Array.from(listItems).filter(item => !item.classList.contains('js-hidden'));
|
||||
|
||||
expect(listItemsShowing.length).toEqual(2);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("When no results message element exists", () => {
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
document.body.innerHTML = `
|
||||
<div class="live-search js-header" data-module="live-search" data-targets=".user-list-item">
|
||||
<div class="form-group" data-module="">
|
||||
<label class="form-label" for="search">
|
||||
${searchLabelText}
|
||||
</label>
|
||||
<input autocomplete="off" class="form-control form-control-1-1 " data-module="" 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 class="js-live-search-no-results js-hidden">No results found</div>
|
||||
</div>
|
||||
<form method="post" autocomplete="off" novalidate>
|
||||
<div class="user-list-item">
|
||||
<span class="live-search-relevant">Test User (test@example.com)</span>
|
||||
</div>
|
||||
</form>`;
|
||||
|
||||
searchTextbox = document.getElementById('search');
|
||||
liveRegion = document.querySelector('.live-search__status');
|
||||
list = document.querySelector('form');
|
||||
|
||||
});
|
||||
|
||||
test("No results message should show when search yields no results", () => {
|
||||
|
||||
searchTextbox.value = 'nomatch';
|
||||
|
||||
window.NotifyModules.start();
|
||||
|
||||
const noResultsMessage = document.querySelector('.js-live-search-no-results');
|
||||
expect(noResultsMessage.classList.contains('js-hidden')).toBe(false);
|
||||
|
||||
});
|
||||
|
||||
test("No results message should hide when search yields results", () => {
|
||||
|
||||
searchTextbox.value = 'nomatch';
|
||||
window.NotifyModules.start();
|
||||
|
||||
let noResultsMessage = document.querySelector('.js-live-search-no-results');
|
||||
expect(noResultsMessage.classList.contains('js-hidden')).toBe(false);
|
||||
|
||||
searchTextbox.value = 'Test';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
expect(noResultsMessage.classList.contains('js-hidden')).toBe(true);
|
||||
|
||||
});
|
||||
|
||||
test("No results message should hide when search is empty", () => {
|
||||
|
||||
searchTextbox.value = 'nomatch';
|
||||
window.NotifyModules.start();
|
||||
|
||||
searchTextbox.value = '';
|
||||
helpers.triggerEvent(searchTextbox, 'input');
|
||||
|
||||
const noResultsMessage = document.querySelector('.js-live-search-no-results');
|
||||
expect(noResultsMessage.classList.contains('js-hidden')).toBe(true);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -159,3 +159,70 @@ describe("Modal trigger buttons", () => {
|
||||
expect(modalWrapper.classList.contains("is-hidden")).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Modal edge cases", () => {
|
||||
test("openModal does nothing if wrapper doesn't exist", () => {
|
||||
expect(() => {
|
||||
openModal("nonExistentModal");
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
test("openModal does nothing if modal element doesn't exist inside wrapper", () => {
|
||||
document.body.innerHTML = `<div id="emptyWrapper"></div>`;
|
||||
expect(() => {
|
||||
openModal("emptyWrapper");
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
test("openModal works when there is no focusable element", () => {
|
||||
document.body.innerHTML = `
|
||||
<div id="noFocusModal">
|
||||
<div class="usa-modal">
|
||||
<p>No focusable elements here</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
expect(() => {
|
||||
openModal("noFocusModal");
|
||||
}).not.toThrow();
|
||||
expect(document.getElementById("noFocusModal").classList.contains("is-hidden")).toBe(false);
|
||||
});
|
||||
|
||||
test("closeModal does nothing if no modal is active", () => {
|
||||
expect(() => {
|
||||
closeModal();
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
test("closeModal handles case where modal element is missing", () => {
|
||||
document.body.innerHTML = `
|
||||
<button data-open-modal="testModal">Open</button>
|
||||
<div id="testModal"></div>
|
||||
`;
|
||||
openModal("testModal");
|
||||
expect(() => {
|
||||
closeModal();
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
test("Modal keydown handler ignores non-Tab keys", () => {
|
||||
document.body.innerHTML = `
|
||||
<div id="keyModal">
|
||||
<div class="usa-modal">
|
||||
<button>Test</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
openModal("keyModal");
|
||||
const modal = document.querySelector(".usa-modal");
|
||||
|
||||
const enterEvent = new KeyboardEvent("keydown", {
|
||||
key: "Enter",
|
||||
bubbles: true
|
||||
});
|
||||
|
||||
expect(() => {
|
||||
modal.dispatchEvent(enterEvent);
|
||||
}).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -65,5 +65,140 @@ describe('Prevent duplicate form submissions', () => {
|
||||
|
||||
});
|
||||
|
||||
test("It should not error when form has no submit button", () => {
|
||||
|
||||
document.body.innerHTML = `
|
||||
<form action="/" method="post">
|
||||
<input type="text" name="test">
|
||||
</form>`;
|
||||
|
||||
form = document.querySelector('form');
|
||||
formEventSpy = helpers.spyOnFormSubmitEventPrevention(jest, form);
|
||||
|
||||
jest.resetModules();
|
||||
require('../../app/assets/javascripts/preventDuplicateFormSubmissions.js');
|
||||
|
||||
expect(() => {
|
||||
helpers.triggerEvent(form, 'submit');
|
||||
}).not.toThrow();
|
||||
|
||||
});
|
||||
|
||||
test("It should disable and add spinner to 'send' button", () => {
|
||||
|
||||
document.body.innerHTML = `
|
||||
<form action="/" method="post">
|
||||
<button class="usa-button" type="submit" name="send">Send</button>
|
||||
</form>`;
|
||||
|
||||
form = document.querySelector('form');
|
||||
button = document.querySelector('button');
|
||||
formEventSpy = helpers.spyOnFormSubmitEventPrevention(jest, form);
|
||||
|
||||
jest.resetModules();
|
||||
require('../../app/assets/javascripts/preventDuplicateFormSubmissions.js');
|
||||
|
||||
helpers.triggerEvent(button, 'click');
|
||||
|
||||
jest.advanceTimersByTime(100);
|
||||
|
||||
expect(button.disabled).toBe(true);
|
||||
expect(button.getAttribute('aria-busy')).toBe('true');
|
||||
expect(button.querySelector('.loading-spinner')).not.toBeNull();
|
||||
|
||||
});
|
||||
|
||||
test("It should disable and add spinner to 'schedule' button", () => {
|
||||
|
||||
document.body.innerHTML = `
|
||||
<form action="/" method="post">
|
||||
<button class="usa-button" type="submit" name="schedule">Schedule</button>
|
||||
</form>`;
|
||||
|
||||
form = document.querySelector('form');
|
||||
button = document.querySelector('button');
|
||||
formEventSpy = helpers.spyOnFormSubmitEventPrevention(jest, form);
|
||||
|
||||
jest.resetModules();
|
||||
require('../../app/assets/javascripts/preventDuplicateFormSubmissions.js');
|
||||
|
||||
helpers.triggerEvent(button, 'click');
|
||||
|
||||
jest.advanceTimersByTime(100);
|
||||
|
||||
expect(button.disabled).toBe(true);
|
||||
expect(button.getAttribute('aria-busy')).toBe('true');
|
||||
expect(button.querySelector('.loading-spinner')).not.toBeNull();
|
||||
|
||||
});
|
||||
|
||||
test("It should disable both send and cancel buttons when send is clicked", () => {
|
||||
|
||||
document.body.innerHTML = `
|
||||
<form action="/" method="post">
|
||||
<button class="usa-button" type="submit" name="send">Send</button>
|
||||
<button class="usa-button" type="submit" name="cancel">Cancel</button>
|
||||
</form>`;
|
||||
|
||||
form = document.querySelector('form');
|
||||
const sendButton = document.querySelector('button[name="send"]');
|
||||
const cancelButton = document.querySelector('button[name="cancel"]');
|
||||
formEventSpy = helpers.spyOnFormSubmitEventPrevention(jest, form);
|
||||
|
||||
jest.resetModules();
|
||||
require('../../app/assets/javascripts/preventDuplicateFormSubmissions.js');
|
||||
|
||||
helpers.triggerEvent(sendButton, 'click');
|
||||
|
||||
jest.advanceTimersByTime(100);
|
||||
|
||||
expect(sendButton.disabled).toBe(true);
|
||||
expect(cancelButton.disabled).toBe(true);
|
||||
|
||||
});
|
||||
|
||||
test("It should not add duplicate spinner if one already exists", () => {
|
||||
|
||||
document.body.innerHTML = `
|
||||
<form action="/" method="post">
|
||||
<button class="usa-button" type="submit" name="send">Send<span class="loading-spinner"></span></button>
|
||||
</form>`;
|
||||
|
||||
form = document.querySelector('form');
|
||||
button = document.querySelector('button');
|
||||
formEventSpy = helpers.spyOnFormSubmitEventPrevention(jest, form);
|
||||
|
||||
jest.resetModules();
|
||||
require('../../app/assets/javascripts/preventDuplicateFormSubmissions.js');
|
||||
|
||||
helpers.triggerEvent(button, 'click');
|
||||
|
||||
jest.advanceTimersByTime(100);
|
||||
|
||||
expect(button.querySelectorAll('.loading-spinner').length).toBe(1);
|
||||
|
||||
});
|
||||
|
||||
test("It should handle button with no name attribute", () => {
|
||||
|
||||
document.body.innerHTML = `
|
||||
<form action="/" method="post">
|
||||
<button class="usa-button" type="submit">Submit</button>
|
||||
</form>`;
|
||||
|
||||
form = document.querySelector('form');
|
||||
button = document.querySelector('button');
|
||||
formEventSpy = helpers.spyOnFormSubmitEventPrevention(jest, form);
|
||||
|
||||
jest.resetModules();
|
||||
require('../../app/assets/javascripts/preventDuplicateFormSubmissions.js');
|
||||
|
||||
expect(() => {
|
||||
helpers.triggerEvent(button, 'click');
|
||||
jest.advanceTimersByTime(1600);
|
||||
}).not.toThrow();
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
@@ -434,6 +434,17 @@ describe('RadioSelect', () => {
|
||||
|
||||
});
|
||||
|
||||
test("clicking the 'Done' button without selecting an option should reset to default state", () => {
|
||||
|
||||
const doneButton = document.querySelector('.radio-select__column:nth-child(2) input[type=button]');
|
||||
|
||||
helpers.triggerEvent(doneButton, 'click');
|
||||
|
||||
const categoryButtons = document.querySelectorAll('.radio-select__column:nth-child(2) .radio-select__button--category');
|
||||
expect(categoryButtons.length).toBeGreaterThan(0);
|
||||
|
||||
});
|
||||
|
||||
describe("after selecting an option clicking the 'Choose a different time' button should", () => {
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -135,4 +135,37 @@ describe('The session timer ', () => {
|
||||
window.NotifyModules.TimeoutPopup.checkTimer();
|
||||
expect(checkTimerMock).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('checkTimer expires and redirects when time runs out', () => {
|
||||
const restore = mockWindowLocation();
|
||||
const sessionTimer = document.getElementById('sessionTimer');
|
||||
sessionTimer.showModal = jest.fn();
|
||||
sessionTimer.close = jest.fn();
|
||||
|
||||
const closeTimerMock = jest.spyOn(sessionTimer, 'close');
|
||||
|
||||
const pastTime = new Date().getTime() - 1000;
|
||||
|
||||
window.NotifyModules.TimeoutPopup.checkTimer(pastTime);
|
||||
|
||||
expect(closeTimerMock).toHaveBeenCalled();
|
||||
|
||||
restore();
|
||||
});
|
||||
|
||||
test('checkTimer updates time display and shows modal when time is remaining', () => {
|
||||
const sessionTimer = document.getElementById('sessionTimer');
|
||||
const timeLeftElement = document.getElementById('timeLeft');
|
||||
sessionTimer.showModal = jest.fn();
|
||||
sessionTimer.close = jest.fn();
|
||||
|
||||
const showModalMock = jest.spyOn(sessionTimer, 'showModal');
|
||||
|
||||
const futureTime = new Date().getTime() + (2 * 60 * 1000);
|
||||
|
||||
window.NotifyModules.TimeoutPopup.checkTimer(futureTime);
|
||||
|
||||
expect(showModalMock).toHaveBeenCalled();
|
||||
expect(timeLeftElement.textContent).toMatch(/\d+m \d+s/);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -179,4 +179,25 @@ describe('Update content', () => {
|
||||
|
||||
});
|
||||
|
||||
test("It should handle fetch errors gracefully", async () => {
|
||||
|
||||
global.fetch.mockImplementationOnce(() =>
|
||||
Promise.resolve({
|
||||
ok: false,
|
||||
status: 500,
|
||||
json: () => Promise.resolve({})
|
||||
})
|
||||
);
|
||||
|
||||
window.NotifyModules.start();
|
||||
|
||||
const textbox = document.getElementById('template_content');
|
||||
helpers.triggerEvent(textbox, 'input');
|
||||
|
||||
jest.runAllTimers();
|
||||
|
||||
expect(document.querySelector('[data-module="update-status"]')).not.toBeNull();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user