import assert from "node:assert/strict";
import { describe, it } from "node:test";
import { readFileSync } from "node:fs";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";

const __dirname = dirname(fileURLToPath(import.meta.url));
const source = readFileSync(join(__dirname, "TableControls.vue"), "utf8");
const styles = readFileSync(join(__dirname, "../styles/main.css"), "utf8");

describe("TableControls wide-table scroll dock", () => {
  it("creates an app-level horizontal scroll dock for wide mode instead of relying on native scrollbars", () => {
    assert.match(source, /function ensureWideTableScrollDock\(/);
    assert.match(source, /className = "table-scroll-dock"/);
    assert.match(source, /aria-label", "宽表横向滚动"/);
    assert.match(source, /table-scroll-dock-track/);
    assert.match(source, /table-scroll-dock-thumb/);
    assert.match(source, /table-scroll-dock-arrow/);
  });

  it("keeps the scroll dock synchronized with the table wrapper scroll position", () => {
    assert.match(source, /function syncWideTableScrollDock\(/);
    assert.match(source, /wideScrollWrap\.scrollLeft/);
    assert.match(source, /wideScrollWrap\.scrollWidth - wideScrollWrap\.clientWidth/);
    assert.match(source, /wideScrollThumb\.style\.transform/);
    assert.match(source, /wideScrollThumb\.style\.width/);
  });

  it("supports dragging the custom thumb and using left-right step arrows", () => {
    assert.match(source, /pointerdown/);
    assert.match(source, /setPointerCapture/);
    assert.match(source, /function nudgeWideTableScrollDock\(/);
    assert.match(source, /wideScrollWrap\.scrollBy/);
  });

  it("styles the scroll dock as the accepted visible low-friction control", () => {
    assert.match(styles, /body \.table-scroll-dock/);
    assert.match(styles, /body \.table-scroll-dock-track/);
    assert.match(styles, /body \.table-scroll-dock-thumb/);
    assert.match(styles, /body \.table-scroll-dock-arrow/);
    assert.match(styles, /body \.table-view-wide \+ \.table-scroll-dock/);
  });
});