worldquant-alpha-system/frontend/tests/dataset.spec.ts

import { test, expect, type Page } from "@playwright/test";
import { choosePreparation } from "./preparation-helpers";
const headers = { "X-WQ-Request": "1" };
const scope = {
  instrument_type: "EQUITY",
  region: "USA",
  universe: "TOP3000",
  delay: 1,
};
async function setup(page: Page) {
  await page.goto("/#datasets");
  await page.getByLabel("密码", { exact: true }).fill("browser-test-password");
  await page.getByRole("button", { name: "进入工作空间" }).click();
  await expect(
    page.getByRole("button", { name: "同步目录", exact: true }),
  ).toBeVisible();
  await page.request.put("/api/v1/account/credentials", {
    headers,
    data: { email: "test@example.com", password: "synthetic-only" },
  });
  const job = await (
    await page.request.post("/api/v1/account/connect", { headers })
  ).json();
  await expect
    .poll(
      async () =>
        (await (await page.request.get(`/api/v1/sync-jobs/${job.id}`)).json())
          .status,
    )
    .toBe("completed");
  await page.reload();
}
async function sync(page: Page, dataset_id: string | null) {
  const job = await (
    await page.request.post("/api/v1/catalog/sync-jobs", {
      headers,
      data: { scope, dataset_id },
    })
  ).json();
  await expect
    .poll(
      async () =>
        (await (await page.request.get(`/api/v1/sync-jobs/${job.id}`)).json())
          .status,
    )
    .toBe("completed");
}
test("数据集完整同步、使用、集合编辑与研究选择", async ({ page }) => {
  const errors: string[] = [];
  page.on("pageerror", (e) => errors.push(e.message));
  await setup(page);
  await sync(page, null);
  await page.reload();
  const row = page.getByRole("row").filter({ hasText: "TEST 财务报表" });
  await expect(
    row.getByRole("button", { name: "使用", exact: true }),
  ).toBeDisabled();
  await row.getByRole("button", { name: "同步", exact: true }).click();
  await expect
    .poll(
      async () =>
        (
          await (
            await page.request.get(
              "/api/v1/catalog/datasets/TEST_FIN?region=USA&universe=TOP3000&delay=1",
            )
          ).json()
        ).complete_count,
    )
    .toBe(123);
  await page.keyboard.press("Escape");
  await page.reload();
  await row.getByRole("button", { name: "查看", exact: true }).click();
  const detail = page.getByRole("dialog", {
    name: "TEST 财务报表",
    exact: true,
  });
  await expect(detail).toContainText("TEST_FIN_001");
  await detail.getByLabel("研究备注").fill("验证备注");
  await detail.getByRole("button", { name: "保存备注", exact: true }).click();
  await page.keyboard.press("Escape");
  await row.getByRole("button", { name: "使用", exact: true }).click();
  await page.getByRole("link", { name: "打开数据准备" }).click();
  const prep = page.getByRole("dialog", { name: "数据准备详情", exact: true });
  await expect(prep).toContainText("123 字段 / 1 数据集");
  await prep.getByLabel("集合名称", { exact: true }).fill("浏览器准备集合");
  await prep.getByRole("button", { name: "保存名称和备注" }).click();
  await expect(prep).toContainText("v2");
  await prep
    .getByRole("row")
    .filter({ hasText: "TEST_FIN_000" })
    .locator("span.semi-checkbox")
    .click();
  await prep.getByRole("button", { name: "移除所选字段" }).click();
  await expect(prep).toContainText("122 字段");
  await page.keyboard.press("Escape");
  const preparationRow = page
    .getByRole("row")
    .filter({ hasText: "浏览器准备集合" });
  await expect(preparationRow).toBeVisible();
  expect(
    await preparationRow.evaluate((row) => row.getBoundingClientRect().height),
  ).toBe(40);
  await page.screenshot({ path: "test-results/preparation-table-layout.png" });
  await page
    .getByRole("navigation", { name: "主导航" })
    .getByRole("button", { name: "特征工程", exact: true })
    .click();
  await page.getByRole("button", { name: "新建特征方案", exact: true }).click();
  await choosePreparation(page, "浏览器准备集合", "选择特征数据准备");
  await expect(
    page.locator("p").filter({ hasText: /浏览器准备集合 ·.*122 字段/ }),
  ).toBeVisible();
  expect(errors).toEqual([]);
});
test("在线字段跨页多选直接准备，本地只展示完整同步字段", async ({ page }) => {
  await setup(page);
  await page
    .getByRole("navigation", { name: "主导航" })
    .getByRole("button", { name: "字段目录", exact: true })
    .click();
  const queries: string[] = [];
  page.on("request", (request) => {
    if (request.url().includes("/catalog/worldquant/fields"))
      queries.push(request.url());
  });
  await expect(
    page.getByRole("tab", { name: "本地同步", exact: true }),
  ).toHaveAttribute("aria-selected", "true");
  await page.getByRole("tab", { name: "worldquant接口", exact: true }).click();
  const online = page.getByRole("tabpanel", { name: "worldquant接口" });
  await online
    .getByRole("button", { name: "筛选字段目录", exact: true })
    .click();
  await expect(
    page.getByRole("button", { name: "查询", exact: true }),
  ).toBeDisabled();
  await expect(
    online.getByText("请输入关键词、数据集或其他筛选条件，然后点击查询。"),
  ).toBeVisible();
  expect(queries).toEqual([]);
  if (!(await page.getByRole("form", { name: "字段目录筛选条件" }).isVisible()))
    await online
      .getByRole("button", { name: "筛选字段目录", exact: true })
      .click();
  await page.getByLabel("字段数据集").fill("TEST_FIN");
  expect(queries).toEqual([]);
  await page.getByRole("button", { name: "查询", exact: true }).click();
  await expect(online.getByText("TEST_FIN_001", { exact: true })).toBeVisible();
  await online
    .getByRole("row")
    .filter({ hasText: "TEST_FIN_001" })
    .locator("span.semi-checkbox")
    .click();
  await online.locator(".semi-page-item").filter({ hasText: /^2$/ }).click();
  await online
    .getByRole("row")
    .filter({ hasText: "TEST_FIN_025" })
    .locator("span.semi-checkbox")
    .click();
  await expect(online.getByText(/已选 2 个字段/)).toBeVisible();
  await online
    .getByRole("button", { name: "加入数据准备", exact: true })
    .click();
  const add = page.getByRole("dialog", { name: "加入数据准备", exact: true });
  await add.getByLabel("新集合名称").fill("在线选取集合");
  await add.getByRole("button", { name: "新建集合并加入" }).click();
  await expect(add).not.toBeVisible();
  const collections = await (
    await page.request.get("/api/v1/data-preparations?q=在线选取集合")
  ).json();
  expect(collections.items[0].field_count).toBe(2);
  await page.getByRole("tab", { name: "本地同步", exact: true }).click();
  const local = page.getByRole("tabpanel", { name: "本地同步" });
  // Other browser tests share this isolated server, so verify the unsynced dataset explicitly.
  await local
    .getByRole("button", { name: "筛选字段目录", exact: true })
    .click();
  await page.getByLabel("字段数据集").fill("TEST_NEWS");
  await page.getByRole("button", { name: "查询", exact: true }).click();
  await expect(local.getByText("共 0 个字段", { exact: true })).toBeVisible();
  await page.screenshot({
    path: "test-results/preparations-fields.png",
    fullPage: true,
  });
});

