chore(e2e): migrate techdocs plugins e2e tests

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

@@ -29,5 +29,9 @@ export default defineConfig({
       name: "backstage-notifications",
       testMatch: /tests\/specs\/notifications\.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,82 @@
+import { expect, Page, test } from "@red-hat-developer-hub/e2e-test-utils/test";
+
+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 = globalThis.getSelection();
+    range.setStart(element, 0);
+    range.setEnd(element, 20);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    document.dispatchEvent(new Event("selectionchange"));
+  });
+}
+
+test.describe("TechDocs", () => {
+  test.beforeAll(async ({ rhdh }) => {
+    await rhdh.configure({
+      auth: "keycloak",
+      appConfig: "tests/config/techdocs/app-config-rhdh.yaml",
+    });
+
+    await rhdh.deploy();
+  });
+
+  test.beforeEach(async ({ loginHelper }) => {
+    await loginHelper.loginAsKeycloakUser();
+  });
+
+  test("Verify that TechDocs is visible in sidebar", async ({ uiHelper }) => {
+    await uiHelper.openSidebar("Docs");
+  });
+
+  test("Verify that TechDocs Docs page for Red Hat Developer Hub works", async ({
+    page,
+    uiHelper,
+  }) => {
+    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.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"]
 }