feat: add market dom sync

2026-04-20 20:11:11 +08:00
parent c846ab9f4a
commit 86f776ad79
2 changed files with 244 additions and 0 deletions
@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+
+import { beforeEach, describe, expect, test } from "vitest";
+
+import {
+  applyRowOrder,
+  applyRowVisibility,
+  renderMarketRowState,
+  syncMarketTable
+} from "../src/content/market/dom-sync";
+import type { MarketRecord } from "../src/content/market/types";
+
+describe("market-dom-sync", () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div data-market-table>
+        <div data-market-header>
+          <div data-market-header-cell="authorName">达人</div>
+          <div data-market-header-cell="price21To60s">21-60s报价</div>
+        </div>
+        <div data-market-body>
+          <div data-market-row data-author-id="a">
+            <span data-market-field="authorName">Alpha</span>
+            <span data-market-field="price21To60s">450000</span>
+          </div>
+          <div data-market-row data-author-id="b">
+            <span data-market-field="authorName">Beta</span>
+            <span data-market-field="price21To60s">70000</span>
+          </div>
+        </div>
+      </div>
+    `;
+  });
+
+  test("injects the two header cells and per-row cells", () => {
+    const table = syncMarketTable(document);
+
+    expect(table).not.toBeNull();
+    expect(
+      document.querySelector('[data-market-header-cell="singleVideoAfterSearchRate"]')
+    ).not.toBeNull();
+    expect(
+      document.querySelector(
+        '[data-market-header-cell="personalVideoAfterSearchRate"]'
+      )
+    ).not.toBeNull();
+    expect(document.querySelectorAll("[data-market-row-cell]").length).toBe(4);
+  });
+
+  test("renders loading, success, and failed states", () => {
+    const table = syncMarketTable(document);
+    if (!table) {
+      throw new Error("Expected market table");
+    }
+
+    const alphaRow = table.rows[0];
+    const betaRow = table.rows[1];
+
+    renderMarketRowState(alphaRow, {
+      authorId: "a",
+      authorName: "Alpha",
+      status: "loading"
+    });
+    renderMarketRowState(betaRow, {
+      authorId: "b",
+      authorName: "Beta",
+      status: "success",
+      rates: {
+        singleVideoAfterSearchRate: "0.5%-1%",
+        personalVideoAfterSearchRate: "0.02 - 0.1%"
+      }
+    });
+
+    expect(alphaRow.singleCell.textContent).toBe("加载中...");
+    expect(betaRow.singleCell.textContent).toBe("0.5% - 1%");
+    expect(betaRow.personalCell.textContent).toBe("0.02% - 0.1%");
+
+    renderMarketRowState(betaRow, {
+      authorId: "b",
+      authorName: "Beta",
+      status: "failed"
+    });
+    expect(betaRow.singleCell.textContent).toBe("加载失败");
+    expect(betaRow.personalCell.textContent).toBe("加载失败");
+  });
+
+  test("hides rows outside the visible author ids", () => {
+    const table = syncMarketTable(document);
+    if (!table) {
+      throw new Error("Expected market table");
+    }
+
+    applyRowVisibility(table, new Set(["b"]));
+
+    expect(table.rows[0].row.hidden).toBe(true);
+    expect(table.rows[1].row.hidden).toBe(false);
+  });
+
+  test("reorders rows based on ordered author ids", () => {
+    const table = syncMarketTable(document);
+    if (!table) {
+      throw new Error("Expected market table");
+    }
+
+    applyRowOrder(table, ["b", "a"]);
+
+    expect(
+      Array.from(
+        document.querySelectorAll("[data-market-row]")
+      ).map((row) => row.getAttribute("data-author-id"))
+    ).toEqual(["b", "a"]);
+  });
+});