chore(e2e-test): [Test automation] Verify global floating action button , application provider and listener (#2405)

debsmita1 · web-flow · commit 5dd743cecace · 2025-02-24T19:47:51.000Z
* chore(e2e-test): [Test automation] Verify global floating action button

* e2e tests to verify application provider and listener
diff --git a/.ibm/pipelines/resources/config_map/dynamic-global-floating-action-button-config.yaml b/.ibm/pipelines/resources/config_map/dynamic-global-floating-action-button-config.yaml
@@ -0,0 +1,44 @@
+dynamicPlugins:
+  rootDirectory: dynamic-plugins-root
+  frontend:
+    red-hat-developer-hub.backstage-plugin-global-floating-action-button:
+      mountPoints:
+        - mountPoint: application/listener
+          importName: DynamicGlobalFloatingActionButton
+        - mountPoint: global.floatingactionbutton/config
+          importName: NullComponent
+          config:
+            icon: github
+            label: 'Git'
+            showLabel: true
+            toolTip: 'Github'
+            to: https://github.com/redhat-developer/rhdh
+        - mountPoint: global.floatingactionbutton/config
+          importName: NullComponent
+          config:
+            icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>'
+            label: 'Quay'
+            showLabel: true
+            toolTip: 'Quay'
+            to: 'https://quay.io'
+            visibleOnPaths: ['/catalog']
+    red-hat-developer-hub.backstage-plugin-bulk-import:
+      mountPoints:
+        - mountPoint: global.floatingactionbutton/config
+          importName: BulkImportPage
+          config:
+            slot: 'bottom-left'
+            icon: bulkImportIcon
+            label: 'Bulk import'
+            toolTip: 'Register multiple repositories in bulk'
+            to: /bulk-import/repositories
+            excludeOnPaths: ['/catalog']
+      appIcons:
+        - name: bulkImportIcon
+          importName: BulkImportIcon
+      dynamicRoutes:
+        - path: /bulk-import/repositories
+          importName: BulkImportPage
+          menuItem:
+            icon: bulkImportIcon
+            text: Bulk import
diff --git a/.ibm/pipelines/resources/config_map/dynamic-homepage-and-sidebar-config.yaml b/.ibm/pipelines/resources/config_map/dynamic-homepage-and-sidebar-config.yaml
@@ -3,6 +3,8 @@ dynamicPlugins:
   frontend:
     red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
+        - mountPoint: application/listener
+          importName: VisitListener
         - mountPoint: home.page/cards
           importName: SearchBar
           config:
@@ -143,6 +145,27 @@ dynamicPlugins:
           importName: FeaturedDocsCard
         - mountPoint: home.page/cards
           importName: JokeCard
+        - mountPoint: home.page/cards
+          importName: RecentlyVisitedCard
+          config:
+            layouts:
+              xl: { w: 6, h: 4, x: 6 }
+              lg: { w: 6, h: 4, x: 6 }
+              md: { w: 6, h: 4, x: 6 }
+              sm: { w: 6, h: 4, x: 6 }
+              xs: { w: 6, h: 4, x: 6 }
+              xxs: { w: 6, h: 4, x: 6 }
+        - mountPoint: home.page/cards
+          importName: TopVisitedCard
+          config:
+            layouts:
+              xl: { w: 6, h: 4 }
+              lg: { w: 6, h: 4 }
+              md: { w: 6, h: 4 }
+              sm: { w: 6, h: 4 }
+              xs: { w: 6, h: 4 }
+              xxs: { w: 6, h: 4 }
+        
     default.main-menu-items:
       menuItems:
         default.list:
diff --git a/.ibm/pipelines/utils.sh b/.ibm/pipelines/utils.sh
@@ -526,6 +526,12 @@ apply_yaml_files() {
 
     oc apply -f "$dir/auth/secrets-rhdh-secrets.yaml" --namespace="${project}"
 
+    # configuration for testing global floating action button.
+    oc create configmap dynamic-global-floating-action-button-config \
+      --from-file="dynamic-global-floating-action-button-config.yaml"="$dir/resources/config_map/dynamic-global-floating-action-button-config.yaml" \
+      --namespace="${project}" \
+      --dry-run=client -o yaml | oc apply -f -
+
     # Create Pipeline run for tekton test case.
     oc apply -f "$dir/resources/pipeline-run/hello-world-pipeline.yaml"
     oc apply -f "$dir/resources/pipeline-run/hello-world-pipeline-run.yaml"
diff --git a/.ibm/pipelines/value_files/values_showcase.yaml b/.ibm/pipelines/value_files/values_showcase.yaml
@@ -30,6 +30,29 @@ global:
                       minutes: 1
                     initialDelay:
                       seconds: 15
+      - package: '@red-hat-developer-hub/backstage-plugin-application-provider-test@0.0.2'
+        integrity: 'sha512-N3HxvTNe/CxTDtXIsvfre3ZoFLWYfPxz/IJiKY3nzA5C0wcH4lZn+fI+mDFoTUXogt7fZWyl3mCrdwQWrOEM8A=='
+        pluginConfig:
+          dynamicPlugins:
+            frontend:
+              red-hat-developer-hub.backstage-plugin-application-provider-test:
+                dynamicRoutes:
+                  - path: /application-provider-test-page
+                    importName: TestPage
+                mountPoints:
+                  - mountPoint: application/provider
+                    importName: TestProviderOne
+                  - mountPoint: application/provider
+                    importName: TestProviderTwo
+      - package: '@red-hat-developer-hub/backstage-plugin-application-listener-test@0.0.2'
+        integrity: 'sha512-GRLbpjXE9ZyfRJr/iyp+1L2sUQL97aPc+FV/IORH63eGT32Uc0xCFBu51fGPYJFmXY49BlSh+CnVnbKNsyiOAQ=='
+        pluginConfig:
+          dynamicPlugins:
+            frontend:
+              red-hat-developer-hub.backstage-plugin-application-listener-test:
+                mountPoints:
+                  - mountPoint: application/listener
+                    importName: LocationListener
       - package: ./dynamic-plugins/dist/backstage-plugin-catalog-backend-module-github-org-dynamic
         disabled: false
       - package: ./dynamic-plugins/dist/backstage-community-plugin-github-issues
@@ -136,6 +159,8 @@ global:
         disabled: false
       - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-marketplace
         disabled: false
+      - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
+        disabled: false
 
 # -- Upstream Backstage [chart configuration](https://github.com/backstage/charts/blob/main/charts/backstage/values.yaml)
 upstream:
@@ -169,6 +194,8 @@ upstream:
         filename: app-config-rhdh.yaml
       - configMapRef: dynamic-homepage-and-sidebar-config
         filename: dynamic-homepage-and-sidebar-config.yaml
+      - configMapRef: dynamic-global-floating-action-button-config
+        filename: dynamic-global-floating-action-button-config.yaml
     startupProbe:
       # This gives enough time upon container startup before the liveness and readiness probes are triggered.
       # Giving (120s = initialDelaySeconds + failureThreshold * periodSeconds) to account for the worst case scenario.
diff --git a/dynamic-plugins/_utils/src/wrappers.test.ts b/dynamic-plugins/_utils/src/wrappers.test.ts
@@ -116,7 +116,10 @@ function validateDynamicPluginsConfig(
 ): void {
   const dynamicPluginsPackageNames = config.plugins.reduce(
     (packageNames, plugin) => {
-      const isExternalPlugin = externalDynamicPlugins?.some((externalDynamicPlugin) => externalDynamicPlugin.package === plugin.package)
+      const isExternalPlugin = externalDynamicPlugins?.some(
+        (externalDynamicPlugin) =>
+          externalDynamicPlugin.package === plugin.package,
+      );
       if (!isExternalPlugin) {
         // We want the third index ['.', 'dynamic-plugins', 'dist', 'backstage-plugin-scaffolder-backend-module-github-dynamic']
         packageNames.push(plugin.package.split("/")[3]);
@@ -241,13 +244,22 @@ describe("Dynamic Plugin Wrappers", () => {
       IBM_VALUES_SHOWCASE_CONFIG_FILE,
     );
 
-    const externalDynamicPluginsConfig: DynamicPluginConfig[] = [{
-      package: "@pataknight/backstage-plugin-rhdh-qe-theme@0.5.5",
-      disabled: false,
-    },
+    const externalDynamicPluginsConfig: DynamicPluginConfig[] = [
       {
-        package: "@backstage-community/plugin-todo@0.2.42"
-      }
+        package: "@pataknight/backstage-plugin-rhdh-qe-theme@0.5.5",
+        disabled: false,
+      },
+      {
+        package: "@backstage-community/plugin-todo@0.2.42",
+      },
+      {
+        package:
+          "@red-hat-developer-hub/backstage-plugin-application-provider-test@0.0.2",
+      },
+      {
+        package:
+          "@red-hat-developer-hub/backstage-plugin-application-listener-test@0.0.2",
+      },
     ];
 
     it("should have a corresponding package", () => {
diff --git a/e2e-tests/playwright/e2e/home-page-customization.spec.ts b/e2e-tests/playwright/e2e/home-page-customization.spec.ts
@@ -1,14 +1,17 @@
 import { test } from "@playwright/test";
 import { UIhelper } from "../utils/ui-helper";
 import { Common } from "../utils/common";
+import { HomePage } from "../support/pages/home-page";
 
 test.describe("Home page customization", () => {
   let common: Common;
   let uiHelper: UIhelper;
+  let homePage: HomePage;
 
   test.beforeEach(async ({ page }) => {
     uiHelper = new UIhelper(page);
     common = new Common(page);
+    homePage = new HomePage(page);
     await common.loginAsGuest();
   });
 
@@ -30,4 +33,14 @@ test.describe("Home page customization", () => {
     await uiHelper.verifyTextinCard("Random Joke", "Random Joke");
     await uiHelper.clickButton("Reroll");
   });
+
+  test("Verify that the Top Visited card in the Home page renders without an error", async () => {
+    await uiHelper.verifyTextinCard("Top Visited", "Top Visited");
+    await homePage.verifyVisitedCardContent("Top Visited");
+  });
+
+  test("Verify that the Recently Visited card in the Home page renders without an error", async () => {
+    await uiHelper.verifyTextinCard("Recently Visited", "Recently Visited");
+    await homePage.verifyVisitedCardContent("Recently Visited");
+  });
 });
diff --git a/e2e-tests/playwright/e2e/plugins/application-listener.spec.ts b/e2e-tests/playwright/e2e/plugins/application-listener.spec.ts
@@ -0,0 +1,29 @@
+import { expect, test } from "@playwright/test";
+import { UIhelper } from "../../utils/ui-helper";
+import { Common } from "../../utils/common";
+
+test.describe("Test ApplicationListener", () => {
+  let uiHelper: UIhelper;
+
+  test.beforeEach(async ({ page }) => {
+    const common = new Common(page);
+    uiHelper = new UIhelper(page);
+    await common.loginAsGuest();
+  });
+
+  test("Verify that the LocationListener logs the current location", async ({
+    page,
+  }) => {
+    const logs: string[] = [];
+
+    page.on("console", (msg) => {
+      if (msg.type() === "log") {
+        logs.push(msg.text());
+      }
+    });
+
+    await uiHelper.openSidebar("Catalog");
+
+    expect(logs.some((l) => l.includes("pathname: /catalog"))).toBeTruthy();
+  });
+});
diff --git a/e2e-tests/playwright/e2e/plugins/application-provider.spec.ts b/e2e-tests/playwright/e2e/plugins/application-provider.spec.ts
@@ -0,0 +1,50 @@
+import { expect, test } from "@playwright/test";
+import { UIhelper } from "../../utils/ui-helper";
+import { Common } from "../../utils/common";
+import { UI_HELPER_ELEMENTS } from "../../support/pageObjects/global-obj";
+
+test.describe("Test ApplicationProvider", () => {
+  let uiHelper: UIhelper;
+
+  test.beforeEach(async ({ page }) => {
+    const common = new Common(page);
+    uiHelper = new UIhelper(page);
+    await common.loginAsGuest();
+  });
+
+  test("Verify that the TestPage is rendered", async ({ page }) => {
+    await page.goto("/application-provider-test-page");
+    await uiHelper.verifyText("application/provider TestPage");
+    await uiHelper.verifyText(
+      "This card will work only if you register the TestProviderOne and TestProviderTwo correctly.",
+    );
+    await uiHelper.verifyTextinCard("Context one", "Context one");
+
+    const contextOneFirstLocator = page
+      .locator(UI_HELPER_ELEMENTS.MuiCard("Context one"))
+      .first();
+    const contextOneSecondLocator = page
+      .locator(UI_HELPER_ELEMENTS.MuiCard("Context one"))
+      .last();
+    const contextOneIncrementButton = contextOneFirstLocator
+      .locator("button")
+      .filter({ hasText: "+" });
+    await contextOneIncrementButton.click();
+    expect(contextOneFirstLocator.getByText("1")).toBeVisible();
+    expect(contextOneSecondLocator.getByText("1")).toBeVisible();
+
+    await uiHelper.verifyTextinCard("Context two", "Context two");
+    const contextTwoFirstLocator = page
+      .locator(UI_HELPER_ELEMENTS.MuiCard("Context two"))
+      .first();
+    const contextTwoSecondLocator = page
+      .locator(UI_HELPER_ELEMENTS.MuiCard("Context two"))
+      .last();
+    const contextTwoIncrementButton = contextTwoFirstLocator
+      .locator("button")
+      .filter({ hasText: "+" });
+    await contextTwoIncrementButton.click();
+    expect(contextTwoFirstLocator.getByText("1")).toBeVisible();
+    expect(contextTwoSecondLocator.getByText("1")).toBeVisible();
+  });
+});
diff --git a/e2e-tests/playwright/e2e/plugins/global-floating-button.spec.ts b/e2e-tests/playwright/e2e/plugins/global-floating-button.spec.ts
@@ -0,0 +1,41 @@
+import { test } from "@playwright/test";
+import { Common } from "../../utils/common";
+import { FabPo } from "../../support/pageObjects/global-fab-po";
+import { UIhelper } from "../../utils/ui-helper";
+import { PagesUrl } from "../../support/pageObjects/page";
+
+test.describe("Test global floating action button plugin", () => {
+  let uiHelper: UIhelper;
+  let fabHelper: FabPo;
+
+  test.beforeEach(async ({ page }) => {
+    const common = new Common(page);
+    await common.loginAsGuest();
+
+    uiHelper = new UIhelper(page);
+    fabHelper = new FabPo(page, "/" as PagesUrl);
+  });
+
+  test("Check if Git and Bulk import floating buttons are visible on the Home page", async () => {
+    await uiHelper.openSidebar("Home");
+    await fabHelper.verifyFabButtonByLabel("Git");
+    await fabHelper.verifyFabButtonByDataTestId("bulk-import");
+    await fabHelper.clickFabMenu();
+    await uiHelper.verifyText("Added repositories");
+  });
+
+  test("Check if floating button is shown with two sub-menu actions on the Catalog Page", async () => {
+    await uiHelper.openSidebar("Catalog");
+    await fabHelper.verifyFabButtonByDataTestId("floating-button");
+    await fabHelper.clickFabMenu();
+    await fabHelper.verifyFabButtonByLabel("Git");
+    await fabHelper.clickFabMenu();
+    await fabHelper.verifyPopup(
+      "GitHub - redhat-developer/rhdh: The repo formerly known as janus-idp/backstage-showcase",
+    );
+    await fabHelper.switchTab();
+    await fabHelper.verifyFabButtonByLabel("Quay");
+    await fabHelper.clickFabMenu();
+    await fabHelper.verifyPopup("Quay Container Registry · Quay");
+  });
+});
diff --git a/e2e-tests/playwright/support/pageObjects/global-fab-po.ts b/e2e-tests/playwright/support/pageObjects/global-fab-po.ts
@@ -0,0 +1,38 @@
+import { expect, Locator, Page } from "@playwright/test";
+import { PageObject, PagesUrl } from "./page";
+
+export class FabPo extends PageObject {
+  private fabMenu: Locator;
+
+  constructor(page: Page, url: PagesUrl) {
+    super(page, url);
+  }
+
+  private generateDataTestId(label: string) {
+    return label.split(" ").join("-").toLocaleLowerCase();
+  }
+
+  public async verifyPopup(str: string) {
+    const popupPromise = this.page.waitForEvent("popup");
+    const popup = await popupPromise;
+    await expect(popup).toHaveTitle(str);
+  }
+
+  public async clickFabMenu() {
+    await this.fabMenu.click();
+  }
+
+  public async switchTab() {
+    await this.page.bringToFront();
+  }
+
+  public async verifyFabButtonByLabel(label: string) {
+    this.fabMenu = this.page.getByTestId(this.generateDataTestId(label));
+    await expect(this.fabMenu).toContainText(label);
+  }
+
+  public async verifyFabButtonByDataTestId(id: string) {
+    this.fabMenu = this.page.getByTestId(id);
+    await expect(this.fabMenu).toBeVisible();
+  }
+}
diff --git a/e2e-tests/playwright/support/pageObjects/page-obj.ts b/e2e-tests/playwright/support/pageObjects/page-obj.ts
@@ -1,5 +1,6 @@
 export const HOME_PAGE_COMPONENTS = {
   MuiAccordion: 'div[class*="MuiAccordion-root-"]',
+  MuiCard: 'div[class*="MuiCard-root-"]',
 };
 
 export const SEARCH_OBJECTS_COMPONENTS = {
diff --git a/e2e-tests/playwright/support/pages/home-page.ts b/e2e-tests/playwright/support/pages/home-page.ts
