1import { describe, expect, it, vi } from "vite-plus/test";
2
3import { applyAppearanceContrast } from "./appearanceContrast";
4
5function makeRoot() {
6 const setProperty = vi.fn();
7 return {
8 root: { style: { setProperty } } as unknown as HTMLElement,
9 setProperty,
10 };
11}
12
13describe("applyAppearanceContrast", () => {
14 it("boosts semantic contrast above the default", () => {
15 const { root, setProperty } = makeRoot();
16
17 applyAppearanceContrast(root, 135);
18
19 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-base", "100%");
20 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-boost", "35%");
21 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-border-boost", "8.75%");
22 });
23
24 it("supports the maximum contrast boost", () => {
25 const { root, setProperty } = makeRoot();
26
27 applyAppearanceContrast(root, 200);
28
29 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-base", "100%");
30 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-boost", "100%");
31 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-border-boost", "25%");
32 });
33
34 it("softens semantic contrast below the default", () => {
35 const { root, setProperty } = makeRoot();
36
37 applyAppearanceContrast(root, 70);
38
39 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-base", "70%");
40 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-boost", "0%");
41 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-border-boost", "0%");
42 });
43
44 it("disables contrast mixing at the default", () => {
45 const { root, setProperty } = makeRoot();
46
47 applyAppearanceContrast(root, 100);
48
49 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-base", "100%");
50 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-boost", "0%");
51 expect(setProperty).toHaveBeenCalledWith("--appearance-contrast-border-boost", "0%");
52 });
53});