use getComputedCssVariableValues - update unit tests

Author: OlgaLarina

packages/survey-creator-core/tests/creator-theme/register-creator-theme.test.ts

@@ -42,8 +42,8 @@ test("Creator theme: update editors after theme switching", (): any => {
 
   expect(themeName.value).toEqual("default");
   expect(colorPalette.value).toEqual("light");
-  expect(surfaceBackgroundColor.value).toEqual("#EDF9F7");
-  expect(primaryBackgroundColor.value).toEqual("#19B394");
+  expect(surfaceBackgroundColor.value).toEqual("rgba(237, 249, 247, 1)");
+  expect(primaryBackgroundColor.value).toEqual("rgba(25, 179, 148, 1)");
 
   themeName.value = "contrast";
   expect(themeName.value).toEqual("contrast");
@@ -54,8 +54,8 @@ test("Creator theme: update editors after theme switching", (): any => {
   themeName.value = "default";
   expect(themeName.value).toEqual("default");
   expect(colorPalette.value).toEqual("light");
-  expect(surfaceBackgroundColor.value).toEqual("#EDF9F7");
-  expect(primaryBackgroundColor.value).toEqual("#19B394");
+  expect(surfaceBackgroundColor.value).toEqual("rgba(237, 249, 247, 1)");
+  expect(primaryBackgroundColor.value).toEqual("rgba(25, 179, 148, 1)");
 });
 
 test("Creator theme: update editors after palette switching", (): any => {
@@ -77,6 +77,6 @@ test("Creator theme: update editors after palette switching", (): any => {
   colorPalette.value = "light";
   expect(themeName.value).toEqual("default");
   expect(colorPalette.value).toEqual("light");
-  expect(surfaceBackgroundColor.value).toEqual("#EDF9F7");
-  expect(primaryBackgroundColor.value).toEqual("#19B394");
+  expect(surfaceBackgroundColor.value).toEqual("rgba(237, 249, 247, 1)");
+  expect(primaryBackgroundColor.value).toEqual("rgba(25, 179, 148, 1)");
 });

packages/survey-creator-core/tests/tabs/theme-header-model.tests.ts

@@ -14,14 +14,17 @@ export * from "../../src/components/tabs/theme-custom-questions/shadow-effects";
 export * from "../../src/property-grid/theme-settings";
 export * from "../../src/property-grid/header-settings";
 import { ContrastLight, DefaultDark, DefaultLight } from "./test-themes";
-import { mockGetRGBaColorIdentity, restoreGetRGBaColorMock } from "./theme-test-mocks";
+import { mockDomWindowGetComputedStyleFromInlineStyles, mockGetRGBaColorIdentity, restoreGetRGBaColorMock } from "./theme-test-mocks";
+import type { MockInstance } from "vitest";
 
 import SurveyThemes from "survey-core/themes";
 registerSurveyTheme(SurveyThemes);
 
 const cssVariables = DefaultTheme.cssVariables;
+let computedStyleSpy: MockInstance | undefined;
 beforeEach(() => {
   mockGetRGBaColorIdentity();
+  computedStyleSpy = mockDomWindowGetComputedStyleFromInlineStyles();
 
   Themes["default-light"] = DefaultLight;
   Themes["contrast-light"] = ContrastLight;
@@ -31,6 +34,8 @@ beforeEach(() => {
 });
 
 afterEach(() => {
+  computedStyleSpy?.mockRestore();
+  computedStyleSpy = undefined;
   restoreGetRGBaColorMock();
 });
 

packages/survey-creator-core/tests/tabs/theme-model.tests.ts

@@ -11,7 +11,8 @@ import { ThemeModel, getThemeChanges } from "../../src/components/tabs/theme-mod
 import { registerSurveyTheme } from "../../src/components/tabs/theme-model";
 import SurveyThemes from "survey-core/themes";
 import { ContrastLight, DefaultDark, DefaultLight } from "./test-themes";
-import { mockGetRGBaColorIdentity, restoreGetRGBaColorMock } from "./theme-test-mocks";
+import { mockDomWindowGetComputedStyleFromInlineStyles, mockGetRGBaColorIdentity, restoreGetRGBaColorMock } from "./theme-test-mocks";
+import type { MockInstance } from "vitest";
 registerSurveyTheme(SurveyThemes);
 import "survey-core/survey.i18n";
 
@@ -76,16 +77,19 @@ const themeFromFile = {
 };
 
 const cssVariables = DefaultTheme.cssVariables;
+let getComputedStyleMock: MockInstance | undefined;
 beforeEach(() => {
   mockGetRGBaColorIdentity();
+  getComputedStyleMock = mockDomWindowGetComputedStyleFromInlineStyles();
   Themes["default-light"] = DefaultLight;
   Themes["contrast-light"] = ContrastLight;
   Themes["default-dark"] = DefaultDark;
   ThemeModel.DefaultTheme = Themes["default-light"];
-  DefaultTheme.cssVariables = {} as any;
 });
 
 afterEach(() => {
+  getComputedStyleMock?.mockRestore();
+  getComputedStyleMock = undefined;
   restoreGetRGBaColorMock();
   DefaultTheme.cssVariables = cssVariables;
 });

packages/survey-creator-core/tests/tabs/theme-test-mocks.ts

@@ -1,4 +1,4 @@
-import { DomWindowHelper } from "survey-core";
+import { DomDocumentHelper } from "survey-core";
 import { vi, type MockInstance } from "vitest";
 import * as colorUtils from "../../src/utils/color-utils";
 
@@ -26,23 +26,28 @@ const defaultComputedCssVariables: Record<string, string> = {
 
 export function mockDomWindowGetComputedStyleFromInlineStyles(values: Record<string, string> = {}): MockInstance {
   const mergedDefaults = { ...defaultComputedCssVariables, ...values };
-  return vi.spyOn(DomWindowHelper, "getWindow").mockReturnValue({
-    ...window,
-    getComputedStyle: (el: any) => {
-      const style = el?.style;
-      return {
-        getPropertyValue: (property: string) => {
-          if (style) {
-            const v = style.getPropertyValue?.(property);
-            if (typeof v === "string" && v.length > 0) return v;
-            // Fallback for non-custom properties in JSDOM mocks
-            const v2 = style[property];
-            if (typeof v2 === "string" && v2.length > 0) return v2;
+  return vi.spyOn(DomDocumentHelper, "getComputedStyle").mockImplementation((el: any) => {
+    const style = el?.style;
+    return {
+      getPropertyValue: (property: string) => {
+        if (style) {
+          const v = style.getPropertyValue?.(property);
+          if (typeof v === "string" && v.length > 0) {
+            const varRefMatch = v.match(/^var\((--[^)]+)\)$/);
+            if (varRefMatch) {
+              const varName = varRefMatch[1];
+              const cssVarValue = style.getPropertyValue?.(varName) || mergedDefaults[varName];
+              return cssVarValue || "";
+            }
+            return v;
           }
-          if (mergedDefaults[property] !== undefined) return mergedDefaults[property];
-          return "";
+          // Fallback for non-custom properties in JSDOM mocks
+          const v2 = style[property];
+          if (typeof v2 === "string" && v2.length > 0) return v2;
         }
-      } as any;
-    }
-  } as any);
+        if (mergedDefaults[property] !== undefined) return mergedDefaults[property];
+        return "";
+      }
+    } as any;
+  });
 }