🎨 [e2e-frontend] Check study browser

services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js

@@ -65,6 +65,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     /* WORKSPACES AND FOLDERS */
     __createWorkspacesAndFoldersTree: function() {
       const workspacesAndFoldersTree = this.__workspacesAndFoldersTree = new osparc.dashboard.WorkspacesAndFoldersTree();
+      osparc.utils.Utils.setIdToWidget(workspacesAndFoldersTree, "contextTree");
       // Height needs to be calculated manually to make it flexible
       workspacesAndFoldersTree.set({
         minHeight: 60,
@@ -137,6 +138,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     /* TAGS */
     __createTagsFilterLayout: function() {
       const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+      osparc.utils.Utils.setIdToWidget(layout, "tagsFilter");
 
       this.__populateTags(layout, []);
       osparc.store.Store.getInstance().addListener("changeTags", () => {
@@ -157,6 +159,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
       layout.removeAll();
       osparc.store.Store.getInstance().getTags().forEach((tag, idx) => {
         const button = new qx.ui.form.ToggleButton(tag.name, "@FontAwesome5Solid/tag/18");
+        osparc.utils.Utils.setIdToWidget(button, "tagFilterItem");
         button.id = tag.id;
         button.set({
           appearance: "filter-toggle-button",

services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTreeItem.js

@@ -32,6 +32,8 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTreeItem", {
 
     this.setNotHoveredStyle();
     this.__attachEventHandlers();
+
+    osparc.utils.Utils.setIdToWidget(this, "workspacesAndFoldersTreeItem");
   },
 
   members: {

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

@@ -116,6 +116,7 @@ qx.Class.define("osparc.navigation.UserMenu", {
         }
         case "license":
           control = new qx.ui.menu.Button(this.tr("License"));
+          osparc.utils.Utils.setIdToWidget(control, "userMenuLicenseBtn");
           osparc.store.Support.getLicenseURL()
             .then(licenseURL => control.addListener("execute", () => window.open(licenseURL)));
           this.add(control);

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

@@ -1033,9 +1033,9 @@ qx.Class.define("osparc.utils.Utils", {
       return null;
     },
 
-    setMoreToWidget: (qWidget, id) => {
+    setKeyToWidget: (qWidget, id) => {
       if (qWidget.getContentElement) {
-        qWidget.getContentElement().setAttribute("osparc-test-more", id);
+        qWidget.getContentElement().setAttribute("osparc-test-key", id);
       }
     },
 

services/static-webserver/client/source/class/osparc/widget/NodeTreeItem.js

@@ -107,7 +107,7 @@ qx.Class.define("osparc.widget.NodeTreeItem", {
 
     __applyStudy: function(study) {
       const label = this.getChildControl("label");
-      osparc.utils.Utils.setMoreToWidget(label, "root");
+      osparc.utils.Utils.setKeyToWidget(label, "root");
 
       study.bind("name", this, "toolTipText");
 
@@ -116,7 +116,7 @@ qx.Class.define("osparc.widget.NodeTreeItem", {
 
     __applyNode: function(node) {
       const label = this.getChildControl("label");
-      osparc.utils.Utils.setMoreToWidget(label, node.getNodeId());
+      osparc.utils.Utils.setKeyToWidget(label, node.getNodeId());
 
       node.bind("label", this, "toolTipText");
 

tests/e2e-frontend/tests/fixtures/loginPage.js

@@ -17,13 +17,19 @@ export class LoginPage {
    * @param {string} password
    */
   async login(email, password) {
+    await this.page.goto(this.productUrl);
+
     const usernameField = this.page.getByTestId("loginUserEmailFld");
     const passwordField = this.page.getByTestId("loginPasswordFld");
     const submitButton = this.page.getByTestId("loginSubmitBtn");
 
     await usernameField.fill(email);
     await passwordField.fill(password);
     await submitButton.click();
+
+    const response = await this.page.waitForResponse('**/me');
+    const meData = await response.json();
+    return meData["data"]["role"];
   }
 
   async logout() {

tests/e2e-frontend/tests/navigationBar/navigationBar.spec.js

@@ -153,15 +153,9 @@ for (const product in products) {
 
         test.beforeAll(async ({ browser }) => {
           page = await browser.newPage();
-
           loginPageFixture = new LoginPage(page, productUrl);
-          await loginPageFixture.goto();
-
-          await loginPageFixture.login(user.email, user.password);
-
-          const response = await page.waitForResponse('**/me');
-          const meData = await response.json();
-          expect(meData["data"]["role"]).toBe(role);
+          const role = await loginPageFixture.login(user.email, user.password);
+          expect(role).toBe(user.role);
         });
 
         test.afterAll(async ({ browser }) => {

tests/e2e-frontend/tests/studyBrowser/leftFilters.spec.js

@@ -0,0 +1,54 @@
+/* eslint-disable no-undef */
+
+const { test, expect } = require('@playwright/test');
+
+import { LoginPage } from '../fixtures/loginPage';
+
+import products from '../products.json';
+import users from '../users.json';
+
+const product = "osparc";
+const productUrl = products[product];
+const user = users[product][0];
+
+test.describe.serial(`Left Filters:`, () => {
+  let page = null;
+  let loginPageFixture = null;
+
+  test.beforeAll(async ({ browser }) => {
+    page = await browser.newPage();
+    loginPageFixture = new LoginPage(page, productUrl);
+    const role = await loginPageFixture.login(user.email, user.password);
+    expect(role).toBe(user.role);
+  });
+
+  test.afterAll(async ({ browser }) => {
+    await loginPageFixture.logout();
+    await page.close();
+    await browser.close();
+  });
+
+  test(`Context`, async () => {
+    const contextTree = page.getByTestId("contextTree");
+    await expect(contextTree).toBeVisible({
+      timeout: 30000 // it will take some time to load the Study Browser
+    });
+
+    const workspacesAndFoldersTreeItems = page.getByTestId("workspacesAndFoldersTreeItem");
+    const count = await workspacesAndFoldersTreeItems.count();
+    // at least two: My Workspace and Shared Workspaces
+    expect(count > 1).toBeTruthy();
+  });
+
+  test(`Tags`, async () => {
+    const tagsFilter = page.getByTestId("tagsFilter");
+    await expect(tagsFilter).toBeVisible({
+      timeout: 30000 // it will take some time to load the Study Browser
+    });
+
+    const tagFilterItems = page.getByTestId("tagFilterItem");
+    const count = await tagFilterItems.count();
+    // at least two and less than 6 (max five are shown)
+    expect(count > 1 && count < 6).toBeTruthy();
+  });
+});

tests/e2e-frontend/tests/studyBrowser/mainView.spec.js

@@ -0,0 +1,81 @@
+/* eslint-disable no-undef */
+
+const { test, expect } = require('@playwright/test');
+
+import { LoginPage } from '../fixtures/loginPage';
+
+import products from '../products.json';
+import users from '../users.json';
+
+const expectedElements = {
+  "osparc": {
+    "plusButton": {
+      "id": "newStudyBtn",
+    },
+  },
+  "s4l": {
+    "plusButton": {
+      "id": "startS4LButton",
+    },
+  },
+  "s4lacad": {
+    "plusButton": {
+      "id": "startS4LButton",
+    },
+  },
+  "s4llite": {
+    "plusButton": {
+      "id": "startS4LButton",
+    },
+  },
+  "tis": {
+    "plusButton": {
+      "id": "newStudyBtn",
+    },
+  },
+  "tiplite": {
+    "plusButton": {
+      "id": "newStudyBtn",
+    },
+  },
+};
+
+for (const product in products) {
+  if (product in users) {
+    const productUrl = products[product];
+    const productUsers = users[product];
+    for (const user of productUsers) {
+      // expected roles for users: "USER"
+      const role = "USER";
+      expect(user.role).toBe(role);
+
+      test.describe.serial(`Main View: ${product}`, () => {
+        let page = null;
+        let loginPageFixture = null;
+
+        test.beforeAll(async ({ browser }) => {
+          page = await browser.newPage();
+          loginPageFixture = new LoginPage(page, productUrl);
+          const role = await loginPageFixture.login(user.email, user.password);
+          expect(role).toBe(user.role);
+        });
+
+        test.afterAll(async ({ browser }) => {
+          await loginPageFixture.logout();
+          await page.close();
+          await browser.close();
+        });
+
+        test(`Plus button`, async () => {
+          expect(expectedElements[product]["plusButton"]).toBeDefined();
+
+          const plusButtonId = expectedElements[product]["plusButton"]["id"];
+          const plusButton = page.getByTestId(plusButtonId);
+          await expect(plusButton).toBeVisible({
+            timeout: 30000 // it will take some time to load the Study Browser
+          });
+        });
+      });
+    }
+  }
+}

tests/e2e-frontend/tests/userMenu/userMenuButtons.spec.js

@@ -16,6 +16,7 @@ const userMenuButtons = {
     "userMenuThemeSwitcherBtn": true,
     "userMenuAboutBtn": true,
     "userMenuAboutProductBtn": true,
+    "userMenuLicenseBtn": true,
     "userMenuAccessTIPBtn": false,
     "userMenuLogoutBtn": true,
   },
@@ -27,6 +28,7 @@ const userMenuButtons = {
     "userMenuThemeSwitcherBtn": true,
     "userMenuAboutBtn": true,
     "userMenuAboutProductBtn": true,
+    "userMenuLicenseBtn": true,
     "userMenuAccessTIPBtn": false,
     "userMenuLogoutBtn": true,
   },
@@ -38,6 +40,7 @@ const userMenuButtons = {
     "userMenuThemeSwitcherBtn": true,
     "userMenuAboutBtn": true,
     "userMenuAboutProductBtn": true,
+    "userMenuLicenseBtn": true,
     "userMenuAccessTIPBtn": false,
     "userMenuLogoutBtn": true,
   },
@@ -49,6 +52,7 @@ const userMenuButtons = {
     "userMenuThemeSwitcherBtn": true,
     "userMenuAboutBtn": true,
     "userMenuAboutProductBtn": true,
+    "userMenuLicenseBtn": true,
     "userMenuAccessTIPBtn": false,
     "userMenuLogoutBtn": true,
   },
@@ -60,6 +64,7 @@ const userMenuButtons = {
     "userMenuThemeSwitcherBtn": true,
     "userMenuAboutBtn": true,
     "userMenuAboutProductBtn": true,
+    "userMenuLicenseBtn": true,
     "userMenuAccessTIPBtn": false,
     "userMenuLogoutBtn": true,
   },
@@ -71,6 +76,7 @@ const userMenuButtons = {
     "userMenuThemeSwitcherBtn": true,
     "userMenuAboutBtn": true,
     "userMenuAboutProductBtn": true,
+    "userMenuLicenseBtn": true,
     "userMenuAccessTIPBtn": true,
     "userMenuLogoutBtn": true,
   },
@@ -108,15 +114,9 @@ for (const product in products) {
 
         test.beforeAll(async ({ browser }) => {
           page = await browser.newPage();
-
           loginPageFixture = new LoginPage(page, productUrl);
-          await loginPageFixture.goto();
-
-          await loginPageFixture.login(user.email, user.password);
-
-          const response = await page.waitForResponse('**/me');
-          const meData = await response.json();
-          expect(meData["data"]["role"]).toBe(role);
+          const role = await loginPageFixture.login(user.email, user.password);
+          expect(role).toBe(user.role);
         });
 
         test.afterAll(async ({ browser }) => {

tests/e2e-frontend/tests/userMenu/userMenuWindows.spec.js

@@ -9,23 +9,17 @@ import users from '../users.json';
 
 const product = "osparc";
 const productUrl = products[product];
-const user = users[product];
+const user = users[product][0];
 
 test.describe.serial(`User Menu Windows: ${product}`, () => {
   let page = null;
   let loginPageFixture = null;
 
   test.beforeAll(async ({ browser }) => {
     page = await browser.newPage();
-
     loginPageFixture = new LoginPage(page, productUrl);
-    await loginPageFixture.goto();
-
-    await loginPageFixture.login(user.email, user.password);
-
-    const response = await page.waitForResponse('**/me');
-    const meData = await response.json();
-    expect(meData["data"]["role"]).toBe(user.role);
+    const role = await loginPageFixture.login(user.email, user.password);
+    expect(role).toBe(user.role);
   });
 
   test.afterAll(async ({ browser }) => {
@@ -51,4 +45,18 @@ test.describe.serial(`User Menu Windows: ${product}`, () => {
     // close window
     await page.getByTestId("organizationsWindowCloseBtn").click();
   });
+
+  test(`License pop up`, async () => {
+    // open user menu
+    await page.getByTestId("userMenuBtn").click();
+
+    // open license in new tab
+    await page.getByTestId("userMenuLicenseBtn").click();
+    const newTabPromise = page.waitForEvent("popup");
+    const newTab = await newTabPromise;
+    await newTab.waitForLoadState();
+
+    // close tab
+    await newTab.close();
+  });
 });

tests/e2e/utils/auto.js

@@ -334,7 +334,7 @@ async function openNode(page, pos) {
   }
 
   const nodeId = children[pos];
-  const childId = '[osparc-test-more="' + nodeId + '"]';
+  const childId = '[osparc-test-key="' + nodeId + '"]';
   await utils.waitAndClick(page, childId);
 
   return nodeId;

tests/e2e/utils/utils.js

@@ -231,7 +231,7 @@ async function getNodeTreeItemIDs(page) {
     const children = [];
     const nodeTreeItems = document.querySelectorAll(selector);
     nodeTreeItems.forEach(nodeTreeItem => {
-      const nodeId = nodeTreeItem.getAttribute("osparc-test-more")
+      const nodeId = nodeTreeItem.getAttribute("osparc-test-key")
       if (nodeId !== "root") {
         children.push(nodeId);
       }