Merge pull request #655 from Telegram-Mini-Apps/bugfix/invalid-theme-…

…params Set valid source properties for computed color signals in theme params
Telegram-Mini-Apps · Feb 11, 2025 · 69cb440 · 69cb440
2 parents d2c21c0 + e441329
commit 69cb440
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 47 deletions.
diff --git a/.changeset/happy-pets-guess.md b/.changeset/happy-pets-guess.md
@@ -0,0 +1,5 @@
+---
+"@telegram-apps/sdk": patch
+---
+
+Set valid source properties for computed color signals in theme params.
diff --git a/packages/sdk/src/scopes/components/mini-app/methods.test.ts b/packages/sdk/src/scopes/components/mini-app/methods.test.ts
@@ -89,13 +89,13 @@ describe('bindCssVars', () => {
 
     it('should set --tg-bg-color == backgroundColorRGB() when theme changes', () => {
       bindCssVars();
-      tpState.set({ secondaryBgColor: '#ddddaa' });
+      tpState.set({ secondary_bg_color: '#ddddaa' });
       setSpy.mockClear();
       _backgroundColor.set('secondary_bg_color');
       expect(setSpy).toHaveBeenCalledOnce();
       expect(setSpy).toHaveBeenCalledWith('--tg-bg-color', '#ddddaa');
 
-      tpState.set({ bgColor: '#aafedd' });
+      tpState.set({ bg_color: '#aafedd' });
       setSpy.mockClear();
       _backgroundColor.set('bg_color');
       expect(setSpy).toHaveBeenCalledOnce();
@@ -118,13 +118,13 @@ describe('bindCssVars', () => {
 
     it('should set --tg-header-color == headerColorRGB() when theme changes', () => {
       bindCssVars();
-      tpState.set({ secondaryBgColor: '#ddddaa' });
+      tpState.set({ secondary_bg_color: '#ddddaa' });
       setSpy.mockClear();
       _headerColor.set('secondary_bg_color');
       expect(setSpy).toHaveBeenCalledOnce();
       expect(setSpy).toHaveBeenCalledWith('--tg-header-color', '#ddddaa');
 
-      tpState.set({ bgColor: '#aafedd' });
+      tpState.set({ bg_color: '#aafedd' });
       setSpy.mockClear();
       _headerColor.set('bg_color');
       expect(setSpy).toHaveBeenCalledOnce();
@@ -147,19 +147,19 @@ describe('bindCssVars', () => {
 
     it('should set --tg-bottom-bar-color == bottomBarColorRGB() when theme changes', () => {
       bindCssVars();
-      tpState.set({ bgColor: '#aafedd' });
+      tpState.set({ bg_color: '#aafedd' });
       setSpy.mockClear();
       _bottomBarColor.set('bg_color');
       expect(setSpy).toHaveBeenCalledOnce();
       expect(setSpy).toHaveBeenCalledWith('--tg-bottom-bar-color', '#aafedd');
 
-      tpState.set({ secondaryBgColor: '#ddddaa' });
+      tpState.set({ secondary_bg_color: '#ddddaa' });
       setSpy.mockClear();
       _bottomBarColor.set('secondary_bg_color');
       expect(setSpy).toHaveBeenCalledOnce();
       expect(setSpy).toHaveBeenCalledWith('--tg-bottom-bar-color', '#ddddaa');
 
-      tpState.set({ bottomBarBgColor: '#ddaacc' });
+      tpState.set({ bottom_bar_bg_color: '#ddaacc' });
       setSpy.mockClear();
       _bottomBarColor.set('bottom_bar_bg_color');
       expect(setSpy).toHaveBeenCalledOnce();

diff --git a/packages/sdk/src/scopes/components/mini-app/signals.test.ts b/packages/sdk/src/scopes/components/mini-app/signals.test.ts
@@ -28,14 +28,14 @@ describe('bottomBarColorRGB', () => {
       _bottomBarColor.set('bottom_bar_bg_color');
     });
 
-    it('should return value of theme\'s bottomBarBgColor property if it exists', () => {
-      tpState.set({ bottomBarBgColor: '#abcdef' });
-      expect(bottomBarColorRGB()).toBe(tpState().bottomBarBgColor);
+    it('should return value of theme\'s bottom_bar_bg_color property if it exists', () => {
+      tpState.set({ bottom_bar_bg_color: '#abcdef' });
+      expect(bottomBarColorRGB()).toBe('#abcdef');
     });
 
     it('should return value of theme\'s secondaryBgColor property if it exists', () => {
-      tpState.set({ secondaryBgColor: '#ddffea' });
-      expect(bottomBarColorRGB()).toBe(tpState().secondaryBgColor);
+      tpState.set({ secondary_bg_color: '#ddffea' });
+      expect(bottomBarColorRGB()).toBe('#ddffea');
     });
 
     it('should return undefined if bottomBarBgColor and secondaryBgColor keys are not presented in theme', () => {
@@ -45,16 +45,13 @@ describe('bottomBarColorRGB', () => {
   });
 
   it.each([
-    { value: 'bg_color', source: 'bgColor' },
-    { value: 'secondary_bg_color', source: 'secondaryBgColor' },
+    { value: 'bg_color', source: 'bg_color' },
+    { value: 'secondary_bg_color', source: 'secondary_bg_color' },
   ] as const)('should return value of theme\'s $source property if headerColor signal value is $value', ({
     value,
     source,
   }) => {
-    tpState.set({
-      bgColor: '#ffffff',
-      secondaryBgColor: '#000000',
-    });
+    tpState.set({ bg_color: '#ffffff', secondary_bg_color: '#000000' });
     _headerColor.set(value);
     expect(headerColorRGB()).toBe(tpState()[source]);
   });
@@ -67,16 +64,13 @@ describe('backgroundColorRGB', () => {
   });
 
   it.each([
-    { value: 'bg_color', source: 'bgColor' },
-    { value: 'secondary_bg_color', source: 'secondaryBgColor' },
+    { value: 'bg_color', source: 'bg_color' },
+    { value: 'secondary_bg_color', source: 'secondary_bg_color' },
   ] as const)('should return value of theme\'s $source property if backgroundColor signal value is $value', ({
     value,
     source,
   }) => {
-    tpState.set({
-      bgColor: '#ffffff',
-      secondaryBgColor: '#000000',
-    });
+    tpState.set({ bg_color: '#ffffff', secondary_bg_color: '#000000' });
     _backgroundColor.set(value);
     expect(backgroundColorRGB()).toBe(tpState()[source]);
   });
@@ -89,16 +83,13 @@ describe('headerColorRGB', () => {
   });
 
   it.each([
-    { value: 'bg_color', source: 'bgColor' },
-    { value: 'secondary_bg_color', source: 'secondaryBgColor' },
+    { value: 'bg_color', source: 'bg_color' },
+    { value: 'secondary_bg_color', source: 'secondary_bg_color' },
   ] as const)('should return value of theme\'s $source property if headerColor signal value is $value', ({
     value,
     source,
   }) => {
-    tpState.set({
-      bgColor: '#ffffff',
-      secondaryBgColor: '#000000',
-    });
+    tpState.set({ bg_color: '#ffffff', secondary_bg_color: '#000000' });
     _headerColor.set(value);
     expect(headerColorRGB()).toBe(tpState()[source]);
   });

diff --git a/packages/sdk/src/scopes/components/theme-params/signals.test.ts b/packages/sdk/src/scopes/components/theme-params/signals.test.ts
@@ -0,0 +1,66 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { resetPackageState } from '@test-utils/utils.js';
+
+import {
+  isDark,
+  _state,
+  backgroundColor,
+  secondaryBackgroundColor,
+  headerBackgroundColor,
+  buttonColor,
+  linkColor,
+  sectionHeaderTextColor,
+  subtitleTextColor,
+  textColor,
+  destructiveTextColor,
+  sectionBackgroundColor,
+  sectionSeparatorColor,
+  hintColor,
+  buttonTextColor,
+  accentTextColor,
+  bottomBarBgColor,
+} from './signals.js';
+
+beforeEach(() => {
+  resetPackageState();
+  vi.restoreAllMocks();
+});
+
+describe.each([
+  ['accentTextColor', accentTextColor, 'accent_text_color'],
+  ['backgroundColor', backgroundColor, 'bg_color'],
+  ['buttonColor', buttonColor, 'button_color'],
+  ['buttonTextColor', buttonTextColor, 'button_text_color'],
+  ['bottomBarBgColor', bottomBarBgColor, 'bottom_bar_bg_color'],
+  ['destructiveTextColor', destructiveTextColor, 'destructive_text_color'],
+  ['headerBackgroundColor', headerBackgroundColor, 'header_bg_color'],
+  ['hintColor', hintColor, 'hint_color'],
+  ['linkColor', linkColor, 'link_color'],
+  ['secondaryBackgroundColor', secondaryBackgroundColor, 'secondary_bg_color'],
+  ['sectionBackgroundColor', sectionBackgroundColor, 'section_bg_color'],
+  ['sectionHeaderTextColor', sectionHeaderTextColor, 'section_header_text_color'],
+  ['sectionSeparatorColor', sectionSeparatorColor, 'section_separator_color'],
+  ['subtitleTextColor', subtitleTextColor, 'subtitle_text_color'],
+  ['textColor', textColor, 'text_color'],
+] as const)('%s', (_, signal, source) => {
+  it(`should take value from "${source}" state property`, () => {
+    _state.set({ [source]: '#abcfff' });
+    expect(signal()).toBe('#abcfff');
+  });
+});
+
+describe('isDark', () => {
+  it('should return true if bg_color is missing', () => {
+    _state.set({});
+    expect(isDark()).toBe(true);
+  });
+
+  it('should return true if bg_color is considered dark. False otherwise', () => {
+    _state.set({ bg_color: '#000000' });
+    expect(isDark()).toBe(true);
+
+    _state.set({ bg_color: '#ffffff' });
+    expect(isDark()).toBe(false);
+  });
+});
diff --git a/packages/sdk/src/scopes/components/theme-params/signals.ts b/packages/sdk/src/scopes/components/theme-params/signals.ts
@@ -21,59 +21,59 @@ function fromState<K extends keyof ThemeParams>(key: K): Computed<ThemeParams[K]
 /**
  * @since v6.10
  */
-export const accentTextColor = fromState('accentTextColor');
+export const accentTextColor = fromState('accent_text_color');
 
-export const backgroundColor = fromState('bgColor');
+export const backgroundColor = fromState('bg_color');
 
-export const buttonColor = fromState('buttonColor');
+export const buttonColor = fromState('button_color');
 
-export const buttonTextColor = fromState('buttonTextColor');
+export const buttonTextColor = fromState('button_text_color');
 
 /**
  * @since v7.10
  */
-export const bottomBarBgColor = fromState('bottomBarBgColor');
+export const bottomBarBgColor = fromState('bottom_bar_bg_color');
 
-export const destructiveTextColor = fromState('destructiveTextColor');
+export const destructiveTextColor = fromState('destructive_text_color');
 
 /**
  * @since v6.10
  */
-export const headerBackgroundColor = fromState('headerBgColor');
+export const headerBackgroundColor = fromState('header_bg_color');
 
-export const hintColor = fromState('hintColor');
+export const hintColor = fromState('hint_color');
 
 /**
  * @returns True if the current color scheme is recognized as dark.
  * This value is calculated based on the current theme's background color.
  */
 export const isDark = createComputed(() => {
-  const { bgColor } = _state();
-  return !bgColor || isColorDark(bgColor);
+  const color = backgroundColor();
+  return !color || isColorDark(color);
 });
 
-export const linkColor = fromState('linkColor');
+export const linkColor = fromState('link_color');
 
-export const secondaryBackgroundColor = fromState('secondaryBgColor');
+export const secondaryBackgroundColor = fromState('secondary_bg_color');
 
 /**
  * @since v6.10
  */
-export const sectionBackgroundColor = fromState('sectionBgColor');
+export const sectionBackgroundColor = fromState('section_bg_color');
 
 /**
  * @since v6.10
  */
-export const sectionHeaderTextColor = fromState('sectionHeaderTextColor');
+export const sectionHeaderTextColor = fromState('section_header_text_color');
 
 /**
  * @since v7.6
  */
-export const sectionSeparatorColor = fromState('sectionSeparatorColor');
+export const sectionSeparatorColor = fromState('section_separator_color');
 
 /**
  * @since v6.10
  */
-export const subtitleTextColor = fromState('subtitleTextColor');
+export const subtitleTextColor = fromState('subtitle_text_color');
 
-export const textColor = fromState('textColor');
+export const textColor = fromState('text_color');