[bugfix] Fix for is1499 (#1516)

* Fix for is1499
* fix e2e (#9)
* Added README to e2e testing
* Solved bug with rotating Idle icon
* Disabled no-eq-null rule to be able to check for null or undefined
* Added e2e debug config to vscode templates. Moved gitignores to new file
* Allowed new gitignores
* Continue button in feedback dialog now closes the window

Co-authored-by: Odei Maiz <[email protected]>

Author: ignapas

.gitignore

@@ -126,6 +126,7 @@ services/docker-compose.stack.*.yml
 *secret*
 *ignore*
 !.dockerignore
+!.gitignore
 
 # Any generated output folder (e.g. codegen, build, ...)
 out/

.vscode-template/launch.json

@@ -68,6 +68,22 @@
           "remoteRoot": "/devel"
         }
       ]
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug e2e tests",
+      "runtimeArgs": [
+        "--inspect-brk",
+        "${workspaceRoot}/tests/e2e/node_modules/.bin/jest",
+        "--runInBand",
+        "--colors"
+      ],
+      "cwd": "${workspaceFolder}/tests/e2e",
+      "restart": true,
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "port": 9229
     }
   ]
 }

services/web/client/.eslintrc.json

@@ -33,7 +33,8 @@
       {
         "ignoreChainWithDepth": 3
       }
