| 1 | import { describe, expect, it } from "vite-plus/test"; |
| 2 | import { MOBILE_THEME_IDS } from "@t3tools/shared/themePalettes"; |
| 3 | |
| 4 | import { getMobileThemeVariables } from "../../lib/mobileTheme"; |
| 5 | import { getThreadListV2RowAppearance as iosAppearance } from "./thread-list-v2-row-appearance"; |
| 6 | import { getThreadListV2RowAppearance as androidAppearance } from "./thread-list-v2-row-appearance.android"; |
| 7 | |
| 8 | describe.each([ |
| 9 | ["ios", iosAppearance], |
| 10 | ["android", androidAppearance], |
| 11 | ] as const)("%s thread row colors", (_platform, appearanceFor) => { |
| 12 | it.each(MOBILE_THEME_IDS)( |
| 13 | "preserves active selection and uses neutral hover for %s", |
| 14 | (themeId) => { |
| 15 | for (const appearance of ["light", "dark"] as const) { |
| 16 | const theme = getMobileThemeVariables(themeId, appearance); |
| 17 | const idle = appearanceFor(theme, true, false); |
| 18 | const active = appearanceFor(theme, true, true); |
| 19 | |
| 20 | expect(idle.style?.backgroundColor).toBe(theme["--color-drawer"]); |
| 21 | expect(idle.interactionClassName).toBe("bg-thread-hover"); |
| 22 | expect(idle.interactionOpacity).toBe(1); |
| 23 | expect(active.style?.backgroundColor).toBe(theme["--color-thread-selected"]); |
| 24 | // Pointer feedback must not mix a second color into the active background. |
| 25 | expect(active.interactionOpacity).toBe(0); |
| 26 | expect(active.providerIconSurfaceColor).toBe(active.style?.backgroundColor); |
| 27 | expect(idle.foregroundClassName).toBe("text-drawer-foreground"); |
| 28 | expect(idle.mutedForegroundClassName).toBe("text-drawer-foreground-muted"); |
| 29 | |
| 30 | const phone = appearanceFor(theme, false, false); |
| 31 | expect(phone.swipeBackgroundColor).toBe(theme["--color-screen"]); |
| 32 | expect(phone.interactionClassName).toBe("bg-row-hover"); |
| 33 | expect(phone.foregroundClassName).toBe("text-foreground"); |
| 34 | } |
| 35 | }, |
| 36 | ); |
| 37 | }); |