Updated Testing (markdown)

Testing.md

@@ -1,8 +1,9 @@
 _**This is a draft version to be reviewed.**_
 
 # Test components
+## Runtime and nodes test
 ### npm packages
-Node-RED uses the following packages for testing.
+Node-RED uses the following packages for runtime and node testing.
 - mocha
 - should
 - sinon
@@ -34,10 +35,21 @@ Browser
 - Internet Explorer
 - Firefox
 
+## UI test
+### npm packages
+Node-RED uses the following packages for UI testing.
+- webdriverio
+- mocha
+- chromedriver
+
+### Test directory structure
+Test scripts for UI testing are in `test/editor` directory.
+
 
 ***
 # Helper node
 
+## Helper node for Runtime and nodes
 There is a helper script for testing a node `test/nodes/helper.js`.  When testing a node, it is recommended to use this script.
 Helper script can start Node-RED server, load a flow, and receive a payload from the previous node, etc.
 
@@ -107,6 +119,30 @@ To unload a flow then stop a server:
     });
 ```
 
+## Helper node for UI test
+One important thing to write a UI testing code is that the UI test scripts run synchronously. (This comes from `sync` option in wdio.conf.js)
+If you need to write an asynchronous code, you need to call [browser.call](http://webdriver.io/api/utility/call.html) of WebdriverIO API with promise.
+
+### Starting a server
+`helper.startServer` starts a Node-RED server like `node-red` command.  As the test scripts run in the synchronous manner, to start a Node-RED server:
+```
+        browser.call(function () {
+            return when.promise(function(resolve, reject) {
+                helper.startServer(function() {
+                    resolve();
+                });
+            });
+        });
+```
+
+### Stopping a server
+`helper.stopServer` stops a Node-RED server.
+You need to call this function in the same manner of startServer.
+
+### Returning a URL
+As helper script uses ephemeral port, URL will be changed on each test.
+So you need to receive a URL when you access to Node-RED.
+
 ***
 # Testing Node-RED
 
@@ -120,6 +156,7 @@ Option       | Description
 `default`    | Builds editor content then runs code style checks and unit tests on all components. `default` means to run `grunt` command without option.
 `test-core`  | Runs code style check and unit tests on core runtime code.
 `test-editor`| Runs code style check on editor code.
+`test-ui`    | Builds editor content then runs code style check on editor code and unit tests on editor.
 `test-nodes` | Runs unit tests on core nodes.
 `clean`      | Deletes build outputs
 `build`      | Builds editor contents
@@ -139,7 +176,7 @@ To run only a specific test script, run the following command in the `node-red`
     mocha test/nodes/core/core/20-inject_spec.js
 ```
 
-If you cannot install mocha command globally, run the following command as an alternative:
+If you cannot install mocha command globally or you want to run the specific test script, run the following command as an alternative:
 
 ```
     node node_modules/mocha/bin/mocha test/nodes/core/core/20-inject_spec.js
@@ -153,11 +190,15 @@ If a pull request causes the code coverage to decrease it will be rejected unles
 ```
 
 Once all tests finished, open `index.html` in `coverage/lcov-report` directory to see the coverage report.
-If the source code that you developed is all covered by test cases, it is ok to send a pull request.
+If the source code that you developed is all covered by your test scripts, it is ok to send a pull request.
 
 ### Testing editor
-Currently, there is no test scripts for Node-RED editor.  When you modify Node-RED editor, you need to test by hand.
-You can run Node-RED with the following command to not minify and uglify scripts so that you can view a code on a browser debugger.
+Currently, there is only a few test scripts for Node-RED editor. To run a UI test scripts:
+```
+    grunt test-ui
+```
+
+To test your code by hand, you can run Node-RED with the following command to not minify and uglify scripts so that you can view a code on a browser debugger.
 
 ```
     grunt dev