-    ]
+    ],
+    "no-eq-null": 0
   },
   "env": {
     "browser": true

services/web/client/source/class/osparc/auth/LoginPage.js

@@ -92,7 +92,12 @@ qx.Class.define("osparc.auth.LoginPage", {
       login.resetValues();
     }, this);
 
-    [register, resetRequest, reset].forEach(srcPage => {
+    register.addListener("done", msg => {
+      osparc.utils.Utils.cookie.deleteCookie("user");
+      this.fireDataEvent("done", msg);
+    });
+
+    [resetRequest, reset].forEach(srcPage => {
       srcPage.addListener("done", msg => {
         pages.setSelection([login]);
         srcPage.resetValues();

services/web/client/source/class/osparc/auth/Manager.js

@@ -108,20 +108,14 @@ qx.Class.define("osparc.auth.Manager", {
         .finally(this.__logoutUser());
     },
 
-    register: function(userData, successCbk, failCbk, context) {
-      console.debug("Registering user ...");
+    register: function(userData) {
       const params = {
         data: userData
       };
-      osparc.data.Resources.fetch("auth", "postRegister", params)
-        .then(data => {
-          successCbk.call(context, data);
-        })
-        .catch(err => failCbk.call(context, err.message));
+      return osparc.data.Resources.fetch("auth", "postRegister", params);
     },
 
     resetPasswordRequest: function(email, successCbk, failCbk, context) {
-      console.debug("Requesting reset password ...");
       const params = {
         data: {
           email
@@ -135,7 +129,6 @@ qx.Class.define("osparc.auth.Manager", {
     },
 
     resetPassword: function(newPassword, confirmation, code, successCbk, failCbk, context) {
-      console.debug("Reseting password ...");
       const params = {
         url: {
           code

services/web/client/source/class/osparc/auth/ui/RegistrationView.js

@@ -54,12 +54,6 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
         email.activate();
       });
 
-      // const uname = new qx.ui.form.TextField().set({
-      //   required: true,
-      //   placeholder: this.tr("Introduce a user name")
-      // });
-      // this.add(uname);
-
       const pass1 = new qx.ui.form.PasswordField().set({
         required: true,
         placeholder: this.tr("Introduce a password")
@@ -88,7 +82,6 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
         return osparc.auth.core.Utils.checkSamePasswords(pass1, pass2);
       });
 
-
       // submit & cancel buttons
       const grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
 
@@ -123,21 +116,15 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
     },
 
     __submit: function(userData) {
-      console.debug("Registering new user");
-
-      let manager = osparc.auth.Manager.getInstance();
-
-      let successFun = function(log) {
-        this.fireDataEvent("done", log.message);
-        osparc.component.message.FlashMessenger.getInstance().log(log);
-      };
-
-      let failFun = function(msg) {
-        msg = msg || this.tr("Cannot register user");
-        osparc.component.message.FlashMessenger.getInstance().logAs(msg, "ERROR");
-      };
-
-      manager.register(userData, successFun, failFun, this);
+      osparc.auth.Manager.getInstance().register(userData)
+        .then(log => {
+          this.fireDataEvent("done", log.message);
+          osparc.component.message.FlashMessenger.getInstance().log(log);
+        })
+        .catch(err => {
+          const msg = err.message || this.tr("Cannot register user");
+          osparc.component.message.FlashMessenger.getInstance().logAs(msg, "ERROR");
+        });
     },
 
     _onAppear: function() {

services/web/client/source/class/osparc/component/form/tag/TagToggleButton.js

@@ -50,7 +50,7 @@ qx.Class.define("osparc.component.form.tag.TagToggleButton", {
           this._add(control, {
             flex: 1
           });
-          if (this.getLabel() == null || this.getShow() === "icon") { // eslint-disable-line no-eq-null
+          if (this.getLabel() == null || this.getShow() === "icon") {
             control.exclude();
           }
           break;

services/web/client/source/class/osparc/component/service/NodeStatus.js

@@ -90,7 +90,9 @@ qx.Class.define("osparc.component.service.NodeStatus", {
           return "@FontAwesome5Solid/check/12";
         },
         onUpdate: (source, target) => {
-          if (source.getInteractiveStatus() === "ready") {
+          if (source.getInteractiveStatus() == null) {
+            this.__removeClass(this.__icon.getContentElement(), "rotate");
+          } else if (source.getInteractiveStatus() === "ready") {
             this.__removeClass(this.__icon.getContentElement(), "rotate");
             target.setTextColor("ready-green");
           } else if (source.getInteractiveStatus() === "failed") {

services/web/client/source/class/osparc/component/service/ServiceJumbo.js

@@ -32,7 +32,7 @@ qx.Class.define("osparc.component.service.ServiceJumbo", {
     const text = serviceModel.getDescription ? serviceModel.getDescription() : "";
     const footer = serviceModel.getContact ? serviceModel.getContact() : "";
     this.base(arguments, label, text, icon, footer);
-    if (serviceModel != null) { // eslint-disable-line no-eq-null
+    if (serviceModel != null) {
       this.setServiceModel(serviceModel);
     }
   },

services/web/client/source/class/osparc/component/service/ServiceList.js

@@ -100,7 +100,7 @@ qx.Class.define("osparc.component.service.ServiceList", {
      * @return True if no item is selected, false if there one or more item selected.
      */
     isSelectionEmpty: function() {
-      if (this.__buttonGroup == null) { // eslint-disable-line no-eq-null
+      if (this.__buttonGroup == null) {
         return true;
       }
       return this.__buttonGroup.getSelection().length === 0;

services/web/client/source/class/osparc/component/service/manager/ActivityTree.js

@@ -215,8 +215,8 @@ qx.Class.define("osparc.component.service.manager.ActivityTree", {
                 const queued = activity[key].queued;
                 const limits = activity[key].limits;
                 if (stats) {
-                  row[4] = stats.cpuUsage == null ? null : (Math.round(stats.cpuUsage * 10) / 10) + (limits && limits.cpus ? `/${limits.cpus * 100}` : ""); // eslint-disable-line no-eq-null
-                  row[5] = stats.memUsage == null ? null : (Math.round(stats.memUsage * 10) / 10) + (limits && limits.mem ? `/${limits.mem}` : ""); // eslint-disable-line no-eq-null
+                  row[4] = stats.cpuUsage == null ? null : (Math.round(stats.cpuUsage * 10) / 10) + (limits && limits.cpus ? `/${limits.cpus * 100}` : "");
+                  row[5] = stats.memUsage == null ? null : (Math.round(stats.memUsage * 10) / 10) + (limits && limits.mem ? `/${limits.mem}` : "");
                   row[3] = this.tr("Running");
                 }
                 if (queued) {

services/web/client/source/class/osparc/component/widget/inputs/NodeOutputTree.js

@@ -151,7 +151,7 @@ qx.Class.define("osparc.component.widget.inputs.NodeOutputTree", {
           portData.open = true;
         } else {
           portData.icon = osparc.data.Converters.fromTypeToIcon(ports[portKey].type);
-          portData.value = ports[portKey].value == null ? this.tr("no value") : ports[portKey].value; // eslint-disable-line no-eq-null
+          portData.value = ports[portKey].value == null ? this.tr("no value") : ports[portKey].value;
         }
         data.children.push(portData);
       }

services/web/client/source/class/osparc/component/workbench/ServiceCatalog.js

@@ -261,7 +261,7 @@ qx.Class.define("osparc.component.workbench.ServiceCatalog", {
     },
 
     __onAddService: function(model) {
-      if (model == null && this.__serviceBrowser.isSelectionEmpty()) { // eslint-disable-line no-eq-null
+      if (model == null && this.__serviceBrowser.isSelectionEmpty()) {
         return;
       }
 

services/web/client/source/class/osparc/data/Resources.js

@@ -460,14 +460,14 @@ qx.Class.define("osparc.data.Resources", {
      */
     fetch: function(resource, endpoint, params = {}, deleteId) {
       return new Promise((resolve, reject) => {
-        if (this.self().resources[resource] == null) { // eslint-disable-line no-eq-null
+        if (this.self().resources[resource] == null) {
           reject(Error(`Error while fetching ${resource}: the resource is not defined`));
         }
 
         const resourceDefinition = this.self().resources[resource];
         const res = new osparc.io.rest.Resource(resourceDefinition.endpoints);
 
-        if (!res.includesRoute(endpoint)) { // eslint-disable-line no-eq-null
+        if (!res.includesRoute(endpoint)) {
           reject(Error(`Error while fetching ${resource}: the endpoint is not defined`));
         }
 

services/web/client/source/class/osparc/desktop/NavigationBar.js

@@ -327,7 +327,10 @@ qx.Class.define("osparc.desktop.NavigationBar", {
         this.tr("To create an issue in GitHub, you must have an account in GitHub and be already logged-in.")
       );
       const contBtn = new qx.ui.toolbar.Button(this.tr("Continue"), "@FontAwesome5Solid/external-link-alt/12");
-      contBtn.addListener("execute", () => window.open(osparc.component.widget.NewGHIssue.getNewIssueUrl()), this);
+      contBtn.addListener("execute", () => {
+        window.open(osparc.component.widget.NewGHIssue.getNewIssueUrl());
+        issueConfirmationWindow.close();
+      }, this);
       const loginBtn = new qx.ui.toolbar.Button(this.tr("Log in in GitHub"), "@FontAwesome5Solid/external-link-alt/12");
       loginBtn.addListener("execute", () => window.open("https://github.com/login"), this);
       issueConfirmationWindow.addButton(contBtn);

services/web/client/source/class/osparc/desktop/SidePanel.js

@@ -141,7 +141,7 @@ qx.Class.define("osparc.desktop.SidePanel", {
 
     __getSplitpaneContainer: function() {
       const splitpane = this.__getParentSplitpane();
-      if (splitpane == null) { // eslint-disable-line no-eq-null
+      if (splitpane == null) {
         return this;
       }
       let container = this;

services/web/client/source/class/osparc/file/FilesTree.js

@@ -466,7 +466,7 @@ qx.Class.define("osparc.file.FilesTree", {
     },
 
     __getFilesInTree: function(item, leaves) {
-      if (item.getChildren == null) { // eslint-disable-line no-eq-null
+      if (item.getChildren == null) {
         leaves.push(item);
       } else {
         for (let i=0; i<item.getChildren().length; i++) {

services/web/client/source/class/osparc/store/Store.js

@@ -243,7 +243,7 @@ qx.Class.define("osparc.store.Store", {
         this.reset(resources);
       } else {
         let propertyArray;
-        if (resources == null) { // eslint-disable-line no-eq-null
+        if (resources == null) {
           propertyArray = Object.keys(qx.util.PropertyUtil.getProperties(osparc.store.Store));
         } else if (Array.isArray(resources)) {
           propertyArray = resources;

services/web/client/source/class/osparc/ui/form/Jumbo.js

@@ -37,10 +37,10 @@ qx.Class.define("osparc.ui.form.Jumbo", {
       height: 90
     });
 
-    if (text != null) { // eslint-disable-line no-eq-null
+    if (text != null) {
       this.setText(text);
     }
-    if (footer != null) { // eslint-disable-line no-eq-null
+    if (footer != null) {
       this.setFooter(footer);
     }
   },

services/web/client/source/class/osparc/ui/hint/Hint.js

@@ -30,7 +30,7 @@ qx.Class.define("osparc.ui.hint.Hint", {
     this.__root.add(this);
 
     if (element) {
-      if (element.getContentElement().getDomElement() == null) { // eslint-disable-line no-eq-null
+      if (element.getContentElement().getDomElement() == null) {
         element.addListenerOnce("appear", () => this.setElement(element), this);
       } else {
         this.setElement(element);

services/web/client/source/class/osparc/ui/table/cellrenderer/Percentage.js

@@ -28,7 +28,7 @@ qx.Class.define("osparc.ui.table.cellrenderer.Percentage", {
   members: {
     // overridden
     _getContentHtml: function(cellInfo) {
-      if (cellInfo.value == null || cellInfo.value < 0) { // eslint-disable-line no-eq-null
+      if (cellInfo.value == null || cellInfo.value < 0) {
         return "";
       }
       const splitted = cellInfo.value.split("/");

services/web/client/source/class/osparc/ui/table/cellrenderer/Unit.js

@@ -23,7 +23,7 @@ qx.Class.define("osparc.ui.table.cellrenderer.Unit", {
   members: {
     // overridden
     _getContentHtml: function(cellInfo) {
-      if (cellInfo.value == null || cellInfo.value < 0) { // eslint-disable-line no-eq-null
+      if (cellInfo.value == null || cellInfo.value < 0) {
         return "";
       }
       return `${cellInfo.value} ${this.getUnit()}`;

tests/e2e/.gitignore

@@ -0,0 +1,3 @@
+# coverage and screenshots for e2e testing
+coverage/
+screenshots/

tests/e2e/README.md

@@ -0,0 +1,32 @@
+## To run the tests locally
+```bash
+cd tests/e2e
+npm install
+npm test
+```
+## To debug the tests locally with VSCode
+Add the following configuration to your local ``launch.json``:
+```json
+{
+  "type": "node",
+  "request": "launch",
+  "name": "Debug e2e tests",
+  "runtimeArgs": [
+    "--inspect-brk",
+    "${workspaceRoot}/tests/e2e/node_modules/.bin/jest",
+    "--runInBand",
+    "--colors"
+  ],
+  "cwd": "${workspaceFolder}/tests/e2e",
+  "restart": true,
+  "console": "integratedTerminal",
+  "internalConsoleOptions": "neverOpen",
+  "port": 9229
+}
+```
+Now you can run the tests by clicking on the Play button, using that configuration. It should allow you to insert breakpoints and inspect variables.
+## To run the tutorials
+```bash
+cd tests/e2e
+node tutorials/<tutorial>.js [<user> <password>]
+```

tests/e2e/tests/register.test.js

@@ -10,7 +10,7 @@ beforeAll(async () => {
   await page.goto(url);
 }, ourTimeout);
 
-test('Register, Log In and Log Out', async () => {
+test('Register and Log Out', async () => {
   page.on('response', async response => {
     if (response.url().endsWith("/config")) {
       try {
@@ -55,6 +55,6 @@ test('Register, Log In and Log Out', async () => {
       }
     }
   });
-  await auto.logIn(page, user, pass);
+
   await auto.logOut(page);
 }, 30000);

tests/e2e/tests/startupCalls.test.js

@@ -8,18 +8,15 @@ const {
 
 beforeAll(async () => {
   await page.goto(url);
-
   await auto.register(page, user, pass);
-  await auto.logIn(page, user, pass);
+  await page.waitFor(1000);
 }, ourTimeout);
 
 afterAll(async () => {
   await auto.logOut(page);
 }, ourTimeout);
 
 describe('Calls after logging in', () => {
-  page.waitFor(1000);
-
   test('Profile', async () => {
     const responseEnv = await utils.fetch('me');
     expect(responseEnv.data["login"]).toBe(user);

tests/e2e/tutorials/sleepers.js

@@ -6,7 +6,7 @@ const tutorialBase = require('./tutorialBase');
 
 const args = process.argv.slice(2);
 if (args.length < 1) {
-  console.log('More arguments expented');
+  console.log('More arguments expected');
   process.exit(1);
 }
 const url = args[0];
@@ -24,8 +24,10 @@ async function runTutorial () {
   await tutorial.beforeScript();
   await tutorial.goTo();
 
-  await tutorial.registerIfNeeded();
-  await tutorial.login();
+  const needsRegister = await tutorial.registerIfNeeded();
+  if (!needsRegister) {
+    await tutorial.login();
+  }
   await tutorial.openTemplate(1000);
 
   // Some time for loading the workbench