test(e2e): widen cluster-free run to full guest-signin + learning-paths

gustavolira · claude · gustavolira · commit faa8069bb009 · 2026-07-02T11:48:24.000-03:00
Expand the harness from 1 to 4 tests by fixing the global-header mounting
and enabling the learning-paths spec:

- global-header: the repo's static app-config.dynamic-plugins.yaml only
  mounts the bare GlobalHeader container with no children, which is why the
  plugin loaded but rendered nothing off-cluster. In-cluster the full mount
  points (ProfileDropdown, Settings/Sign-out menu items, search, etc.) come
  from the plugin's pluginConfig in the catalog index. Install the plugin
  from OCI with that canonical pluginConfig (copied from rhdh-plugins
  workspaces/global-header app-config.dynamic.yaml) and load the generated
  dynamic-plugins-root/app-config.dynamic-plugins.yaml last in the
  webServer config args — the same file and merge order the production
  container uses. This unblocks the guest-signin Settings and Sign-out
  tests, which navigate via the header's profile dropdown.
- learning-paths: the page renders off-cluster from the static fallback
  data bundled with packages/app. The spec navigates through the
  "References" sidebar group, which is a CI config-map menu customization —
  mirror that menuItems nesting in app-config.local-e2e.yaml (objects
  deep-merge across config files, so only the nesting keys are needed).
- Tag the three newly validated tests @cluster-free and allowlist
  learning-path-page.spec.ts in testMatch.
- settings.spec.ts and home-page-customization.spec.ts stay out for now:
  they assert CI test data (catalog ownership entities, customized home
  cards) that the harness does not provide yet — documented in Known
  issues.

Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/app-config.local-e2e.yaml b/app-config.local-e2e.yaml
@@ -24,3 +24,19 @@ backend:
   database:
     client: better-sqlite3
     connection: ":memory:"
+
+# The e2e specs are written against the CI deployment's menu customization
+# (.ci/pipelines/resources/config_map/dynamic-plugins-config.yaml): APIs and
+# Learning Paths nest under a "References" sidebar group. Mirror it here so
+# navigation helpers like openSidebarButton("References") work off-cluster.
+dynamicPlugins:
+  frontend:
+    default.main-menu-items:
+      menuItems:
+        default.list:
+          title: References
+          icon: bookmarks
+        default.apis:
+          parent: default.list
+        default.learning-path:
+          parent: default.list
diff --git a/docs/e2e-tests/local-e2e-harness.md b/docs/e2e-tests/local-e2e-harness.md
@@ -65,16 +65,24 @@ dev server with `app-config.yaml` + `app-config.dynamic-plugins.yaml` +
 if `dynamic-plugins-root` has no plugins.
 
 The run is scoped to tests tagged `@cluster-free` within the spec files allowlisted in
-`testMatch` — today the one test verified green off-cluster, the
-`guest-signin-happy-path` home-page test. To widen coverage, tag a validated test with
-`@cluster-free` and add its spec file to `testMatch` (see "Known issues").
+`testMatch`. To widen coverage, tag a validated test with `@cluster-free` and add its
+spec file to `testMatch`; if the test needs extra plugins, add them (with their
+`pluginConfig`) to `e2e-tests/local-harness/dynamic-plugins.yaml` and re-run
+`populate.sh` (see "Known issues").
 
 ### Verified
 
 With plugins populated, the legacy app renders the full production RHDH UI off-cluster
-(branding, sidebar, and Quick Access from the dynamic home-page plugin). The existing
-`guest-signin-happy-path` **home-page test passes unmodified** — confirming a dynamic
-frontend plugin renders with no cluster.
+(branding, sidebar, global header, and Quick Access from the dynamic plugins). The
+existing specs **pass unmodified**:
+
+- `guest-signin-happy-path` — all three tests: home page (dynamic-home-page plugin),
+  Settings and Sign-out (navigation via the global-header profile dropdown, using the
+  plugin's canonical `pluginConfig` merged through the generated
+  `dynamic-plugins-root/app-config.dynamic-plugins.yaml`, exactly as in-cluster).
+- `learning-path-page` — renders from the static fallback data bundled with
+  `packages/app`; the "References" sidebar group mirrors the CI menu customization via
+  `app-config.local-e2e.yaml`.
 
 ## CI
 
