chore(e2e): migrate techdocs plugins e2e tests

Signed-off-by: Patrick Knight <pknight@redhat.com>

Author: PatAKnight

workspaces/backstage/e2e-tests/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@eslint/js": "^9.39.2",
     "@playwright/test": "1.57.0",
-    "@red-hat-developer-hub/e2e-test-utils": "1.1.15",
+    "@red-hat-developer-hub/e2e-test-utils": "1.1.23",
     "@types/node": "^24.10.1",
     "dotenv": "^16.4.7",
     "eslint": "^9.39.2",

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

@@ -17,5 +17,9 @@ export default defineConfig({
       name: "backstage-kubernetes",
       testMatch: /tests\/specs\/kubernetes-rbac\.spec\.ts/,
     },
+    {
+      name: "backstage-techdocs",
+      testMatch: /tests\/specs\/techdocs\.spec\.ts/,
+    },
   ],
 });

workspaces/backstage/e2e-tests/tests/config/techdocs/app-config-rhdh.yaml

@@ -0,0 +1,9 @@
+catalog:
+  import:
+    entityFilename: catalog-info.yaml
+    pullRequestBranchName: backstage-integration
+  rules:
+    - allow: [API, Component, Group, Location, Resource, System, Template]
+  locations:
+    - type: url
+      target: https://github.com/redhat-developer/rhdh/blob/main/catalog-entities/all.yaml

workspaces/backstage/e2e-tests/tests/specs/techdocs.spec.ts

@@ -0,0 +1,85 @@
+import { expect, Page, test } from "@red-hat-developer-hub/e2e-test-utils/test";
+
+test.describe("TechDocs", () => {
+  test.beforeAll(async ({ rhdh }) => {
+    await rhdh.configure({
+      auth: "keycloak",
+      appConfig: "tests/config/techdocs/app-config-rhdh.yaml",
+    });
+
+    await rhdh.deploy();
+  });
+
+  async function docsTextHighlight(page: Page) {
+    await page.evaluate(() => {
+      const host = document.querySelector(
+        '[data-testid="techdocs-native-shadowroot"]',
+      );
+      const element = host?.shadowRoot?.querySelector("article p")?.firstChild;
+      if (!element) return;
+      const range = document.createRange();
+      const selection = window.getSelection();
+      range.setStart(element, 0);
+      range.setEnd(element, 20);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+      document.dispatchEvent(new Event("selectionchange"));
+    });
+  }
+
+  test.beforeEach(async ({ loginHelper }) => {
+    await loginHelper.loginAsKeycloakUser();
+  });
+
+  test("Verify that TechDocs is visible in sidebar", async ({ uiHelper }) => {
+    await uiHelper.openSidebarButton("Favorites");
+    await uiHelper.openSidebar("Docs");
+  });
+
+  test("Verify that TechDocs Docs page for Red Hat Developer Hub works", async ({
+    page,
+    uiHelper,
+  }) => {
+    await uiHelper.openSidebarButton("Favorites");
+    await uiHelper.openSidebar("Docs");
+    await page.getByRole("link", { name: "Red Hat Developer Hub" }).click();
+    await uiHelper.waitForTitle("Getting Started running RHDH", 1);
+  });
+
+  test("Verify that TechDocs entity tab page for Red Hat Developer Hub works", async ({
+    uiHelper,
+  }) => {
+    await uiHelper.openSidebar("Catalog");
+    await uiHelper.selectMuiBox("Kind", "Component");
+    await uiHelper.clickLink("Red Hat Developer Hub");
+    await uiHelper.clickTab("Docs");
+    await uiHelper.waitForTitle("Getting Started running RHDH", 1);
+  });
+
+  test("Verify that TechDocs Docs page for ReportIssue addon works", async ({
+    page,
+    uiHelper,
+  }) => {
+    await uiHelper.openSidebarButton("Favorites");
+    await uiHelper.openSidebar("Docs");
+    await page.getByRole("link", { name: "Red Hat Developer Hub" }).click();
+    await page.waitForSelector("article a");
+    await docsTextHighlight(page);
+    const link = await page.waitForSelector("text=Open new Github issue");
+    expect(await link?.isVisible()).toBeTruthy();
+  });
+
+  test("Verify that TechDocs entity tab page for ReportIssue addon works", async ({
+    page,
+    uiHelper,
+  }) => {
+    await uiHelper.openSidebar("Catalog");
+    await uiHelper.selectMuiBox("Kind", "Component");
+    await uiHelper.clickLink("Red Hat Developer Hub");
+    await uiHelper.clickTab("Docs");
+    await page.waitForSelector("article a");
+    await docsTextHighlight(page);
+    const link = await page.waitForSelector("text=Open new Github issue");
+    expect(await link?.isVisible()).toBeTruthy();
+  });
+});

workspaces/backstage/e2e-tests/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "@red-hat-developer-hub/e2e-test-utils/tsconfig",
   "compilerOptions": {
-    "moduleResolution": "bundler"
+    "moduleResolution": "bundler",
+    "lib": ["dom", "es2022"]
   },
   "include": ["**/*.ts", "eslint.config.js"]
 }

workspaces/backstage/e2e-tests/yarn.lock

@@ -303,9 +303,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@red-hat-developer-hub/e2e-test-utils@npm:1.1.15":
-  version: 1.1.15
-  resolution: "@red-hat-developer-hub/e2e-test-utils@npm:1.1.15"
+"@red-hat-developer-hub/e2e-test-utils@npm:1.1.23":
+  version: 1.1.23
+  resolution: "@red-hat-developer-hub/e2e-test-utils@npm:1.1.23"
   dependencies:
     "@axe-core/playwright": ^4.11.0
     "@backstage-community/plugin-rbac-common": 1.23.0
@@ -327,7 +327,7 @@ __metadata:
     zx: ^8.8.5
   peerDependencies:
     "@playwright/test": ^1.57.0
-  checksum: 9b92ffbec69b77f263c875a9f3edb672fbe165f3cee8f84c5e2e7b9dd2428b693a2eb9b3375f42c0706960dd7ea2d434e7917f2eb5b6a3762d8f80c18a936c70
+  checksum: c62c7029e19c1be0cbbee56eac95a4024898f3a58304d091bb381e6e679b3cc9da449cfa0ccd197722ba6da39fdf26332d8be9ae46d7097fc051e293c1ee2552
   languageName: node
   linkType: hard
 
@@ -630,7 +630,7 @@ __metadata:
   dependencies:
     "@eslint/js": ^9.39.2
     "@playwright/test": 1.57.0
-    "@red-hat-developer-hub/e2e-test-utils": 1.1.15
+    "@red-hat-developer-hub/e2e-test-utils": 1.1.23
     "@types/node": ^24.10.1
     dotenv: ^16.4.7
     eslint: ^9.39.2