test(homepage): add Playwright e2e for dynamic home page

workspaces/homepage/e2e-tests/.prettierignore

@@ -0,0 +1,2 @@
+playwright-report/
+test-results/

workspaces/homepage/e2e-tests/.yarnrc.yml

@@ -0,0 +1,5 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules

workspaces/homepage/e2e-tests/eslint.config.js

@@ -0,0 +1,3 @@
+import { createEslintConfig } from "@red-hat-developer-hub/e2e-test-utils/eslint";
+
+export default createEslintConfig(import.meta.dirname);

workspaces/homepage/e2e-tests/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "homepage-e2e-tests",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=22",
+    "yarn": ">=3"
+  },
+  "packageManager": "yarn@4.12.0",
+  "description": "E2E tests for Dynamic Home Page plugin",
+  "scripts": {
+    "test": "playwright test",
+    "test:vault": "VAULT=1 playwright test",
+    "report": "playwright show-report",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prettier:check": "prettier --check .",
+    "prettier:fix": "prettier --write .",
+    "tsc:check": "tsc --noEmit",
+    "check": "yarn tsc:check && yarn lint:check && yarn prettier:check"
+  },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@playwright/test": "1.59.1",
+    "@red-hat-developer-hub/e2e-test-utils": "1.1.33",
+    "@types/node": "25.5.2",
+    "eslint": "10.2.0",
+    "eslint-plugin-check-file": "3.3.1",
+    "eslint-plugin-playwright": "2.10.1",
+    "prettier": "3.8.1",
+    "typescript": "6.0.2",
+    "typescript-eslint": "8.58.1"
+  }
+}

workspaces/homepage/e2e-tests/playwright.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "@red-hat-developer-hub/e2e-test-utils/playwright-config";
+
+export default defineConfig({
+  projects: [
+    {
+      name: "homepage",
+    },
+  ],
+});

workspaces/homepage/e2e-tests/tests/config/dynamic-plugins.yaml

@@ -0,0 +1,39 @@
+plugins:
+  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-dynamic-home-page
+    disabled: false
+    pluginConfig:
+      dynamicPlugins:
+        frontend:
+          red-hat-developer-hub.backstage-plugin-dynamic-home-page:
+            dynamicRoutes:
+              - path: /
+                importName: DynamicCustomizableHomePage
+            mountPoints:
+              - mountPoint: home.page/cards
+                importName: OnboardingSection
+                config:
+                  id: onboarding-section
+                  title: Onboarding section
+              - mountPoint: home.page/cards
+                importName: EntitySection
+                config:
+                  id: entity-section
+                  title: Entity section
+              - mountPoint: home.page/cards
+                importName: RecentlyVisitedCard
+                config:
+                  id: recently-visited-card
+                  title: Recently visited
+              - mountPoint: home.page/cards
+                importName: TopVisitedCard
+                config:
+                  id: top-visited-card
+                  title: Top visited
+              - mountPoint: home.page/cards
+                importName: JokeCard
+                config:
+                  id: joke-card
+                  title: Random joke
+            translationResources:
+              - importName: homepageTranslations
+                ref: homepageTranslationRef

workspaces/homepage/e2e-tests/tests/specs/dynamic-home-page.spec.ts