test("目录表格保持紧凑行高、截断和固定分页", async ({ page }) => {
  await setup(page);
  await sync(page, null);
  await sync(page, "TEST_FIN");
  const longName = "超长数据集名称与描述".repeat(20);
  await page.route("**/api/v1/catalog/datasets?*", async (route) => {
    const response = await route.fetch();
    const body = await response.json();
    body.items = body.items.map((item: Record<string, unknown>) => ({
      ...item,
      name: longName,
    }));
    await route.fulfill({ response, json: body });
  });
  await page.reload();
  const table = page.locator(".workspace-table:visible").first();
  await expect(
    table.getByRole("button", { name: longName }).first(),
  ).toBeVisible();
  const metrics = await table
    .locator("tbody .workspace-cell")
    .first()
    .evaluate((el) => ({
      rowHeight: el.closest("tr")!.getBoundingClientRect().height,
      overflow: getComputedStyle(el).overflow,
      cellWidth: el.getBoundingClientRect().width,
      buttonWidth: el.querySelector("button")!.getBoundingClientRect().width,
    }));
  expect(metrics.rowHeight).toBe(40);
  expect(metrics.overflow).toBe("hidden");
  expect(metrics.buttonWidth).toBeLessThanOrEqual(metrics.cellWidth);
  await expect(
    table.locator(".semi-tag").filter({ hasText: "已同步字段" }),
  ).toBeVisible();
  const summary = page
    .getByRole("toolbar", { name: "数据目录表格工具栏" })
    .locator(".scope-picker-summary");
  const summaryBox = await summary.boundingBox();
  const filterBox = await page
    .getByRole("button", { name: "筛选数据目录", exact: true })
    .boundingBox();
  expect(
    Math.abs(
      summaryBox!.y +
        summaryBox!.height / 2 -
        filterBox!.y -
        filterBox!.height / 2,
    ),
  ).toBeLessThan(3);
  const textBox = await summary.locator(":scope > div").boundingBox();
  const changeBox = await summary
    .getByRole("button", { name: "更改组合" })
    .boundingBox();
  expect(changeBox!.x - textBox!.x - textBox!.width).toBeLessThanOrEqual(16);
  await page.screenshot({ path: "test-results/catalog-table-layout.png" });
  await page
    .getByRole("navigation", { name: "主导航" })
    .getByRole("button", { name: "字段目录", exact: true })
    .click();
  const local = page.getByRole("tabpanel", { name: "本地同步" });
  await expect(local.getByText("TEST_FIN_001", { exact: true })).toBeVisible();
  const checkLayout = async () => {
    const box = await local.locator(".workspace-table-footer").boundingBox();
    expect(box!.y + box!.height).toBeGreaterThan(
      page.viewportSize()!.height - 40,
    );
    expect(box!.y + box!.height).toBeLessThanOrEqual(
      page.viewportSize()!.height,
    );
    const rows = await local
      .locator("tbody tr.semi-table-row")
      .evaluateAll((rows) =>
        rows.map((row) => row.getBoundingClientRect().height),
      );
    expect(rows.length).toBe(25);
    expect(rows.every((height) => height === 40)).toBe(true);
  };
  await checkLayout();
  await page.screenshot({ path: "test-results/field-table-layout.png" });
  await page.setViewportSize({ width: 900, height: 760 });
  await checkLayout();
  await page.screenshot({ path: "test-results/field-table-layout-narrow.png" });
  await page.getByRole("tab", { name: "worldquant接口", exact: true }).click();
  const online = page.getByRole("tabpanel", { name: "worldquant接口" });
  if (!(await page.getByRole("form", { name: "字段目录筛选条件" }).isVisible()))
    await online
      .getByRole("button", { name: "筛选字段目录", exact: true })
      .click();
  await page.getByLabel("字段数据集").fill("TEST_FIN");
  await page.getByRole("button", { name: "查询", exact: true }).click();
  await expect(online.getByText("TEST_FIN_001", { exact: true })).toBeVisible();
  let queries = 0;
  page.on("request", (req) => {
    if (req.url().includes("/catalog/worldquant/fields")) queries++;
  });
  await online
    .getByRole("button", { name: "筛选字段目录", exact: true })
    .click();
  await page.getByRole("button", { name: "重置", exact: true }).click();
  await online
    .getByRole("button", { name: "筛选字段目录", exact: true })
    .click();
  await expect(
    page.getByRole("button", { name: "查询", exact: true }),
  ).toBeDisabled();
  await expect(online.getByText("TEST_FIN_001", { exact: true })).toHaveCount(
    0,
  );
  expect(queries).toBe(0);
});

