Merge pull request #42 from nhsuk/optional-qualitative

Make text responses disabled by default
nhsuk · Oct 22, 2020 · aabd922 · aabd922
2 parents d773d0a + bba15f3
commit aabd922
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 13 deletions.
diff --git 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
@@ -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 = '<p>We do not check feedback every day and cannot respond to comments.</p>';
+    }
+
+    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
@@ -1,5 +1,5 @@
 <div class="nhsuk-panel nhsuk-u-reading-width">
   <h2 class="nhsuk-heading-s nhsuk-user-feedback-form-header">Thank you for your feedback.</h2>
-  <p>We do not check feedback every day and cannot respond to comments.</p>
+   {{ optionalTextResponseMessage }}
   <p>Find out how to <a href="/contact-us/">contact the NHS</a> if you need to speak to someone.</p>
 </div>
diff --git 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,20 +39,32 @@ 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);
   }
 
   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
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+
+    <link rel="shortcut icon" href="">
+
+    <title>User feedback form test page</title>
+
+    <link rel="stylesheet" href="../../node_modules/nhsuk-frontend/dist/nhsuk.css">
+
+    <script src="../../dist/user-feedback-form.js" type="text/javascript" defer></script>
+  </head>
+  <body>
+    <div class="nhsuk-width-container">
+      <main class="nhsuk-main-wrapper">
+        <h1>User feedback form:</h1>
+        <div id="nhsuk-user-feedback-form" data-form-endpoint="http://localhost:8080/my-endpoint/" data-enable-text-response></div>
+
+        <!--
+        If you have the user-feedback-store running locally and want to test it, the endpoint setting should probably be this:
+        <div id="nhsuk-user-feedback-form" data-form-endpoint="http://localhost:7071/"></div>
+        -->
+      </main>
+    </div>
+  </body>
+</html>
diff --git 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
@@ -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
@@ -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
@@ -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');
 });