first step of ui test (#1497)

Gruntfile.js

@@ -41,6 +41,11 @@ module.exports = function(grunt) {
             core: { src: ["test/_spec.js","test/red/**/*_spec.js"]},
             nodes: { src: ["test/nodes/**/*_spec.js"]}
         },
+        webdriver: {
+            all: {
+                configFile: 'test/editor/wdio.conf.js'
+            }
+        },
         mocha_istanbul: {
             options: {
                 globals: ['expect'],
@@ -413,6 +418,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-chmod');
     grunt.loadNpmTasks('grunt-jsonlint');
     grunt.loadNpmTasks('grunt-mocha-istanbul');
+    grunt.loadNpmTasks('grunt-webdriver');
 
     grunt.registerMultiTask('attachCopyright', function() {
         var files = this.data.src;
@@ -472,6 +478,10 @@ module.exports = function(grunt) {
         'Runs code style check on editor code',
         ['jshint:editor']);
 
+    grunt.registerTask('test-ui',
+        'Builds editor content then runs unit tests on editor ui',
+        ['build','jshint:editor','webdriver:all']);
+
     grunt.registerTask('test-nodes',
         'Runs unit tests on core nodes',
         ['simplemocha:nodes']);

package.json

@@ -72,6 +72,7 @@
         "bcrypt":"~1.0.1"
     },
     "devDependencies": {
+        "chromedriver": "^2.33.2",
         "grunt": "~1.0.1",
         "grunt-chmod": "~1.1.1",
         "grunt-cli": "~1.2.0",
@@ -88,11 +89,16 @@
         "grunt-nodemon":"~0.4.2",
         "grunt-sass":"~1.2.1",
         "grunt-simple-mocha": "~0.4.1",
+        "grunt-webdriver": "^2.0.3",
         "istanbul": "0.4.5",
         "mocha": "~3.4.2",
         "should": "^8.4.0",
         "sinon": "1.17.7",
-        "supertest": "3.0.0"
+        "supertest": "3.0.0",
+        "wdio-chromedriver-service": "^0.1.1",
+        "wdio-mocha-framework": "^0.5.11",
+        "wdio-spec-reporter": "^0.1.3",
+        "webdriverio": "^4.9.11"
     },
     "engines": {
         "node": ">=4"

test/editor/editor_helper.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+var RED = require("../../red/red.js");
+
+var when = require("when");
+var http = require('http');
+var express = require("express");
+var fs = require('fs-extra');
+var app = express();
+
+var server;
+var homeDir = './test/resources/home';
+var address = '127.0.0.1';
+var listenPort = 0; // use ephemeral port
+var url;
+
+function cleanup() {
+    var flowsFile = homeDir + '/flows_'+require('os').hostname()+'.json';
+    try {
+        fs.statSync(flowsFile);
+        fs.unlinkSync(flowsFile);
+    } catch (err) {
+    }
+};
+
+module.exports = {
+    startServer: function(done) {
+        cleanup();
+        app.use("/",express.static("public"));
+        server = http.createServer(app);
+        var settings = {
+            httpAdminRoot: "/",
+            httpNodeRoot: "/api",
+            userDir: homeDir,
+            functionGlobalContext: { },    // enables global context
+            SKIP_BUILD_CHECK: true,
+            logging: {console: {level:'off'}}
+        };
+        RED.init(server, settings);
+        app.use(settings.httpAdminRoot,RED.httpAdmin);
+        app.use(settings.httpNodeRoot,RED.httpNode);
+        server.listen(listenPort, address);
+        server.on('listening', function() {
+            var port = server.address().port;
+            url = 'http://' + address + ':' + port;
+        });
+        RED.start().then(function() {
+            done();
+        });
+    },
+
+    stopServer: function(done) {
+        if (server) {
+            try {
+                RED.stop().then(function() {
+                    server.close(done);
+                    cleanup();
+                    done();
+                });
+            } catch(e) {
+                cleanup();
+                done();
+            }
+        }
+    },
+
+    url: function() {
+        return url;
+    },
+
+    red: function() {
+        return RED;
+    },
+};

test/editor/specs/editor_spec.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+var when = require('when');
+var should = require("should");
+var fs = require('fs-extra');
+
+var helper = require("../editor_helper");
+var events = require("../../../red/runtime/events.js");
+
+
+describe('Node-RED main page', function() {
+    before(function() {
+        browser.call(function () {
+            return when.promise(function(resolve, reject) {
+                helper.startServer(function() {
+                    resolve();
+                });
+            });
+        });
+        browser.url(helper.url());
+        browser.waitForExist('#palette_node_inject');
+    });
+
+    after(function() {
+        browser.call(function () {
+            return when.promise(function(resolve, reject) {
+                helper.stopServer(function() {
+                    resolve();
+                });
+            });
+        });
+    });
+
+    it('should have a right title', function () {
+        browser.getTitle().should.equal('Node-RED');
+    });
+
+    it('should output a timestamp', function() {
+        browser.moveToObject('#palette_node_inject');
+        browser.buttonDown();
+        browser.moveToObject('#palette_node_inject', 300, 50);
+        browser.buttonUp();
+
+        browser.moveToObject('#palette_node_debug');
+        browser.buttonDown();
+        browser.moveToObject('#palette_node_debug', 300, -50);
+        browser.buttonUp();
+
+        browser.moveToObject('.port_output');
+        browser.buttonDown();
+        browser.moveToObject('.port_input');
+        browser.buttonUp();
+
+        browser.click('#btn-deploy');
+        browser.call(function () {
+            return when.promise(function(resolve, reject) {
+                events.on("runtime-event", function(event) {
+                    if (event.id === 'runtime-deploy') {
+                        resolve();
+                    }
+                });
+            });
+        });
+        // need additional wait to click on workspace.
+        browser.pause(500);
+
+        browser.click('#red-ui-tab-debug');
+        browser.click('.node_left_button');
+        browser.waitForExist('.debug-message-type-number');
+        browser.getText('.debug-message-type-number').should.within(1500000000000, 3000000000000);
+    });
+});

test/editor/wdio.conf.js

@@ -0,0 +1,271 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+exports.config = {
+
+    //
+    // ==================
+    // Specify Test Files
+    // ==================
+    // Define which test specs should run. The pattern is relative to the directory
+    // from which `wdio` was called. Notice that, if you are calling `wdio` from an
+    // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
+    // directory is where your package.json resides, so `wdio` will be called from there.
+    //
+    specs: [
+        './test/editor/**/*_spec.js'
+    ],
+    // Patterns to exclude.
+    exclude: [
+        // 'path/to/excluded/files'
+    ],
+    //
+    // ============
+    // Capabilities
+    // ============
+    // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
+    // time. Depending on the number of capabilities, WebdriverIO launches several test
+    // sessions. Within your capabilities you can overwrite the spec and exclude options in
+    // order to group specific specs to a specific capability.
+    //
+    // First, you can define how many instances should be started at the same time. Let's
+    // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
+    // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
+    // files and you set maxInstances to 10, all spec files will get tested at the same time
+    // and 30 processes will get spawned. The property handles how many capabilities
+    // from the same test should run tests.
+    //
+    maxInstances: 10,
+    //
+    // If you have trouble getting all important capabilities together, check out the
+    // Sauce Labs platform configurator - a great tool to configure your capabilities:
+    // https://docs.saucelabs.com/reference/platforms-configurator
+    //
+    capabilities: [{
+        // maxInstances can get overwritten per capability. So if you have an in-house Selenium
+        // grid with only 5 firefox instances available you can make sure that not more than
+        // 5 instances get started at a time.
+        maxInstances: 5,
+        //
+        browserName: 'chrome',
+        chromeOptions: {
+            // Runs tests without opening a broser.
+            args: ['--headless', '--disable-gpu'],
+            // Runs tests with opening a broser.
+            // args: ['--disable-gpu'],
+        },
+    }],
+    //
+    // ===================
+    // Test Configurations
+    // ===================
+    // Define all options that are relevant for the WebdriverIO instance here
+    //
+    // By default WebdriverIO commands are executed in a synchronous way using
+    // the wdio-sync package. If you still want to run your tests in an async way
+    // e.g. using promises you can set the sync option to false.
+    sync: true,
+    //
+    // Level of logging verbosity: silent | verbose | command | data | result | error
+    logLevel: 'silent',
+    //
+    // Enables colors for log output.
+    coloredLogs: true,
+    //
+    // Warns when a deprecated command is used
+    deprecationWarnings: false,
+    //
+    // If you only want to run your tests until a specific amount of tests have failed use
+    // bail (default is 0 - don't bail, run all tests).
+    bail: 0,
+    //
+    // Saves a screenshot to a given path if a command fails.
+    screenshotPath: './test/errorShots/',
+    //
+    // Set a base URL in order to shorten url command calls. If your `url` parameter starts
+    // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
+    // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
+    // gets prepended directly.
+    baseUrl: 'http://localhost',
+    //
+    // Default timeout for all waitFor* commands.
+    waitforTimeout: 10000,
+    //
+    // Default timeout in milliseconds for request
+    // if Selenium Grid doesn't send response
+    connectionRetryTimeout: 90000,
+    //
+    // Default request retries count
+    connectionRetryCount: 3,
+    //
+    // Initialize the browser instance with a WebdriverIO plugin. The object should have the
+    // plugin name as key and the desired plugin options as properties. Make sure you have
+    // the plugin installed before running any tests. The following plugins are currently
+    // available:
+    // WebdriverCSS: https://github.com/webdriverio/webdrivercss
+    // WebdriverRTC: https://github.com/webdriverio/webdriverrtc
+    // Browserevent: https://github.com/webdriverio/browserevent
+    // plugins: {
+    //     webdrivercss: {
+    //         screenshotRoot: 'my-shots',
+    //         failedComparisonsRoot: 'diffs',
+    //         misMatchTolerance: 0.05,
+    //         screenWidth: [320,480,640,1024]
+    //     },
+    //     webdriverrtc: {},
+    //     browserevent: {}
+    // },
+    //
+    // Test runner services
+    // Services take over a specific job you don't want to take care of. They enhance
+    // your test setup with almost no effort. Unlike plugins, they don't add new
+    // commands. Instead, they hook themselves up into the test process.
+    port: '9515',
+    path: '/',
+    services: ['chromedriver'],
+    //
+    // Framework you want to run your specs with.
+    // The following are supported: Mocha, Jasmine, and Cucumber
+    // see also: http://webdriver.io/guide/testrunner/frameworks.html
+    //
+    // Make sure you have the wdio adapter package for the specific framework installed
+    // before running any tests.
+    framework: 'mocha',
+    //
+    // Test reporter for stdout.
+    // The only one supported by default is 'dot'
+    // see also: http://webdriver.io/guide/reporters/dot.html
+    reporters: ['spec'],
+
+    //
+    // Options to be passed to Mocha.
+    // See the full list at http://mochajs.org/
+    mochaOpts: {
+        timeout: 20000,
+        ui: 'bdd'
+    },
+    //
+    // =====
+    // Hooks
+    // =====
+    // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
+    // it and to build services around it. You can either apply a single function or an array of
+    // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
+    // resolved to continue.
+    /**
+     * Gets executed once before all workers get launched.
+     * @param {Object} config wdio configuration object
+     * @param {Array.<Object>} capabilities list of capabilities details
+     */
+    // onPrepare: function (config, capabilities) {
+    // },
+    /**
+     * Gets executed just before initialising the webdriver session and test framework. It allows you
+     * to manipulate configurations depending on the capability or spec.
+     * @param {Object} config wdio configuration object
+     * @param {Array.<Object>} capabilities list of capabilities details
+     * @param {Array.<String>} specs List of spec file paths that are to be run
+     */
+    // beforeSession: function (config, capabilities, specs) {
+    // },
+    /**
+     * Gets executed before test execution begins. At this point you can access to all global
+     * variables like `browser`. It is the perfect place to define custom commands.
+     * @param {Array.<Object>} capabilities list of capabilities details
+     * @param {Array.<String>} specs List of spec file paths that are to be run
+     */
+    // before: function (capabilities, specs) {
+    // },
+    /**
+     * Runs before a WebdriverIO command gets executed.
+     * @param {String} commandName hook command name
+     * @param {Array} args arguments that command would receive
+     */
+    // beforeCommand: function (commandName, args) {
+    // },
+
+    /**
+     * Hook that gets executed before the suite starts
+     * @param {Object} suite suite details
+     */
+    // beforeSuite: function (suite) {
+    // },
+    /**
+     * Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+     * @param {Object} test test details
+     */
+    // beforeTest: function (test) {
+    // },
+    /**
+     * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
+     * beforeEach in Mocha)
+     */
+    // beforeHook: function () {
+    // },
+    /**
+     * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
+     * afterEach in Mocha)
+     */
+    // afterHook: function () {
+    // },
+    /**
+     * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+     * @param {Object} test test details
+     */
+    // afterTest: function (test) {
+    // },
+    /**
+     * Hook that gets executed after the suite has ended
+     * @param {Object} suite suite details
+     */
+    // afterSuite: function (suite) {
+    // },
+
+    /**
+     * Runs after a WebdriverIO command gets executed
+     * @param {String} commandName hook command name
+     * @param {Array} args arguments that command would receive
+     * @param {Number} result 0 - command success, 1 - command error
+     * @param {Object} error error object if any
+     */
+    // afterCommand: function (commandName, args, result, error) {
+    // },
+    /**
+     * Gets executed after all tests are done. You still have access to all global variables from
+     * the test.
+     * @param {Number} result 0 - test pass, 1 - test fail
+     * @param {Array.<Object>} capabilities list of capabilities details
+     * @param {Array.<String>} specs List of spec file paths that ran
+     */
+    // after: function (result, capabilities, specs) {
+    // },
+    /**
+     * Gets executed right after terminating the webdriver session.
+     * @param {Object} config wdio configuration object
+     * @param {Array.<Object>} capabilities list of capabilities details
+     * @param {Array.<String>} specs List of spec file paths that ran
+     */
+    // afterSession: function (config, capabilities, specs) {
+    // },
+    /**
+     * Gets executed after all workers got shut down and the process is about to exit.
+     * @param {Object} exitCode 0 - success, 1 - fail
+     * @param {Object} config wdio configuration object
+     * @param {Array.<Object>} capabilities list of capabilities details
+     */
+    // onComplete: function(exitCode, config, capabilities) {
+    // }
+}