async function selectToolbarOption(page: Page, label: string, value: string) {
  const control = page.getByRole("combobox", { name: label, exact: true });
  await control.click();
  const popup = page.locator(
    `[id="${await control.getAttribute("aria-controls")}"]`,
  );
  await popup
    .getByRole("option")
    .filter({ hasText: new RegExp(`^${value}$`) })
    .click();
  await expect(control).toContainText(value);
  await expect(popup).not.toBeVisible();
}

test("共用工具栏延迟应用筛选、保存列设置并发送服务端排序", async ({ page }) => {
  await setup(page);
  await sync(page, null);
  await sync(page, "TEST_FIN");
  await page.reload();
  await expect(
    page.getByRole("row").filter({ hasText: "TEST 财务报表" }),
  ).toBeVisible();
  const requests: string[] = [];
  page.on("request", (req) => {
    if (
      req.url().includes("/catalog/datasets?") ||
      req.url().includes("/catalog/fields?") ||
      req.url().includes("/data-preparations?")
    )
      requests.push(req.url());
  });
  await page.getByRole("button", { name: "筛选数据目录", exact: true }).click();
  const filter = page.getByRole("form", { name: "数据目录筛选条件" });
  await filter.getByLabel("搜索数据集").fill("TEST_FIN");
  expect(requests.some((url) => url.includes("q=TEST_FIN"))).toBe(false);
  await filter.getByRole("button", { name: "查询", exact: true }).click();
  await expect
    .poll(() =>
      requests.some((url) => new URL(url).searchParams.get("q") === "TEST_FIN"),
    )
    .toBe(true);
  await page.getByRole("button", { name: "显示列设置", exact: true }).click();
  await page
    .locator(".catalog-column-panel .semi-checkbox")
    .filter({ hasText: "价值评分" })
    .click();
  await expect(
    page.getByRole("checkbox", { name: "价值评分", exact: true }),
  ).not.toBeChecked();
  await page.keyboard.press("Escape");
  await expect(
    page.getByRole("columnheader", { name: "价值评分", exact: true }),
  ).toHaveCount(0);
  await page.reload();
  await expect(
    page.getByRole("row").filter({ hasText: "TEST 财务报表" }),
  ).toBeVisible();
  await expect(
    page.getByRole("columnheader", { name: "价值评分", exact: true }),
  ).toHaveCount(0);
  await page.getByRole("button", { name: "排序设置", exact: true }).click();
  await selectToolbarOption(page, "排序字段", "字段数");
  await selectToolbarOption(page, "排序方向", "降序");
  await expect
    .poll(() =>
      requests.some(
        (url) =>
          url.includes("sort=field_count") && url.includes("direction=desc"),
      ),
    )
    .toBe(true);
  await page.screenshot({ path: "test-results/catalog-sort-popover.png" });
  await page.keyboard.press("Escape");
  await page
    .getByRole("navigation", { name: "主导航" })
    .getByRole("button", { name: "字段目录", exact: true })
    .click();
  const local = page.getByRole("tabpanel", { name: "本地同步" });
  await expect(local.getByText("TEST_FIN_001", { exact: true })).toBeVisible();
  await local.locator(".semi-page-item").filter({ hasText: /^2$/ }).click();
  await expect
    .poll(() =>
      requests.some(
        (url) => url.includes("/catalog/fields?") && url.includes("offset=25"),
      ),
    )
    .toBe(true);
  await local.getByRole("button", { name: "排序设置", exact: true }).click();
  await selectToolbarOption(page, "排序方向", "降序");
  await expect
    .poll(() =>
      requests.some(
        (url) =>
          url.includes("/catalog/fields?") &&
          url.includes("direction=desc") &&
          url.includes("offset=0"),
      ),
    )
    .toBe(true);
  await page.keyboard.press("Escape");
  await page.getByRole("tab", { name: "worldquant接口", exact: true }).click();
  await expect(
    page
      .getByRole("tabpanel", { name: "worldquant接口" })
      .getByRole("button", { name: "排序设置", exact: true }),
  ).toBeDisabled();
  await page
    .getByRole("navigation", { name: "主导航" })
    .getByRole("button", { name: "数据准备", exact: true })
    .click();
  await page.getByRole("button", { name: "筛选数据准备", exact: true }).click();
  await page.getByLabel("搜索准备集合").fill("toolbar-preparation");
  await page
    .locator(".catalog-filter-panel .semi-checkbox")
    .filter({ hasText: "按范围筛选" })
    .click();
  await page.getByRole("button", { name: "更改组合", exact: true }).click();
  await selectToolbarOption(page, "Region", "USA");
  await page.getByRole("button", { name: "应用组合", exact: true }).click();
  await expect(
    page.getByRole("form", { name: "数据准备筛选条件" }),
  ).toBeVisible();

  expect(requests.some((url) => url.includes("q=toolbar-preparation"))).toBe(
    false,
  );
  await page.screenshot({
    path: "test-results/preparation-filter-popover.png",
  });
  await page.getByRole("button", { name: "查询", exact: true }).click();
  await expect
    .poll(() => requests.some((url) => url.includes("q=toolbar-preparation")))
    .toBe(true);
  await page.getByRole("button", { name: "排序设置", exact: true }).click();
  await selectToolbarOption(page, "排序字段", "集合名称");
  await expect
    .poll(() =>
      requests.some(
        (url) =>
          url.includes("/data-preparations?") && url.includes("sort=name"),
      ),
    )
    .toBe(true);
});