vighneshtule opened a new pull request, #60673:
URL: https://github.com/apache/airflow/pull/60673
## Add E2E tests for DAG Calendar tab functionality (#59544)
closes: #59544
### ๐ Description
This PR adds comprehensive End-to-End tests for the DAG Calendar tab to
verify calendar rendering, DAG run status visualization, and filtering
capabilities. The calendar view is a critical feature for visualizing DAG
execution history over time, and these tests ensure it functions correctly
across different scenarios and configurations.
### ๐ฏ Changes Made
#### 1. New Test Infrastructure
**[tests/e2e/pages/DagCalendarPage.ts](cci:7://file:///e:/Vighnesh/git/airflow/airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarPage.ts:0:0-0:0)**
- Page Object Model for Calendar tab interactions
- Encapsulates all calendar-specific UI interactions for reusable,
maintainable tests
- **Key Methods:**
- [navigateToCalendar(dagId:
string)](cci:1://file:///e:/Vighnesh/git/airflow/airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarPage.ts:33:4-37:5)
- Navigate to a specific DAG's calendar view
-
[verifyCalendarRender()](cci:1://file:///e:/Vighnesh/git/airflow/airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarPage.ts:39:4-43:5)
- Verify calendar grid, month/year header, and view mode buttons are visible
- [verifyDayRun(date: string, status:
string)](cci:1://file:///e:/Vighnesh/git/airflow/airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarPage.ts:45:4-57:5)
- Verify specific dates display correct run status with tooltips
- [clickDay(date:
string)](cci:1://file:///e:/Vighnesh/git/airflow/airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarPage.ts:59:4-62:5)
- Interact with calendar date cells
**[tests/e2e/specs/dag-calendar.spec.ts](cci:7://file:///e:/Vighnesh/git/airflow/airflow-core/src/airflow/ui/tests/e2e/specs/dag-calendar.spec.ts:0:0-0:0)**
- Comprehensive test specifications
- **Test Coverage:**
- โ
Calendar rendering with month/year navigation header
- โ
View mode toggles (Daily/Hourly, Total Runs/Failed Runs)
- โ
DAG runs displayed on correct calendar dates
- โ
Status colors matching run states (success=green, failed=red,
running=blue)
- โ
Interactive tooltips showing run details on hover
- โ
Filtering functionality (Total Runs vs Failed Runs modes)
#### 2. Component Enhancements for Testability
**[src/pages/Dag/Calendar/CalendarCell.tsx](cci:7://file:///e:/Vighnesh/git/airflow/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx:0:0-0:0)**
- Added `data-testid="calendar-cell"` for reliable element selection in E2E
tests
- Added `data-date="{date}"` attribute for precise date-specific element
targeting
- โ
**Preserved existing `data-count` attribute** for backward compatibility
with any existing functionality
**[src/pages/Dag/Calendar/Calendar.tsx](cci:7://file:///e:/Vighnesh/git/airflow/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/Calendar.tsx:0:0-0:0)**
- Added `data-testid="calendar-header-date"` to month/year header for
navigation state verification
### ๐งช Testing Approach
The tests follow established patterns from existing E2E test suites
([dag-runs.spec.ts](cci:7://file:///e:/Vighnesh/git/airflow/airflow-core/src/airflow/ui/tests/e2e/specs/dag-runs.spec.ts:0:0-0:0),
[dag-tasks.spec.ts](cci:7://file:///e:/Vighnesh/git/airflow/airflow-core/src/airflow/ui/tests/e2e/specs/dag-tasks.spec.ts:0:0-0:0)):
**Setup Phase** (`test.beforeAll`):
1. Creates test DAG runs via Airflow REST API
2. Sets specific run states (success, failed) for predictable test scenarios
3. Uses timestamps to prevent conflicts with existing test data
**Test Execution**:
1. Navigates to the DAG calendar view
2. Verifies UI elements render correctly using `data-testid` selectors
3. Tests both visual display accuracy and user interactions
4. Validates filtering and view mode changes
**Verification**:
- Calendar grid renders with correct structure
- Dates with DAG runs are visually highlighted
- Tooltips display accurate run information (status, count)
- Filter buttons correctly change displayed data
- Status colors match run states across light/dark themes
### ๐ Why These Changes Matter
**Problem:** The existing calendar functionality lacked E2E test coverage,
creating risk of:
- UI regressions going undetected
- Breaking changes to calendar interactions
- Inconsistent behavior across different run states
**Solution:** These tests ensure:
1. Calendar correctly renders the month grid layout
2. DAG runs are visually indicated on appropriate dates
3. Status colors accurately represent run states
4. Tooltips provide correct run information
5. View mode filtering works as expected
6. Future refactoring won't break calendar functionality
### ๐ธ What This Tests
Covers the calendar view as shown in issue #59544:
- โ
Monthly/yearly calendar grid
- โ
Run status indicators on calendar cells
- โ
Tooltip interactions showing run details
- โ
View mode toggle buttons (Daily/Hourly, Total/Failed)
- โ
Color-coded status representation
### ๐ Related Issues
- Parent Issue: #59028 (UI E2E Test Scenarios - Implementation Meta issue)
- This Issue: #59544 (UI E2E Test || DAG-008: Verify calendar tab
functionality)
### โ
Pre-Merge Checklist
- [x] E2E tests follow existing project patterns
- [x] Test attributes added without breaking existing functionality
- [x] Page Object Model created for maintainability
- [x] Tests verify both rendering and user interactions
- [x] Backward compatibility maintained (`data-count` preserved)
- [x] No documentation changes needed (test-only PR)
- [x] No newsfragment needed (internal test enhancement)
### ๐ฏ Testing Instructions
To run these tests locally:
```bash
cd airflow-core/src/airflow/ui
pnpm test:e2e tests/e2e/specs/dag-calendar.spec.ts
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