@@ -111,8 +119,17 @@ just `run`), which is why this harness boots the dev servers directly instead.
   dependency versions), backend dynamic-plugin builds fail with version-mismatch errors
   and yarn may not surface workspace bins. Run `yarn install` first. The
   `install-dynamic-plugins` populate path avoids building from source and is unaffected.
-- **`global-header` plugin mounting** still needs config sorting for the legacy harness;
-  specs that navigate via the top-right profile dropdown depend on it.
+- **Re-run `populate.sh` after changing the harness plugin set.** The `pluginConfig`
+  blocks in `e2e-tests/local-harness/dynamic-plugins.yaml` (e.g. the global-header
+  mount points) only take effect through the generated
+  `dynamic-plugins-root/app-config.dynamic-plugins.yaml`, which the webServer loads
+  last. A stale populate leaves plugins loaded but unconfigured (the header renders
+  empty).
+- **Specs that need CI test data are not enabled yet.** `settings.spec.ts` asserts
+  ownership entities ("Guest User, team-a") that come from catalog locations in the CI
+  config map; `home-page-customization.spec.ts` needs the home-page card customization
+  from `.ci/pipelines/resources/config_map/dynamic-plugins-config.yaml`. Enabling them
+  means mirroring that data/config into the harness overlay.
 - **Live-external-service specs** (real k8s cluster, GitHub org, Quay, Tekton, Keycloak)
   still need those services or mocks; this harness covers UI/plugin-rendering scenarios
   that don't require live external infra.
diff --git a/e2e-tests/local-harness/dynamic-plugins.yaml b/e2e-tests/local-harness/dynamic-plugins.yaml
@@ -11,7 +11,122 @@ plugins:
   # Home page: route / -> DynamicHomePage, SearchBar, QuickAccessCard, Starred Entities.
   - package: oci://ghcr.io/redhat-developer/rhdh-plugin-export-overlays/red-hat-developer-hub-backstage-plugin-dynamic-home-page:bs_1.49.4__1.13.1!red-hat-developer-hub-backstage-plugin-dynamic-home-page
     disabled: false
