test: establish dashboard plugin regression baseline

.github/workflows/build.yaml

@@ -32,6 +32,10 @@ jobs:
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           persist-credentials: false
+          # GU-25 compares the committed graph records against the base branch
+          # to catch baseline edits that are not declared in the expected-change
+          # manifest, so the base commit has to be present in the clone.
+          fetch-depth: 0
 
       - name: Parse release version and set environment variables
         run: python ./.github/scripts/get_release_version.py
@@ -67,12 +71,23 @@ jobs:
 
       - name: Run Tests
         if: ${{ env.CI_TEST == 'true' }}
+        env:
+          # Empty on push builds, where GU-25 falls back to origin/main.
+          GRAPH_RECORD_BASE_REF: ${{ github.event.pull_request.base.sha }}
         run: yarn run test:all
 
       - name: Run E2E Tests
         if: ${{ env.CI_TEST == 'true' }}
         run: yarn run test:e2e
 
+      - name: Run Component Browser Tests
+        if: ${{ env.CI_TEST == 'true' }}
+        run: yarn run test:e2e:components
+
+      - name: Qualify Package Artifacts
+        if: ${{ env.CI_TEST == 'true' }}
+        run: yarn run test:package
+
   build-and-publish-container:
     name: Build and Publish Container
     runs-on: ubuntu-24.04

package.json

@@ -22,6 +22,8 @@
     "test": "backstage-cli repo test",
     "test:all": "backstage-cli repo test --coverage",
     "test:e2e": "playwright test",
+    "test:e2e:components": "playwright test --config playwright.components.config.ts",
+    "test:package": "node scripts/test-package.js",
     "fix": "backstage-cli repo fix",
     "lint": "backstage-cli repo lint --since origin/main",
     "lint:all": "backstage-cli repo lint",
@@ -67,5 +69,42 @@
     "*.{json,md}": [
       "prettier --write"
     ]
+  },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "/__docs__/"
+    ],
+    "coverageThreshold": {
+      "./plugins/plugin-radius/src/": {
+        "statements": 73,
+        "branches": 55,
+        "functions": 68,
+        "lines": 74
+      },
+      "./plugins/plugin-radius-backend/src/": {
+        "statements": 93,
+        "branches": 100,
+        "functions": 100,
+        "lines": 100
+      },
+      "./packages/rad-components/src/": {
+        "statements": 95,
+        "branches": 93,
+        "functions": 94,
+        "lines": 94
+      },
+      "./packages/app/src/": {
+        "statements": 93,
+        "branches": 100,
+        "functions": 83,
+        "lines": 92
+      },
+      "./packages/backend/src/": {
+        "statements": 100,
+        "branches": 100,
+        "functions": 100,
+        "lines": 100
+      }
+    }
   }
 }

packages/app/e2e-tests/fixtures/multi-tier.json

@@ -0,0 +1,58 @@
+{
+  "name": "multi-tier",
+  "resources": [
+    {
+      "id": "/planes/radius/local/resourceGroups/demo/providers/Applications.Core/gateways/edge",
+      "name": "edge",
+      "type": "Applications.Core/gateways",
+      "provider": "radius",
+      "provisioningState": "Succeeded"
+    },
+    {
+      "id": "/planes/radius/local/resourceGroups/demo/providers/Applications.Core/containers/frontend",
+      "name": "frontend",
+      "type": "Applications.Core/containers",
+      "provider": "radius",
+      "provisioningState": "Succeeded",
+      "connections": [
+        {
+          "id": "/planes/radius/local/resourceGroups/demo/providers/Applications.Core/gateways/edge",
+          "name": "edge",
+          "type": "Applications.Core/gateways",
+          "provider": "radius",
+          "direction": "Inbound"
+        },
+        {
+          "id": "/planes/radius/local/resourceGroups/demo/providers/Applications.Core/containers/backend",
+          "name": "backend",
+          "type": "Applications.Core/containers",
+          "provider": "radius",
+          "direction": "Outbound"
+        }
+      ]
+    },
+    {
+      "id": "/planes/radius/local/resourceGroups/demo/providers/Applications.Core/containers/backend",
+      "name": "backend",
+      "type": "Applications.Core/containers",
+      "provider": "radius",
+      "provisioningState": "Succeeded",
+      "connections": [
+        {
+          "id": "/planes/radius/local/resourceGroups/demo/providers/Applications.Datastores/redisCaches/cache",
+          "name": "cache",
+          "type": "Applications.Datastores/redisCaches",
+          "provider": "radius",
+          "direction": "Outbound"
+        }
+      ]
+    },
+    {
+      "id": "/planes/radius/local/resourceGroups/demo/providers/Applications.Datastores/redisCaches/cache",
+      "name": "cache",
+      "type": "Applications.Datastores/redisCaches",
+      "provider": "radius",
+      "provisioningState": "Succeeded"
+    }
+  ]
+}

