add playwright tests for 1.10 with NFS

helm/rhdh-110-nfs/values.yaml

@@ -122,6 +122,14 @@ redhat-developer-hub:
       appConfig:
         app:
           title: RHDH 1.10 NFS loadtest
+          packages: all
+          extensions:
+            - page:home:
+                config:
+                  path: /
+            - page:catalog:
+                config:
+                  path: /catalog
 
         auth:
           providers:

load-generator/package.json

@@ -16,6 +16,9 @@
     "install-browser": "playwright install chromium",
     "playwright": "playwright",
     "analyse": "node scripts/analyse.mts",
-    "test": "playwright test && npm run analyse"
+    "test": "playwright test && npm run analyse",
+    "test:ofs:ui": "playwright test --ui && npm run analyse",
+    "test:nfs": "RHDH_FRONTEND=nfs playwright test && npm run analyse",
+    "test:nfs:ui": "RHDH_FRONTEND=nfs playwright test --ui && npm run analyse"
   }
 }

load-generator/playwright.config.ts

@@ -8,12 +8,25 @@ import { defineConfig, devices } from '@playwright/test';
 // import path from 'path';
 // dotenv.config({ path: path.resolve(__dirname, '.env') });
 
+const nfs = (process.env.RHDH_FRONTEND ?? 'ofs').toLowerCase() === 'nfs';
+const testMatch =
+  nfs ? 'guest-login-home-catalog-nfs.spec.ts' : 'guest-login-home-catalog.spec.ts';
+// NFS (module federation) needs longer waits for remotes to load
+const testTimeout = Number(
+  process.env.PLAYWRIGHT_TEST_TIMEOUT ?? (nfs ? 120_000 : 30_000),
+);
+const expectTimeout = Number(
+  process.env.PLAYWRIGHT_EXPECT_TIMEOUT ?? (nfs ? 120_000 : 20_000),
+);
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
+  testMatch,
+  timeout: testTimeout,
   expect: {
-    timeout: 20_000, // default 5_000
+    timeout: expectTimeout,
   },
 
   testDir: './scenarios',
@@ -36,6 +49,8 @@ export default defineConfig({
     /* Base URL to use in actions like `await page.goto('')`. */
     baseURL: process.env.RHDH_URL || process.env.PLAYWRIGHT_BASEURL,
 
+    navigationTimeout: nfs ? 120_000 : 30_000,
+
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },

load-generator/scenarios/guest-login-home-catalog-nfs.spec.ts

@@ -0,0 +1,71 @@
+import { test as base, expect } from "@playwright/test";
+
+import { Backstage } from "./Backstage";
+
+const test = base.extend<{ backstage: Backstage }>({
+  backstage: ({ page }, use) => use(new Backstage(page)),
+});
+
+const loops = Number(process.env.LOOPS ?? 100);
+
+for (let i = 1; i <= loops; i++) {
+  test(`run ${i} of ${loops}`, async ({ backstage, page }) => {
+    await test.step("login", async () => {
+      await page.goto("/");
+      await expect(page.getByRole("button", { name: "Enter" })).toBeVisible();
+    });
+
+    await test.step("home", async () => {
+      await page.getByRole("button", { name: "Enter" }).click();
+      await backstage.sidebarItem("Home").click();
+      await expect(
+        page.getByRole("heading", {
+          name: "No widgets added. Start by clicking the 'Add widget' button.",
+        }),
+      ).toBeVisible();
+    });
+
+    await test.step("catalog", async () => {
+      await backstage.sidebarItem("Catalog").click();
+      await expect(backstage.pluginHeader.getByText("Catalog")).toBeVisible();
+      await expect(
+        backstage.content.getByText("All Components (1000)"),
+      ).toBeVisible();
+      await expect(
+        backstage.content.getByText("Component 1", { exact: true }),
+      ).toBeVisible();
+    });
+
+    await test.step("component", async () => {
+      await backstage.content.getByText("Component 1", { exact: true }).click();
+      await expect(backstage.header.getByText("Component 1")).toBeVisible();
+      await expect(backstage.content.getByText("About")).toBeVisible();
+      await expect(backstage.content.getByText("Group 1")).toBeVisible();
+      await expect(backstage.content.getByText("System 1")).toBeVisible();
+      await expect(
+        backstage.tabs.getByText("Catalog Tab 1", { exact: true }),
+      ).toBeVisible();
+    });
+
+    await test.step("catalog-tab-n", async () => {
+      await backstage.tabs.getByText("Catalog Tab 1", { exact: true }).click();
+      await expect(backstage.header.getByText("Component 1")).toBeVisible();
+      await expect(
+        backstage.content.getByText("Example User List"),
+      ).toBeVisible();
+    });
+
+    await test.step("page-n", async () => {
+      await backstage.sidebarItem("Page 1").click();
+      await expect(
+        backstage.header.getByText("Welcome to page-1!"),
+      ).toBeVisible();
+      await expect(
+        backstage.content.getByText("Information card"),
+      ).toBeVisible();
+      await expect(
+        backstage.content.getByText("Example User List"),
+      ).toBeVisible();
+    });
+  });
+}

load-generator/scenarios/guest-login-home-catalog.spec.ts

@@ -6,7 +6,7 @@ const test = base.extend<{ backstage: Backstage }>({
   backstage: ({ page }, use) => use(new Backstage(page)),
 });
 
-const loops = 100; // TODO: use an env var to override this
+const loops = Number(process.env.LOOPS ?? 100);
 
 for (let i = 1; i <= loops; i++) {
   test(`run ${i} of ${loops}`, async ({ backstage, page }) => {

plugins/backstage-1.52/app-config.yaml

@@ -3,9 +3,12 @@ app:
   baseUrl: http://localhost:3000
   packages: all
   extensions:
-    - page:catalog:
+    - page:home:
         config:
           path: /
+    - page:catalog:
+        config:
+          path: /catalog
     - api:app/app-language:
         config:
           availableLanguages: ['en', 'de', 'es', 'fr', 'it', 'ja']

plugins/backstage-1.52/packages/app-nfs/e2e-tests/app.test.ts

@@ -23,5 +23,6 @@ test('App should render the welcome page', async ({ page }) => {
   await expect(enterButton).toBeVisible();
   await enterButton.click();
 
+  await page.locator('nav').getByRole('link', { name: 'Catalog', exact: true }).click();
   await expect(page.getByText('My Company Catalog')).toBeVisible();
 });

plugins/backstage-1.52/packages/app-nfs/src/App.tsx

@@ -1,5 +1,6 @@
 import { createApp } from '@backstage/frontend-defaults';
 import catalogPlugin from '@backstage/plugin-catalog/alpha';
+import homePlugin from '@backstage/plugin-home/alpha';
 import notificationsPlugin from '@backstage/plugin-notifications/alpha';
 import scaffolderPlugin from '@backstage/plugin-scaffolder/alpha';
 import searchPlugin from '@backstage/plugin-search/alpha';
@@ -10,6 +11,7 @@ import { navModule } from './modules/nav';
 
 export default createApp({
   features: [
+    homePlugin,
     catalogPlugin,
     scaffolderPlugin,
     searchPlugin,

plugins/backstage-1.52/packages/app-nfs/src/modules/nav/Sidebar.tsx

@@ -33,6 +33,7 @@ export const SidebarContent = NavContentBlueprint.make({
           </SidebarGroup>
           <SidebarDivider />
           <SidebarGroup label="Menu" icon={<MenuIcon />}>
+            {nav.take('page:home')}
             {nav.take('page:catalog')}
             {nav.take('page:scaffolder')}
             <SidebarDivider />