64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
import { readFileSync } from "node:fs";
|
|
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { eslint } from "./lintProbe.testkit";
|
|
|
|
// The layer-scale rule in eslint.config.js (DESIGN.md Tokens: "No ad-hoc z-index"). A numeric `z-10`
|
|
// happened to equal `base` and passed every review; a `no-restricted-syntax` selector that matches
|
|
// nothing looks exactly like a clean codebase, so pin that it fires.
|
|
|
|
async function refused(source: string): Promise<number> {
|
|
const [result] = await eslint.lintText(source, { filePath: "src/components/__probe.tsx" });
|
|
return (result?.messages ?? []).filter((m) => m.message.startsWith("z-index off the layer scale"))
|
|
.length;
|
|
}
|
|
|
|
describe("a z-index off the layer scale", () => {
|
|
// Assembled, so this file does not trip the very rule it probes.
|
|
const z = (v: string) => `z-${v}`;
|
|
|
|
it("is refused as a number, an arbitrary value or a variant, in a string and a template", async () => {
|
|
expect(await refused(`export const a = "absolute ${z("10")} top-0";\n`)).toBe(1);
|
|
expect(await refused(`export const b = "hover:${z("[5]")}";\n`)).toBe(1);
|
|
expect(await refused("export const c = `x ${1} -" + z("20") + "`;\n")).toBe(1);
|
|
});
|
|
|
|
it("leaves a named level, z-0 and z-auto alone", async () => {
|
|
expect(await refused(`export const d = "${z("base")} ${z("menu")} ${z("tooltip")}";\n`)).toBe(
|
|
0,
|
|
);
|
|
expect(await refused(`export const e = "${z("0")} md:${z("auto")}";\n`)).toBe(0);
|
|
});
|
|
});
|
|
|
|
// The Plex player's notices (the track-switch OSD, the subtitle notice) sat on `menu` while its settings
|
|
// and tracks popovers had no level: a notice drew over the open menu (E28 audit, seen live). A menu is
|
|
// above a notice; the info overlay (`menu`, later in the tree) still covers both.
|
|
describe("the Plex player's layers", () => {
|
|
const src = ["PlexPlayer.tsx", "PlexPlayerSettings.tsx"]
|
|
.map((f) => readFileSync(new URL(`../components/${f}`, import.meta.url), "utf8"))
|
|
.join("\n");
|
|
const classes = (marker: RegExp) =>
|
|
[...src.matchAll(/className="([^"]*)"/g)].map((m) => m[1]!).filter((c) => marker.test(c));
|
|
|
|
it("puts every popover on the menu level", () => {
|
|
const popovers = classes(
|
|
/\bbottom-full\b.*\bbg-media-chrome\b|\bbg-media-chrome\b.*\bbottom-full\b/,
|
|
);
|
|
expect(popovers).toHaveLength(1); // the settings panel, which renders inside the player
|
|
for (const c of popovers) expect(c).toMatch(/\bz-menu\b/);
|
|
// The tracks list and the ⋯ menu are on the popover engine (E28 review D3), which lifts them to
|
|
// z-popover — above the player's own z-overlay — and into the fullscreen element.
|
|
expect([
|
|
...src.matchAll(/<PopoverSurface\b[^>]*?className=\{`\$\{PLAYER_MENU\}/g),
|
|
]).toHaveLength(2);
|
|
});
|
|
|
|
it("keeps the notices a level below", () => {
|
|
const notices = classes(/pointer-events-none absolute inset-x-0 bottom-(24|36)\b/);
|
|
expect(notices).toHaveLength(2);
|
|
for (const c of notices) expect(c).toMatch(/\bz-base\b/);
|
|
});
|
|
});
|