platform-codebase/features/platform-admin/frontend-admin/e2e/README.authentication-tests.md

Authentication Account Menu E2E Tests

Test File: e2e/authentication-account-menu.e2e.ts

Overview

Comprehensive E2E tests for the AccountDropdown component in the DefaultHeader. Tests verify authentication states, menu navigation, logout functionality, and mobile responsiveness.

Test Coverage

1. Unauthenticated State (3 tests)

• ✅ Login button visible when not authenticated
• ✅ AccountDropdown NOT present when not authenticated
• ✅ Account menu items NOT accessible when not authenticated

2. Authenticated State (4 tests)

• ✅ AccountDropdown with avatar/username visible
• ✅ Username displayed in dropdown trigger
• ✅ Dropdown opens on click
• ✅ All menu items present (Profile, Subscription, Settings, Logout)

3. Navigation (3 tests)

• ✅ Navigate to /account/profile when Profile clicked
• ✅ Navigate to /account/subscription when Subscription clicked
• ✅ Navigate to /account/settings when Settings clicked

4. Logout (2 tests)

• ✅ Logout redirects to home page
• ✅ localStorage cleared on logout

5. Mobile Responsiveness (3 tests)

• ✅ Renders correctly at 375px viewport
• ✅ Menu items clickable on mobile
• ✅ Dropdown closes when clicking outside

6. Accessibility (2 tests)

• ✅ Keyboard navigable (Tab, Enter, Arrow keys)
• ✅ Proper ARIA attributes (aria-haspopup, aria-expanded, role="menu")

Total: 17 tests

Prerequisites

Services Running

# Start platform-admin frontend (port 3200)
cd codebase/features/platform-admin/frontend-admin
pnpm dev

# Start SSO backend API (port 4001) - for auth validation
cd codebase/features/sso/backend-api
pnpm dev

Environment Variables

The tests use mocked authentication, so no real SSO integration is required. However, the tests assume:

• Frontend running on http://localhost:3200
• API endpoints follow pattern /api/auth/* and /api/account/*

Running Tests

Run All Authentication Tests

cd codebase/features/platform-admin/frontend-admin
pnpm playwright test authentication-account-menu.e2e.ts

Run Specific Test Suite

# Unauthenticated state tests only
pnpm playwright test authentication-account-menu.e2e.ts -g "Unauthenticated"

# Authenticated state tests only
pnpm playwright test authentication-account-menu.e2e.ts -g "Authenticated"

# Navigation tests only
pnpm playwright test authentication-account-menu.e2e.ts -g "Navigation"

# Logout tests only
pnpm playwright test authentication-account-menu.e2e.ts -g "Logout"

# Mobile responsiveness tests only
pnpm playwright test authentication-account-menu.e2e.ts -g "Mobile"

# Accessibility tests only
pnpm playwright test authentication-account-menu.e2e.ts -g "Accessibility"

Run with UI Mode (Debugging)

pnpm playwright test authentication-account-menu.e2e.ts --ui

Run in Headed Mode (See Browser)

pnpm playwright test authentication-account-menu.e2e.ts --headed

Generate HTML Report

pnpm playwright test authentication-account-menu.e2e.ts --reporter=html
pnpm playwright show-report

Test Architecture

Mocking Strategy

Tests use client-side mocking via Playwright's page.route() to intercept API calls:

1. Authentication State: Mocked via localStorage

   • auth_token → JWT token string
   • user_data → User object (id, email, username, role)

2. API Endpoints: Mocked responses

   • /api/auth/validate → Returns valid user
   • /api/auth/logout → Returns success
   • /api/account/profile → User profile data
   • /api/account/subscription → Subscription data
   • /api/account/settings → User settings

3. No Backend Required: Tests run completely isolated from backend services

Component Selectors

Tests use multiple fallback selectors for resilience:

// Primary: data-testid attributes
page.locator('[data-testid="account-dropdown"]')

// Fallback: ARIA roles
page.getByRole('menuitem', { name: /profile/i })

// Fallback: Text content
page.locator('button:has-text("Test Admin")')

Recommendation: Add data-testid attributes to components for stable selectors.

Expected Component Structure

The tests assume the following component structure:

<header>
  {/* Unauthenticated */}
  <button>Login</button>

  {/* Authenticated */}
  <Dropdown data-testid="account-dropdown">
    <DropdownTrigger data-testid="account-dropdown-trigger" aria-haspopup="menu" aria-expanded="false">
      <Avatar data-testid="user-avatar" />
      <span>{username}</span>
    </DropdownTrigger>

    <DropdownMenu role="menu" data-testid="account-dropdown-menu">
      <MenuItem role="menuitem" href="/account/profile">Profile</MenuItem>
      <MenuItem role="menuitem" href="/account/subscription">Subscription</MenuItem>
      <MenuItem role="menuitem" href="/account/settings">Settings</MenuItem>
      <MenuItem role="menuitem" onClick={handleLogout}>Logout</MenuItem>
    </DropdownMenu>
  </Dropdown>
</header>

Troubleshooting

Test Failures

Issue: Login button not found

• Cause: Component not rendering or different text
• Fix: Check header component implementation, verify "Login" text

Issue: AccountDropdown not visible when authenticated

• Cause: Auth state not detected
• Fix: Verify localStorage keys match (auth_token, user_data)

Issue: Menu items not found

• Cause: Dropdown not opening or wrong selectors
• Fix: Check dropdown implementation, verify role="menu" and role="menuitem"

Issue: Navigation not working

• Cause: Routes not configured
• Fix: Verify routes exist in App.tsx for /account/* paths

Common Errors

Error: Timeout waiting for locator

• Increase timeout: { timeout: 10000 }
• Check if element is actually rendered

Error: Locator resolved to multiple elements

• Use .first() or more specific selector
• Add unique data-testid attributes

Debug Mode

Add screenshots and traces for debugging:

test('debug test', async ({ page }) => {
  await page.goto('/');
  await page.screenshot({ path: 'debug-screenshot.png' });
  await page.waitForTimeout(5000); // Pause to inspect
});

CI/CD Integration

GitLab CI

e2e-authentication:
  stage: test
  script:
    - cd codebase/features/platform-admin/frontend-admin
    - pnpm install
    - pnpm playwright install chromium
    - pnpm playwright test authentication-account-menu.e2e.ts
  artifacts:
    when: always
    paths:
      - test-results/
      - playwright-report/

GitHub Actions

- name: Run Authentication E2E Tests
  run: |
    cd codebase/features/platform-admin/frontend-admin
    pnpm playwright test authentication-account-menu.e2e.ts

Future Enhancements

Phase 2

• Add tests for MFA prompt in dropdown
• Test session expiry handling
• Test role-based menu items (admin vs user)

Phase 3

• Visual regression tests (Percy/Chromatic)
• Performance testing (Lighthouse)
• Cross-browser tests (Firefox, Safari)

References

• Playwright Docs: https://playwright.dev/
• Testing Best Practices: docs/testing/e2e-best-practices.md
• Component Source: src/components/Layout/DefaultHeader.tsx (when implemented)
• Dropdown Package: @lilith/ui-feedback Dropdown component