import { readdirSync, readFileSync, statSync } from "node:fs"; import { join } from "node:path"; import { describe, expect, it } from "vitest"; import { transform } from "./codemod-t5-focus.mjs"; describe("codemod t5 focus and sizes (spec 4.5, 4.6, 10.8 step 5)", () => { it("drops outline-none and the component focus ring classes", () => { expect( transform( '"min-h-11 rounded-lg px-2 outline-none hover:bg-muted focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-60"', ), ).toBe('"min-h-11 rounded-lg px-2 hover:bg-muted disabled:opacity-60"'); expect(transform('className="px-2 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"')).toBe( 'className="px-2"', ); }); it("drops the own outline rings, including the stage edge ring of the hive glass", () => { expect(transform('"rounded-full focus-visible:outline-2 focus-visible:outline-ring"')).toBe('"rounded-full"'); expect( transform("`h-11 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-holo-edge-strong ${X}`"), ).toBe("`h-11 ${X}`"); }); it("keeps the focus: outline of elements focused by script after a click", () => { // :focus-visible does not match a script focus that follows a pointer click. const scripted = '"rounded-xl border p-3 focus:outline-2 focus:outline-ring"'; expect(transform(scripted)).toBe(scripted); }); it("drops the skip link's own focus ring", () => { expect(transform('"sr-only focus:not-sr-only focus:ring-3 focus:ring-ring/50 focus:outline-none"')).toBe( '"sr-only focus:not-sr-only"', ); }); it("drops variant focus colours on the destructive button and badges", () => { expect(transform('"bg-destructive/10 text-destructive focus-visible:border-destructive/40 focus-visible:ring-destructive/20"')).toBe( '"bg-destructive/10 text-destructive"', ); expect(transform('"bg-warning/15 focus-visible:ring-warning/30 [a]:hover:bg-warning/25"')).toBe( '"bg-warning/15 [a]:hover:bg-warning/25"', ); }); it("a row with an inner focus target keeps one ring on the outer element", () => { expect(transform('"flex gap-3 rounded-xl border p-3 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-ring"')).toBe( '"flex gap-3 rounded-xl border p-3 focus-ring-within"', ); expect(transform('"flex min-h-14 px-3 has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50"')).toBe( '"flex min-h-14 px-3 focus-ring-within"', ); expect(transform('"flex min-h-11 px-1 has-focus-visible:ring-3 has-focus-visible:ring-ring/50"')).toBe( '"flex min-h-11 px-1 focus-ring-within"', ); }); it("selection outlines that are not focus styles stay", () => { const calendar = 'isSelected && "outline-2 -outline-offset-2 outline-foreground",'; expect(transform(calendar)).toBe(calendar); const canvas = 'selected && "outline outline-2 outline-foreground",'; expect(transform(canvas)).toBe(canvas); const menuItem = '"relative flex rounded-md text-sm outline-hidden select-none focus:bg-accent"'; expect(transform(menuItem)).toBe(menuItem); }); it("a class string that only held focus classes disappears with its line", () => { expect(transform('cn(\n "min-h-11 px-2",\n "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",\n x,\n)')).toBe( 'cn(\n "min-h-11 px-2",\n x,\n)', ); }); it("sm:h-* and sm:min-h-* become pointer-fine, also behind a further variant", () => { expect(transform('"h-10 sm:h-8 gap-1.5"')).toBe('"h-10 pointer-fine:h-8 gap-1.5"'); expect(transform('"min-h-11 sm:min-h-9 rounded-lg"')).toBe('"min-h-11 pointer-fine:min-h-9 rounded-lg"'); expect(transform('"data-[size=default]:h-11 sm:data-[size=default]:h-9"')).toBe( '"data-[size=default]:h-11 pointer-fine:data-[size=default]:h-9"', ); }); it("sm:size-* becomes pointer-fine:size-*", () => { expect(transform('className="size-11 sm:size-8"')).toBe('className="size-11 pointer-fine:size-8"'); }); it("other sm: classes stay", () => { const layout = '"hidden sm:flex sm:hidden sm:gap-2 sm:px-4 sm:max-w-xs sm:max-h-96"'; expect(transform(layout)).toBe(layout); }); it("keeps CRLF line endings", () => { expect(transform('a\r\nclassName="px-2 outline-none"\r\n')).toBe('a\r\nclassName="px-2"\r\n'); }); it("the focus codemod is idempotent and keeps pointer-fine classes", () => { const source = [ '"h-11 sm:h-8 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"', '"pointer-fine:h-9 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-ring"', ].join("\n"); const once = transform(source); expect(once).toBe('"h-11 pointer-fine:h-8"\n"pointer-fine:h-9 focus-ring-within"'); expect(transform(once)).toBe(once); }); it("leaves nothing to migrate in src", () => { const files = sourceFiles(join(process.cwd(), "src")); expect(files.length).toBeGreaterThan(100); const pending = files.filter((file) => { const text = readFileSync(file, "utf8"); return transform(text) !== text; }); expect(pending).toEqual([]); }); }); function sourceFiles(dir) { return readdirSync(dir).flatMap((name) => { const path = join(dir, name); if (statSync(path).isDirectory()) return sourceFiles(path); return /\.tsx?$/.test(name) && !/\.spec\./.test(name) ? [path] : []; }); }