[UI test] Split test script into scenario and browser operation (#1516)

test/editor/pageobjects/workspace/debugTab_page.js

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ **/
+
+function open() {
+    browser.click('#red-ui-tab-debug');
+}
+
+function getMessage() {
+    var debugMessagePath = '//div[@class="debug-content debug-content-list"]//span[contains(@class, "debug-message-type")]';
+    browser.waitForExist(debugMessagePath);
+    return browser.getText(debugMessagePath);
+}
+
+function clearMessage() {
+    browser.click('//a[@id="debug-tab-clear"]');
+}
+
+module.exports = {
+    open: open,
+    getMessage: getMessage,
+    clearMessage: clearMessage,
+};

test/editor/pageobjects/workspace/editWindow_page.js

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ **/
+
+function clickOk() {
+    browser.click('#node-dialog-ok');
+    browser.pause(300);
+}
+
+module.exports = {
+    clickOk: clickOk,
+};

test/editor/pageobjects/workspace/node_page.js

@@ -0,0 +1,52 @@
+/**
+ * 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 icons = {
+    // input
+    "inject": "icons/node-red/inject.png",
+    // output
+    "debug": "icons/node-red/debug.png",
+    // function
+    "change": "icons/node-red/swap.png",
+};
+
+function getIdWithIcon(icon) {
+    //*[name()="image" and @*="icons/node-red/inject.png"]/../..
+    var id = browser.getAttribute('//*[name()="image" and @*="' + icon + '"]/../..', 'id');
+    return id;
+}
+
+function Node(type) {
+    this.id = '//*[@id="' + getIdWithIcon(icons[type]) + '"]';
+}
+
+Node.prototype.edit = function() {
+    browser.click(this.id);
+    browser.click(this.id);
+    browser.pause(500); // Necessary for headless mode.
+}
+
+Node.prototype.connect = function(targetNode) {
+    var outputPort = this.id + '/*[@class="port_output"]';
+    var inputPort = targetNode.id + '/*[@class="port_input"]';
+    browser.dragAndDrop(outputPort, inputPort)
+}
+
+Node.prototype.clickLeftButton = function() {
+    browser.click(this.id + '/*[@class="node_button node_left_button"]');
+}
+
+module.exports = Node;

test/editor/pageobjects/workspace/workspace_page.js

@@ -0,0 +1,62 @@
+/**
+ * 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 events = require("../../../../red/runtime/events.js");
+
+var node = require('./node_page');
+
+var palette = {
+    "inject": "#palette_node_inject",
+    "debug": "#palette_node_debug",
+    "change": "#palette_node_change",
+};
+
+function addNode(type, x, y) {
+    var offsetX = x ? x : 0;
+    var offsetY = y ? y : 0;
+    browser.moveToObject(palette[type]);
+    browser.buttonDown();
+    browser.moveToObject("#palette-search", offsetX + 300, offsetY + 100); // adjust to the top-left corner of workspace.
+    browser.buttonUp();
+    return new node(type);
+}
+
+function deleteAllNodes() {
+    browser.keys(['Control', 'a', 'a', 'Control']); // call twice to release the keys.
+    browser.keys(['Delete']);
+}
+
+function deploy() {
+    browser.call(function () {
+        return when.promise(function(resolve, reject) {
+            events.on("runtime-event", function(event) {
+                if (event.id === 'runtime-deploy') {
+                    resolve();
+                }
+            });
+            browser.click('#btn-deploy');
+        });
+    });
+    browser.pause(500); // Necessary for headless mode.
+}
+
+module.exports = {
+    addNode: addNode,
+    deleteAllNodes: deleteAllNodes,
+    deploy: deploy
+};

test/editor/specs/editor_spec.js

@@ -19,11 +19,19 @@ var should = require("should");
 var fs = require('fs-extra');
 
 var helper = require("../editor_helper");
-var events = require("../../../red/runtime/events.js");
+var editWindow = require('../pageobjects/workspace/editWindow_page');
+var debugTab = require('../pageobjects/workspace/debugTab_page');
+var workspace = require('../pageobjects/workspace/workspace_page');
 
+var nodeWidth = 200;
 
 describe('Node-RED main page', function() {
+    beforeEach(function() {
+        workspace.deleteAllNodes();
+    });
+
     before(function() {
+        browser.windowHandleMaximize();
         browser.call(function () {
             return when.promise(function(resolve, reject) {
                 helper.startServer(function() {
@@ -50,37 +58,35 @@ describe('Node-RED main page', function() {
     });
 
     it('should output a timestamp', function() {
-        browser.moveToObject('#palette_node_inject');
+        var injectNode = workspace.addNode("inject");
-        browser.buttonDown();
+        var debugNode = workspace.addNode("debug", nodeWidth);
-        browser.moveToObject('#palette_node_inject', 300, 50);
+        injectNode.connect(debugNode);
-        browser.buttonUp();
 
-        browser.moveToObject('#palette_node_debug');
+        workspace.deploy();
-        browser.buttonDown();
-        browser.moveToObject('#palette_node_debug', 300, -50);
-        browser.buttonUp();
 
-        browser.moveToObject('.port_output');
+        debugTab.open();
-        browser.buttonDown();
+        debugTab.clearMessage();
-        browser.moveToObject('.port_input');
+        injectNode.clickLeftButton();
-        browser.buttonUp();
+        debugTab.getMessage().should.within(1500000000000, 3000000000000);
+    });
 
-        browser.click('#btn-deploy');
+    it('should set a message property to a fixed value', function() {
-        browser.call(function () {
+        var injectNode = workspace.addNode("inject");
-            return when.promise(function(resolve, reject) {
+        var changeNode = workspace.addNode("change", nodeWidth);
-                events.on("runtime-event", function(event) {
+        var debugNode = workspace.addNode("debug", nodeWidth * 2);
-                    if (event.id === 'runtime-deploy') {
-                        resolve();
-                    }
-                });
-            });
-        });
-        // need additional wait to click on workspace.
-        browser.pause(500);
 
-        browser.click('#red-ui-tab-debug');
+        changeNode.edit();
-        browser.click('.node_left_button');
+        browser.setValue('.node-input-rule-property-value', 'Hello World!');
-        browser.waitForExist('.debug-message-type-number');
+        editWindow.clickOk();
-        browser.getText('.debug-message-type-number').should.within(1500000000000, 3000000000000);
+
+        injectNode.connect(changeNode);
+        changeNode.connect(debugNode);
+
+        workspace.deploy();
+
+        debugTab.open();
+        debugTab.clearMessage();
+        injectNode.clickLeftButton();
+        debugTab.getMessage().should.be.equal('"Hello World!"');
     });
 });

test/editor/wdio.conf.js

@@ -63,7 +63,7 @@ exports.config = {
         browserName: 'chrome',
         chromeOptions: {
             // Runs tests without opening a broser.
-            args: ['--headless', '--disable-gpu'],
+            args: ['--headless', '--disable-gpu', 'window-size=1920,1080'],
             // Runs tests with opening a broser.
             // args: ['--disable-gpu'],
         },