test: add comprehensive E2E testing with Playwright and CI workflows #19

asithade · 2025-07-30T21:27:39Z

🎯 Add Comprehensive E2E Testing with Playwright

Overview

This PR implements a complete end-to-end testing solution for LFX PCC v3 using Playwright, including CI/CD integration and automated test workflows.

Key Features

🧪 E2E Test Suite

86 tests across Homepage and Project Dashboard functionality
Dual architecture: Content-based and structural (robust) test patterns
Multi-browser support: Chromium, Firefox, Mobile Chrome
Responsive testing: Mobile, tablet, and desktop viewports
Authentication: Integrated Auth0 test flows

🚀 CI/CD Integration

PR Tests: Fast Chromium-only tests on pull requests
Weekly Tests: Comprehensive all-browser testing on main branch (Sundays 2 AM UTC)
Auto-reporting: PR comments with test results and failure notifications
Issue creation: Automatic GitHub issues for failed weekly tests

📋 Test Coverage

Homepage: Search, navigation, project cards, responsive design (34 tests)
Project Dashboard: Metrics, health indicators, quick actions, navigation (52 tests)
Data-driven: Uses data-testid attributes for reliable element targeting

🔧 Technical Stack

Playwright with TypeScript
AWS OIDC authentication for CI
Secrets management via AWS Secrets Manager
GitHub Actions workflows
Comprehensive test reporting and artifacts

Files Changed

Added E2E test files and Playwright configuration
Created reusable and weekly CI workflows
Added data-testid attributes to components
Updated documentation and project configuration

This establishes a robust testing foundation for maintaining application quality and preventing regressions.

- Add MeetingFormComponent with comprehensive form validation and tooltips - Create backend endpoints for meeting CRUD operations (POST/PUT/GET) - Add TypeScript interfaces for CreateMeetingRequest and UpdateMeetingRequest - Implement proper datetime conversion from 12-hour format to ISO - Integrate meeting form into modal component with create/edit modes - Add meeting creation functionality to dashboard with form modal - Update SupabaseService with meeting management methods - Fix time picker integration and validation Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

- Add comprehensive timezone list with 80+ timezones covering all regions - Implement form validation to ensure meetings are scheduled in the future - Add calendar date restriction to only allow dates from yesterday onwards - Default start date/time to current time + 1 hour (rounded to 15 min) - Show all validation errors when submit is clicked - Add minDate/maxDate support to calendar component wrapper - Create timezone constants in shared package with helper functions - Fix nested ternary expressions per linting rules - Update meeting type validation and default values Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

- Fix meeting_type default value to use 'None' instead of empty string - Ensure consistent default values across create and edit modes - Update form patchValue to handle meeting data properly Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

Implement comprehensive recurring meeting functionality with 6 predefined recurrence patterns: - Does not repeat (default) - Daily - Weekly on [current day] - Monthly on the [nth] [day] - Monthly on the last [day] - Every weekday Key features: - Dynamic options based on selected meeting date - Smart UI that only shows relevant options (no duplicate monthly options) - Proper memory management with takeUntilDestroyed() - Full TypeScript support with new MeetingRecurrence interface - Generates correct Zoom API recurrence objects - Edit support for existing recurring meetings Technical implementation: - Added RecurrenceType enum to shared enums package - Enhanced MeetingRecurrence interface with proper typing - Updated CreateMeetingRequest and UpdateMeetingRequest interfaces - Intelligent date calculation for monthly recurrence patterns - Subscription cleanup to prevent memory leaks Addresses LFXV2-138: Add Recurring Meeting Options to Meeting Form Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> Signed-off-by: Asitha de Silva <[email protected]>

…nums folder Move MeetingVisibility and MeetingType enums from interfaces to the proper shared enums folder structure for better organization and consistency. 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

- Add DELETE endpoint with recurrence handling support - Enhanced confirmation dialog with meeting details preview - Options for recurring meetings (single occurrence vs entire series) - Dynamic menu items that exclude edit option for past meetings - Proper loading states and error handling throughout deletion flow - Complete backend and frontend integration with proper validation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> Signed-off-by: Asitha de Silva <[email protected]>

- Create MeetingDeleteConfirmationComponent for better HTML control - Add shared RadioButtonComponent following checkbox pattern - Replace inline HTML confirmation with structured component - Implement form-controlled radio buttons for recurring meeting options - Clean up meeting dashboard by removing multiple helper methods - Add proper TypeScript interfaces for component data/results 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

