🎨 [e2e-frontend] Service browser (#6664)

Author: odeimaiz

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

@@ -22,7 +22,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
   construct: function(resourceType) {
     this.base(arguments);
 
-    osparc.utils.Utils.setIdToWidget(this, "resourceFilter");
+    osparc.utils.Utils.setIdToWidget(this, resourceType + "-resourceFilter");
 
     this.__resourceType = resourceType;
     this.__sharedWithButtons = [];
@@ -102,6 +102,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
           label: option.label,
           icon: option.icon,
         });
+        osparc.utils.Utils.setIdToWidget(button, this.__resourceType + "-sharedWithFilterItem");
         if (this.__resourceType === "study") {
           if (option.id === "show-all") {
             button.set({
@@ -138,7 +139,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");
+      osparc.utils.Utils.setIdToWidget(layout, this.__resourceType + "-tagsFilter");
 
       this.__populateTags(layout, []);
       osparc.store.Store.getInstance().addListener("changeTags", () => {
@@ -159,7 +160,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");
+        osparc.utils.Utils.setIdToWidget(button, this.__resourceType + "-tagFilterItem");
         button.id = tag.id;
         button.set({
           appearance: "filter-toggle-button",
@@ -220,6 +221,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
         const iconSize = 20;
         const button = new qx.ui.toolbar.RadioButton(serviceType.label, serviceType.icon+iconSize);
         button.id = serviceId;
+        osparc.utils.Utils.setIdToWidget(button, this.__resourceType + "-serviceTypeFilterItem");
         button.set({
           appearance: "filter-toggle-button",
           value: false

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

@@ -0,0 +1,64 @@
+/* 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();
+
+    const responsePromise = page.waitForResponse('**/services/-/latest**', {
+      timeout: 30000
+    });
+
+    loginPageFixture = new LoginPage(page, productUrl);
+    const role = await loginPageFixture.login(user.email, user.password);
+    expect(role).toBe(user.role);
+
+    await responsePromise;
+
+    await page.getByTestId("servicesTabBtn").click();
+  });
+
+  test.afterAll(async ({ browser }) => {
+    await loginPageFixture.logout();
+    await page.close();
+    await browser.close();
+  });
+
+  test(`Filters`, async () => {
+    const sharedWithButtons = page.getByTestId("service-sharedWithFilterItem");
+    await expect(sharedWithButtons.first()).toBeVisible({
+      timeout: 30000 // it will take some time to load the Study Browser
+    });
+
+    const countSharedWithButtons = await sharedWithButtons.count();
+    // All Services
+    // My Services
+    // Shared with Me
+    // Shared with Everyone
+    expect(countSharedWithButtons === 4).toBeTruthy();
+
+
+    const serviceTypeButtons = page.getByTestId("service-serviceTypeFilterItem");
+    await expect(serviceTypeButtons.first()).toBeVisible({
+      timeout: 30000 // it will take some time to load the Study Browser
+    });
+
+    const countServiceTypeButtons = await serviceTypeButtons.count();
+    // Computational
+    // Interactive
+    expect(countServiceTypeButtons === 2).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,88 @@
+/* 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 servicesTabExposed = {
+  "osparc": {
+    "areServicesExposed": true,
+  },
+  "s4l": {
+    "areServicesExposed": true,
+  },
+  "s4lacad": {
+    "areServicesExposed": true,
+  },
+  "s4llite": {
+    "areServicesExposed": false,
+  },
+  "tis": {
+    "areServicesExposed": false,
+  },
+  "tiplite": {
+    "areServicesExposed": false,
+  },
+}
+
+for (const product in products) {
+  expect(servicesTabExposed[product]).toBeDefined();
+  if (!servicesTabExposed[product]["areServicesExposed"]) {
+    continue;
+  }
+
+  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();
+
+          const responsePromise = page.waitForResponse('**/services/-/latest**', {
+            timeout: 30000
+          });
+
+          loginPageFixture = new LoginPage(page, productUrl);
+          const role = await loginPageFixture.login(user.email, user.password);
+          expect(role).toBe(user.role);
+
+          const response = await responsePromise;
+          const resp = await response.json();
+          expect("data" in resp && "_meta" in resp["data"] && "total" in resp["data"]["_meta"]);
+          console.log("N Services in Response:", resp["data"]["_meta"]["total"]);
+
+          await page.getByTestId("servicesTabBtn").click();
+        });
+
+        test.afterAll(async ({ browser }) => {
+          await loginPageFixture.logout();
+          await page.close();
+          await browser.close();
+        });
+
+        test(`Services list`, async () => {
+          const servicesList = page.getByTestId("servicesList");
+          await expect(servicesList).toBeVisible({
+            timeout: 30000
+          });
+
+          const serviceCards = servicesList.locator(':scope > *');
+          const count = await serviceCards.count();
+          console.log("N Services listed", count);
+          expect(count > 0);
+        });
+      });
+    }
+  }
+}

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

@@ -41,12 +41,12 @@ test.describe.serial(`Left Filters:`, () => {
   });
 
   test(`Tags`, async () => {
-    const tagsFilter = page.getByTestId("tagsFilter");
+    const tagsFilter = page.getByTestId("study-tagsFilter");
     await expect(tagsFilter).toBeVisible({
       timeout: 30000 // it will take some time to load the Study Browser
     });
 
-    const tagFilterItems = page.getByTestId("tagFilterItem");
+    const tagFilterItems = page.getByTestId("study-tagFilterItem");
     const count = await tagFilterItems.count();
     // at least two and less than 6 (max five are shown)
     expect(count > 1 && count < 6).toBeTruthy();