import { JSDOM } from "jsdom";
import { describe, expect, test } from "vitest";

import { syncMarketTable } from "../src/content/market/dom-sync";

describe("market dom sync", () => {
  test("inserts two headers before the 操作 column", () => {
    const document = createDocument();

    const table = syncMarketTable(document);
    const headers = Array.from(
      document.querySelectorAll("thead th"),
      (cell) => cell.textContent?.trim() ?? ""
    );

    expect(table).not.toBeNull();
    expect(headers).toEqual([
      "达人信息",
      "单视频看后搜率",
      "个人视频看后搜率",
      "操作"
    ]);
  });

  test("inserts two cells before the action cell for each row and tags them", () => {
    const document = createDocument();

    const table = syncMarketTable(document);

    expect(table?.rows).toHaveLength(2);
    expect(
      table?.rows.map((row) =>
        Array.from(row.row.cells, (cell) => cell.textContent?.trim() ?? "")
      )
    ).toEqual([
      ["达人 A", "", "", "查看"],
      ["达人 B", "", "", "查看"]
    ]);
    expect(table?.rows[0].singleCell.dataset.scesColumn).toBe(
      "single-video-after-search-rate"
    );
    expect(table?.rows[0].personalCell.dataset.scesColumn).toBe(
      "personal-video-after-search-rate"
    );
  });

  test("does not duplicate injected columns when synced twice", () => {
    const document = createDocument();

    syncMarketTable(document);
    syncMarketTable(document);

    expect(document.querySelectorAll('[data-sces-column="single-video-after-search-rate"]')).toHaveLength(2);
    expect(document.querySelectorAll('[data-sces-column="personal-video-after-search-rate"]')).toHaveLength(2);
    expect(document.querySelectorAll('[data-sces-header="single-video-after-search-rate"]')).toHaveLength(1);
    expect(document.querySelectorAll('[data-sces-header="personal-video-after-search-rate"]')).toHaveLength(1);
  });
});

function createDocument() {
  return new JSDOM(`
    <table>
      <thead>
        <tr>
          <th>达人信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>达人 A</td>
          <td>查看</td>
        </tr>
        <tr>
          <td>达人 B</td>
          <td>查看</td>
        </tr>
      </tbody>
    </table>
  `).window.document;
}