fix(themes): restyle the player cover art on Spotify 1.3

scripts/theme-report.test.mts

@@ -35,6 +35,7 @@ import {
 	snapshotBaseline,
 	requireOutsideGit,
 	type LiveResult,
+	type SelectorRun,
 	contrastRatio,
 	DERIVED_COLORS,
 	fillCanonical,
@@ -47,6 +48,10 @@ import {
 	resolveScheme,
 	schemeVars,
 	readSettingsControls,
+	probeSelectors,
+	swapPlayback,
+	lostSelectors,
+	SELECTORS_FILE,
 } from "./theme-report.ts";
 
 describe("screenshot region", () => {
@@ -73,6 +78,156 @@ describe("screenshot region", () => {
 	});
 });
 
+describe("pinned playback", () => {
+	const fakeClient = (failPlay = false) => {
+		const log: string[] = [];
+		const state = {
+			item: { uri: "spotify:track:mine" },
+			context: { uri: "spotify:album:mine" },
+			positionAsOfTimestamp: 1234,
+			isPaused: false,
+		};
+		let muted = false;
+		(globalThis as any).window = {
+			Spicetify: {
+				Player: { getMute: () => muted, setMute: (m: boolean) => (log.push(`mute:${m}`), (muted = m)) },
+				Platform: {
+					PlayerAPI: {
+						getState: () => state,
+						play: async (ctx: { uri: string }, _: object, opts: { skipTo?: { uri: string } }) => {
+							if (failPlay) throw new Error("offline");
+							log.push(`play:${opts.skipTo?.uri ?? ctx.uri}`);
+							state.item = { uri: opts.skipTo?.uri ?? ctx.uri };
+							state.isPaused = false;
+						},
+						pause: async () => (log.push("pause"), (state.isPaused = true)),
+						seekTo: async (ms: number) => (log.push(`seek:${ms}`), (state.positionAsOfTimestamp = ms)),
+					},
+				},
+			},
+		};
+		return { log, state, isMuted: () => muted };
+	};
+	after(() => delete (globalThis as any).window);
+
+	it("loads the track muted and paused, and reports what was playing", async () => {
+		const client = fakeClient();
+		const previous = await swapPlayback({ uri: "spotify:track:fixed" }, 0, true);
+		assert.deepEqual(previous, {
+			uri: "spotify:track:mine",
+			context: "spotify:album:mine",
+			position: 1234,
+			paused: false,
+		});
+		assert.deepEqual(client.log, ["mute:true", "play:spotify:track:fixed", "pause", "seek:0", "mute:false"]);
+		assert.equal(client.state.isPaused, true);
+	});
+
+	it("puts the mute state back when the track cannot be loaded", async () => {
+		const client = fakeClient(true);
+		await assert.rejects(swapPlayback({ uri: "spotify:track:fixed" }, 0, true), /offline/);
+		assert.equal(client.isMuted(), false);
+	});
+});
+
+describe("selector binding", () => {
+	const probe = (html: string, css: string, key?: string) => {
+		const window = new Window();
+		try {
+			window.document.body.innerHTML = html;
+			const args = [css, key].filter((x) => x !== undefined).map((x) => JSON.stringify(x));
+			return structuredClone(window.eval(`(${probeSelectors.toString()})(${args.join(",")})`));
+		} finally {
+			window.close();
+		}
+	};
+
+	it("reports which selector parts match, ignoring interaction states and pseudo-elements", () => {
+		const result = probe(
+			`<aside><button data-testid="cover-art-button"><div class="cover-art"></div></button><form><input class="search"></form></aside>`,
+			`
+				.gone .cover-art, [data-testid="cover-art-button"] .cover-art { width: 1px }
+				[data-testid="cover-art-button"]:hover, .cover-art:focus-within { color: red }
+				.cover-art::after, form .search:not(:placeholder-shown) { content: "" }
+				@media (min-width: 1px) { .also-gone { color: red } }`,
+		);
+		assert.deepEqual(result.matched, [
+			'[data-testid="cover-art-button"] .cover-art',
+			'[data-testid="cover-art-button"]:hover',
+			".cover-art:focus-within",
+			".cover-art::after",
+			"form .search:not(:placeholder-shown)",
+		]);
+		assert.deepEqual(
+			result.all.filter((s: string) => !result.matched.includes(s)),
+			[".gone .cover-art", ".also-gone"],
+		);
+	});
+
+	it("splits selector lists only on top-level commas", () => {
+		const result = probe(
+			`<div class="a"><span class="c"></span></div><b aria-label="Play, pause" class="x"></b>`,
+			`:is(.a, :not(.b)) .c, [aria-label="Play, pause"].x { color: red }`,
+		);
+		assert.deepEqual(result, {
+			all: [":is(.a, :not(.b)) .c", '[aria-label="Play, pause"].x'],
+			matched: [":is(.a, :not(.b)) .c", '[aria-label="Play, pause"].x'],
+			skipped: 0,
+		});
+	});
+
+	it("names parts after the source stylesheet when the served one only differs in class names", () => {
+		const result = probe(
+			`<div class="hashed123"></div>`,
+			".hashed123 { color: red }",
+			".main-stable { color: red }",
+		);
+		assert.deepEqual(result, { all: [".main-stable"], matched: [".main-stable"], skipped: 0 });
+	});
+
+	it("keeps the served names when the source does not line up rule for rule", () => {
+		const result = probe(
+			`<div class="hashed123"><span></span></div>`,
+			".hashed123 span { color: red }",
+			"[data-testid=x] { color: red }",
+		);
+		assert.deepEqual(result.all, [".hashed123 span"]);
+	});
+
+	it("flags only selectors that matched before, still exist, and match nothing now on the same routes", () => {
+		const run = (themes: SelectorRun["themes"]): SelectorRun => ({ playing: true, themes });
+		const baseline = run({
+			starry: {
+				"/": { all: [".a", ".b", ".c", ".d"], matched: [".a", ".b", ".c"], skipped: 0 },
+				"/search": { all: [".s"], matched: [".s"], skipped: 0 },
+			},
+			gone: { "/": { all: [".x"], matched: [".x"], skipped: 0 } },
+		});
+		const current = run({
+			starry: { "/": { all: [".a", ".b", ".d", ".s"], matched: [".a"], skipped: 0 } },
+			fresh: { "/": { all: [".y"], matched: [], skipped: 0 } },
+		});
+		assert.deepEqual(lostSelectors(baseline, current), [{ theme: "starry", selector: ".b" }]);
+	});
+
+	it("accepting a run keeps its selector results as the next baseline", () => {
+		const current = mkdtempSync(path.join(tmpdir(), "theme-report-current-"));
+		const baseline = path.join(mkdtempSync(path.join(tmpdir(), "theme-report-baseline-")), "baseline");
+		writeFileSync(path.join(current, SELECTORS_FILE), "{}");
+		writeFileSync(path.join(current, "frame.png"), "");
+		writeFileSync(path.join(current, "shots.json"), "{}");
+		try {
+			accept(current, baseline);
+			assert.ok(existsSync(path.join(baseline, SELECTORS_FILE)));
+			assert.ok(existsSync(path.join(baseline, "frame.png")));
+			assert.ok(!existsSync(path.join(baseline, "shots.json")));
+		} finally {
+			rmSync(current, { recursive: true, force: true });
+			rmSync(path.dirname(baseline), { recursive: true, force: true });
+		}
+	});
+});
+
 describe("settings control capture", () => {
 	for (const encore of ["e-10750", "e-10800"]) {
 		it(`includes links and both toggle states with ${encore} classes`, async () => {