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

const __dirname = dirname(fileURLToPath(import.meta.url));
const componentSource = readFileSync(join(__dirname, "GlobalSearchableSelect.vue"), "utf8");
const mainCss = readFileSync(resolve(__dirname, "../styles/main.css"), "utf8");

describe("GlobalSearchableSelect option panel", () => {
  it("keeps disabled empty placeholder options out of the dropdown list", () => {
    assert.match(componentSource, /function isPanelPlaceholderOption\(option\)/);
    assert.match(componentSource, /\.filter\(\(\{ option \}\) => !isPanelPlaceholderOption\(option\)\)/);
  });

  it("lays option text out as a compact two-column business row", () => {
    assert.match(mainCss, /\.global-select-layer \.global-select-option \{[\s\S]*grid-template-columns:\s*minmax\(0,\s*1fr\) auto;/);
    assert.match(mainCss, /\.global-select-layer \.global-select-option-meta \{[\s\S]*grid-column:\s*2;/);
    assert.match(mainCss, /\.global-select-layer \.global-select-option-sub \{[\s\S]*grid-column:\s*1 \/ -1;/);
  });
});
