Merge pull request #16 from Financial-Times/feedback-form-copy-changes

Feedback form changes

.babelrc

@@ -0,0 +1,12 @@
+{
+	"env": {
+		"start": {
+			"presets": [
+				"react-hmre"
+			]
+		},
+		"test": {
+			"presets": ["es2015", "react"]
+		}
+	}
+}

.eslintrc

@@ -1,7 +1,8 @@
 {
   "env": {
     "es6": true,
-    "browser": true
+    "browser": true,
+    "jest": true
   },
   "plugins": [
     "react"

README.md

@@ -2,26 +2,38 @@
 
 Header component for KMT app
 
+[TOC]
 
 ## Building this project
 `npm start` should run a gulp based build before serving up the an example of the page.
 However if you see an error like:
 `Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime`
 You will probably need to run `npm rebuild node-sass` to overcome this. You should probably update `origami-build-tools` at the same time.
 
-###Installation:
+## Testing
+We are using [Jest](https://facebook.github.io/jest/) for testing React components, and [Enzyme](http://airbnb.io/enzyme/) for rendering components inside our tests.
+
+**Please note that due to using an earlier version of React, we are using version 1.4.x of Enzyme, so not all of the latest functions are available to us. Please refer to [the docs for Enzyme 1.4.x](https://github.com/airbnb/enzyme/tree/442147f669abace1eeae08040885893894ae0505/docs) for a list of available functions.**
+
+Tests for React components should be saved as `test.js` inside the folder for that component.
+
+### Running tests
+To run a one-time test: `npm test`
+
+To run tests and watch for changes: `npm run testWatch`
+
+## Installation:
 ```
 bower install --S kmt-header
 ```
-=======
 
-###Usage:
-#####Load the CSS:
+## Usage:
+### Load the CSS:
 ```scss
 @import '../bower_components/kmt-header/main';
 ```
 
-#####Load the JS:
+### Load the JS:
 * **Inside** React Redux app:
 ```js
 // first add the header reducers to the parent app reducers
@@ -43,9 +55,8 @@ import KmtHeader from "kmt-header/main";
 //...
 KmtHeader.init(options);
 ```
-=======
 
-###Options:
+### `options`:
 * React Redux store data (both for when **Inside** and **Outside** React Redux app):
 ```js
 KmtHeaderNs: { // {Object} - optional - Namespace for the KMT header React Redux store - if store data is provided it needs to be wrapped inside this object
@@ -94,3 +105,6 @@ const options = {
 
 KmtHeader.init(options);
 ```
+
+## Feedback form
+`kmt-header` doesn't save the data entered in the feedback form, it just passes it to `KmtHeaderNs.helpers.doRequest()`. The `doRequest()` method in `kmt-header` is only a stub. Any module(s) that needs to submit the feedback needs to supply a function to `doRequest()` that will handle this.

package.json

@@ -3,19 +3,20 @@
   "version": "0.0.1",
   "description": "",
   "main": "server.js",
-  "repository": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Financial-Times/kmt-header.git"
+  },
   "scripts": {
     "prestart": "./node_modules/.bin/gulp",
     "start": "node server.js",
-    "heroku-postbuild": "./node_modules/.bin/bower install"
+    "heroku-postbuild": "./node_modules/.bin/bower install",
+    "test": "jest src/*",
+    "testWatch": "jest src/* --watch"
   },
   "engines": {
     "node": "^6.2.0"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Financial-Times/kmt-header.git"
-  },
   "author": "ciprian.lujeru@ft.com",
   "license": "MIT",
   "devDependencies": {
@@ -24,7 +25,10 @@
     "babel-loader": "~6.2.0",
     "babel-preset-es2015": "~6.1.18",
     "babel-preset-react": "~6.1.18",
-    "babel-register": "~6.9.0"
+    "babel-register": "~6.9.0",
+    "enzyme": "~1.4.1",
+    "jest": "^20.0.1",
+    "react-addons-test-utils": "~0.14.7"
   },
   "dependencies": {
     "node-sass": "~3.8.0",
@@ -36,7 +40,7 @@
     "react-router": "~2.0.1",
     "polyfill-service": "~3.7.0",
     "dotenv": "~2.0.0",
-    "origami-build-tools": "~5.5.3",
+    "origami-build-tools": "~5.6.1",
     "hbs": "~4.0.0",
     "bower": "~1.7.9",
     "gulp": "~3.9.1",
@@ -49,5 +53,10 @@
     "react-redux": "~4.4.5",
     "redux-logger": "~2.6.1",
     "redux-thunk": "~2.1.0"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "n-notification": "<rootDir>/bower_components/n-notification/main.js"
+    }
   }
 }

src/components/feedback-form/__snapshots__/test.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FeedbackForm /> has the right content 1`] = `
+"<div>
+<form method=\\"POST\\" className=\\"kat-feedback\\" action=\\"#\\">
+<div className=\\"kat-feedback__row\\">
+<p className=\\"kat-feedback__intro-text\\">
+Please share your feedback on the new Knowledge and Administration Tool (KAT) so that we can continue to develop it in line with customer requirements.
+</p>
+</div>
+<div className=\\"kat-feedback__row\\">
+<label className=\\"o-forms__label\\">
+How satisfied are you with FT KAT?
+</label>
+<div className=\\"kat-feedback__score\\">
+<div>
+<input type=\\"radio\\" name=\\"npsscore\\" value=\\"5\\" className=\\"o-forms__radio o-forms__radio--small\\" id=\\"nps5\\" onChange={[Function]} />
+<label htmlFor=\\"nps5\\" className=\\"o-forms__label nps-label\\">
+5 - Extremely satisfied
+</label>
+</div>
+<div>
+<input type=\\"radio\\" name=\\"npsscore\\" value=\\"4\\" className=\\"o-forms__radio o-forms__radio--small\\" id=\\"nps4\\" onChange={[Function]} />
+<label htmlFor=\\"nps4\\" className=\\"o-forms__label nps-label\\">
+4 - Somewhat satisfied
+</label>
+</div>
+<div>
+<input type=\\"radio\\" name=\\"npsscore\\" value=\\"3\\" className=\\"o-forms__radio o-forms__radio--small\\" id=\\"nps3\\" onChange={[Function]} />
+<label htmlFor=\\"nps3\\" className=\\"o-forms__label nps-label\\">
+3 - Neither satisfied nor dissatisfied
+</label>
+</div>
+<div>
+<input type=\\"radio\\" name=\\"npsscore\\" value=\\"2\\" className=\\"o-forms__radio o-forms__radio--small\\" id=\\"nps2\\" onChange={[Function]} />
+<label htmlFor=\\"nps2\\" className=\\"o-forms__label nps-label\\">
+2 - Somewhat dissatisfied
+</label>
+</div>
+<div>
+<input type=\\"radio\\" name=\\"npsscore\\" value=\\"1\\" className=\\"o-forms__radio o-forms__radio--small\\" id=\\"nps1\\" onChange={[Function]} />
+<label htmlFor=\\"nps1\\" className=\\"o-forms__label nps-label\\">
+1 - Extremely dissatisfied
+</label>
+</div>
+</div>
+</div>
+<div className=\\"kat-feedback__row\\">
+<label className=\\"o-forms__label\\" htmlFor=\\"improvefeedback\\">
+How can we improve KAT?
+</label>
+<textarea className=\\"o-forms__textarea kat-feedback__textarea\\" name=\\"improvefeedback\\" id=\\"improvefeedback\\" onChange={[Function]} />
+</div>
+<div className=\\"kat-feedback__row\\">
+<button className=\\"kat-feedback__submit\\" disabled={true} type=\\"button\\">
+Submit
+</button>
+</div>
+</form>
+</div>"
+`;

src/components/feedback-form/index.js

@@ -6,7 +6,7 @@ class FeedbackForm extends Component {
     super(props);
 
     this.submit = this.submit.bind(this);
-    this.getData = this.getData.bind(this);
+    this.getFormData = this.getFormData.bind(this);
     this.toggleValidState = this.toggleValidState.bind(this);
   }
 
@@ -16,26 +16,22 @@ class FeedbackForm extends Component {
   }
 
   toggleValidState() {
-    const theData = this.getData();
+    const theData = this.getFormData();
     const isValid = Object.keys(theData).some((key) => theData[key] !== undefined && theData[key].trim().length > 0);
     if (this.props.isValid !== isValid) {
       this.props.dispatch(toggleFeedbackValid());
     }
   }
 
-  getData() {
+  getFormData() {
     const theData = {
       npsscore: undefined,
-      positivefeedback: undefined,
-      negativefeedback: undefined
+      improvefeedback: this.refs.improvefeedback.value
     };
+
     Object.keys(this.refs).forEach((key) => {
-      if (key.indexOf("nps") === 0) {
-        if (this.refs[key].checked) {
-          theData["npsscore"] = this.refs[key].value;
-        }
-      } else {
-        theData[key] = this.refs[key].value;
+      if (key.indexOf("nps") === 0 && this.refs[key].checked) {
+        theData.npsscore = this.refs[key].value;
       }
     });
 
@@ -47,7 +43,7 @@ class FeedbackForm extends Component {
     const theForm = e.target;
     if (theForm) {
       const theUrl = theForm.getAttribute("action");
-      this.props.dispatch(submitFeedback(theUrl, this.getData()));
+      this.props.dispatch(submitFeedback(theUrl, this.getFormData()));
     }
   }
 
@@ -70,48 +66,36 @@ class FeedbackForm extends Component {
       <div>
         <form method="POST" className="kat-feedback" {...formAttr}>
           <div className="kat-feedback__row">
-            <div>We'd love to hear your feedback about our Knowledge & Administration Tools, aka KAT. Please tell us your thoughts below. If you would like a reply, please leave your name and email address with your comments.</div>
+            <p className="kat-feedback__intro-text">Please share your feedback on the new Knowledge and Administration Tool (KAT) so that we can continue to develop it in line with customer requirements.</p>
           </div>
           <div className="kat-feedback__row">
             <label className="o-forms__label">How satisfied are you with FT KAT?</label>
-          </div>
-          <div className="kat-feedback__row">
-            <small className="o-forms__additional-info kat-feedback__less">Extremely unsatisfied</small>
-            <small className="o-forms__additional-info kat-feedback__more">Extremely satisfied</small>
             <div className="kat-feedback__score">
-              <input type="radio" name="npsscore" value="0" className="o-forms__radio o-forms__radio--small" id="nps0" ref="nps0" onChange={this.toggleValidState} />
-              <label htmlFor="nps0" className="o-forms__label nps-label">0</label>
-              <input type="radio" name="npsscore" value="1" className="o-forms__radio o-forms__radio--small" id="nps1" ref="nps1" onChange={this.toggleValidState} />
-              <label htmlFor="nps1" className="o-forms__label nps-label">1</label>
-              <input type="radio" name="npsscore" value="2" className="o-forms__radio o-forms__radio--small" id="nps2" ref="nps2" onChange={this.toggleValidState} />
-              <label htmlFor="nps2" className="o-forms__label nps-label">2</label>
-              <input type="radio" name="npsscore" value="3" className="o-forms__radio o-forms__radio--small" id="nps3" ref="nps3" onChange={this.toggleValidState} />
-              <label htmlFor="nps3" className="o-forms__label nps-label">3</label>
-              <input type="radio" name="npsscore" value="4" className="o-forms__radio o-forms__radio--small" id="nps4" ref="nps4" onChange={this.toggleValidState} />
-              <label htmlFor="nps4" className="o-forms__label nps-label">4</label>
-              <input type="radio" name="npsscore" value="5" className="o-forms__radio o-forms__radio--small" id="nps5" ref="nps5" onChange={this.toggleValidState} />
-              <label htmlFor="nps5" className="o-forms__label nps-label">5</label>
-              <input type="radio" name="npsscore" value="6" className="o-forms__radio o-forms__radio--small" id="nps6" ref="nps6" onChange={this.toggleValidState} />
-              <label htmlFor="nps6" className="o-forms__label nps-label">6</label>
-              <input type="radio" name="npsscore" value="7" className="o-forms__radio o-forms__radio--small" id="nps7" ref="nps7" onChange={this.toggleValidState} />
-              <label htmlFor="nps7" className="o-forms__label nps-label">7</label>
-              <input type="radio" name="npsscore" value="8" className="o-forms__radio o-forms__radio--small" id="nps8" ref="nps8" onChange={this.toggleValidState} />
-              <label htmlFor="nps8" className="o-forms__label nps-label">8</label>
-              <input type="radio" name="npsscore" value="9" className="o-forms__radio o-forms__radio--small" id="nps9" ref="nps9" onChange={this.toggleValidState} />
-              <label htmlFor="nps9" className="o-forms__label nps-label">9</label>
-              <input type="radio" name="npsscore" value="10" className="o-forms__radio o-forms__radio--small" id="nps10" ref="nps10" onChange={this.toggleValidState} />
-              <label htmlFor="nps10" className="o-forms__label nps-label">10</label>
+              <div>
+                <input type="radio" name="npsscore" value="5" className="o-forms__radio o-forms__radio--small" id="nps5" ref="nps5" onChange={this.toggleValidState} />
+                <label htmlFor="nps5" className="o-forms__label nps-label">5 - Extremely satisfied</label>
+              </div>
+              <div>
+                <input type="radio" name="npsscore" value="4" className="o-forms__radio o-forms__radio--small" id="nps4" ref="nps4" onChange={this.toggleValidState} />
+                <label htmlFor="nps4" className="o-forms__label nps-label">4 - Somewhat satisfied</label>
+              </div>
+              <div>
+                <input type="radio" name="npsscore" value="3" className="o-forms__radio o-forms__radio--small" id="nps3" ref="nps3" onChange={this.toggleValidState} />
+                <label htmlFor="nps3" className="o-forms__label nps-label">3 - Neither satisfied nor dissatisfied</label>
+              </div>
+              <div>
+                <input type="radio" name="npsscore" value="2" className="o-forms__radio o-forms__radio--small" id="nps2" ref="nps2" onChange={this.toggleValidState} />
+                <label htmlFor="nps2" className="o-forms__label nps-label">2 - Somewhat dissatisfied</label>
+              </div>
+              <div>
+                <input type="radio" name="npsscore" value="1" className="o-forms__radio o-forms__radio--small" id="nps1" ref="nps1" onChange={this.toggleValidState} />
+                <label htmlFor="nps1" className="o-forms__label nps-label">1 - Extremely dissatisfied</label>
+              </div>
             </div>
           </div>
           <div className="kat-feedback__row">
-            <label className="o-forms__label">Would you like to...</label>
-            <label className="o-forms__label">Leave a comment?</label>
-            <textarea className="o-forms__textarea kat-feedback__textarea" name="positivefeedback" ref="positivefeedback" onChange={this.toggleValidState}></textarea>
-          </div>
-
-          <div className="kat-feedback__row">
-            <label className="o-forms__label">Report something is missing or not working?</label>
-            <textarea className="o-forms__textarea kat-feedback__textarea" name="negativefeedback" ref="negativefeedback" onChange={this.toggleValidState}></textarea>
+            <label className="o-forms__label" htmlFor="improvefeedback">How can we improve KAT?</label>
+            <textarea className="o-forms__textarea kat-feedback__textarea" name="improvefeedback" id="improvefeedback" ref="improvefeedback" onChange={this.toggleValidState}></textarea>
           </div>
           <div className="kat-feedback__row">
             <button className="kat-feedback__submit" {...submitAttr}>Submit</button>

src/components/feedback-form/style.scss

@@ -30,6 +30,10 @@
   }
 }
 
+.kat-feedback__intro-text {
+  margin: 0;
+}
+
 .kat-feedback__row {
   padding-bottom: 20px;
   position: relative;