chore(e2e): techdocs addons tests (#2385)

* Introduce more techdocs tests

Signed-off-by: Dominika Zemanovicova <[email protected]>

* Enable package contrib

Signed-off-by: Dominika Zemanovicova <[email protected]>

---------

Signed-off-by: Dominika Zemanovicova <[email protected]>

Author: dzemanov

.ibm/pipelines/value_files/sanity-check-plugins.yaml

@@ -91,6 +91,14 @@ global:
         disabled: false
       - package: ./dynamic-plugins/dist/backstage-plugin-techdocs
         disabled: false
+      - package: ./dynamic-plugins/dist/backstage-plugin-techdocs-module-addons-contrib
+        disabled: false
+        pluginConfig:
+          dynamicPlugins:
+            frontend:
+              backstage.plugin-techdocs-module-addons-contrib:
+                techdocsAddons:
+                  - importName: ReportIssue
       - package: ./dynamic-plugins/dist/pagerduty-backstage-plugin
         disabled: false
       - package: ./dynamic-plugins/dist/pagerduty-backstage-plugin-backend-dynamic

.ibm/pipelines/value_files/values_showcase.yaml

@@ -102,6 +102,14 @@ global:
         disabled: false
       - package: ./dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic
         disabled: false
+      - package: ./dynamic-plugins/dist/backstage-plugin-techdocs-module-addons-contrib
+        disabled: false
+        pluginConfig:
+          dynamicPlugins:
+            frontend:
+              backstage.plugin-techdocs-module-addons-contrib:
+                techdocsAddons:
+                  - importName: ReportIssue
       - package: ./dynamic-plugins/dist/backstage-community-plugin-acr
         disabled: false
       - package: ./dynamic-plugins/dist/backstage-community-plugin-scaffolder-backend-module-kubernetes-dynamic

e2e-tests/playwright/e2e/techdocs.spec.ts

@@ -1,14 +1,35 @@
-import { test } from "@playwright/test";
+import { Page, test } from "@playwright/test";
 import { UIhelper } from "../utils/ui-helper";
 import { Common } from "../utils/common";
+import { expect } from "@playwright/test";
+import { Catalog } from "../support/pages/catalog";
 
 test.describe("TechDocs", () => {
   let common: Common;
   let uiHelper: UIhelper;
+  let catalog: Catalog;
+
+  async function docsTextHighlight(page: Page) {
+    await page.evaluate(() => {
+      const shadowRoot = document.querySelector(
+        '[data-testid="techdocs-native-shadowroot"]',
+      );
+      const element =
+        shadowRoot.shadowRoot.querySelector("article p").firstChild;
+      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 ({ page }) => {
     uiHelper = new UIhelper(page);
     common = new Common(page);
+    catalog = new Catalog(page);
     await common.loginAsGuest();
   });
 
@@ -17,11 +38,41 @@ test.describe("TechDocs", () => {
     await uiHelper.openSidebar("Docs");
   });
 
-  test("Verify that TechDocs for Backstage Showcase works", async ({
+  test("Verify that TechDocs Docs page for Backstage Showcase works", async ({
+    page,
+  }) => {
+    await uiHelper.openSidebarButton("Favorites");
+    await uiHelper.openSidebar("Docs");
+    await page.getByRole("link", { name: "Backstage Showcase" }).click();
+    await uiHelper.waitForTitle("Getting Started running RHDH", 1);
+  });
+
+  test("Verify that TechDocs entity tab page for Backstage Showcase works", async () => {
+    await catalog.goToByName("Backstage Showcase");
+    await uiHelper.clickTab("Docs");
+    await uiHelper.waitForTitle("Getting Started running RHDH", 1);
+  });
+
+  test("Verify that TechDocs Docs page for ReportIssue addon works", async ({
     page,
   }) => {
     await uiHelper.openSidebarButton("Favorites");
     await uiHelper.openSidebar("Docs");
     await page.getByRole("link", { name: "Backstage Showcase" }).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,
+  }) => {
+    await catalog.goToByName("Backstage Showcase");
+    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();
   });
 });

e2e-tests/playwright/support/pages/catalog.ts

@@ -18,6 +18,12 @@ export class Catalog {
     await this.uiHelper.openSidebar("Catalog");
   }
 
+  async goToByName(name: string) {
+    await this.go();
+    await this.uiHelper.clickByDataTestId("user-picker-all");
+    await this.uiHelper.clickLink(name);
+  }
+
   async goToBackstageJanusProjectCITab() {
     await this.goToBackstageJanusProject();
     await this.uiHelper.clickTab("CI");
@@ -26,9 +32,7 @@ export class Catalog {
   }
 
   async goToBackstageJanusProject() {
-    await this.uiHelper.openSidebar("Catalog");
-    await this.uiHelper.clickByDataTestId("user-picker-all");
-    await this.uiHelper.clickLink("backstage-janus");
+    await this.goToByName("backstage-janus");
   }
 
   async search(s: string) {

e2e-tests/playwright/utils/ui-helper.ts

@@ -315,7 +315,7 @@ export class UIhelper {
   }
 
   async clickTab(tabName: string) {
-    const tabLocator = this.page.locator(`text="${tabName}"`);
+    const tabLocator = this.page.getByRole("tab", { name: tabName });
     await tabLocator.waitFor({ state: "visible" });
     await tabLocator.click();
   }