mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 03:13:42 -05:00
e310ff3469
To address issues in these comments: - https://github.com/alphagov/notifications-admin/pull/4155#discussion_r804641078 - https://github.com/alphagov/notifications-admin/pull/4155#discussion_r804642005
519 lines
17 KiB
JavaScript
519 lines
17 KiB
JavaScript
const each = require('jest-each').default;
|
||
const jestDateMock = require('jest-date-mock');
|
||
|
||
const helpers = require('./support/helpers.js');
|
||
|
||
const serviceNumber = '6658542f-0cad-491f-bec8-ab8457700ead';
|
||
const resourceURL = `/services/${serviceNumber}/notifications/email.json?status=sending%2Cdelivered%2Cfailed`;
|
||
const updateKey = 'counts';
|
||
|
||
let responseObj = {};
|
||
let jqueryAJAXReturnObj;
|
||
|
||
beforeAll(() => {
|
||
|
||
// ensure all timers go through Jest
|
||
jest.useFakeTimers();
|
||
|
||
// mock the bits of jQuery used
|
||
jest.spyOn(window.$, 'ajax');
|
||
|
||
// set up the object returned from $.ajax so it responds with whatever responseObj is set to
|
||
jqueryAJAXReturnObj = {
|
||
done: callback => {
|
||
// The server takes 1 second to respond
|
||
jestDateMock.advanceBy(1000);
|
||
callback(responseObj);
|
||
return jqueryAJAXReturnObj;
|
||
},
|
||
fail: () => {}
|
||
};
|
||
|
||
$.ajax.mockImplementation(() => jqueryAJAXReturnObj);
|
||
|
||
// RollupJS assigns our bundled module code, including morphdom, to window.GOVUK.
|
||
// morphdom is assigned to its vendor property so we need to copy that here for the updateContent
|
||
// code to pick it up.
|
||
window.GOVUK.vendor = {
|
||
morphdom: require('morphdom')
|
||
};
|
||
require('../../app/assets/javascripts/updateContent.js');
|
||
|
||
});
|
||
|
||
afterAll(() => {
|
||
require('./support/teardown.js');
|
||
});
|
||
|
||
describe('Update content', () => {
|
||
|
||
let HTMLString;
|
||
let initialHTMLString;
|
||
|
||
describe('When updating the contents of DOM nodes', () => {
|
||
|
||
beforeEach(() => {
|
||
|
||
// store HTML in string to allow use in AJAX responses
|
||
HTMLString = `
|
||
<div class="bottom-gutter ajax-block-container">
|
||
<ul role="tablist" class="pill">
|
||
<li aria-selected="true" role="tab">
|
||
<div class="pill-selected-item" tabindex="0">
|
||
<div class="big-number-smaller">
|
||
<div class="big-number-number">0</div>
|
||
</div>
|
||
<div class="pill-label">total</div>
|
||
</div>
|
||
</li>
|
||
<li aria-selected="false" role="tab">
|
||
<a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=sending">
|
||
<div class="big-number-smaller">
|
||
<div class="big-number-number">0</div>
|
||
</div>
|
||
<div class="pill-label">sending</div>
|
||
</a>
|
||
</li>
|
||
<li aria-selected="false" role="tab">
|
||
<a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=delivered">
|
||
<div class="big-number-smaller">
|
||
<div class="big-number-number">0</div>
|
||
</div>
|
||
<div class="pill-label">delivered</div>
|
||
</a>
|
||
</li>
|
||
<li aria-selected="false" role="tab">
|
||
<a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=failed">
|
||
<div class="big-number-smaller">
|
||
<div class="big-number-number">0</div>
|
||
</div>
|
||
<div class="pill-label">failed</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>`;
|
||
|
||
|
||
initialHTMLString = `<div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}">
|
||
${HTMLString}
|
||
</div>`;
|
||
|
||
document.body.innerHTML = initialHTMLString;
|
||
|
||
// default the response to match the content inside div[data-module]
|
||
responseObj[updateKey] = HTMLString;
|
||
|
||
});
|
||
|
||
test("It should replace the original HTML with that of the partial, to match that returned from AJAX responses", () => {
|
||
|
||
// start the module
|
||
window.GOVUK.modules.start();
|
||
|
||
expect(document.querySelector('.ajax-block-container').parentNode.hasAttribute('data-resource')).toBe(false);
|
||
|
||
});
|
||
|
||
test("It should make requests to the URL specified in the data-resource attribute", () => {
|
||
|
||
// start the module
|
||
window.GOVUK.modules.start();
|
||
jest.advanceTimersByTime(2000);
|
||
|
||
expect($.ajax.mock.calls[0][0]).toEqual(resourceURL);
|
||
|
||
});
|
||
|
||
test("If the response contains no changes, the DOM should stay the same", () => {
|
||
|
||
// send the done callback a response with updates included
|
||
responseObj[updateKey] = HTMLString;
|
||
|
||
// start the module
|
||
window.GOVUK.modules.start();
|
||
jest.advanceTimersByTime(2000);
|
||
|
||
// check a sample DOM node is unchanged
|
||
expect(document.querySelectorAll('.big-number-number')[0].textContent.trim()).toEqual("0");
|
||
|
||
});
|
||
|
||
test("If the response contains changes, it should update the DOM with them", () => {
|
||
|
||
// send the done callback a response with updates included
|
||
responseObj[updateKey] = HTMLString.replace(/<div class="big-number-number">0<\/div>{1}/, '<div class="big-number-number">1</div>');
|
||
|
||
// start the module
|
||
window.GOVUK.modules.start();
|
||
jest.advanceTimersByTime(2000);
|
||
|
||
// check the right DOM node is updated
|
||
expect(document.querySelectorAll('.big-number-number')[0].textContent.trim()).toEqual("1");
|
||
|
||
});
|
||
|
||
describe("By default", () => {
|
||
|
||
beforeEach(() => {
|
||
|
||
// start the module
|
||
window.GOVUK.modules.start();
|
||
|
||
});
|
||
|
||
test("It should use the GET HTTP method", () => {
|
||
|
||
jest.advanceTimersByTime(2000);
|
||
expect($.ajax.mock.calls[0][1].method).toEqual('get');
|
||
|
||
});
|
||
|
||
test("It shouldn't send any data as part of the requests", () => {
|
||
|
||
jest.advanceTimersByTime(2000);
|
||
expect($.ajax.mock.calls[0][1].data).toEqual({});
|
||
|
||
});
|
||
|
||
test("It should request updates with a dynamic interval", () => {
|
||
|
||
// First call doesn’t happen in the first 2000ms
|
||
jest.advanceTimersByTime(1999);
|
||
expect($.ajax).toHaveBeenCalledTimes(0);
|
||
|
||
// But it happens after 2000ms by default
|
||
jest.advanceTimersByTime(1);
|
||
expect($.ajax).toHaveBeenCalledTimes(1);
|
||
|
||
// It took the server 1000ms to respond to the first call so we
|
||
// will back off – the next call shouldn’t happen in the next 6904ms
|
||
jest.advanceTimersByTime(6904);
|
||
expect($.ajax).toHaveBeenCalledTimes(1);
|
||
|
||
// But it should happen after 6905ms
|
||
jest.advanceTimersByTime(1);
|
||
expect($.ajax).toHaveBeenCalledTimes(2);
|
||
|
||
});
|
||
|
||
each([
|
||
[1000, 0],
|
||
[1500, 100],
|
||
[4590, 500],
|
||
[6905, 1000],
|
||
[24000, 10000],
|
||
]).test('It calculates a delay of %dms if the API responds in %dms', (waitTime, responseTime) => {
|
||
expect(
|
||
window.GOVUK.Modules.UpdateContent.calculateBackoff(responseTime)
|
||
).toBe(
|
||
waitTime
|
||
);
|
||
});
|
||
|
||
});
|
||
|
||
describe("If a form is used as a source for data, referenced in the data-form attribute", () => {
|
||
|
||
beforeEach(() => {
|
||
|
||
document.body.innerHTML += `
|
||
<form method="post" id="service">
|
||
<input type="hidden" name="serviceName" value="Buckhurst surgery" />
|
||
<input type="hidden" name="serviceNumber" value="${serviceNumber}" />
|
||
</form>`;
|
||
|
||
document.querySelector('[data-module=update-content]').setAttribute('data-form', 'service');
|
||
|
||
// start the module
|
||
window.GOVUK.modules.start();
|
||
|
||
});
|
||
|
||
test("requests should use the same HTTP method as the form", () => {
|
||
|
||
jest.advanceTimersByTime(2000);
|
||
expect($.ajax.mock.calls[0][1].method).toEqual('post');
|
||
|
||
})
|
||
|
||
test("requests should use the data from the form", () => {
|
||
|
||
jest.advanceTimersByTime(2000);
|
||
expect($.ajax.mock.calls[0][1].data).toEqual(helpers.getFormDataFromPairs([
|
||
['serviceName', 'Buckhurst surgery'],
|
||
['serviceNumber', serviceNumber]
|
||
]));
|
||
|
||
})
|
||
|
||
});
|
||
|
||
});
|
||
|
||
describe("When adding or removing DOM nodes", () => {
|
||
var getItemHTMLString = content => {
|
||
var areas = '';
|
||
|
||
content.areas.forEach(area =>
|
||
areas += "\n" + `<li class="area-list-item area-list-item--unremoveable area-list-item--smaller">${area}</li>`
|
||
);
|
||
|
||
return `
|
||
<div class="keyline-block">
|
||
<div class="file-list govuk-!-margin-bottom-2">
|
||
<h2>
|
||
<a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="/services/7597847f-ad8e-4600-8faf-c42a647d8dee/current-alerts/b9e53cda-54f9-47bc-9fb2-b78a11eda6a9">${content.title}</a>
|
||
</h2>
|
||
<div class="govuk-grid-row">
|
||
<div class="govuk-grid-column-one-half">
|
||
<span class="file-list-hint-large govuk-!-margin-bottom-2">
|
||
${content.hint}
|
||
</span>
|
||
</div>
|
||
<div class="govuk-grid-column-one-half file-list-status">
|
||
<p class="govuk-body govuk-!-margin-bottom-0 govuk-hint">
|
||
${content.status}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<ul class="area-list">
|
||
${areas}
|
||
</ul>
|
||
</div>
|
||
</div>`;
|
||
};
|
||
|
||
var getHTMLString = items => {
|
||
|
||
var itemsHTMLString = '';
|
||
|
||
items.forEach(item => itemsHTMLString += "\n" + getItemHTMLString(item));
|
||
|
||
return `<div class="ajax-block-container">
|
||
${itemsHTMLString};
|
||
<div class="keyline-block"></div>
|
||
</div>`;
|
||
|
||
};
|
||
|
||
test("If the response contains no changes, the DOM should stay the same", () => {
|
||
|
||
// store HTML in string to allow use in AJAX responses
|
||
HTMLString = getHTMLString([
|
||
{
|
||
title: "Gas leak",
|
||
hint: "There's a gas leak in the local area. Residents should vacate until further notice.",
|
||
status: "Waiting for approval",
|
||
areas: [
|
||
"Santa Claus Village, Rovaniemi B",
|
||
"Santa Claus Village, Rovaniemi C"
|
||
]
|
||
}
|
||
]);
|
||
|
||
initialHTMLString = `<div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}">
|
||
${HTMLString}
|
||
</div>`;
|
||
|
||
document.body.innerHTML = initialHTMLString;
|
||
|
||
// make a response with no changes
|
||
responseObj[updateKey] = HTMLString;
|
||
|
||
// start the module
|
||
window.GOVUK.modules.start();
|
||
jest.advanceTimersByTime(2000);
|
||
|
||
// check it has the same number of items
|
||
expect(document.querySelectorAll('.file-list').length).toEqual(1);
|
||
expect(document.querySelectorAll('.file-list h2 a')[0].textContent.trim()).toEqual("Gas leak");
|
||
|
||
});
|
||
|
||
test("If the response adds a node, the DOM should contain that node", () => {
|
||
|
||
// store HTML in string to allow use in AJAX responses
|
||
HTMLString = getHTMLString([
|
||
{
|
||
title: "Gas leak",
|
||
hint: "There's a gas leak in the local area. Residents should vacate until further notice.",
|
||
status: "Waiting for approval",
|
||
areas: [
|
||
"Santa Claus Village, Rovaniemi B",
|
||
"Santa Claus Village, Rovaniemi C"
|
||
]
|
||
}
|
||
]);
|
||
|
||
initialHTMLString = `<div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}">
|
||
${HTMLString}
|
||
</div>`;
|
||
|
||
document.body.innerHTML = initialHTMLString;
|
||
|
||
var updatedHTMLString = getHTMLString([
|
||
{
|
||
title: "Gas leak",
|
||
hint: "There's a gas leak in the local area. Residents should vacate until further notice.",
|
||
status: "Waiting for approval",
|
||
areas: [
|
||
"Santa Claus Village, Rovaniemi B",
|
||
"Santa Claus Village, Rovaniemi C"
|
||
]
|
||
},
|
||
{
|
||
title: "Reservoir flooding template",
|
||
hint: "The local reservoir has flooded. All people within 5 miles should move to a safer location.",
|
||
status: "Waiting for approval",
|
||
areas: [
|
||
"Santa Claus Village, Rovaniemi A",
|
||
"Santa Claus Village, Rovaniemi D"
|
||
]
|
||
}
|
||
]);
|
||
|
||
// make the response have an extra item
|
||
responseObj[updateKey] = updatedHTMLString;
|
||
|
||
// start the module
|
||
window.GOVUK.modules.start();
|
||
jest.advanceTimersByTime(2000);
|
||
|
||
// check the node has been added
|
||
expect(document.querySelectorAll('.file-list').length).toEqual(2);
|
||
expect(document.querySelectorAll('.file-list h2 a')[0].textContent.trim()).toEqual("Gas leak");
|
||
expect(document.querySelectorAll('.file-list h2 a')[1].textContent.trim()).toEqual("Reservoir flooding template");
|
||
|
||
});
|
||
|
||
test("If the response removes a node, the DOM should not contain that node", () => {
|
||
|
||
// store HTML in string to allow use in AJAX responses
|
||
HTMLString = getHTMLString([
|
||
{
|
||
title: "Gas leak",
|
||
hint: "There's a gas leak in the local area. Residents should vacate until further notice.",
|
||
status: "Waiting for approval",
|
||
areas: [
|
||
"Santa Claus Village, Rovaniemi B",
|
||
"Santa Claus Village, Rovaniemi C"
|
||
]
|
||
},
|
||
{
|
||
title: "Reservoir flooding template",
|
||
hint: "The local reservoir has flooded. All people within 5 miles should move to a safer location.",
|
||
status: "Waiting for approval",
|
||
areas: [
|
||
"Santa Claus Village, Rovaniemi A",
|
||
"Santa Claus Village, Rovaniemi D"
|
||
]
|
||
}
|
||
]);
|
||
|
||
initialHTMLString = `<div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}">
|
||
${HTMLString}
|
||
</div>`;
|
||
|
||
document.body.innerHTML = initialHTMLString;
|
||
|
||
var updatedHTMLString = getHTMLString([
|
||
{
|
||
title: "Gas leak",
|
||
hint: "There's a gas leak in the local area. Residents should vacate until further notice.",
|
||
status: "Waiting for approval",
|
||
areas: [
|
||
"Santa Claus Village, Rovaniemi B",
|
||
"Santa Claus Village, Rovaniemi C"
|
||
]
|
||
}
|
||
]);
|
||
|
||
// default the response to match the content inside div[data-module]
|
||
responseObj[updateKey] = updatedHTMLString;
|
||
|
||
// start the module
|
||
window.GOVUK.modules.start();
|
||
jest.advanceTimersByTime(2000);
|
||
|
||
// check the node has been removed
|
||
expect(document.querySelectorAll('.file-list').length).toEqual(1);
|
||
expect(document.querySelectorAll('.file-list h2 a')[0].textContent.trim()).toEqual("Gas leak");
|
||
|
||
});
|
||
|
||
test("If other scripts have added classes to the DOM, they should persist through updates", () => {
|
||
|
||
// store HTML in string to allow use in AJAX responses
|
||
HTMLString = getHTMLString([
|
||
{
|
||
title: "Gas leak",
|
||
hint: "There's a gas leak in the local area. Residents should vacate until further notice.",
|
||
status: "Waiting for approval",
|
||
areas: [
|
||
"Santa Claus Village, Rovaniemi B",
|
||
"Santa Claus Village, Rovaniemi C"
|
||
]
|
||
}
|
||
]);
|
||
|
||
initialHTMLString = `<div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}">
|
||
${HTMLString}
|
||
</div>`;
|
||
|
||
document.body.innerHTML = initialHTMLString;
|
||
|
||
// mark classes to persist on the partial
|
||
document.querySelector('.ajax-block-container').setAttribute('data-classes-to-persist', 'js-child-has-focus');
|
||
|
||
// Add class to indicate focus state of link on parent heading
|
||
document.querySelectorAll('.file-list h2')[0].classList.add('js-child-has-focus');
|
||
|
||
var updatedHTMLString = getHTMLString([
|
||
{
|
||
title: "Gas leak",
|
||
hint: "There's a gas leak in the local area. Residents should vacate until further notice.",
|
||
status: "Waiting for approval",
|
||
areas: [
|
||
"Santa Claus Village, Rovaniemi B",
|
||
"Santa Claus Village, Rovaniemi C"
|
||
]
|
||
},
|
||
{
|
||
title: "Reservoir flooding template",
|
||
hint: "The local reservoir has flooded. All people within 5 miles should move to a safer location.",
|
||
status: "Waiting for approval",
|
||
areas: [
|
||
"Santa Claus Village, Rovaniemi A",
|
||
"Santa Claus Village, Rovaniemi D"
|
||
]
|
||
}
|
||
]);
|
||
|
||
// make the response have an extra item
|
||
responseObj[updateKey] = updatedHTMLString;
|
||
|
||
// start the module
|
||
window.GOVUK.modules.start();
|
||
jest.advanceTimersByTime(2000);
|
||
|
||
// check the class is still there
|
||
expect(document.querySelectorAll('.file-list h2')[0].classList.contains('js-child-has-focus')).toBe(true);
|
||
|
||
});
|
||
|
||
});
|
||
|
||
afterEach(() => {
|
||
|
||
document.body.innerHTML = '';
|
||
|
||
// tidy up record of mocked AJAX calls
|
||
$.ajax.mockClear();
|
||
|
||
// ensure any timers set by continually starting the module are cleared
|
||
jest.clearAllTimers();
|
||
|
||
});
|
||
|
||
});
|