From 1f011c5413fe1d1c567ef6405438159b90b89aaa Mon Sep 17 00:00:00 2001 From: Christian Bager Bach Houmann Date: Fri, 23 Oct 2026 09:16:12 +0200 Subject: [PATCH] test(ui): read computed styles the same way on jsdom 30.1.3 jsdom 30.1.3 cascades each longhand of a shorthand that holds a var() as unset, since it does not substitute variables yet. A hover rule's `background: var(--background-modifier-hover)` then reads as the initial background, so the tap tests could not see which rule won. They now read backgroundColor with each such background declared as its color, which jsdom 30.1.2 and 30.1.3 read alike. jsdom 30.1.3 also reads an undeclared box-shadow as its initial `none` where 30.1.2 read an empty string, so the stage test asserts that a row's cover does not take the stage's shadow. Related: #515 --- src/ui/PodcastView/styles.test.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/ui/PodcastView/styles.test.ts b/src/ui/PodcastView/styles.test.ts index 26da6d8a..65310d3d 100644 --- a/src/ui/PodcastView/styles.test.ts +++ b/src/ui/PodcastView/styles.test.ts @@ -104,13 +104,13 @@ describe("hover", () => { ".pn-back", "rgba(0, 0, 0, 0)", ], - ["a row", "EpisodeRow", '
', ".pn-ep", ""], + ["a row", "EpisodeRow", '
', ".pn-ep", "rgba(0, 0, 0, 0)"], [ "the skip button", "Deck", '
', ".pn-skip", - "", + "rgba(0, 0, 0, 0)", ], [ "the panel switch that is on", @@ -123,9 +123,13 @@ describe("hover", () => { "%s keeps its resting background after a tap", (_name, component, html, selector, resting) => { const background = (hovered: boolean, media: string[] = []) => { - const css = componentCss(["PodcastView", component], { media, states: ["hover"] }); + // jsdom drops a var() in a shorthand, so each background stands in as its color. + const css = componentCss(["PodcastView", component], { + media, + states: ["hover"], + }).replaceAll("background: var(", "background-color: var("); const markup = inView(component, html.replace("%", hovered ? " hover" : "")); - return getComputedStyle(styled(css, markup, selector)).background; + return getComputedStyle(styled(css, markup, selector)).backgroundColor; }; expect([background(false), background(true), background(true, [HOVER])]).toEqual([ @@ -205,7 +209,7 @@ describe("the player's stage", () => { expect([look("art"), look("row")]).toEqual([ { shadow: "var(--shadow-s)", icon: "25cqw" }, - { shadow: "", icon: "18px" }, + { shadow: expect.not.stringContaining("--shadow-s"), icon: "18px" }, ]); }); });