Make updateContent persist specified classNames

Wrap the code that updates the HTML with changes
from the server with code that stores and
re-applies specified classes.

This is to allow other JS to add classes which
change the visual state of the HTML without them
being considered by the code that diffs our
in-page HTML against that from the server.

They are called classesToPersist because this
should make the visual state they create persist
between updates.

Includes the addition of tests for updateContent
that cover the addition/deletion of elements so we
can write a test for classNames persisting through
updates. The existing tests only cover updates
that change the content of elements. Just adding
the test for these changes to those would simulate
a scenario that doesn't exist in the app. Writing
extra tests for the kind of updates these changes
act on keeps them in line with the app code.
This commit is contained in:
Tom Byers
2022-02-08 11:33:13 +00:00
parent 73cc034676
commit 3fa2650ffa
2 changed files with 464 additions and 190 deletions

View File

@@ -50,56 +50,426 @@ describe('Update content', () => {
let HTMLString;
let initialHTMLString;
beforeEach(() => {
describe('When updating the contents of DOM nodes', () => {
// 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>
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}" aria-live="polite">
${HTMLString}
</div>`;
document.body.innerHTML = initialHTMLString;
// default the response to match the content inside div[data-module]
responseObj[updateKey] = HTMLString;
});
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 doesnt 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 shouldnt 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 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>`;
<ul class="area-list">
${areas}
</ul>
</div>
</div>`;
};
var getHTMLString = items => {
initialHTMLString = `<div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}" aria-live="polite">
${HTMLString}
</div>`;
var itemsHTMLString = '';
document.body.innerHTML = initialHTMLString;
items.forEach(item => itemsHTMLString += "\n" + getItemHTMLString(item));
// default the response to match the content inside div[data-module]
responseObj[updateKey] = HTMLString;
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}" aria-live="polite">
${HTMLString}
</div>`;
document.body.innerHTML = initialHTMLString;
// make the response have an extra item
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}" aria-live="polite">
${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}" aria-live="polite">
${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}" aria-live="polite">
${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');
// make the response match the initial HTML to emulate a response with no changes
responseObj[updateKey] = HTMLString;
// 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);
});
});
@@ -115,138 +485,4 @@ describe('Update content', () => {
});
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 the right DOM node is updated
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 doesnt 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 shouldnt 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]
]));
})
});
});