@tma.js/sdk 1.2.1 → 1.4.0

package/src/launch-params/retrieveFromLocation.ts

@@ -1,4 +1,4 @@
-import { parseLaunchParams } from './parseLaunchParams.js';
+import { retrieveFromUrl } from './retrieveFromUrl.js';
 import type { LaunchParams } from './types.js';
 
 /**
@@ -6,5 +6,5 @@ import type { LaunchParams } from './types.js';
  * @throws {Error} window.location.hash contains invalid data.
  */
 export function retrieveFromLocation(): LaunchParams {
-  return parseLaunchParams(window.location.hash.slice(1));
+  return retrieveFromUrl(window.location.href);
 }

package/src/launch-params/retrieveFromPerformance.ts

@@ -1,5 +1,5 @@
 import { getFirstNavigationEntry } from './getFirstNavigationEntry.js';
-import { parseLaunchParams } from './parseLaunchParams.js';
+import { retrieveFromUrl } from './retrieveFromUrl.js';
 import type { LaunchParams } from './types.js';
 
 /**
@@ -14,10 +14,5 @@ export function retrieveFromPerformance(): LaunchParams {
     throw new Error('Unable to get first navigation entry.');
   }
 
-  const hashMatch = navigationEntry.name.match(/#(.*)/);
-  if (!hashMatch) {
-    throw new Error('First navigation entry does not contain hash part.');
-  }
-
-  return parseLaunchParams(hashMatch[1]);
+  return retrieveFromUrl(navigationEntry.name);
 }

package/src/launch-params/retrieveFromUrl.ts

@@ -0,0 +1,19 @@
+import { parseLaunchParams } from '~/launch-params/parseLaunchParams.js';
+import type { LaunchParams } from '~/launch-params/types.js';
+
+/**
+ * Retrieves launch parameters from the specified URL.
+ * @param url - URL to extract launch parameters from.
+ */
+export function retrieveFromUrl(url: string): LaunchParams {
+  const queryParams = url.includes('?')
+    // If URL includes "?", we expect it to possibly contain "#". The reason is TMA allows passing
+    // start parameter via tgWebAppStartParam **query** parameter. Replacing "#" with "&" we
+    // expect merging query parameters with hash parameters and creating complete launch
+    // parameters information.
+    ? url.replace('#', '&').slice(url.indexOf('?') + 1)
+    // Otherwise, we expect specifying launch parameters only in the hash part.
+    : url.slice(url.indexOf('#') + 1);
+
+  return parseLaunchParams(queryParams);
+}

package/src/launch-params/types.ts

