darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-04-22 02:00:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update updateContent tests to reflect its use

Browse Source 
The way we're using the updateContent.js code is
slightly different to expected and to the
scenarios in our tests. This changes the
tests to match that use.

The expected behaviour was for updates to a
module's HTML to happen to the HTML inside of the
div[data-module=update-content] element.

So with initial HTML of:

<div data-module="update-content" data-key="one">
  <div class="ajax-block-container">
    Existing content
  </div>
</div>

...should be updated to be:

<div data-module="update-content" data-key="one">
  <div class="ajax-block-container">
    New content
  </div>
</div>

Instead the HTML returned by the AJAX requests
replaced the div[data-module=update-content]
element.

So with initial HTML of:

<div data-module="update-content" ..>
  <div class="ajax-block-container">
    Existing content
  </div>
</div>

...will be updated to be:

<div class="ajax-block-container">
  New content
</div>

This doesn't seem to create any noticable changes
to the visual interface so, I think, went
unnoticed. The assumption I am making, of this
being unintended, is based on the fact that the
div[data-module=update-content] element has an
aria-live attribute, which authors would normally
want to stay in the page when updates happen.

Note: This commit doesn't try and fix the problem,
as the behaviour still largely works and the lack
of aria-live actually seems to be a positive
thing, meaning non-visual users aren't told of
every update but can discover it themselves if
needed.
This commit is contained in:
Tom Byers
2021-09-14 16:57:52 +01:00
parent 87f54d1e88
commit 55287e944d
1 changed files with 44 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,52 +46,58 @@ afterAll(() => {
describe('Update content', () => {
let HTMLString;
let initialHTMLString;
beforeEach(() => {
// store HTML in string to allow use in AJAX responses
HTMLString = `
<div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}" aria-live="polite">
<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 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>
</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>
<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>`;
document.body.innerHTML = HTMLString;
// default the response to match the existing content
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;
});