@@ -0,0 +1,75 @@
+import { test } from "@red-hat-developer-hub/e2e-test-utils/test";
+import {
+  LoginHelper,
+  UIhelper,
+} from "@red-hat-developer-hub/e2e-test-utils/helpers";
+import type { BrowserContext, Page } from "@playwright/test";
+import { DynamicHomePagePo } from "../utils/dynamic-homepage";
+
+/** Chart dist wrapper names (see ../metadata `spec.dynamicArtifact` basenames). */
+const DYNAMIC_HOME_PAGE_WRAPPER_DIST_NAMES: string[] = [
+  "red-hat-developer-hub-backstage-plugin-dynamic-home-page",
+];
+
+/* Assertions live in DynamicHomePagePo (expect/verify*), matching RHDH core structure. */
+/* eslint-disable playwright/expect-expect -- see DynamicHomePagePo */
+test.describe.serial("Dynamic home page customization", () => {
+  let context: BrowserContext | undefined;
+  let page: Page;
+  let uiHelper: UIhelper;
+  let home: DynamicHomePagePo;
+
+  test.beforeAll(async ({ browser, rhdh }) => {
+    test.setTimeout(10 * 60 * 1000);
+
+    await rhdh.configure({
+      auth: "keycloak",
+      // Default chart tag in registry (avoid "next", which is not always published).
+      version: process.env.RHDH_VERSION ?? "1.10",
+      disableWrappers: DYNAMIC_HOME_PAGE_WRAPPER_DIST_NAMES,
+    });
+    await rhdh.deploy();
+
+    context = await browser.newContext({
+      baseURL: rhdh.rhdhUrl,
+    });
+    page = await context.newPage();
+    uiHelper = new UIhelper(page);
+    const loginHelper = new LoginHelper(page);
+    await loginHelper.loginAsKeycloakUser();
+    home = new DynamicHomePagePo(page, uiHelper);
+  });
+
+  test.afterAll(async () => {
+    await context?.close();
+  });
+
+  test("Verify cards display after login", async () => {
+    await home.seedHomePageWidgets();
+    await home.verifyHomePageLoaded();
+    await home.verifyAllCardsDisplayed();
+    await home.verifyEditButtonVisible();
+  });
+
+  test("Verify cards can be individually deleted in edit mode", async () => {
+    await home.enterEditMode();
+    await home.deleteAllCards();
+    await home.verifyCardsDeleted();
+  });
+
+  test("Verify cards can be resized in edit mode", async () => {
+    await home.addWidget("Entity Section");
+    await home.resizeFirstCard();
+    await home.exitEditMode();
+  });
+
+  // restore defaults button is not working as expected
+  // eslint-disable-next-line playwright/no-skipped-test -- re-enable when https://issues.redhat.com/browse/RHDHBUGS-2906 is fixed
+  test.skip("Verify restore default cards and deleted with Clear all button", async () => {
+    await home.restoreDefaultCards();
+    await home.verifyCardsRestored();
+    await home.enterEditMode();
+    await home.clearAllCardsWithButton();
+    await home.verifyCardsDeleted();
+  });
+});

workspaces/homepage/e2e-tests/tests/utils/dynamic-homepage.ts