- Move meeting deletion logic from dashboard to confirmation component - Add comprehensive error handling with specific HTTP status messages - Implement loading states with disabled buttons and spinner icons - Add success/error toast notifications for user feedback - Keep dialog open on error to allow retry, close only on success - Simplify meeting dashboard by removing deletion state management - Improve separation of concerns and component self-containment 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

- Add 'future' delete type for recurring meetings to delete from current date forward - Hide radio button options for past meetings (only show single delete option implicitly) - Update backend and frontend services to support new 'future' delete type - Add conditional UI logic based on meeting start_time vs current time - Enhanced warning messages for different delete scenarios - Improved UX by showing only relevant options based on meeting timing 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

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

…port - Add edit meeting functionality to meeting dashboard component - Create RecurringMeetingEditOptionsComponent for two-step edit flow - Support editing single occurrence vs future occurrences for recurring meetings - Hide recurrence and meeting settings when editing single occurrence only - Fix interface alignment between Create/Update requests and database schema - Remove end_time field and calculate from start_time + duration - Add recording_access field to meeting form and interfaces - Fix AI summary field initialization with nullish coalescing - Update backend routes and services to support editType parameter - Improve form field visibility based on edit context 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

- Add restricted field as a boolean toggle in meeting settings - Update form group to include restricted control - Add restricted field to meeting data submission - Initialize restricted field when editing existing meetings - Hide restricted toggle when editing single occurrence only The restricted toggle allows marking meetings with limited access where only authorized participants can join. 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

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

- Add participant API endpoints (GET, POST, DELETE) for meeting participants - Create AddParticipantFormComponent with form validation and error handling - Create ParticipantListComponent with delete functionality and confirmation dialogs - Create ParticipantManagementModalComponent with Inplace toggle for adding participants - Create shared InplaceComponent wrapper for PrimeNG Inplace - Add participant management to meeting dashboard action menu - Integrate participant modal with meeting cards (opens when no participants) - Implement dashboard refresh when participants are modified - Add backend Supabase service methods for participant CRUD operations - Update meetings_with_committees view to include participant counts - Add proper error handling and loading states throughout 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> Signed-off-by: Asitha de Silva <[email protected]>

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

- Create modular file organization with 5 main sections: dashboard, meetings, committees, mailing-lists, settings - Move route components to their respective section folders - Move section-specific components from shared/components to section-specific components folders - Update all import paths to reflect new structure - Update documentation to reflect new component placement guidelines This improves code organization by co-locating related components and reducing the shared components folder to only truly cross-cutting UI components. JIRA: LFXV2 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> Signed-off-by: Asitha de Silva <[email protected]>

- Create reusable E2E testing workflow (.github/workflows/e2e-tests.yml) - Add comprehensive Playwright E2E tests for homepage and project dashboard - Integrate E2E tests into quality check CI workflow - Add proper environment variable setup for Auth0 and database connections - Implement robust test architecture with dual approach (content + structural) - Add secret validation and graceful fallback for missing credentials - Configure Turborepo for E2E task management with proper caching - Add comprehensive testing documentation and best practices - Remove placeholder unit/integration test docs in favor of actual E2E implementation - Fix license headers across all E2E test files to use MIT format 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

github-actions · 2025-07-30T21:31:43Z

✅ E2E Tests Passed

Browser: chromium
Status: passed

All E2E tests passed successfully.

Test Configuration

Node.js: 22
Command: e2e
Browser: chromium
Base URL: http://localhost:4200

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

- Add mobile search overlay functionality with proper UX patterns - Implement viewport-aware header behavior (mobile vs desktop) - Add data-testid attributes for reliable E2E test targeting - Optimize project dashboard layout for mobile and tablet viewports - Enhance project layout component with flexible responsive grid - Update E2E tests to validate mobile search functionality - Use Angular 19 viewChild signals and modern template syntax 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

Copilot

Pull Request Overview

This PR introduces comprehensive E2E testing capabilities with Playwright, implementing a dual testing architecture (content-based + structural tests) and integrating E2E tests into the CI/CD pipeline.

Key changes include:

Added comprehensive E2E test suite with 85+ tests covering homepage and project dashboard functionality
Implemented data-testid architecture throughout components for reliable test targeting
Created reusable CI workflow for E2E testing with proper authentication and environment setup

Reviewed Changes

