@tma.js/sdk 1.2.1 → 1.4.0

package/src/closing-behavior/__tests__/ClosingBehavior.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { ClosingBehavior } from '../ClosingBehavior';
+
+describe('disable', () => {
+  it('should call "web_app_setup_closing_behavior" method with "need_confirmation" equal to false', () => {
+    const postEvent = vi.fn();
+    const confirmation = new ClosingBehavior(true, postEvent);
+
+    expect(postEvent).toHaveBeenCalledTimes(0);
+    confirmation.disableConfirmation();
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent).toHaveBeenCalledWith('web_app_setup_closing_behavior', { need_confirmation: false });
+  });
+
+  it('should emit "isConfirmationNeededChanged" event with false value', () => {
+    const confirmation = new ClosingBehavior(true, vi.fn());
+    const listener = vi.fn();
+
+    confirmation.on('change:isConfirmationNeeded', listener);
+    expect(listener).toHaveBeenCalledTimes(0);
+    confirmation.disableConfirmation();
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(false);
+  });
+});
+
+describe('enable', () => {
+  it('should call "web_app_setup_closing_behavior" method with "need_confirmation" equal to true', () => {
+    const postEvent = vi.fn();
+    const confirmation = new ClosingBehavior(false, postEvent);
+
+    expect(postEvent).toHaveBeenCalledTimes(0);
+    confirmation.enableConfirmation();
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent).toHaveBeenCalledWith('web_app_setup_closing_behavior', { need_confirmation: true });
+  });
+
+  it('should emit "isConfirmationNeededChanged" event with true value', () => {
+    const confirmation = new ClosingBehavior(false, vi.fn());
+    const listener = vi.fn();
+
+    confirmation.on('change:isConfirmationNeeded', listener);
+    expect(listener).toHaveBeenCalledTimes(0);
+    confirmation.enableConfirmation();
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(true);
+  });
+});
+
+describe('on', () => {
+  describe('"isConfirmationNeededChanged" event', () => {
+    it('should add event listener to event', () => {
+      const listener = vi.fn();
+      const confirmation = new ClosingBehavior(false, vi.fn());
+
+      confirmation.on('change:isConfirmationNeeded', listener);
+
+      expect(listener).toHaveBeenCalledTimes(0);
+      confirmation.enableConfirmation();
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+  });
+});
+
+describe('off', () => {
+  describe('"isConfirmationNeededChanged" event', () => {
+    it('should remove event listener from event', () => {
+      const listener = vi.fn();
+      const confirmation = new ClosingBehavior(false, vi.fn());
+
+      confirmation.on('change:isConfirmationNeeded', listener);
+
+      expect(listener).toHaveBeenCalledTimes(0);
+      confirmation.enableConfirmation();
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      confirmation.off('change:isConfirmationNeeded', listener);
+      listener.mockClear();
+
+      expect(listener).toHaveBeenCalledTimes(0);
+      confirmation.disableConfirmation();
+      expect(listener).toHaveBeenCalledTimes(0);
+    });
+  });
+});

package/src/colors/__tests__/isColorDark.ts

@@ -0,0 +1,12 @@
+import { expect, it } from 'vitest';
+
+import { isColorDark } from '../isColorDark';
+
+it('should return true in case, the value which is equal to Math.sqrt(0.299 * R * R + 0.587 * G * G + 0.114 * B * B) is less than 120 and false otherwise', () => {
+  expect(isColorDark('#17212b')).toBe(true);
+  expect(isColorDark('#f5f5f5')).toBe(false);
+});
+
+it('should throw an error in case, passed value has not convertable to RGB format', () => {
+  expect(() => isColorDark('abc')).toThrow();
+});

package/src/colors/__tests__/isRGB.ts

@@ -0,0 +1,13 @@
+import { expect, it } from 'vitest';
+
+import { isRGB } from '../isRGB';
+
+it('should return true for correct full RGB representation', () => {
+  expect(isRGB('#ffffff')).toBe(true);
+});
+
+it('should return false for any other value', () => {
+  ['abc', '#ffff', '#fff', '#fffffg'].forEach((v) => {
+    expect(isRGB(v)).toBe(false);
+  });
+});

package/src/colors/__tests__/isRGBShort.ts

@@ -0,0 +1,13 @@
+import { expect, it } from 'vitest';
+
+import { isRGBShort } from '../isRGBShort';
+
+it('should return true for correct short RGB representation', () => {
+  expect(isRGBShort('#fff')).toBe(true);
+});
+
+it('should return false for any other value', () => {
+  ['abc', '#ffff', '#ffffff', '#ggg'].forEach((v) => {
+    expect(isRGBShort(v)).toBe(false);
+  });
+});

package/src/colors/__tests__/toRGB.ts

@@ -0,0 +1,23 @@
+import { expect, it } from 'vitest';
+
+import { toRGB } from '../toRGB';
+
+it('should return same value in case, full version of RGB is passed', () => {
+  expect(toRGB('#ffffff')).toBe('#ffffff');
+});
+
+it('should return full RGB value in case, its short presentation is passed', () => {
+  expect(toRGB('#abc')).toBe('#aabbcc');
+});
+
+it('should return RGB representation of rgb(*,*,*) pattern', () => {
+  expect(toRGB('rgb(6,56,11)')).toBe('#06380b');
+});
+
+it('should return RGB representation of rgba(*,*,*) pattern', () => {
+  expect(toRGB('rgba(6,56,11,22)')).toBe('#06380b');
+});
+
+it('should throw an error in other cases', () => {
+  expect(() => toRGB('abc')).toThrow();
+});

package/src/event-emitter/__tests__/EventEmitter.ts

@@ -0,0 +1,145 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { EventEmitter } from '../EventEmitter';
+
+interface EventsMap {
+  test: (a: number, b: boolean) => void;
+  hey: never;
+}
+
+let ee: EventEmitter<EventsMap>;
+
+beforeEach(() => {
+  ee = new EventEmitter<EventsMap>();
+});
+
+describe('on', () => {
+  it('should emit bound listener with specified arguments', () => {
+    const listener = vi.fn();
+    ee.on('test', listener);
+    ee.emit('test', 1, true);
+    expect(listener).toHaveBeenCalledOnce();
+    expect(listener).toBeCalledWith(1, true);
+  });
+
+  it('should emit bound listener with specified arguments as many times as it was bound', () => {
+    const listener = vi.fn();
+    ee.on('test', listener);
+    ee.on('test', listener);
+    ee.emit('test', 1, true);
+    expect(listener).toHaveBeenCalledTimes(2);
+    expect(listener).toHaveBeenNthCalledWith(1, 1, true);
+    expect(listener).toHaveBeenNthCalledWith(2, 1, true);
+  });
+
+  it('should not emit bound listener in case, event name does not match', () => {
+    const listener = vi.fn();
+    ee.on('test', listener);
+    ee.emit('hey');
+    expect(listener).not.toBeCalled();
+  });
+
+  it('should remove listener if returned function was called', () => {
+    const listener = vi.fn();
+    const off = ee.on('test', listener);
+
+    off();
+    ee.emit('test', 1, true);
+    expect(listener).not.toBeCalled();
+  });
+});
+
+describe('once', () => {
+  it('should emit bound listener with specified arguments only once', () => {
+    const listener = vi.fn();
+    ee.once('test', listener);
+    ee.emit('test', 1, true);
+    ee.emit('test', 1, true);
+    ee.emit('test', 1, true);
+    expect(listener).toHaveBeenCalledOnce();
+    expect(listener).toBeCalledWith(1, true);
+  });
+
+  it('should emit bound listener with specified arguments as many times as it was bound', () => {
+    const listener = vi.fn();
+    ee.once('test', listener);
+    ee.once('test', listener);
+    ee.emit('test', 1, true);
+    ee.emit('test', 1, true);
+    expect(listener).toHaveBeenCalledTimes(2);
+    expect(listener).toHaveBeenNthCalledWith(1, 1, true);
+    expect(listener).toHaveBeenNthCalledWith(2, 1, true);
+  });
+
+  it('should not emit bound listener in case, event name does not match', () => {
+    const listener = vi.fn();
+    ee.once('test', listener);
+    ee.emit('hey');
+    expect(listener).not.toBeCalled();
+  });
+
+  it('should remove listener if returned function was called', () => {
+    const listener = vi.fn();
+    const off = ee.once('test', listener);
+
+    off();
+    ee.emit('test', 1, true);
+    expect(listener).not.toBeCalled();
+  });
+});
+
+describe('off', () => {
+  it('should not emit bound listener in case, it was unbound', () => {
+    const listener = vi.fn();
+    ee.on('test', listener);
+    ee.off('test', listener);
+    ee.emit('test', 1, true);
+    expect(listener).not.toBeCalled();
+  });
+
+  it('should not do anything in case, event has no listeners', () => {
+    expect(() => {
+      const listener = vi.fn();
+      ee.off('test', listener);
+    }).not.toThrow();
+  });
+
+  it('should remove event listener bound via "once" method', () => {
+    const listener = vi.fn();
+    ee.once('test', listener);
+    ee.off('test', listener);
+    ee.emit('test', 1, true);
+    expect(listener).not.toBeCalled();
+  });
+
+  it('should not do anything if received not bound listener', () => {
+    ee.on('test', vi.fn());
+    expect(() => ee.off('test', vi.fn())).not.toThrow();
+  });
+});
+
+describe('subscribe', () => {
+  it('should catch any emitted event', () => {
+    const listener = vi.fn();
+    ee.subscribe(listener);
+    ee.emit('test', 1, true);
+    ee.emit('hey');
+    expect(listener).toBeCalledTimes(2);
+    expect(listener).toHaveBeenNthCalledWith(1, 'test', 1, true);
+    expect(listener).toHaveBeenNthCalledWith(2, 'hey');
+  });
+});
+
+describe('unsubscribe', () => {
+  it('should not emit event if it was unbound', () => {
+    const listener = vi.fn();
+    ee.subscribe(listener);
+    ee.unsubscribe(listener);
+    ee.emit('test', 1, true);
+    expect(listener).not.toBeCalled();
+  });
+
+  it('should not do anything if received not bound listener', () => {
+    expect(() => ee.unsubscribe(vi.fn())).not.toThrow();
+  });
+});

package/src/haptic-feedback/__tests__/HapticFeedback.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { HapticFeedback } from '../HapticFeedback';
+
+describe('impactOccurred', () => {
+  it('should call "web_app_trigger_haptic_feedback" method with { type: "impact", style: {{style}} }', () => {
+    const postEvent = vi.fn();
+    const haptic = new HapticFeedback('', postEvent);
+
+    expect(postEvent).toHaveBeenCalledTimes(0);
+    haptic.impactOccurred('heavy');
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent).toHaveBeenCalledWith('web_app_trigger_haptic_feedback', {
+      type: 'impact',
+      impact_style: 'heavy',
+    });
+  });
+});
+
+describe('notificationOccurred', () => {
+  it('should call "web_app_trigger_haptic_feedback" method with { type: "notification", notification_type: {{type}} }', () => {
+    const postEvent = vi.fn();
+    const haptic = new HapticFeedback('', postEvent);
+
+    expect(postEvent).toHaveBeenCalledTimes(0);
+    haptic.notificationOccurred('success');
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent).toHaveBeenCalledWith('web_app_trigger_haptic_feedback', {
+      type: 'notification',
+      notification_type: 'success',
+    });
+  });
+});
+
+describe('selectionChanged', () => {
+  it('should call "web_app_trigger_haptic_feedback" method with { type: "selection_change" }', () => {
+    const postEvent = vi.fn();
+    const haptic = new HapticFeedback('', postEvent);
+
+    expect(postEvent).toHaveBeenCalledTimes(0);
+    haptic.selectionChanged();
+    expect(postEvent).toHaveBeenCalledTimes(1);
+    expect(postEvent).toHaveBeenCalledWith('web_app_trigger_haptic_feedback', {
+      type: 'selection_change',
+    });
+  });
+});
+
+describe('supports', () => {
+  describe('impactOccurred / notificationOccurred / selectionChanged', () => {
+    it('should return true in case, HapticFeedback version is 6.1 or higher. False, otherwise', () => {
+      const haptic1 = new HapticFeedback('6.0');
+      expect(haptic1.supports('impactOccurred')).toBe(false);
+      expect(haptic1.supports('notificationOccurred')).toBe(false);
+      expect(haptic1.supports('selectionChanged')).toBe(false);
+
+      const haptic2 = new HapticFeedback('6.1');
+      expect(haptic2.supports('impactOccurred')).toBe(true);
+      expect(haptic2.supports('notificationOccurred')).toBe(true);
+      expect(haptic2.supports('selectionChanged')).toBe(true);
+
+      const haptic3 = new HapticFeedback('6.2');
+      expect(haptic3.supports('impactOccurred')).toBe(true);
+      expect(haptic3.supports('notificationOccurred')).toBe(true);
+      expect(haptic3.supports('selectionChanged')).toBe(true);
+    });
+  });
+});