@@ -0,0 +1,178 @@
+import {
+  expect,
+  type Locator,
+  type Page,
+} from "@red-hat-developer-hub/e2e-test-utils/test";
+import type { UIhelper } from "@red-hat-developer-hub/e2e-test-utils/helpers";
+
+const EXPECTED_CARD_TEXTS = [
+  "Good (morning|afternoon|evening)",
+  "Explore Your Software Catalog",
+  "Recently Visited",
+  "Top Visited",
+] as const;
+
+/**
+ * Flows ported from rhdh e2e-tests/playwright/support/pages/home-page-customization.ts
+ * (same locators/behavior, uses overlay UIhelper).
+ */
+export class DynamicHomePagePo {
+  constructor(
+    private readonly page: Page,
+    private readonly ui: UIhelper,
+  ) {}
+
+  private readonly editButton = () => this.page.getByText("Edit");
+  private readonly saveButton = () =>
+    this.page.getByText("Save", {
+      exact: true,
+    });
+  private readonly clearAllButton = () => this.page.getByText("Clear all");
+  private readonly restoreDefaultsButton = () =>
+    this.page.getByText("Restore defaults");
+  private readonly addWidgetButton = () =>
+    this.page.getByRole("button", { name: "Add widget" });
+  private readonly resizeHandles = () =>
+    this.page.locator(".react-resizable-handle");
+  private readonly deleteButtons = () =>
+    this.page.getByRole("button", { name: "Delete widget" });
+  private readonly greetingText = () =>
+    this.page.getByText(/Good (morning|afternoon|evening)/);
+
+  async verifyHomePageLoaded(): Promise<void> {
+    await this.ui.verifyHeading("Welcome back");
+    await expect(this.greetingText()).toBeVisible();
+  }
+
+  async verifyAllCardsDisplayed(): Promise<void> {
+    for (const card of EXPECTED_CARD_TEXTS) {
+      if (card.startsWith("Good")) {
+        await expect(this.greetingText()).toBeVisible();
+      } else {
+        await this.ui.verifyText(card);
+      }
+    }
+  }
+
+  async verifyEditButtonVisible(): Promise<void> {
+    await this.ui.verifyText("Edit");
+  }
+
+  /**
+   * Adds the default home cards through Add widget (dialog labels must match the UI).
+   * Used when tests need a full grid without relying on restore-defaults (skipped / broken).
+   */
+  async seedHomePageWidgets(): Promise<void> {
+    await this.addWidget("Entity Section");
+    await this.enterEditMode();
+    await this.addWidget("Onboarding Section");
+    await this.addWidget("Recently visited");
+    await this.addWidget("Top visited");
+    await this.addWidget("Random joke");
+    await this.exitEditMode();
+  }
+
+  async enterEditMode(): Promise<void> {
+    await this.ui.clickButton("Edit");
+    await expect(this.saveButton()).toBeVisible();
+  }
+
+  async exitEditMode(): Promise<void> {
+    await this.ui.clickButton("Save");
+    await expect(this.editButton()).toBeVisible();
+  }
+
+  /**
+   * Resizes one card via the first visible resize handle (while still in edit
+   * mode, before Save). Call after `enterEditMode` and adding a widget.
+   */
+  async resizeFirstCard(): Promise<void> {
+    const handle = this.resizeHandles().first();
+    await expect(handle).toBeVisible();
+    const panel = this.resizablePanelForHandle(handle);
+    const initialBox = await panel.boundingBox();
+    expect(initialBox).not.toBeNull();
+
+    await this.dragResizeHandle(handle);
+
+    const finalBox = await panel.boundingBox();
+    expect(finalBox).not.toBeNull();
+    const widthChanged = finalBox!.width !== initialBox!.width;
+    const heightChanged = finalBox!.height !== initialBox!.height;
+    expect(widthChanged || heightChanged).toBe(true);
+  }
+
+  /** Nearest `react-resizable` root for a handle (`.react-resizable-handle`). */
+  private resizablePanelForHandle(handle: Locator): Locator {
+    return handle.locator(
+      'xpath=ancestor::*[contains(@class,"react-resizable")][1]',
+    );
+  }
+
+  private async dragResizeHandle(handle: Locator): Promise<void> {
+    await handle.scrollIntoViewIfNeeded();
+    const box = await handle.boundingBox();
+    expect(box).not.toBeNull();
+    const startX = box!.x + box!.width / 2;
+    const startY = box!.y + box!.height / 2;
+    const delta = 160;
+    await this.page.mouse.move(startX, startY);
+    await this.page.mouse.down();
+    await this.page.mouse.move(startX + delta, startY + delta, { steps: 12 });
+    await this.page.mouse.up();
+    // eslint-disable-next-line playwright/no-wait-for-timeout -- layout after resize
+    await this.page.waitForTimeout(600);
+  }
+
+  async deleteAllCards(): Promise<void> {
+    for (let n = 0; n < 50; n++) {
+      const currentButtons = this.deleteButtons();
+      const currentCount = await currentButtons.count();
+      if (currentCount === 0) {
+        break;
+      }
+      await currentButtons.first().click();
+      // eslint-disable-next-line playwright/no-wait-for-timeout -- upstream timing between deletes
+      await this.page.waitForTimeout(1000);
+    }
+  }
+
+  async clearAllCardsWithButton(): Promise<void> {
+    await this.ui.clickButton("Clear all");
+  }
+
+  async verifyCardsDeleted(): Promise<void> {
+    await expect(this.clearAllButton()).toBeHidden();
+    await expect(this.saveButton()).toBeHidden();
+    await expect(this.restoreDefaultsButton()).toBeVisible();
+    await expect(this.addWidgetButton()).toBeVisible();
+
+    for (const card of EXPECTED_CARD_TEXTS) {
+      if (card.startsWith("Good")) {
+        await expect(this.greetingText()).toBeHidden();
+      } else {
+        await expect(this.page.getByText(card)).toBeHidden();
+      }
+    }
+  }
+
+  async restoreDefaultCards(): Promise<void> {
+    await this.ui.clickButton("Restore defaults");
+    // eslint-disable-next-line playwright/no-wait-for-timeout -- upstream wait for layout
+    await this.page.waitForTimeout(2000);
+  }
+
+  async verifyCardsRestored(): Promise<void> {
+    await this.verifyAllCardsDisplayed();
+    await expect(this.editButton()).toBeVisible();
+  }
+
+  async addWidget(widgetType: string): Promise<void> {
+    await this.ui.clickButton("Add widget");
+    // eslint-disable-next-line playwright/no-wait-for-timeout -- dialog open
+    await this.page.waitForTimeout(1000);
+    await this.page.getByRole("button", { name: widgetType }).click();
+    // eslint-disable-next-line playwright/no-wait-for-timeout -- widget mount
+    await this.page.waitForTimeout(1000);
+  }
+}

workspaces/homepage/e2e-tests/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@red-hat-developer-hub/e2e-test-utils/tsconfig",
+  "compilerOptions": {
+    "lib": ["ES2022", "DOM"]
+  },
+  "include": ["**/*.ts"]
+}