diff --git a/README.md b/README.md index 2907e75..720ee56 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ import userFeedbackForm from '@nhsuk/user-feedback-form'; userFeedbackForm({ cssSelector: "#my-div-id", formEndpoint: "https://example.com/my-api-endpoint/", + enableTextResponse: false, }); ``` @@ -43,6 +44,7 @@ The latest javascript file can be found in github releases https://github.com/nh #### Attributes `data-form-endpoint` - (required) An HTTP data store endpoint to POST data to. Include the trailing slash +`data-enable-text-response` - (optional) Include to enable text responses on the feedback form. ## API diff --git a/src/confirmation/index.js b/src/confirmation/index.js index ab13ab1..edc5f5c 100644 --- a/src/confirmation/index.js +++ b/src/confirmation/index.js @@ -2,10 +2,23 @@ import Screen from '../screen'; import html from './template.html'; export default class ConfirmationScreen extends Screen { + getEnableTextResponse() { + return this.app.enableTextResponse; + } + render() { - this.updateHtml(html); + let message; + + /* If data-enable-text-response attribute is "false" show a blank label */ + if (this.getEnableTextResponse() === false) { + message = ''; + } else { + message = '

We do not check feedback every day and cannot respond to comments.

'; + } + + const optionalHtml = html.replace('{{ optionalTextResponseMessage }}', message); - const node = this.updateHtml(html); + const node = this.updateHtml(optionalHtml); const header = node.querySelector('.nhsuk-user-feedback-form-header'); header.setAttribute('tabIndex', '-1'); header.focus(); diff --git a/src/confirmation/template.html b/src/confirmation/template.html index 4194a19..da1340b 100644 --- a/src/confirmation/template.html +++ b/src/confirmation/template.html @@ -1,5 +1,5 @@

Thank you for your feedback.

-

We do not check feedback every day and cannot respond to comments.

+ {{ optionalTextResponseMessage }}

Find out how to contact the NHS if you need to speak to someone.

diff --git a/src/index.js b/src/index.js index 3f3b807..afa6a25 100644 --- a/src/index.js +++ b/src/index.js @@ -8,11 +8,16 @@ import PostData from './post-data'; import './nhsuk-feedback-form.css'; +function getEnableTextResponse(container) { + return container.hasAttribute('data-enable-text-response'); +} + /** * Get settings from data attributes on the container div * @returns {Object} settings */ const getSettingsFromContainer = (container) => ({ + enableTextResponse: getEnableTextResponse(container), formEndpoint: container.getAttribute('data-form-endpoint'), }); @@ -34,12 +39,19 @@ class App { // The initial question's yes/no response. true=yes, false=no, null=unanswered. this.isSatisfiedResponse = null; + + this.enableTextResponse = this.settings.enableTextResponse; } onYes() { this.isSatisfiedResponse = true; this.postData.postYes(); - new TextCommentsScreen(this).render(); + + if (this.enableTextResponse === false) { + new ConfirmationScreen(this).render(); + } else { + new TextCommentsScreen(this).render(); + } onFeedbackEvent(this.container, true); } @@ -47,7 +59,12 @@ class App { onNo() { this.isSatisfiedResponse = false; this.postData.postNo(); - new TextCommentsScreen(this).render(); + + if (this.enableTextResponse === false) { + new ConfirmationScreen(this).render(); + } else { + new TextCommentsScreen(this).render(); + } onFeedbackEvent(this.container, false); } @@ -67,6 +84,7 @@ class App { * @param {Object} settings * @param {string} settings.formEndpoint - API endpoint to post data to * @param {string} settings.cssSelector - CSS selector to get the container div + * @param {boolean} settings.enableTextResponse - Disables text responses from the form */ export default function (settings = {}) { const settingsWithDefaults = { diff --git a/tests/example/enabled-text-response.html b/tests/example/enabled-text-response.html new file mode 100644 index 0000000..218deff --- /dev/null +++ b/tests/example/enabled-text-response.html @@ -0,0 +1,29 @@ + + + + + + + + + + User feedback form test page + + + + + + +
+
+

User feedback form:

+
+ + +
+
+ + diff --git a/tests/integration/answer-no.test.js b/tests/integration/answer-no.test.js index fd69546..7986548 100644 --- a/tests/integration/answer-no.test.js +++ b/tests/integration/answer-no.test.js @@ -10,12 +10,14 @@ describe('Can answer no', () => { expect(noButton).not.toBe(null); }); - it('should proceed to next question', async () => { + it('should proceed to confirmation page', async () => { const yesButton = await page.$('.nhsuk-user-feedback-form--no'); await yesButton.click(); - const labelText = await page.$eval('label', (element) => element.innerText); - expect(labelText).toBe('What were you looking for? (optional)'); + const title = await page.$('h2'); + expect(title).not.toBe(null); + const text = await page.evaluate((element) => element.innerText, title); + expect(text).toBe('Thank you for your feedback.'); }); it('should register a negative vote', async (done) => { diff --git a/tests/integration/answer-yes.test.js b/tests/integration/answer-yes.test.js index 77ee14d..6982f91 100644 --- a/tests/integration/answer-yes.test.js +++ b/tests/integration/answer-yes.test.js @@ -14,8 +14,10 @@ describe('Can answer yes', () => { const yesButton = await page.$('.nhsuk-user-feedback-form--yes'); await yesButton.click(); - const labelText = await page.$eval('label', (element) => element.innerText); - expect(labelText).toBe('What happened to make you visit the NHS website today? (optional)'); + const title = await page.$('h2'); + expect(title).not.toBe(null); + const text = await page.evaluate((element) => element.innerText, title); + expect(text).toBe('Thank you for your feedback.'); }); it('should register a positive vote', async (done) => { diff --git a/tests/integration/confirmation.test.js b/tests/integration/confirmation.test.js index 60fa577..fdeb5d2 100644 --- a/tests/integration/confirmation.test.js +++ b/tests/integration/confirmation.test.js @@ -3,7 +3,6 @@ beforeEach(async () => { await page.goto('http://localhost:8080/tests/example/'); await page.click('.nhsuk-user-feedback-form--yes'); - await page.click('.nhsuk-user-feedback-form--submit'); }); describe('Confirmation text', () => { @@ -20,6 +19,6 @@ describe('Confirmation text', () => { expect(message).not.toBe(null); const text = await page.evaluate((element) => element.innerText, message); - expect(text).toBe('We do not check feedback every day and cannot respond to comments.'); + expect(text).toBe('Find out how to contact the NHS if you need to speak to someone.'); }); }); diff --git a/tests/integration/text-comments.test.js b/tests/integration/text-comments.test.js index 561eb90..5c222c1 100644 --- a/tests/integration/text-comments.test.js +++ b/tests/integration/text-comments.test.js @@ -1,7 +1,9 @@ /* global page expect */ beforeEach(async () => { - await page.goto('http://localhost:8080/tests/example/'); + // Text commenting is disabled at /tests/example/index.html, + // we need to use enabled-text-response.html instead. + await page.goto('http://localhost:8080/tests/example/enabled-text-response.html'); await page.click('.nhsuk-user-feedback-form--yes'); });