[release-1.5] chore(e2e-tests): add e2e tests for header mount points (#2477)

Author: teknaS47

Diff for: .ibm/pipelines/resources/config_map/dynamic-global-header-config.yaml

@@ -0,0 +1,63 @@
+dynamicPlugins:
+  rootDirectory: dynamic-plugins-root
+  frontend:
+    red-hat-developer-hub.backstage-plugin-global-header:
+      mountPoints:
+        - mountPoint: application/header
+          importName: GlobalHeader
+          config:
+            position: above-main-content
+        - mountPoint: global.header/component
+          importName: HeaderIconButton
+          config:
+            priority: 110
+            props:
+              title: test-logo
+              icon: <svg id="logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 10 192 145"><defs><style>.cls-1{fill:#e00;}</style></defs><path d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z"/><path class="cls-1" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"/></svg>
+              to: /
+        - mountPoint: global.header/component
+          importName: SearchComponent
+          config:
+            priority: 100
+        - mountPoint: global.header/component
+          importName: Spacer
+          config:
+            priority: 99
+            props:
+              growFactor: 0
+        - mountPoint: global.header/component
+          importName: HeaderIconButton
+          config:
+            priority: 90
+            props:
+              title: Create...
+              icon: add
+              to: create
+        - mountPoint: global.header/component
+          importName: SupportButton
+          config:
+            priority: 80
+        - mountPoint: global.header/component
+          importName: NotificationButton
+          config:
+            priority: 70
+        - mountPoint: global.header/component
+          importName: Divider
+          config:
+            priority: 50
+        - mountPoint: global.header/component
+          importName: ProfileDropdown
+          config:
+            priority: 10
+        - mountPoint: global.header/profile
+          importName: MenuItemLink
+          config:
+            priority: 100
+            props:
+              title: Settings
+              link: /settings
+              icon: manageAccounts
+        - mountPoint: global.header/profile
+          importName: LogoutButton
+          config:
+            priority: 10

Diff for: .ibm/pipelines/utils.sh

@@ -522,6 +522,12 @@ apply_yaml_files() {
       --namespace="${project}" \
       --dry-run=client -o yaml | oc apply -f -
 
+    # configuration for testing global header and header mount points.
+    oc create configmap dynamic-global-header-config \
+      --from-file="dynamic-global-header-config.yaml"="$dir/resources/config_map/dynamic-global-header-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 for: .ibm/pipelines/value_files/values_showcase.yaml

@@ -119,6 +119,22 @@ global:
         disabled: false
       - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
         disabled: false
+      # Enable an extra header test plugin
+      - package: '@red-hat-developer-hub/[email protected]'
+        integrity: 'sha512-Dlay4DUAC3SifSJx4dmKDeD07DITGX9ZZ2SMCgcMMc00GJVKToD3DFuPYZ7lV2C2Ve7gWDufCf5NUmqaUWf6GA=='
+        pluginConfig:
+          dynamicPlugins:
+            frontend:
+              red-hat-developer-hub.backstage-plugin-global-header-test:
+                mountPoints:
+                  - mountPoint: application/header
+                    importName: TestHeader
+                    config:
+                      position: above-main-content
+                  - mountPoint: global.header/component
+                    importName: TestButton
+                    config:
+                      priority: 95
       # Enable notifications plugins.
       - package: ./dynamic-plugins/dist/backstage-plugin-notifications
         disabled: false
@@ -213,6 +229,8 @@ upstream:
         filename: dynamic-homepage-and-sidebar-config.yaml
       - configMapRef: dynamic-global-floating-action-button-config
         filename: dynamic-global-floating-action-button-config.yaml
+      - configMapRef: dynamic-global-header-config
+        filename: dynamic-global-header-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 for: dynamic-plugins/_utils/src/wrappers.test.ts

@@ -260,6 +260,10 @@ describe("Dynamic Plugin Wrappers", () => {
         package:
           "@red-hat-developer-hub/[email protected]",
       },
+      {
+        package:
+          "@red-hat-developer-hub/[email protected]",
+      },
     ];
 
     it("should have a corresponding package", () => {

Diff for: e2e-tests/playwright/e2e/header-mount-points.spec.ts

@@ -0,0 +1,42 @@
+import { expect, test } from "@playwright/test";
+import { UIhelper } from "../utils/ui-helper";
+import { Common } from "../utils/common";
+
+test.describe("Header mount points", () => {
+  let common: Common;
+  let uiHelper: UIhelper;
+
+  test.beforeEach(async ({ page }) => {
+    common = new Common(page);
+    uiHelper = new UIhelper(page);
+    await common.loginAsGuest();
+    await expect(page.locator("nav[id='global-header']")).toBeVisible();
+  });
+
+  test("Verify that additional logo component in global header is visible", async ({
+    page,
+  }) => {
+    const header = page.locator("nav[id='global-header']");
+    await expect(header).toBeVisible();
+    uiHelper.verifyLink({ label: "test-logo" });
+  });
+
+  test("Verify that additional header button component from a custom header plugin in global header is visible", async ({
+    page,
+  }) => {
+    const header = page.locator("nav[id='global-header']");
+    await expect(header).toBeVisible();
+    expect(
+      await header.locator("button", { hasText: "Test Button" }).count(),
+    ).toBe(1);
+  });
+
+  test("Verify that additional header from a custom header plugin besides the default one is visible", async ({
+    page,
+  }) => {
+    const header = page.locator("header", {
+      hasText: "This is a test header!",
+    });
+    await expect(header).toBeVisible();
+  });
+});