package/src/index.ts

@@ -154,6 +154,7 @@ export type { RequestId, CreateRequestIdFunc } from './types/index.js';
 export { Utils } from './utils/index.js';
 export { compareVersions, type Version } from './version/index.js';
 export {
+  isStableViewportPlatform,
   requestViewport,
   Viewport,
   type RequestViewportResult,

package/src/init/creators/__tests__/createViewport.ts

@@ -0,0 +1,96 @@
+import { mockSessionStorageGetItem } from 'test-utils';
+import type { SpyInstance } from 'vitest';
+import { afterEach, expect, it, vi } from 'vitest';
+
+import { createWindow } from '../../../../test-utils/createWindow';
+import { requestViewport } from '../../../viewport/requestViewport';
+import { createViewport } from '../createViewport';
+
+vi.mock('../../../viewport/requestViewport', () => {
+  return {
+    requestViewport: vi.fn(),
+  };
+});
+
+type RequestViewport = typeof requestViewport;
+
+const requestViewportMock = requestViewport as unknown as SpyInstance<Parameters<RequestViewport>, ReturnType<RequestViewport>>;
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  requestViewportMock.mockReset();
+});
+
+it('should create Viewport from the data located in the storage if page was reloaded and storage has viewport data', () => {
+  mockSessionStorageGetItem('{"height":992,"isExpanded":false,"stableHeight":992,"width":320}');
+  expect(createViewport(true, 'macos', vi.fn(), false)).toMatchObject({
+    height: 992,
+    isExpanded: false,
+    stableHeight: 992,
+    width: 320,
+  });
+});
+
+it('should return viewport with window data if page was not reloaded or storage is missing required data, and platform has a stable viewport', () => {
+  createWindow({ innerHeight: 1000, innerWidth: 2000 });
+  expect(createViewport(false, 'macos', vi.fn(), false)).toMatchObject({
+    height: 1000,
+    isExpanded: true,
+    stableHeight: 1000,
+    width: 2000,
+  });
+
+  expect(createViewport(true, 'macos', vi.fn(), false)).toMatchObject({
+    height: 1000,
+    isExpanded: true,
+    stableHeight: 1000,
+    width: 2000,
+  });
+});
+
+it('should create Viewport instance from the result of calling requestViewport function if page was not reloaded, platform has no stable viewport and initialization is complete', () => {
+  requestViewportMock.mockImplementation(async () => ({
+    height: 922,
+    isStateStable: false,
+    width: 800,
+    isExpanded: false,
+  }));
+
+  expect(createViewport(false, 'android', vi.fn(), true)).resolves.toMatchObject({
+    height: 922,
+    isExpanded: false,
+    stableHeight: 0,
+    width: 800,
+  });
+
+  requestViewportMock.mockImplementation(async () => ({
+    height: 111,
+    isStateStable: true,
+    width: 222,
+    isExpanded: true,
+  }));
+
+  expect(createViewport(false, 'android', vi.fn(), true)).resolves.toMatchObject({
+    height: 111,
+    isExpanded: true,
+    stableHeight: 111,
+    width: 222,
+  });
+});
+
+it('should return viewport with zeroes if page was reloaded, storage doesnt contain data, platform has no stable viewport and initialization is not complete', () => {
+  requestViewportMock.mockImplementation(async () => ({
+    height: 922,
+    isStateStable: false,
+    width: 800,
+    isExpanded: false,
+  }));
+
+  mockSessionStorageGetItem(null);
+  expect(createViewport(true, 'android', vi.fn(), false)).toMatchObject({
+    height: 0,
+    isExpanded: false,
+    stableHeight: 0,
+    width: 0,
+  });
+});

