fix(DagCalendarTab): improve background color retrieval and loading overlay handling (#64189)

* fix(DagCalendarTab): improve background color retrieval and loading overlay handling

* fix(DagCalendarTab): update loading overlay and calendar cell visibility checks

* fix(DagCalendarTab): improve background color retrieval and loading overlay handling

* fix(DagCalendarTab): update loading overlay and calendar cell visibility checks

* refactor: update visibility checks in DagCalendarTab

* remove redundant visibility checks in DagCalendarTab

* removed unrelated change and attempted to resolve merge conflict markers

* Update airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarTab.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarTab.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* updated getActiveCellColors to use getComputedStyle to properly return rendered color of an element

* simplify child element color retrieval and improve readability

* changed file mode

---------

Co-authored-by: Yeonguk Choo <choo121600@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarTab.ts

@@ -50,9 +50,35 @@ export class DagCalendarTab extends BasePage {
 
     for (let i = 0; i < count; i++) {
       const cell = this.activeCells.nth(i);
-      const bg = await cell.evaluate((el) => window.getComputedStyle(el).backgroundColor);
+      const computedColor = await cell.evaluate((el: Element) => {
+        const getRenderableColor = (element: Element): string => {
+          const color = window.getComputedStyle(element).backgroundColor;
 
-      colors.push(bg);
+          return color && color !== "rgba(0, 0, 0, 0)" && color !== "transparent" ? color : "";
+        };
+
+        const cellColor = getRenderableColor(el);
+
+        if (cellColor) {
+          return cellColor;
+        }
+
+        const children = [...el.querySelectorAll("*")];
+
+        for (const child of children) {
+          const childColor = getRenderableColor(child);
+
+          if (childColor) {
+            return childColor;
+          }
+        }
+
+        return "";
+      });
+
+      if (computedColor) {
+        colors.push(computedColor);
+      }
     }
 
     return colors;
@@ -88,7 +114,7 @@ export class DagCalendarTab extends BasePage {
   public async navigateToCalendar(dagId: string) {
     await expect(async () => {
       await this.safeGoto(`/dags/${dagId}/calendar`);
-      await this.page.getByTestId("dag-calendar-root").waitFor({ state: "visible", timeout: 5000 });
+      await expect(this.page.getByTestId("dag-calendar-root")).toBeVisible({ timeout: 5000 });
     }).toPass({ intervals: [2000], timeout: 60_000 });
     await this.waitForCalendarReady();
   }
@@ -100,7 +126,7 @@ export class DagCalendarTab extends BasePage {
   public async switchToHourly() {
     await this.hourlyToggle.click();
 
-    await this.page.getByTestId("calendar-hourly-view").waitFor({ state: "visible", timeout: 30_000 });
+    await expect(this.page.getByTestId("calendar-hourly-view")).toBeVisible({ timeout: 30_000 });
   }
 
   public async switchToTotalView() {
@@ -112,22 +138,16 @@ export class DagCalendarTab extends BasePage {
   }
 
   private async waitForCalendarReady(): Promise<void> {
-    await this.page.getByTestId("dag-calendar-root").waitFor({ state: "visible", timeout: 120_000 });
+    await expect(this.page.getByTestId("dag-calendar-root")).toBeVisible({ timeout: 120_000 });
 
-    await this.page.getByTestId("calendar-current-period").waitFor({ state: "visible", timeout: 120_000 });
+    await expect(this.page.getByTestId("calendar-current-period")).toBeVisible({ timeout: 120_000 });
+    await expect(this.page.getByTestId("calendar-grid")).toBeVisible({ timeout: 120_000 });
 
     const overlay = this.page.getByTestId("calendar-loading-overlay");
 
-    if (await overlay.isVisible().catch(() => false)) {
-      await overlay.waitFor({ state: "hidden", timeout: 120_000 });
-    }
-
-    await this.page.getByTestId("calendar-grid").waitFor({ state: "visible", timeout: 120_000 });
-
-    await this.page.waitForFunction(() => {
-      const cells = document.querySelectorAll('[data-testid="calendar-cell"]');
+    await expect(overlay).toBeHidden({ timeout: 120_000 });
+    const cells = this.page.getByTestId("calendar-cell");
 
-      return cells.length > 0;
-    });
+    await expect(cells.first()).toBeVisible({ timeout: 120_000 });
   }
 }