feat: add Playwright E2E smoke tests and fix empty namespace crash

Fix getNamespaces() to skip cluster-scoped resources (Namespace: "") that caused Router.createRouteURL to throw TypeError on the Namespaces page. Add Playwright E2E smoke tests with Authentik OIDC auth for CI and K8s token fallback for local dev. Add Gitea Actions E2E workflow, vitest unit test infrastructure, and test-utils fixtures. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-07 18:53:40 -05:00
parent 2a85f2a3d1
commit 186f9ef380
19 changed files with 1264 additions and 33 deletions
@@ -0,0 +1,58 @@
+# E2E Smoke Tests
+
+Playwright-based smoke tests that validate the Polaris plugin against a live Headlamp deployment.
+
+## CI
+
+E2E tests run automatically in Gitea Actions on pushes to `main` and pull requests. The workflow (`.gitea/workflows/e2e.yaml`) uses Authentik OIDC for authentication via repo secrets.
+
+### Required Gitea secrets
+
+| Secret               | Description                                                    |
+| -------------------- | -------------------------------------------------------------- |
+| `AUTHENTIK_USERNAME` | Authentik email or username for a CI user with Headlamp access |
+| `AUTHENTIK_PASSWORD` | Password for that user                                         |
+
+## Running Locally
+
+### Option 1: OIDC via Authentik (same as CI)
+
+```bash
+AUTHENTIK_USERNAME=you@example.com AUTHENTIK_PASSWORD=... npm run e2e
+```
+
+The default base URL is `https://headlamp.animaniacs.farh.net`. Override with `HEADLAMP_URL` if needed.
+
+### Option 2: K8s bearer token (port-forward)
+
+```bash
+kubectl port-forward -n kube-system svc/headlamp 4466:80
+export HEADLAMP_TOKEN=$(kubectl create token headlamp -n kube-system)
+HEADLAMP_URL=http://localhost:4466 npm run e2e
+```
+
+Or in headed mode (opens a browser window):
+
+```bash
+HEADLAMP_URL=http://localhost:4466 npm run e2e:headed
+```
+
+## Environment Variables
+
+| Variable             | Required | Default                                | Description                             |
+| -------------------- | -------- | -------------------------------------- | --------------------------------------- |
+| `HEADLAMP_URL`       | No       | `https://headlamp.animaniacs.farh.net` | Base URL of the Headlamp instance       |
+| `AUTHENTIK_USERNAME` | OIDC     | —                                      | Authentik email/username                |
+| `AUTHENTIK_PASSWORD` | OIDC     | —                                      | Authentik password                      |
+| `HEADLAMP_TOKEN`     | Token    | —                                      | Kubernetes bearer token (fallback auth) |
+
+Set either `AUTHENTIK_USERNAME` + `AUTHENTIK_PASSWORD` or `HEADLAMP_TOKEN`. OIDC takes priority if both are set.
+
+## What the Tests Validate
+
+- **Sidebar entry** — The Polaris sidebar item appears after login
+- **Overview page** — Cluster score and check distribution render correctly
+- **Namespaces page** — Table of namespaces loads with clickable links
+- **Namespace detail** — Clicking a namespace shows its score and resource table
+
+These are smoke tests against real cluster data. They verify the plugin loads and renders without errors, not specific data values.
@@ -0,0 +1,67 @@
+import { test as setup, expect, Page } from '@playwright/test';
+
+const AUTH_STATE_PATH = 'e2e/.auth/state.json';
+
+async function authenticateWithOIDC(page: Page, username: string, password: string): Promise<void> {
+  // Navigate to login — Headlamp redirects / to /c/main/login
+  await page.goto('/');
+  await page.waitForURL('**/login');
+
+  // Click "Sign In" and capture the Authentik popup
+  const popupPromise = page.waitForEvent('popup');
+  await page.getByRole('button', { name: /sign in/i }).click();
+  const popup = await popupPromise;
+
+  // Authentik step 1: fill username
+  await popup.getByRole('textbox', { name: /email or username/i }).fill(username);
+  await popup.getByRole('button', { name: /log in/i }).click();
+
+  // Authentik step 2: fill password
+  await popup.getByRole('textbox', { name: /password/i }).fill(password);
+  await popup.getByRole('button', { name: /continue|log in/i }).click();
+
+  // Wait for the popup to close (Authentik redirects back, Headlamp processes callback)
+  await popup.waitForEvent('close', { timeout: 15_000 });
+
+  // Original page should now be authenticated — wait for sidebar
+  await expect(page.getByRole('navigation', { name: 'Navigation' })).toBeVisible({
+    timeout: 15_000,
+  });
+}
+
+async function authenticateWithToken(page: Page, token: string): Promise<void> {
+  // Navigate to login — Headlamp redirects / to /c/main/login
+  await page.goto('/');
+  await page.waitForURL('**/login');
+
+  // Click the token auth option
+  await page.getByRole('button', { name: /use a token/i }).click();
+  await page.waitForURL('**/token');
+
+  // Fill the "ID token" field and submit
+  await page.getByRole('textbox', { name: /id token/i }).fill(token);
+  await page.getByRole('button', { name: /authenticate/i }).click();
+
+  // Wait for the main UI to load
+  await expect(page.getByRole('navigation', { name: 'Navigation' })).toBeVisible({
+    timeout: 15_000,
+  });
+}
+
+setup('authenticate with Headlamp', async ({ page }) => {
+  const username = process.env.AUTHENTIK_USERNAME;
+  const password = process.env.AUTHENTIK_PASSWORD;
+  const token = process.env.HEADLAMP_TOKEN;
+
+  if (username && password) {
+    await authenticateWithOIDC(page, username, password);
+  } else if (token) {
+    await authenticateWithToken(page, token);
+  } else {
+    throw new Error(
+      'Set AUTHENTIK_USERNAME + AUTHENTIK_PASSWORD for OIDC auth, or HEADLAMP_TOKEN for token auth'
+    );
+  }
+
+  await page.context().storageState({ path: AUTH_STATE_PATH });
+});
@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Polaris plugin smoke tests', () => {
+  test('sidebar contains Polaris entry', async ({ page }) => {
+    await page.goto('/');
+    // The sidebar is the "Navigation" nav element (not "Appbar Tools")
+    const sidebar = page.getByRole('navigation', { name: 'Navigation' });
+    await expect(sidebar).toBeVisible({ timeout: 15_000 });
+    await expect(sidebar.getByRole('button', { name: 'Polaris' })).toBeVisible();
+  });
+
+  test('overview page renders cluster score', async ({ page }) => {
+    await page.goto('/c/main/polaris');
+
+    // SectionHeader renders a heading
+    await expect(page.getByRole('heading', { name: 'Polaris \u2014 Overview' })).toBeVisible();
+
+    // "Cluster Score" section exists with a percentage
+    await expect(page.getByText('Cluster Score')).toBeVisible();
+    await expect(page.getByText(/%/)).toBeVisible();
+  });
+
+  test('namespaces page renders table with links', async ({ page }) => {
+    await page.goto('/c/main/polaris/namespaces');
+
+    await expect(page.getByRole('heading', { name: 'Polaris \u2014 Namespaces' })).toBeVisible();
+
+    // Table should have at least one row with a namespace link
+    const table = page.locator('table');
+    await expect(table).toBeVisible();
+    const rows = table.locator('tbody tr');
+    await expect(rows.first()).toBeVisible();
+
+    // Each namespace row should contain a link
+    const firstLink = rows.first().locator('a');
+    await expect(firstLink).toBeVisible();
+  });
+
+  test('namespace detail page renders from table link', async ({ page }) => {
+    await page.goto('/c/main/polaris/namespaces');
+
+    // Click the first namespace link in the table
+    const table = page.locator('table');
+    await expect(table).toBeVisible();
+    const firstLink = table.locator('tbody tr').first().locator('a');
+    const namespaceName = await firstLink.textContent();
+    await firstLink.click();
+
+    // Detail page should show the namespace name in the heading
+    await expect(
+      page.getByRole('heading', { name: `Polaris \u2014 ${namespaceName}` })
+    ).toBeVisible();
+
+    // "Namespace Score" section should be present
+    await expect(page.getByText('Namespace Score')).toBeVisible();
+
+    // Resources table should exist
+    await expect(page.getByText('Resources')).toBeVisible();
+    await expect(page.locator('table')).toBeVisible();
+  });
+});