@@ -8,9 +8,9 @@ import type { Platform } from '~/types/index.js';
  */
 export interface LaunchParams {
   /**
-   * Current Mini Apps version.
+   * True if Mini App is currently launched in inline mode.
    */
-  version: string;
+  botInline?: boolean;
 
   /**
    * Current launch init data. Can be missing in case, application was launched via
@@ -29,19 +29,24 @@ export interface LaunchParams {
   platform: Platform;
 
   /**
-   * Mini App palette settings.
+   * True if application is required to show the Settings Button.
    */
-  themeParams: ThemeParamsParsed;
+  showSettings?: boolean;
 
   /**
-   * True if Mini App is currently launched in inline mode.
+   * Start parameter passed in the application link.
    */
-  botInline?: boolean;
+  startParam?: string;
 
   /**
-   * True if application is required to show the Settings Button.
+   * Mini App palette settings.
    */
-  showSettings?: boolean;
+  themeParams: ThemeParamsParsed;
+
+  /**
+   * Current Mini Apps version.
+   */
+  version: string;
 }
 
 export interface LaunchData {

package/src/logger/__tests__/Logger.ts

@@ -0,0 +1,107 @@
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+
+import { Logger } from '../Logger';
+
+const now = new Date('2022-11-04T09:09:43.007Z');
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+beforeAll(() => {
+  vi.useFakeTimers().setSystemTime(now);
+});
+
+afterAll(() => {
+  vi.useRealTimers();
+});
+
+it('should not call console methods if logger is disabled', () => {
+  const logger = new Logger('', false);
+  const spy = vi.fn();
+
+  vi.spyOn(console, 'log').mockImplementation(spy);
+  vi.spyOn(console, 'warn').mockImplementation(spy);
+  vi.spyOn(console, 'error').mockImplementation(spy);
+
+  logger.log();
+  logger.warn();
+  logger.error();
+  expect(spy).not.toHaveBeenCalled();
+});
+
+describe('enable', () => {
+  it('should start logging messages into console', () => {
+    const logger = new Logger('', false);
+    const spy = vi.fn();
+
+    vi.spyOn(console, 'log').mockImplementation(spy);
+    logger.log();
+    expect(spy).not.toHaveBeenCalled();
+
+    logger.enable();
+    logger.log();
+    expect(spy).toHaveBeenCalledOnce();
+  });
+});
+
+describe('disable', () => {
+  it('should stop logging messages into console', () => {
+    const logger = new Logger('', true);
+    const spy = vi.fn();
+
+    vi.spyOn(console, 'log').mockImplementation(spy);
+    logger.log();
+    expect(spy).toHaveBeenCalledOnce();
+
+    spy.mockReset();
+
+    logger.disable();
+    logger.log();
+    expect(spy).not.toHaveBeenCalled();
+  });
+});
+
+describe('error', () => {
+  it('should call console.error()', () => {
+    const logger = new Logger('My prefix', true);
+    const spy = vi.fn();
+    vi.spyOn(console, 'error').mockImplementation(spy);
+
+    logger.error('Test');
+    expect(spy).toHaveBeenCalledOnce();
+    expect(spy).toHaveBeenCalledWith('[09:09:43.007]', 'My prefix', 'Test');
+  });
+});
+
+describe('log', () => {
+  it('should call console.log()', () => {
+    const logger = new Logger('My prefix', true);
+    const spy = vi.fn();
+    vi.spyOn(console, 'log').mockImplementation(spy);
+
+    logger.log('Test');
+    expect(spy).toHaveBeenCalledOnce();
+    expect(spy).toHaveBeenCalledWith('[09:09:43.007]', 'My prefix', 'Test');
+  });
+});
+
+describe('warn', () => {
+  it('should call console.warn()', () => {
+    const logger = new Logger('My prefix', true);
+    const spy = vi.fn();
+    vi.spyOn(console, 'warn').mockImplementation(spy);
+
+    logger.warn('Test');
+    expect(spy).toHaveBeenCalledOnce();
+    expect(spy).toHaveBeenCalledWith('[09:09:43.007]', 'My prefix', 'Test');
+  });
+});

package/src/main-button/__tests__/MainButton.ts

@@ -0,0 +1,346 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { MainButton } from '../MainButton';
+
+describe('disable', () => {
+  it('should call "web_app_setup_main_button" method with parameter where "is_active" property equal to false', () => {
+    const postEvent = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent,
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.disable();
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
+    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_active', false);
+  });
+
+  it('should emit "change:isEnabled" event with false value', () => {
+    const listener = vi.fn();
+    const postEvent = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent,
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: true,
+    });
+
+    mainButton.on('change:isEnabled', listener);
+    mainButton.disable();
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(false);
+  });
+});
+
+describe('enable', () => {
+  it('should call "web_app_setup_main_button" method with parameter where "is_active" property equal to true', () => {
+    const postEvent = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent,
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.enable();
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
+    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_active', true);
+  });
+
+  it('should emit "change:isEnabled" event with true value', () => {
+    const listener = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent: vi.fn(),
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.on('change:isEnabled', listener);
+    mainButton.enable();
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(true);
+  });
+});
+
+describe('hide', () => {
+  it('should call "web_app_setup_main_button" method with parameter where "is_visible" property equal to false', () => {
+    const postEvent = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent,
+      isLoaderVisible: false,
+      isVisible: true,
+      isEnabled: false,
+    });
+
+    mainButton.hide();
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
+    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_visible', false);
+  });
+
+  it('should emit "change:isVisible" event with false value', () => {
+    const listener = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent: vi.fn(),
+      isLoaderVisible: false,
+      isVisible: true,
+      isEnabled: false,
+    });
+
+    mainButton.on('change:isVisible', listener);
+    mainButton.hide();
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(false);
+  });
+});
+
+describe('hideLoader', () => {
+  it('should call "web_app_setup_main_button" method with parameter where "is_progress_visible" property equal to false', () => {
+    const postEvent = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent,
+      isLoaderVisible: true,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.hideLoader();
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
+    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_progress_visible', false);
+  });
+
+  it('should emit "change:isLoaderVisible" event with false value', () => {
+    const listener = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent: vi.fn(),
+      isLoaderVisible: true,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.on('change:isLoaderVisible', listener);
+    mainButton.hideLoader();
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(false);
+  });
+});
+
+describe('show', () => {
+  it('should call "web_app_setup_main_button" method with parameter where "is_visible" property equal to true', () => {
+    const postEvent = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent,
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.show();
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
+    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_visible', true);
+  });
+
+  it('should emit "change:isVisible" event with true value', () => {
+    const listener = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent: vi.fn(),
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.on('change:isVisible', listener);
+    mainButton.show();
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(true);
+  });
+});
+
+describe('showLoader', () => {
+  it('should call "web_app_setup_main_button" method with parameter where "is_progress_visible" property equal to true', () => {
+    const postEvent = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent,
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.showLoader();
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
+    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_progress_visible', true);
+  });
+
+  it('should emit "change:isLoaderVisible" event with true value', () => {
+    const listener = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent: vi.fn(),
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.on('change:isLoaderVisible', listener);
+    mainButton.showLoader();
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(true);
+  });
+});
+
+describe('setText', () => {
+  it('should call "web_app_setup_main_button" method with parameter where "text" property equal to specified value', () => {
+    const postEvent = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent,
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.setText('WOW');
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
+    expect(postEvent.mock.calls[0][1]).toHaveProperty('text', 'WOW');
+  });
+
+  it('should emit "change:text" event with specified value', () => {
+    const listener = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent: vi.fn(),
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.on('change:text', listener);
+    mainButton.setText('Punch');
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith('Punch');
+  });
+});
+
+describe('setTextColor', () => {
+  it('should call "web_app_setup_main_button" method with parameter where "text_color" property equal to specified value', () => {
+    const postEvent = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent,
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.setTextColor('#ffaacc');
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
+    expect(postEvent.mock.calls[0][1]).toHaveProperty('text_color', '#ffaacc');
+  });
+
+  it('should emit "change:textColor" event with specified value', () => {
+    const listener = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent: vi.fn(),
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.on('change:textColor', listener);
+    mainButton.setTextColor('#aaaaaa');
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith('#aaaaaa');
+  });
+});
+
+describe('setColor', () => {
+  it('should call "web_app_setup_main_button" method with parameter where "color" property equal to specified value', () => {
+    const postEvent = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent,
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.setBackgroundColor('#ffaacc');
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
+    expect(postEvent.mock.calls[0][1]).toHaveProperty('color', '#ffaacc');
+  });
+
+  it('should emit "change:backgroundColor" event with specified value', () => {
+    const listener = vi.fn();
+    const mainButton = new MainButton({
+      text: 'Test',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      postEvent: vi.fn(),
+      isLoaderVisible: false,
+      isVisible: false,
+      isEnabled: false,
+    });
+
+    mainButton.on('change:backgroundColor', listener);
+    mainButton.setBackgroundColor('#aaaaaa');
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith('#aaaaaa');
+  });
+});