packages/app/e2e-tests/radiusGraph.test.ts

@@ -0,0 +1,229 @@
+import { expect, Page, Route, test } from '@playwright/test';
+import multiTier from './fixtures/multi-tier.json';
+
+const applicationId = (
+  namespace: 'Applications.Core' | 'Radius.Core',
+  name: string,
+) =>
+  `/planes/radius/local/resourceGroups/demo/providers/${namespace}/applications/${name}`;
+
+const application = (
+  namespace: 'Applications.Core' | 'Radius.Core',
+  name: string,
+) => ({
+  id: applicationId(namespace, name),
+  name,
+  type: `${namespace}/applications`,
+  location: 'global',
+  properties: {
+    environment:
+      '/planes/radius/local/resourceGroups/demo/providers/Applications.Core/environments/demo',
+  },
+});
+
+const applications = [
+  application('Applications.Core', 'legacy-app'),
+  application('Radius.Core', 'radius-app'),
+];
+
+const environment = {
+  id: '/planes/radius/local/resourceGroups/demo/providers/Applications.Core/environments/demo',
+  name: 'demo',
+  type: 'Applications.Core/environments',
+  location: 'global',
+  properties: {},
+};
+
+const resourceType = (namespace: string) => ({
+  Name: 'applications',
+  Description: 'Application resource type',
+  ResourceProviderNamespace: namespace,
+  APIVersions: { '2025-01-01': {} },
+  APIVersionList: ['2025-01-01'],
+});
+
+async function fulfillRadiusRequest(route: Route) {
+  const url = decodeURIComponent(route.request().url());
+
+  if (url.endsWith('/api/kubernetes/clusters')) {
+    await route.fulfill({
+      json: {
+        items: [{ name: 'e2e-cluster', authProvider: 'serviceAccount' }],
+      },
+    });
+    return;
+  }
+
+  if (!url.includes('/api/kubernetes/proxy/')) {
+    await route.continue();
+    return;
+  }
+
+  if (url.includes('/getGraph?')) {
+    await route.fulfill({ json: multiTier });
+    return;
+  }
+
+  const namespace = url.includes('/Radius.Core/')
+    ? 'Radius.Core'
+    : 'Applications.Core';
+  if (url.includes('/resourceTypes/applications?')) {
+    await route.fulfill({ json: resourceType(namespace) });
+    return;
+  }
+
+  const matchingApplication = applications.find(item => url.includes(item.id));
+  if (matchingApplication) {
+    await route.fulfill({ json: matchingApplication });
+    return;
+  }
+
+  if (url.includes(environment.id)) {
+    await route.fulfill({ json: environment });
+    return;
+  }
+
+  if (url.includes('/applications?')) {
+    await route.fulfill({
+      json: {
+        value: applications.filter(item => item.type.startsWith(namespace)),
+      },
+    });
+    return;
+  }
+
+  if (url.includes('/environments?')) {
+    await route.fulfill({ json: { value: [environment] } });
+    return;
+  }
+
+  await route.fulfill({ json: { value: [] } });
+}
+
+async function enterDashboard(page: Page) {
+  page.on('dialog', dialog => dialog.accept());
+  await page.goto('/applications');
+
+  const enter = page.getByRole('button', { name: 'Enter' });
+  if (await enter.isVisible({ timeout: 5_000 }).catch(() => false)) {
+    await enter.click();
+  }
+  await expect(
+    page.getByRole('heading', { name: 'Applications', level: 1 }),
+  ).toBeVisible({ timeout: 15_000 });
+}
+
+test.describe('Radius application graph journey', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/api/kubernetes/**', fulfillRadiusRequest);
+  });
+
+  test('PU-28: resolves every lazy plugin extension through its host route', async ({
+    page,
+  }) => {
+    await enterDashboard(page);
+
+    const routes = [
+      ['/applications', 'Applications'],
+      ['/environments', 'Environments'],
+      ['/recipes', 'Recipes'],
+      ['/resource-types', 'Resource Types'],
+      ['/resources', 'Resources'],
+      ['/resource-types/Radius.Core/applications', 'applications'],
+      [
+        '/resources/demo/Applications.Core/applications/legacy-app/overview',
+        'Resource',
+      ],
+      [
+        '/environments/demo/Applications.Core/environments/demo/overview',
+        'Environment',
+      ],
+    ] as const;
+
+    for (const [route, heading] of routes) {
+      await page.goto(route);
+      await expect(
+        page.getByRole('heading', { name: heading, level: 1 }),
+      ).toBeVisible({ timeout: 15_000 });
+    }
+  });
+
+  test('E2E-03 / GU-12 / GU-13: navigates from both application namespaces to the real graph', async ({
+    page,
+  }) => {
+    await enterDashboard(page);
+
+    for (const item of applications) {
+      const applicationLink = page.getByRole('link', { name: item.name });
+      await expect(applicationLink).toBeVisible();
+      await applicationLink.click();
+      await page.getByRole('tab', { name: 'App Graph' }).click();
+
+      await expect(
+        page.getByRole('button', {
+          name: /^frontend/,
+        }),
+      ).toBeVisible();
+      await expect(
+        page.getByRole('button', {
+          name: /^Edge from .*backend.* to .*frontend/,
+        }),
+      ).toBeVisible();
+
+      await page.goto('/applications');
+    }
+  });
+
+  test('E2E-10: direct-link refresh preserves the rendered application graph', async ({
+    page,
+  }) => {
+    await enterDashboard(page);
+    await page.goto(
+      '/resources/demo/Applications.Core/applications/legacy-app/application',
+    );
+    await expect(
+      page.getByRole('button', {
+        name: /^frontend/,
+      }),
+    ).toBeVisible();
+
+    await page.reload();
+
+    await expect(
+      page.getByRole('button', {
+        name: /^frontend/,
+      }),
+    ).toBeVisible();
+  });
+
+  // KNOWN-DEFECT (#370): the visible error needs an accessible retry action.
+  test('GU-16 / ER-10: KNOWN-DEFECT an unavailable graph request renders an error without retry', async ({
+    page,
+  }) => {
+    await page.route(/\/api\/kubernetes\/proxy\/.*\/getGraph\?/, route =>
+      route.fulfill({ status: 503, body: 'Service Unavailable' }),
+    );
+    await enterDashboard(page);
+    await page.goto(
+      '/resources/demo/Applications.Core/applications/legacy-app/application',
+    );
+
+    await expect(page.getByRole('alert')).toContainText('Request failed: 503');
+    await expect(page.locator('.react-flow')).toHaveCount(0);
+  });
+
+  test('ER-09: a graph request timeout renders its distinct timeout error', async ({
+    page,
+  }) => {
+    await page.route(/\/api\/kubernetes\/proxy\/.*\/getGraph\?/, () => {});
+    await enterDashboard(page);
+    await page.goto(
+      '/resources/demo/Applications.Core/applications/legacy-app/application',
+    );
+
+    await expect(page.getByRole('alert')).toContainText('timed out', {
+      timeout: 15_000,
+    });
+    await expect(page.locator('.react-flow')).toHaveCount(0);
+  });
+});

packages/app/package.json

@@ -44,6 +44,7 @@
   },
   "devDependencies": {
     "@backstage/cli-defaults": "^0.1.5",
+    "@backstage/config": "^1.3.8",
     "@backstage/test-utils": "^1.7.21",
     "@playwright/test": "^1.62.1",
     "@testing-library/dom": "^10.4.1",