test: add e2e tests for public roadmap feature (#86)

Add comprehensive Playwright e2e tests for the roadmap board:
- 14 API tests covering board, idea, and comments endpoints
- 18 UI tests covering layout, columns, filtering, and detail panel
- Add data-testid attributes to all roadmap component templates
- Wire Atlassian credentials into e2e workflow via AWS Secrets Manager

Signed-off-by: Asitha de Silva <[email protected]>

Author: asithade

.github/workflows/e2e.yml

@@ -54,6 +54,7 @@ jobs:
           secret-ids: |
             AUTH0, /cloudops/managed-secrets/auth0/LFX_Changelog
             AUTH0_COOKIE_SECRET, /cloudops/managed-secrets/cloud/changelog/auth0_secret
+            ATLASSIAN, /cloudops/managed-secrets/cloud/changelog/atlassian_api
 
       - name: Set up non-sensitive environment variables
         run: |
@@ -67,7 +68,6 @@ jobs:
           echo "OPENSEARCH_URL=http://localhost:9202" >> "$GITHUB_ENV"
           echo "SKIP_RATE_LIMIT=true" >> "$GITHUB_ENV"
           echo "CI=true" >> "$GITHUB_ENV"
-
           # Slack OAuth (random values for e2e — tests verify auth/validation, not real Slack calls)
           echo "SLACK_CLIENT_ID=$(openssl rand -hex 16)" >> "$GITHUB_ENV"
           echo "SLACK_CLIENT_SECRET=$(openssl rand -hex 24)" >> "$GITHUB_ENV"
@@ -94,6 +94,7 @@ jobs:
           E2E_PRODUCT_ADMIN_EMAIL: ${{ secrets.E2E_PRODUCT_ADMIN_EMAIL }}
           E2E_EDITOR_EMAIL: ${{ secrets.E2E_EDITOR_EMAIL }}
           E2E_USER_EMAIL: ${{ secrets.E2E_USER_EMAIL }}
+          ATLASSIAN_CLOUD_ID: ${{ secrets.ATLASSIAN_CLOUD_ID }}
         run: |
           # Parse Auth0 app credentials from JSON secret
           AUTH0_CLIENT_ID=$(echo "$AUTH0" | jq -r '.client_id')
@@ -151,6 +152,28 @@ jobs:
           echo "E2E_EDITOR_EMAIL=$E2E_EDITOR_EMAIL" >> "$GITHUB_ENV"
           echo "E2E_USER_EMAIL=$E2E_USER_EMAIL" >> "$GITHUB_ENV"
 
+          # Parse Atlassian / Jira credentials from AWS secret (required for roadmap tests)
+          ATLASSIAN_EMAIL_VALUE=$(echo "$ATLASSIAN" | jq -r '.atlassian_email')
+          ATLASSIAN_API_KEY_VALUE=$(echo "$ATLASSIAN" | jq -r '.atlassian_api_key')
+
+          if [ -z "$ATLASSIAN_EMAIL_VALUE" ] || [ "$ATLASSIAN_EMAIL_VALUE" = "null" ]; then
+            echo "::error::Failed to parse atlassian_email from AWS secret"
+            exit 1
+          fi
+          if [ -z "$ATLASSIAN_API_KEY_VALUE" ] || [ "$ATLASSIAN_API_KEY_VALUE" = "null" ]; then
+            echo "::error::Failed to parse atlassian_api_key from AWS secret"
+            exit 1
+          fi
+
+          echo "::add-mask::$ATLASSIAN_EMAIL_VALUE"
+          echo "::add-mask::$ATLASSIAN_API_KEY_VALUE"
+
+          echo "ATLASSIAN_EMAIL=$ATLASSIAN_EMAIL_VALUE" >> "$GITHUB_ENV"
+          echo "ATLASSIAN_API_KEY=$ATLASSIAN_API_KEY_VALUE" >> "$GITHUB_ENV"
+
+          echo "::add-mask::$ATLASSIAN_CLOUD_ID"
+          echo "ATLASSIAN_CLOUD_ID=$ATLASSIAN_CLOUD_ID" >> "$GITHUB_ENV"
+
       - name: Install Playwright Chromium
         run: npx playwright install chromium --with-deps
 

apps/lfx-changelog/.env.e2e.example

@@ -14,6 +14,11 @@ OPENSEARCH_URL=http://localhost:9202
 # Skip rate limiting during E2E tests
 SKIP_RATE_LIMIT=true
 
+# Atlassian / Jira (required for roadmap tests)
+ATLASSIAN_EMAIL=
+ATLASSIAN_API_KEY=
+ATLASSIAN_CLOUD_ID=
+
 # Slack OAuth (required for Slack integration tests)
 SLACK_CLIENT_ID=
 SLACK_CLIENT_SECRET=

apps/lfx-changelog/e2e/pages/roadmap-board.page.ts

@@ -0,0 +1,80 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import type { Locator, Page } from '@playwright/test';
+
+export class RoadmapBoardPage {
+  public readonly board: Locator;
+  public readonly heading: Locator;
+  public readonly totalIdeas: Locator;
+  public readonly syncedLabel: Locator;
+  public readonly teamFilters: Locator;
+  public readonly teamClear: Locator;
+  public readonly loading: Locator;
+  public readonly kanban: Locator;
+  public readonly toggleCompleted: Locator;
+  public readonly detailBackdrop: Locator;
+  public readonly detailPanel: Locator;
+  public readonly detailClose: Locator;
+  public readonly detailLoading: Locator;
+  public readonly detailSummary: Locator;
+  public readonly detailColumn: Locator;
+  public readonly detailKey: Locator;
+  public readonly detailDescription: Locator;
+  public readonly detailComments: Locator;
+  public readonly detailNotFound: Locator;
+
+  public constructor(public readonly page: Page) {
+    this.board = page.locator('[data-testid="roadmap-board"]');
+    this.heading = page.locator('[data-testid="roadmap-heading"]');
+    this.totalIdeas = page.locator('[data-testid="roadmap-total-ideas"]');
+    this.syncedLabel = page.locator('[data-testid="roadmap-synced-label"]');
+    this.teamFilters = page.locator('[data-testid="roadmap-team-filters"]');
+    this.teamClear = page.locator('[data-testid="roadmap-team-clear"]');
+    this.loading = page.locator('[data-testid="roadmap-loading"]');
+    this.kanban = page.locator('[data-testid="roadmap-kanban"]');
+    this.toggleCompleted = page.locator('[data-testid="roadmap-toggle-completed"]');
+    this.detailBackdrop = page.locator('[data-testid="roadmap-detail-backdrop"]');
+    this.detailPanel = page.locator('[data-testid="roadmap-detail-panel"]');
+    this.detailClose = page.locator('[data-testid="roadmap-detail-close"]');
+    this.detailLoading = page.locator('[data-testid="roadmap-detail-loading"]');
+    this.detailSummary = page.locator('[data-testid="roadmap-detail-summary"]');
+    this.detailColumn = page.locator('[data-testid="roadmap-detail-column"]');
+    this.detailKey = page.locator('[data-testid="roadmap-detail-key"]');
+    this.detailDescription = page.locator('[data-testid="roadmap-detail-description"]');
+    this.detailComments = page.locator('[data-testid="roadmap-detail-comments"]');
+    this.detailNotFound = page.locator('[data-testid="roadmap-detail-not-found"]');
+  }
+
+  public async goto() {
+    await this.page.goto('/roadmap', { waitUntil: 'networkidle' });
+  }
+
+  public getColumn(name: string): Locator {
+    return this.page.locator(`[data-testid="roadmap-column-${name}"]`);
+  }
+
+  public getColumnCount(name: string): Locator {
+    return this.getColumn(name).locator('[data-testid="roadmap-column-count"]');
+  }
+
+  public getColumnEmpty(name: string): Locator {
+    return this.getColumn(name).locator('[data-testid="roadmap-column-empty"]');
+  }
+
+  public getTeamPill(team: string): Locator {
+    return this.page.locator(`[data-testid="roadmap-team-pill-${team}"]`);
+  }
+
+  public getCard(jiraKey: string): Locator {
+    return this.page.locator(`[data-testid="roadmap-card-${jiraKey}"]`);
+  }
+
+  public getCards(): Locator {
+    return this.page.locator('[data-testid^="roadmap-card-"]');
+  }
+
+  public getColumns(): Locator {
+    return this.page.locator('[data-testid^="roadmap-column-"]').filter({ hasNot: this.page.locator('[data-testid^="roadmap-column-"]') });
+  }
+}