Test: Add E2E tests for Assets Page

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

@@ -0,0 +1,101 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { Locator, Page } from "@playwright/test";
+
+import { BasePage } from "./BasePage";
+
+export class AssetListPage extends BasePage {
+  public readonly emptyState: Locator;
+  public readonly heading: Locator;
+  public readonly rows: Locator;
+  public readonly searchInput: Locator;
+  public readonly table: Locator;
+
+  public constructor(page: Page) {
+    super(page);
+
+    this.heading = page.getByRole("heading", {
+      name: /\d+\s+asset/i,
+    });
+    this.table = page.getByTestId("table-list");
+    this.rows = this.table.locator("tbody tr").filter({
+      has: page.locator("td"),
+    });
+
+    this.searchInput = page.getByTestId("search-dags");
+    this.emptyState = page.getByText(/no items/i);
+  }
+
+  public async assetCount(): Promise<number> {
+    return this.rows.count();
+  }
+
+  public async assetNames(): Promise<Array<string>> {
+    return this.rows.locator("td a").allTextContents();
+  }
+
+  public async navigate(): Promise<void> {
+    await this.navigateTo("/assets");
+  }
+
+  public async openFirstAsset(): Promise<string> {
+    const count = await this.rows.count();
+
+    if (count === 0) {
+      throw new Error("No assets found to click");
+    }
+
+    const link = this.rows.nth(0).locator("a").first();
+    const name = await link.textContent();
+
+    await link.click();
+
+    return name?.trim() ?? "";
+  }
+
+  public async search(value: string): Promise<void> {
+    await this.searchInput.fill(value);
+    await this.waitForTableData();
+  }
+
+  public async waitForLoad(): Promise<void> {
+    await this.table.waitFor({ state: "visible", timeout: 30_000 });
+    await this.waitForTableData();
+  }
+
+  private async waitForTableData(): Promise<void> {
+    // Wait for actual data links to appear (not skeleton loaders)
+    await this.page.waitForFunction(
+      () => {
+        const table = document.querySelector('[data-testid="table-list"]');
+
+        if (!table) {
+          return false;
+        }
+
+        // Check for actual links in tbody (real data, not skeleton)
+        const links = table.querySelectorAll("tbody tr td a");
+
+        return links.length > 0;
+      },
+      undefined,
+      { timeout: 30_000 },
+    );
+  }
+}

airflow-core/src/airflow/ui/tests/e2e/specs/asset.spec.ts

@@ -0,0 +1,138 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { expect, test } from "@playwright/test";
+import { AUTH_FILE } from "playwright.config";
+
+import { AssetListPage } from "../pages/AssetListPage";
+import { DagsPage } from "../pages/DagsPage";
+
+test.describe("Assets Page", () => {
+  let assets: AssetListPage;
+
+  test.beforeAll(async ({ browser }) => {
+    test.setTimeout(3 * 60 * 1000);
+    const context = await browser.newContext({ storageState: AUTH_FILE });
+    const page = await context.newPage();
+    const dagsPage = new DagsPage(page);
+
+    await dagsPage.triggerDag("asset_produces_1");
+    await expect
+      .poll(
+        async () => {
+          const response = await page.request.get(
+            `/api/v2/dags/asset_produces_1/dagRuns?order_by=-start_date&limit=1`,
+          );
+          const data = (await response.json()) as { dag_runs: Array<{ state: string }> };
+
+          return data.dag_runs[0]?.state ?? "pending";
+        },
+        { intervals: [2000], timeout: 120_000 },
+      )
+      .toBe("success");
+    await context.close();
+  });
+
+  test.beforeEach(async ({ page }) => {
+    assets = new AssetListPage(page);
+    await assets.navigate();
+    await assets.waitForLoad();
+  });
+
+  test("verify assets page heading", async () => {
+    await expect(assets.heading).toBeVisible();
+  });
+
+  test("verify assets table", async () => {
+    await expect(assets.table).toBeVisible();
+  });
+
+  test("verify asset rows when data exists", async () => {
+    const count = await assets.assetCount();
+
+    expect(count).toBeGreaterThanOrEqual(0);
+  });
+
+  test("verify asset has a visible name link", async () => {
+    const names = await assets.assetNames();
+
+    for (const name of names) {
+      expect(name.trim().length).toBeGreaterThan(0);
+    }
+  });
+
+  test("verify clicking an asset navigates to detail page", async ({ page }) => {
+    const name = await assets.openFirstAsset();
+
+    await expect(page).toHaveURL(/\/assets\/.+/);
+    await expect(page.getByRole("heading", { name: new RegExp(name, "i") })).toBeVisible();
+  });
+
+  test("verify assets using search", async () => {
+    const initialCount = await assets.assetCount();
+
+    expect(initialCount).toBeGreaterThan(0);
+
+    const searchTerm = "s3://dag1/output_1.txt";
+
+    await assets.searchInput.fill(searchTerm);
+
+    // Wait for filtered results - count should decrease OR stay same if search matches all
+    await expect
+      .poll(
+        async () => {
+          const links = await assets.rows.locator("td a").allTextContents();
+
+          // Return true when we have results that match the search
+          return (
+            links.length > 0 && links.every((name) => name.toLowerCase().includes(searchTerm.toLowerCase()))
+          );
+        },
+        { intervals: [500], timeout: 30_000 },
+      )
+      .toBe(true);
+
+    const names = await assets.assetNames();
+
+    expect(names.length).toBeGreaterThan(0);
+
+    for (const name of names) {
+      expect(name.toLowerCase()).toContain(searchTerm.toLowerCase());
+    }
+  });
+
+  test("verify pagination controls navigate between pages", async () => {
+    await assets.navigateTo("/assets?limit=5&offset=0");
+    await assets.waitForLoad();
+
+    const page1Initial = await assets.assetNames();
+
+    expect(page1Initial.length).toBeGreaterThan(0);
+
+    const pagination = assets.page.locator('[data-scope="pagination"]');
+
+    await pagination.getByRole("button", { name: /page 2/i }).click();
+    await expect.poll(() => assets.assetNames(), { timeout: 30_000 }).not.toEqual(page1Initial);
+
+    const page2Assets = await assets.assetNames();
+
+    await pagination.getByRole("button", { name: /page 1/i }).click();
+
+    await expect.poll(() => assets.assetNames(), { timeout: 30_000 }).not.toEqual(page2Assets);
+  });
+});