package/src/init/creators/createViewport.ts

@@ -1,53 +1,19 @@
 import { getStorageValue, saveStorageValue } from '~/storage.js';
-import { requestViewport, Viewport } from '~/viewport/index.js';
+import {
+  isStableViewportPlatform,
+  requestViewport,
+  Viewport,
+  type ViewportProps,
+} from '~/viewport/index.js';
 import type { PostEvent } from '~/bridge/index.js';
 import type { Platform } from '~/types/index.js';
 
 /**
- * Returns true in case, specified platform supports calling Mini Apps
- * "web_app_request_viewport" method.
- * @param platform - platform identifier.
- */
-function isRequestSupportedPlatform(platform: Platform): boolean {
-  return !['macos', 'web', 'weba'].includes(platform);
-}
-
-/**
- * Attempts to create Viewport instance using known parameters and local storage.
- * @param isPageReload - was page reloaded.
- * @param platform - platform identifier.
- * @param postEvent - Bridge postEvent function.
- */
-function tryCreate(
-  isPageReload: boolean,
-  platform: Platform,
-  postEvent: PostEvent,
-): Viewport | null {
-  if (isPageReload || !isRequestSupportedPlatform(platform)) {
-    return new Viewport({
-      height: window.innerHeight,
-      isExpanded: true,
-      postEvent,
-      stableHeight: window.innerHeight,
-      width: window.innerWidth,
-    });
-  }
-
-  const state = getStorageValue('viewport');
-  if (state) {
-    return new Viewport({ ...state, postEvent });
-  }
-
-  return null;
-}
-
-/**
- * Synchronizes specified Viewport instance with Telegram application and always saves its state
- * in local storage.
- * @param viewport - Viewport instance.
+ * Creates new bound instance of the Viewport component.
+ * @param props - properties to create new instance.
  */