package/src/mini-app/__tests__/MiniApp.ts

@@ -0,0 +1,140 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import type { PostEvent } from '../../bridge';
+import type { RGB } from '../../colors';
+import { createRequestIdGenerator } from '../../init/creators';
+import { MiniApp } from '../MiniApp';
+import type { MiniAppHeaderColor } from '../types';
+
+interface CreateWebAppOptions {
+  backgroundColor?: RGB;
+  botInline?: boolean;
+  headerColor?: MiniAppHeaderColor;
+  postEvent?: PostEvent;
+  version?: string;
+}
+
+function createMiniApp(options: CreateWebAppOptions = {}): MiniApp {
+  const {
+    postEvent = vi.fn(),
+    backgroundColor = '#000000',
+    headerColor = 'bg_color',
+    version = '6.0',
+    botInline = false,
+  } = options;
+
+  return new MiniApp({
+    version,
+    botInline,
+    postEvent,
+    headerColor,
+    backgroundColor,
+    createRequestId: createRequestIdGenerator(),
+  });
+}
+
+describe('setBackgroundColor', () => {
+  it('should call "web_app_set_background_color" method with { color: {{color}} }', () => {
+    const postEvent = vi.fn();
+    const miniApp = createMiniApp({ postEvent });
+
+    expect(postEvent).toHaveBeenCalledTimes(0);
+    miniApp.setBackgroundColor('#ffaabb');
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent).toHaveBeenCalledWith('web_app_set_background_color', { color: '#ffaabb' });
+  });
+
+  it('should emit "change:backgroundColor" event with specified value', () => {
+    const miniApp = createMiniApp({ backgroundColor: '#ffffff' });
+    const listener = vi.fn();
+
+    miniApp.on('change:backgroundColor', listener);
+    expect(listener).toHaveBeenCalledTimes(0);
+    miniApp.setBackgroundColor('#ffaacc');
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith('#ffaacc');
+  });
+});
+
+describe('setHeaderColor', () => {
+  it('should call "web_app_set_header_color" method with { color_key: {{color_key}} }', () => {
+    const postEvent = vi.fn();
+    const miniApp = createMiniApp({ postEvent, headerColor: 'bg_color' });
+
+    expect(postEvent).toHaveBeenCalledTimes(0);
+    miniApp.setHeaderColor('secondary_bg_color');
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent).toHaveBeenCalledWith('web_app_set_header_color', { color_key: 'secondary_bg_color' });
+  });
+
+  it('should emit "change:headerColor" event with specified value', () => {
+    const miniApp = createMiniApp({ headerColor: 'bg_color' });
+    const listener = vi.fn();
+
+    miniApp.on('change:headerColor', listener);
+    expect(listener).toHaveBeenCalledTimes(0);
+    miniApp.setHeaderColor('secondary_bg_color');
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith('secondary_bg_color');
+  });
+});
+
+describe('off', () => {
+  describe('"change:backgroundColor" event', () => {
+    it('should remove event listener from event', () => {
+      const listener = vi.fn();
+      const miniApp = createMiniApp({ backgroundColor: '#ffffff' });
+
+      miniApp.on('change:backgroundColor', listener);
+
+      expect(listener).toHaveBeenCalledTimes(0);
+      miniApp.setBackgroundColor('#aaddcc');
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      miniApp.off('change:backgroundColor', listener);
+      listener.mockClear();
+
+      expect(listener).toHaveBeenCalledTimes(0);
+      miniApp.setBackgroundColor('#ffaaaa');
+      expect(listener).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('"change:headerColor" event', () => {
+    it('should remove event listener from event', () => {
+      const listener = vi.fn();
+      const miniApp = createMiniApp({ headerColor: 'bg_color' });
+
+      miniApp.on('change:headerColor', listener);
+
+      expect(listener).toHaveBeenCalledTimes(0);
+      miniApp.setHeaderColor('secondary_bg_color');
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      miniApp.off('change:headerColor', listener);
+      listener.mockClear();
+
+      expect(listener).toHaveBeenCalledTimes(0);
+      miniApp.setHeaderColor('bg_color');
+      expect(listener).toHaveBeenCalledTimes(0);
+    });
+  });
+});
+
+describe('supports', () => {
+  describe('setHeaderColor / setBackgroundColor', () => {
+    it('should return true in case, WebApp version is 6.1 or higher. False, otherwise', () => {
+      const miniApp1 = createMiniApp({ version: '6.0' });
+      expect(miniApp1.supports('setHeaderColor')).toBe(false);
+      expect(miniApp1.supports('setBackgroundColor')).toBe(false);
+
+      const miniApp2 = createMiniApp({ version: '6.1' });
+      expect(miniApp2.supports('setHeaderColor')).toBe(true);
+      expect(miniApp2.supports('setBackgroundColor')).toBe(true);
+
+      const miniApp3 = createMiniApp({ version: '6.2' });
+      expect(miniApp3.supports('setHeaderColor')).toBe(true);
+      expect(miniApp3.supports('setBackgroundColor')).toBe(true);
+    });
+  });
+});