Copilot reviewed 28 out of 29 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`turbo.json`	Added E2E testing tasks with proper caching configuration
`docs/architecture/testing/`	Updated testing documentation to focus on implemented E2E architecture
`apps/lfx-pcc/src/app/`	Added data-testid attributes to components for robust test targeting
`apps/lfx-pcc/e2e/`	Complete E2E test suite with dual architecture approach
`apps/lfx-pcc/playwright.config.ts`	Playwright configuration with multi-browser support
`.github/workflows/`	CI integration for automated E2E testing

Comments suppressed due to low confidence (1)

apps/lfx-pcc/src/app/shared/components/header/header.component.ts:32

[nitpick] The variable name 'mobileSearchInput' could be more descriptive. Consider 'mobileSearchInputRef' to clearly indicate it's a ViewChild reference to an ElementRef.

  private readonly mobileSearchInput = viewChild<ElementRef>('mobileSearchInput');

turbo.json

apps/lfx-pcc/src/app/shared/components/header/header.component.html

apps/lfx-pcc/e2e/homepage-robust.spec.ts

apps/lfx-pcc/e2e/helpers/auth.helper.ts

.github/workflows/e2e-tests.yml

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

- Add weekly-e2e-tests.yml workflow for comprehensive browser testing - Runs every Sunday at 2:00 AM UTC on main branch - Tests all browsers (Chromium, Firefox, Mobile Chrome) in parallel - Reuses existing e2e-tests.yml workflow for consistency - Creates GitHub issues automatically on test failures - Supports manual dispatch with browser/branch selection - Re-enable E2E tests dependency in quality-check workflow Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

asithade and others added 22 commits July 25, 2025 15:16

refactor: remove unused code

d685c8d

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

Merge branch 'main' into feat/edit-meeting-functionality

dfac908

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

Merge branch 'main' into feat/manage-participants

2d559f5

Merge branch 'main' into feat/manage-participants

6e2ef42

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

fix: missing imports

f9730db

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

fix: delete participant styling

4410fbb

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

fix: converting to singals

d0b9837

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

Merge branch 'main' into feat/playwright-tests

047cebc

asithade added 2 commits July 30, 2025 15:29

fix: docs linting

b6e18f7

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

asithade marked this pull request as ready for review July 30, 2025 22:39

Copilot AI review requested due to automatic review settings July 30, 2025 22:39

asithade requested a review from jordane as a code owner July 30, 2025 22:39

Copilot AI reviewed Jul 30, 2025

View reviewed changes

ci: update auth0 and supabase env vars

c3dc062

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

asithade changed the title ~~WIP: Add comprehensive E2E testing with Playwright and CI workflows~~ test: add comprehensive E2E testing with Playwright and CI workflows Jul 31, 2025

asithade added 11 commits July 30, 2025 19:16

ci: fix e2e workflow

83666e0

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

ci: fix permissions for e2e flow

2bc9e94

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

ci: fix access to secret values

bc2f0ed

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

ci: fix e2e folder

dab38e0

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

ci: fix e2e folder

7d54b63

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

ci: hide secret values

5049a29

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

ci: hide secret values

793a9b1

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

ci: add secrets

3997569

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

ci: add secrets

ea29994

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

ci: fix permissions for comments

a168d32

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

ci: remove trace

1300c9e

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

linuxfoundation deleted a comment from github-actions bot Jul 31, 2025

ci: update existing comment for test status

c67fc00

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

linuxfoundation deleted a comment from github-actions bot Jul 31, 2025

asithade requested review from andrest50 and audigregorie July 31, 2025 16:43

asithade requested a review from dealako July 31, 2025 19:38

dealako approved these changes Jul 31, 2025

View reviewed changes

dealako merged commit 498f3f0 into main Jul 31, 2025
5 checks passed

dealako deleted the feat/playwright-tests branch July 31, 2025 21:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test: add comprehensive E2E testing with Playwright and CI workflows #19

test: add comprehensive E2E testing with Playwright and CI workflows #19

Uh oh!

asithade commented Jul 30, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 30, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

test: add comprehensive E2E testing with Playwright and CI workflows #19

test: add comprehensive E2E testing with Playwright and CI workflows #19

Uh oh!

Conversation

asithade commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Add Comprehensive E2E Testing with Playwright

Overview

Key Features

🧪 E2E Test Suite

🚀 CI/CD Integration

📋 Test Coverage

🔧 Technical Stack

Files Changed

Uh oh!

github-actions bot commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ E2E Tests Passed

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

asithade commented Jul 30, 2025 •

edited

Loading

github-actions bot commented Jul 30, 2025 •

edited

Loading