-function bind(viewport: Viewport): Viewport {
-  viewport.listen();
+function instantiate(props: ViewportProps): Viewport {
+  const viewport = new Viewport(props);
 
   // TODO: Should probably use throttle for height.
   viewport.on('change', () => saveStorageValue('viewport', {
@@ -57,59 +23,72 @@ function bind(viewport: Viewport): Viewport {
     width: viewport.width,
   }));
 
+  viewport.listen();
+
   return viewport;
 }
 
 /**
- * Creates Viewport instance using its actual state from the storage. Otherwise, creates it
- * with default parameters.
+ * Creates Viewport instance using its actual state from the Telegram application.
  * @param isPageReload - was page reloaded.
  * @param platform - platform identifier.
  * @param postEvent - Bridge postEvent function.
+ * @param complete - is initialization complete.
  */
-export function createViewportSync(
+export function createViewport(
   isPageReload: boolean,
   platform: Platform,
   postEvent: PostEvent,
-): Viewport {
-  const viewport = bind(
-    tryCreate(isPageReload, platform, postEvent) || new Viewport({
-      width: 0,
-      height: 0,
-      isExpanded: false,
-      postEvent,
-      stableHeight: 0,
-    }),
-  );
+  complete: boolean,
+): Viewport | Promise<Viewport> {
+  // If page was reloaded, we expect viewport to be restored from the storage.
+  const state = isPageReload ? getStorageValue('viewport') : null;
+  if (state) {
+    return instantiate({ ...state, postEvent });
+  }
 
-  if (isRequestSupportedPlatform(platform)) {
-    viewport.sync({ postEvent, timeout: 100 }).catch((e) => {
-      // eslint-disable-next-line no-console
-      console.error('Unable to actualize viewport state', e);
+  // If platform has a stable viewport, it means we could instantiate Viewport using
+  // the window global object properties.
+  if (isStableViewportPlatform(platform)) {
+    return instantiate({
+      height: window.innerHeight,
+      isExpanded: true,
+      postEvent,
+      stableHeight: window.innerHeight,
+      width: window.innerWidth,
     });
   }
 
-  return viewport;
-}
-
-/**
- * Creates Viewport instance using its actual state from the Telegram application.
- * @param isPageReload - was page reloaded.
- * @param platform - platform identifier.
- * @param postEvent - Bridge postEvent function.
- */
-export async function createViewportAsync(
-  isPageReload: boolean,
-  platform: Platform,
-  postEvent: PostEvent,
-): Promise<Viewport> {
-  return bind(
-    tryCreate(isPageReload, platform, postEvent)
-    || await requestViewport({ postEvent, timeout: 100 })
-      .then(({ height, isStateStable, ...rest }) => new Viewport({
+  // If initialization is complete, we have to create Viewport instance using its actual
+  // state from the Telegram application.
+  if (complete) {
+    return requestViewport({
+      postEvent,
+      timeout: 5000,
+    })
+      .then(({ height, isStateStable, ...rest }) => instantiate({
         ...rest,
         height,
         stableHeight: isStateStable ? height : 0,
-      })),
-  );
+      }));
+  }
+
+  // Otherwise we have no sources to get viewport properties from. In this case we just
+  // return some "empty" Viewport instance and synchronize it in the background.
+  const viewport = instantiate({
+    width: 0,
+    height: 0,
+    isExpanded: false,
+    postEvent,
+    stableHeight: 0,
+  });
+
+  /* c8 ignore start */
+  viewport.sync({ postEvent, timeout: 5000 }).catch((e) => {
+    // eslint-disable-next-line no-console
+    console.error('Unable to actualize viewport state', e);
+  });
+  /* c8 ignore stop */
+
+  return viewport;
 }