From 41ee340b45ac8f1c6385c8d227d4570984b211b5 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 16 Feb 2022 11:25:50 +0000 Subject: [PATCH] Rewrite updateContent tests --- tests/javascripts/updateContent.test.js | 448 +++++++++++------------- 1 file changed, 199 insertions(+), 249 deletions(-) diff --git a/tests/javascripts/updateContent.test.js b/tests/javascripts/updateContent.test.js index d33c730b5..7db5ebacc 100644 --- a/tests/javascripts/updateContent.test.js +++ b/tests/javascripts/updateContent.test.js @@ -47,108 +47,20 @@ afterAll(() => { describe('Update content', () => { - let HTMLString; - let initialHTMLString; + const getInitialHTMLString = partial => ` +
+ ${partial} +
`; - describe('When updating the contents of DOM nodes', () => { + describe("All variations", () => { beforeEach(() => { - // store HTML in string to allow use in AJAX responses - HTMLString = ` -
- -
`; - - - initialHTMLString = `
- ${HTMLString} -
`; - - document.body.innerHTML = initialHTMLString; + // Intentionally basic example because we're not testing changes to the partial + document.body.innerHTML = getInitialHTMLString(`

Sending

`); // 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(/
0<\/div>{1}/, '
1
'); - - // 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"); + responseObj[updateKey] = `

Sending

`; }); @@ -216,12 +128,14 @@ describe('Update content', () => { beforeEach(() => { + // Add a form to the page document.body.innerHTML += `
`; + // Link the component to the form document.querySelector('[data-module=update-content]').setAttribute('data-form', 'service'); // start the module @@ -250,40 +164,156 @@ describe('Update content', () => { }); - describe("When adding or removing DOM nodes", () => { - var getItemHTMLString = content => { - var areas = ''; + describe('When updating the contents of DOM nodes', () => { - content.areas.forEach(area => - areas += "\n" + `
  • ${area}
    • ` - ); + let partialData; + + const getPartial = items => { + let pillsHTML = ''; + + items.forEach(item => { + pillsHTML += ` +
  • +
    +
    +
    ${item.count}
    +
    +
    ${item.label}
    +
    +
    • `; + }); return ` -
    -
    -

    - ${content.title} -

    -
    -
    - - ${content.hint} - -
    -
    -

    - ${content.status} -

    -
    -
    -
      - ${areas} -
    -
    +
    +
      + ${pillsHTML} +
    `; }; - var getHTMLString = items => { + beforeEach(() => { + + partialData = [ + { + count: 0, + label: 'total', + selected: true + }, + { + count: 0, + label: 'sending', + selected: false + }, + { + count: 0, + label: 'delivered', + selected: false + }, + { + count: 0, + label: 'failed', + selected: false + } + ]; + + document.body.innerHTML = getInitialHTMLString(getPartial(partialData)); + + }); + + test("It should replace the original HTML with that of the partial, to match that returned from AJAX responses", () => { + + // default the response to match the content inside div[data-module] + responseObj[updateKey] = getPartial(partialData); + + // 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", () => { + + // default the response to match the content inside div[data-module] + responseObj[updateKey] = getPartial(partialData); + + // 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] = getPartial(partialData); + + // 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", () => { + + partialData[0].count = 1; + + // send the done callback a response with updates included + responseObj[updateKey] = getPartial(partialData); + + // 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("When adding or removing DOM nodes", () => { + + let partialData; + + const getPartial = items => { + + const getItemHTMLString = content => { + var areas = ''; + + content.areas.forEach(area => + areas += "\n" + `
  • ${area}
    • ` + ); + + return ` +
    +
    +

    + ${content.title} +

    +
    +
    + + ${content.hint} + +
    +
    +

    + ${content.status} +

    +
    +
    +
      + ${areas} +
    +
    +
    `; + }; var itemsHTMLString = ''; @@ -296,10 +326,9 @@ describe('Update content', () => { }; - test("If the response contains no changes, the DOM should stay the same", () => { + beforeEach(() => { - // store HTML in string to allow use in AJAX responses - HTMLString = getHTMLString([ + partialData = [ { title: "Gas leak", hint: "There's a gas leak in the local area. Residents should vacate until further notice.", @@ -309,16 +338,16 @@ describe('Update content', () => { "Santa Claus Village, Rovaniemi C" ] } - ]); + ]; - initialHTMLString = `
    - ${HTMLString} -
    `; + }); - document.body.innerHTML = initialHTMLString; + test("If the response contains no changes, the DOM should stay the same", () => { + + document.body.innerHTML = getInitialHTMLString(getPartial(partialData)); // make a response with no changes - responseObj[updateKey] = HTMLString; + responseObj[updateKey] = getPartial(partialData); // start the module window.GOVUK.modules.start(); @@ -332,48 +361,20 @@ describe('Update content', () => { 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" - ] - } - ]); + document.body.innerHTML = getInitialHTMLString(getPartial(partialData)); - initialHTMLString = `
    - ${HTMLString} -
    `; - - 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" - ] - } - ]); + 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 the response have an extra item - responseObj[updateKey] = updatedHTMLString; + responseObj[updateKey] = getPartial(partialData); // start the module window.GOVUK.modules.start(); @@ -388,48 +389,24 @@ describe('Update content', () => { 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" - ] - } - ]); + // add another item so we start with 2 + 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" + ] + }); - initialHTMLString = `
    - ${HTMLString} -
    `; + document.body.innerHTML = getInitialHTMLString(getPartial(partialData)); - 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" - ] - } - ]); + // remove the last item + partialData.pop(); // default the response to match the content inside div[data-module] - responseObj[updateKey] = updatedHTMLString; + responseObj[updateKey] = getPartial(partialData); // start the module window.GOVUK.modules.start(); @@ -443,24 +420,7 @@ describe('Update content', () => { 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 = `
    - ${HTMLString} -
    `; - - document.body.innerHTML = initialHTMLString; + document.body.innerHTML = getInitialHTMLString(getPartial(partialData)); // mark classes to persist on the partial document.querySelector('.ajax-block-container').setAttribute('data-classes-to-persist', 'js-child-has-focus'); @@ -468,29 +428,19 @@ describe('Update content', () => { // 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" - ] - } - ]); + // 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 the response have an extra item - responseObj[updateKey] = updatedHTMLString; + responseObj[updateKey] = getPartial(partialData); // start the module window.GOVUK.modules.start();