darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-09 10:54:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

Change internals of classesPersister

Browse Source 
The assumption that the classes you want to
persist will always have parity with the elements
that have those classes, at that point, won't
always be true.

Because of that, this changes the way elements
with those classes are stored, to be in a map
between classes and the elements with them (at
that point).

Also includes an extra test for a scenario where
more than one updating component is in the page
with classes that need to persist through updates.
This commit is contained in:
Tom Byers
2022-02-16 15:56:52 +00:00
parent 41ee340b45
commit 3a86bd1685
2 changed files with 61 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
tests/javascripts/updateContent.test.js
View File

@@ -418,7 +418,7 @@ describe('Update content', () => {
});
test("If other scripts have added classes to the DOM, they should persist through updates", () => {
test("If other scripts have added classes to the DOM, they should persist through updates to a single component", () => {
document.body.innerHTML = getInitialHTMLString(getPartial(partialData));
@@ -451,6 +451,48 @@ describe('Update content', () => {
});
test("If other scripts have added classes to the DOM, they should persist through updates to multiple components", () => {
// Create duplicate components in the page
document.body.innerHTML = getInitialHTMLString(getPartial(partialData)) + "\n" + getInitialHTMLString(getPartial(partialData));
var partialsInPage = document.querySelectorAll('.ajax-block-container');
// Mark classes to persist on the partials (2nd is made up)
partialsInPage[0].setAttribute('data-classes-to-persist', 'js-child-has-focus');
partialsInPage[1].setAttribute('data-classes-to-persist', 'js-2nd-child-has-focus');
// Add examples of those classes on each partial (2nd is made up)
partialsInPage[0].querySelectorAll('.file-list h2')[0].classList.add('js-child-has-focus');
partialsInPage[1].querySelectorAll('.file-list h2')[0].classList.add('js-2nd-child-has-focus');
// Add an item to trigger an update
partialData.push({
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 all responses have an extra item
responseObj[updateKey] = getPartial(partialData);
// start the module
window.GOVUK.modules.start();
jest.advanceTimersByTime(2000);
// re-select in case nodes in partialsInPage have changed
partialsInPage = document.querySelectorAll('.ajax-block-container');
// check the classes are still there
expect(partialsInPage[0].querySelectorAll('.file-list h2')[0].classList.contains('js-child-has-focus')).toBe(true);
expect(partialsInPage[1].querySelectorAll('.file-list h2')[0].classList.contains('js-2nd-child-has-focus')).toBe(true);
});
});
afterEach(() => {