-  # TODO(follow-up): the global-header plugin (top bar + profile dropdown) loads off-cluster
-  # but does not mount in the layout with the default config, so the Settings/Sign-out specs
-  # can't run yet. Add it here once the header render config is sorted:
-  #   oci://ghcr.io/redhat-developer/rhdh-plugin-export-overlays/red-hat-developer-hub-backstage-plugin-global-header:bs_1.49.4__1.21.6!red-hat-developer-hub-backstage-plugin-global-header
+  # Global header: top bar + profile dropdown (Settings / Sign-out navigation).
+  #
+  # The repo's static app-config.dynamic-plugins.yaml only mounts the bare GlobalHeader
+  # container (no children), so the header renders empty off-cluster. In-cluster the full
+  # config comes from the plugin's pluginConfig in the catalog index's
+  # dynamic-plugins.default.yaml; the block below is that canonical config, copied from
+  # rhdh-plugins workspaces/global-header/plugins/global-header/app-config.dynamic.yaml.
+  # install-dynamic-plugins merges it into the generated
+  # dynamic-plugins-root/app-config.dynamic-plugins.yaml, which the harness loads last —
+  # exactly how the production container consumes it.
+  - package: oci://ghcr.io/redhat-developer/rhdh-plugin-export-overlays/red-hat-developer-hub-backstage-plugin-global-header:bs_1.49.4__1.21.6!red-hat-developer-hub-backstage-plugin-global-header
+    disabled: false
+    pluginConfig:
+      dynamicPlugins:
+        frontend:
+          red-hat-developer-hub.backstage-plugin-global-header:
+            translationResources:
+              - importName: globalHeaderTranslations
+                ref: globalHeaderTranslationRef
+            mountPoints:
+              - mountPoint: application/header
+                importName: GlobalHeader
+                config:
+                  position: above-sidebar # above-main-content | above-sidebar
+              - mountPoint: global.header/component
+                importName: CompanyLogo
+                config:
+                  priority: 200
+                  props:
+                    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: Self-service
+                    titleKey: create.title
+                    icon: add
+                    to: create
+              - mountPoint: global.header/component
+                importName: StarredDropdown
+                config:
+                  priority: 85
+              - mountPoint: global.header/component
+                importName: ApplicationLauncherDropdown
+                config:
+                  priority: 82
+              - mountPoint: global.header/application-launcher
+                importName: MenuItemLink
+                config:
+                  section: Documentation
+                  priority: 150
+                  props:
+                    title: Developer Hub
+                    titleKey: applicationLauncher.developerHub
+                    icon: developerHub
+                    link: https://docs.redhat.com/en/documentation/red_hat_developer_hub
+              - mountPoint: global.header/application-launcher
+                importName: MenuItemLink
+                config:
+                  section: Developer Tools
+                  priority: 100
+                  props:
+                    title: RHDH Local
+                    titleKey: applicationLauncher.rhdhLocal
+                    icon: developerHub
+                    link: https://github.com/redhat-developer/rhdh-local
+              - mountPoint: global.header/component
+                importName: HelpDropdown
+                config:
+                  priority: 80
+              - mountPoint: global.header/help
+                importName: SupportButton
+                config:
+                  priority: 10
+              - 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
+                    titleKey: profile.settings
+                    link: /settings
+                    icon: manageAccounts
+              - mountPoint: global.header/profile
+                importName: MenuItemLink
+                config:
+                  priority: 90
+                  props:
+                    title: My profile
+                    titleKey: profile.myProfile
+                    type: myProfile
+                    icon: account
+              - mountPoint: global.header/profile
+                importName: LogoutButton
+                config:
+                  priority: 10
diff --git a/e2e-tests/playwright.legacy-local.config.ts b/e2e-tests/playwright.legacy-local.config.ts
@@ -27,10 +27,16 @@ const repoRootBin = resolve(process.cwd(), "..", "node_modules", ".bin");
 const pathWithRepoBin = `${repoRootBin}:${process.env.PATH ?? ""}`;
 const isCI = process.env.CI !== undefined && process.env.CI !== "";
 
