🎨 [e2e frontend] Navigation Bar and User Menu (#6603)

Author: odeimaiz

.eslintrc.json

@@ -23,7 +23,7 @@
     "block-scoped-var": "warn",
     "brace-style": [
       "warn",
-      "stroustrup"
+      "1tbs"
     ],
     "indent": [
       "warn",

services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js

@@ -288,7 +288,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
       this.__listenToNoMoreCreditsEvents();
       this.__listenToEvent();
       this.__listenToServiceStatus();
-      this.__listenToStateInputPorts();
+      this.__listenToStatePorts();
     },
 
     __listenToLogger: function() {
@@ -436,7 +436,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
       }
     },
 
-    __listenToStateInputPorts: function() {
+    __listenToStatePorts: function() {
       const socket = osparc.wrapper.WebSocket.getInstance();
       if (!socket.slotExists("stateInputPorts")) {
         socket.on("stateInputPorts", data => {

services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationsList.js

@@ -126,6 +126,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
         height: 150,
         width: 150
       });
+      osparc.utils.Utils.setIdToWidget(orgsUIList, "organizationsList");
       orgsUIList.addListener("changeSelection", e => this.__organizationSelected(e.getData()), this);
 
       const orgsModel = this.__orgsModel = new qx.data.Array();
@@ -143,6 +144,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
         },
         configureItem: item => {
           item.subscribeToFilterGroup("organizationsList");
+          osparc.utils.Utils.setIdToWidget(item, "organizationListItem");
           const thumbnail = item.getChildControl("thumbnail");
           thumbnail.getContentElement()
             .setStyles({

services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationsWindow.js

@@ -31,6 +31,10 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsWindow", {
       appearance: "service-window"
     });
 
+    osparc.utils.Utils.setIdToWidget(this, "organizationsWindow");
+    const closeBtn = this.getChildControl("close-button");
+    osparc.utils.Utils.setIdToWidget(closeBtn, "organizationsWindowCloseBtn");
+
     this.__buildLayout();
   },
 

services/static-webserver/client/source/class/osparc/navigation/UserMenu.js

@@ -37,6 +37,7 @@ qx.Class.define("osparc.navigation.UserMenu", {
           break;
         case "theme-switcher":
           control = new osparc.ui.switch.ThemeSwitcherMenuBtn();
+          osparc.utils.Utils.setIdToWidget(control, "userMenuThemeSwitcherBtn");
           this.add(control);
           break;
         case "log-in":
@@ -46,6 +47,7 @@ qx.Class.define("osparc.navigation.UserMenu", {
           break;
         case "user-center":
           control = new qx.ui.menu.Button(this.tr("My Account"));
+          osparc.utils.Utils.setIdToWidget(control, "userMenuMyAccountBtn");
           control.addListener("execute", () => osparc.desktop.account.MyAccountWindow.openWindow(), this);
           this.add(control);
           break;
@@ -80,6 +82,7 @@ qx.Class.define("osparc.navigation.UserMenu", {
           control = new qx.ui.menu.Button(this.tr("Organizations")).set({
             visibility: osparc.data.Permissions.getInstance().canDo("user.organizations.create") ? "visible" :"excluded"
           });
+          osparc.utils.Utils.setIdToWidget(control, "userMenuOrganizationsBtn");
           control.addListener("execute", () => osparc.desktop.organizations.OrganizationsWindow.openWindow(), this);
           this.add(control);
           break;
@@ -97,12 +100,13 @@ qx.Class.define("osparc.navigation.UserMenu", {
           break;
         case "about":
           control = new qx.ui.menu.Button(this.tr("About oSPARC"));
-          control.addListener("execute", () => osparc.About.getInstance().open());
           osparc.utils.Utils.setIdToWidget(control, "userMenuAboutBtn");
+          control.addListener("execute", () => osparc.About.getInstance().open());
           this.add(control);
           break;
         case "about-product": {
           control = new qx.ui.menu.Button(this.tr("About Product"));
+          osparc.utils.Utils.setIdToWidget(control, "userMenuAboutProductBtn");
           const displayName = osparc.store.StaticInfo.getInstance().getDisplayName();
           control.getChildControl("label").setRich(true);
           control.setLabel(this.tr("About ") + displayName);

services/static-webserver/client/source/class/osparc/ui/list/ListItem.js

@@ -207,7 +207,9 @@ qx.Class.define("osparc.ui.list.ListItem", {
       }
       const parts = value.split("/");
       const id = parts.pop();
-      osparc.utils.Utils.setIdToWidget(this, "serviceBrowserListItem_"+id);
+      if (osparc.utils.Utils.getIdFromWidget(this) === null) {
+        osparc.utils.Utils.setIdToWidget(this, "listItem_"+id);
+      }
     },
 
     _applyThumbnail: function(value) {

services/static-webserver/client/source/class/osparc/utils/Utils.js

@@ -1026,6 +1026,13 @@ qx.Class.define("osparc.utils.Utils", {
       }
     },
 
+    getIdFromWidget: qWidget => {
+      if (qWidget.getContentElement) {
+        return qWidget.getContentElement().getAttribute("osparc-test-id");
+      }
+      return null;
+    },
+
     setMoreToWidget: (qWidget, id) => {
       if (qWidget.getContentElement) {
         qWidget.getContentElement().setAttribute("osparc-test-more", id);

tests/e2e-frontend/Makefile

@@ -10,5 +10,5 @@ run-tests-headed: install-dev ## run tests headed (you can see what's going on)
 	npx playwright test --headed
 
 .PHONY: run-tests-ui
-run-tests-ui: install-dev ## run tests headed with an assistance GUI
+run-tests-ui: install-dev ## starts a GUI where tests can be launched
 	npx playwright test --ui

tests/e2e-frontend/tests/init/statics.spec.js

@@ -18,13 +18,17 @@ const expectedStatics = {
     "isPaymentEnabled": true
   },
   "s4llite": {
-    "displayName": "<i>S4L<sup>lite</sup></i>",
+    "displayName": "Sim4Life.lite",
     "isPaymentEnabled": false
   },
   "tis": {
     "displayName": "TI Planning Tool",
     "isPaymentEnabled": true
   },
+  "tiplite": {
+    "displayName": "TI Planning Tool lite",
+    "isPaymentEnabled": true
+  },
 };
 
 for (const product in products) {

tests/e2e-frontend/tests/login/invitationRequired.spec.js

@@ -4,27 +4,38 @@ const { test, expect } = require('@playwright/test');
 
 import products from '../products.json';
 
-const expectedCreateAccountLabel = {
-  "osparc": "Create Account",
-  "s4l": "Request Account",
-  "s4lacad": "Request Account",
-  "s4llite": "Request Account",
-  "tis": "Request Account"
-};
-
-const expectedActionOnCreateAccount = {
-  "osparc": "registrationSubmitBtn",
-  "s4l": "registrationSubmitBtn",
-  "s4lacad": "registrationSubmitBtn",
-  "s4llite": "createAccountWindow",
-  "tis": "createAccountWindow"
+const expectedLogin = {
+  "osparc": {
+    "label": "Request Account",
+    "afterClicking": "registrationSubmitBtn",
+  },
+  "s4l": {
+    "label": "Request Account",
+    "afterClicking": "registrationSubmitBtn",
+  },
+  "s4lacad": {
+    "label": "Request Account",
+    "afterClicking": "registrationSubmitBtn",
+  },
+  "s4llite": {
+    "label": "Request Account",
+    "afterClicking": "createAccountWindow",
+  },
+  "tis": {
+    "label": "Request Account",
+    "afterClicking": "registrationSubmitBtn",
+  },
+  "tiplite": {
+    "label": "Request Account",
+    "afterClicking": "registrationSubmitBtn",
+  },
 };
 
 for (const product in products) {
   test(`Invitation required text in ${product}`, async ({ page }) => {
-    expect(expectedCreateAccountLabel[product]).toBeDefined();
+    expect(expectedLogin[product]["label"]).toBeDefined();
 
-    const expectedLabel = expectedCreateAccountLabel[product];
+    const expectedLabel = expectedLogin[product]["label"];
     await page.goto(products[product]);
 
     const button = page.getByTestId("loginCreateAccountBtn");
@@ -33,14 +44,14 @@ for (const product in products) {
   });
 
   test(`Callback action on Create Account ${product}`, async ({ page }) => {
-    expect(expectedActionOnCreateAccount[product]).toBeDefined();
+    expect(expectedLogin[product]["afterClicking"]).toBeDefined();
 
     await page.goto(products[product]);
 
     const button = page.getByTestId("loginCreateAccountBtn");
     button.click();
 
-    const expectedWidget = page.getByTestId(expectedActionOnCreateAccount[product]);
+    const expectedWidget = page.getByTestId(expectedLogin[product]["afterClicking"]);
     await expect(expectedWidget).toBeVisible();
   });
 }