import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import test from "node:test";

import { cssDeclarations } from "./css-contract-test-support.ts";

const globalStyles = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");

test("the dasha switch stays inside the column and keeps a 44px hit area", () => {
  const row = cssDeclarations(".chart-page-dasha-switch", globalStyles);
  assert.match(row, /display:\s*flex/);
  assert.match(row, /overflow-x:\s*hidden/);
  assert.doesNotMatch(row, /overflow-x:\s*auto/);
  const option = cssDeclarations(".chart-page-dasha-switch .chart-page-tab", globalStyles);
  assert.match(option, /min-height:\s*44px/);
  assert.match(option, /min-width:\s*44px/);
  assert.match(option, /flex:\s*1 1 0/);
  assert.match(globalStyles, /@media \(min-width: 1024px\)/);
  assert.match(globalStyles, /\.chart-page-dasha-columns/);
});