+// The last entry is generated by e2e-tests/local-harness/populate.sh: it carries the
+// pluginConfig blocks from the harness dynamic-plugins.yaml (e.g. the full global-header
+// mount points), merged by install-dynamic-plugins exactly like the production container
+// does. It must come after the static app-config.dynamic-plugins.yaml so its plugin
+// config wins. Re-run populate.sh after changing the harness plugin set.
 const sharedConfigArgs = [
   "--config ../../app-config.yaml",
   "--config ../../app-config.dynamic-plugins.yaml",
   "--config ../../app-config.local-e2e.yaml",
+  "--config ../../dynamic-plugins-root/app-config.dynamic-plugins.yaml",
 ].join(" ");
 
 export default defineConfig({
@@ -40,12 +46,11 @@ export default defineConfig({
   // A test runs cluster-free when its spec file is listed in `testMatch` (an
   // allowlist, so unvalidated specs are never loaded) AND it carries the
   // @cluster-free tag. To widen coverage: tag the test where it lives and add its
-  // spec file here. Today that is the guest-signin home-page test, verified green
-  // off-cluster (the dynamic home-page plugin renders from OCI); its sibling
-  // Settings/Sign-out tests stay untagged because they navigate via the top-right
-  // profile dropdown, which needs the global-header plugin to *mount* in the
-  // layout — it loads off-cluster but rendering it needs more config (follow-up).
-  testMatch: ["e2e/guest-signin-happy-path.spec.ts"],
+  // spec file here. Validated so far: the full guest-signin spec (home page via the
+  // dynamic-home-page OCI plugin; Settings/Sign-out via the global-header OCI plugin
+  // with its canonical pluginConfig) and the learning-paths spec (static fallback
+  // data bundled with packages/app).
+  testMatch: ["e2e/guest-signin-happy-path.spec.ts", "e2e/learning-path-page.spec.ts"],
   grep: /@cluster-free/u,
   timeout: 90 * 1000,
   forbidOnly: isCI,
diff --git a/e2e-tests/playwright/e2e/guest-signin-happy-path.spec.ts b/e2e-tests/playwright/e2e/guest-signin-happy-path.spec.ts
@@ -38,15 +38,19 @@ test.describe("Guest Signing Happy path", () => {
     },
   );
 
-  test("Verify Profile is Guest in the Settings page", async () => {
+  test("Verify Profile is Guest in the Settings page", { tag: "@cluster-free" }, async () => {
     await uiHelper.goToSettingsPage();
     await uiHelper.verifyHeading("Guest");
     await uiHelper.verifyHeading("User Entity: guest");
   });
 
-  test("Sign Out and Verify that you return to the Sign-in page", async () => {
-    await uiHelper.goToSettingsPage();
-    await common.signOut();
-    await uiHelper.verifyHeading(t["rhdh"][lang]["signIn.page.title"]);
-  });
+  test(
+    "Sign Out and Verify that you return to the Sign-in page",
+    { tag: "@cluster-free" },
+    async () => {
+      await uiHelper.goToSettingsPage();
+      await common.signOut();
+      await uiHelper.verifyHeading(t["rhdh"][lang]["signIn.page.title"]);
+    },
+  );
 });
diff --git a/e2e-tests/playwright/e2e/learning-path-page.spec.ts b/e2e-tests/playwright/e2e/learning-path-page.spec.ts
@@ -21,21 +21,24 @@ test.describe("Learning Paths", { tag: "@layer3-equivalent" }, () => {
     await common.loginAsGuest();
   });
 
-  test("Verify that links in Learning Paths for Backstage opens in a new tab", async ({
-    page,
-  }, testInfo) => {
-    await uiHelper.openSidebarButton("References");
-    await uiHelper.openSidebar("Learning Paths");
-
-    // Scope to main content area to get only Learning Path links
-    const learningPathLinks = page.getByRole("main").getByRole("link");
-
-    for (const learningPathCard of await learningPathLinks.all()) {
-      await expect(learningPathCard).toBeVisible();
-      await expect(learningPathCard).toHaveAttribute("target", "_blank");
-      await expect(learningPathCard).not.toHaveAttribute("href", "");
-    }
-
-    await runAccessibilityTests(page, testInfo);
-  });
+  // @cluster-free: verified green on the cluster-free harness (playwright.legacy-local.config.ts)
+  test(
+    "Verify that links in Learning Paths for Backstage opens in a new tab",
+    { tag: "@cluster-free" },
+    async ({ page }, testInfo) => {
+      await uiHelper.openSidebarButton("References");
+      await uiHelper.openSidebar("Learning Paths");
+
+      // Scope to main content area to get only Learning Path links
+      const learningPathLinks = page.getByRole("main").getByRole("link");
+
+      for (const learningPathCard of await learningPathLinks.all()) {
+        await expect(learningPathCard).toBeVisible();
+        await expect(learningPathCard).toHaveAttribute("target", "_blank");
+        await expect(learningPathCard).not.toHaveAttribute("href", "");
+      }
+
+      await runAccessibilityTests(page, testInfo);
+    },
+  );
 });
