cm_whatsapp_bot_v1/apps/web/src/test/no-button-wrapping-card.test.ts

import { describe, it, expect } from "vitest";
import { readdirSync, readFileSync, statSync } from "node:fs";
import { join, relative } from "node:path";

/**
 * Static guard: no `.tsx` file may contain a literal `<button` element
 * wrapping a `<Card`, `<CardContent`, or `<CardHeader` (the shadcn
 * primitives that render `<div>`).
 *
 * That nesting is invalid HTML — `<button>`'s content model is phrasing
 * content, and `<div>` is flow content. Browsers auto-close the button
 * when they hit the inner div; React 19 SSR doesn't, and the resulting
 * tree mismatch raised "Hydration failed" in production. We use Card
 * directly as the trigger now (DialogTrigger asChild forwards the
 * click) or place a transparent submit button as a sibling.
 *
 * We scan for the lowercase `<button` only — `<Button>` (shadcn's
 * styled component) is fine; it just renders a real `<button>` with no
 * children. `<button>` followed by `<Card>` within a few hundred
 * characters is the smell.
 */

const SRC_ROOT = join(__dirname, "..");

function listTsxFiles(dir: string): string[] {
  const out: string[] = [];
  for (const entry of readdirSync(dir)) {
    const full = join(dir, entry);
    const st = statSync(full);
    if (st.isDirectory()) {
      out.push(...listTsxFiles(full));
    } else if (entry.endsWith(".tsx")) {
      out.push(full);
    }
  }
  return out;
}

interface Hit {
  file: string;
  line: number;
  excerpt: string;
}

function findHits(content: string): Array<{ line: number; excerpt: string }> {
  const hits: Array<{ line: number; excerpt: string }> = [];
  // For every opening `<button` (lowercase), grab everything up to its
  // matching `</button>` and look for a Card primitive opener inside.
  const cardOpener = /<(?:Card|CardContent|CardHeader)\b/;
  let cursor = 0;
  while (cursor < content.length) {
    const open = content.indexOf("<button", cursor);
    if (open === -1) break;
    // Skip JSX comments, attribute-substring matches like `<buttonish`, etc.
    const next = content.charAt(open + "<button".length);
    if (next && /[a-zA-Z0-9]/.test(next)) {
      cursor = open + 1;
      continue;
    }
    const close = content.indexOf("</button>", open);
    if (close === -1) break;
    const segment = content.slice(open, close);
    if (cardOpener.test(segment)) {
      const line = content.slice(0, open).split("\n").length;
      hits.push({ line, excerpt: segment.slice(0, 160).replace(/\s+/g, " ") });
    }
    cursor = close + "</button>".length;
  }
  return hits;
}

describe("static guard: no <button> wrapping a Card primitive", () => {
  const files = listTsxFiles(SRC_ROOT)
    // Test files describe and document patterns; they may legitimately
    // contain regex strings that mention `<button>` and `<Card>` together.
    .filter((f) => !/\.test\.tsx?$/.test(f));

  it("scans at least one source file (sanity)", () => {
    expect(files.length).toBeGreaterThan(0);
  });

  it("finds no <button>…<Card> nesting in any production .tsx file", () => {
    const allHits: Hit[] = [];
    for (const file of files) {
      const content = readFileSync(file, "utf8");
      for (const h of findHits(content)) {
        allHits.push({ file: relative(SRC_ROOT, file), ...h });
      }
    }
    if (allHits.length > 0) {
      const message = allHits
        .map((h) => `  ${h.file}:${h.line} → ${h.excerpt}`)
        .join("\n");
      throw new Error(
        `Invalid HTML nesting detected — <button> wraps a Card primitive:\n${message}\n` +
          `Card renders a <div>, which is flow content and not allowed inside <button>.\n` +
          `Use Card directly as DialogTrigger asChild's child, or place a transparent\n` +
          `<button type="submit"> as a sibling that overlays the card.`,
      );
    }
    expect(allHits).toEqual([]);
  });
});