@tma.js/sdk 1.2.1 → 1.4.0

package/src/popup/__tests__/Popup.ts

@@ -0,0 +1,130 @@
+import { describe, expect, it } from 'vitest';
+
+// import {emitDesktopEvent, mockDesktop} from '../../../tests';
+// import { Popup } from './Popup';
+// import {Bridge} from '@tma.js/bridge';
+// import {PopupParams} from './types';
+// import {preparePopupParams} from './utils';
+
+// beforeAll(mockDesktop);
+
+describe('components', () => {
+  describe('Popup', () => {
+    it('should be fine', () => {
+      expect(true).toBe(true);
+    });
+    // it('isOpened', () => {
+    //  it('should emit event "openChange" with specified value in setter', () => {
+    //     const popup = new Popup('7');
+    //     const spy = vi.spyOn((popup as any).ee, 'emit');
+    //     (popup as any).isOpened = true;
+    //     expect(spy).lastCalledWith('openChange', true);
+    //
+    //     (popup as any).isOpened = false;
+    //     expect(spy).lastCalledWith('openChange', false);
+    //   });
+    // });
+    //
+    // it('show', () => {
+    //  it('should throw an error in case, current version is less than 6.2', () => {
+    //     expect(() => new Popup('6.1').show({message: 'Hey!'})).toThrow();
+    //     expect(() => new Popup('6.2').show({message: 'Hey!'})).not.toThrow();
+    //   });
+    //
+    //  it('should call bridge event "web_app_open_popup" with prepared parameters', () => {
+    //     const bridge = new Bridge();
+    //     const spy = vi.spyOn(bridge, 'postEvent');
+    //     const popup = new Popup('7', {bridge});
+    //     const params: PopupParams = {message: 'Message'};
+    //     const prepared = preparePopupParams(params);
+    //     popup.show(params);
+    //     expect(spy).toHaveBeenCalledWith('web_app_open_popup', prepared);
+    //   });
+    //
+    //  it('should emit event "open" with prepared params', () => {
+    //     const popup = new Popup('7');
+    //     const spy = vi.spyOn((popup as any).ee, 'emit');
+    //     const params: PopupParams = {message: 'Message'};
+    //     const prepared = preparePopupParams(params);
+    //     popup.show(params);
+    //     expect(spy).toHaveBeenCalledWith('open', prepared);
+    //   });
+    //
+    //  it('should set "isOpened" property to true', () => {
+    //     const popup = new Popup('7');
+    //     expect(popup.isOpened).toBe(false);
+    //     popup.show({message: 'Message'});
+    //     expect(popup.isOpened).toBe(true);
+    //   });
+    //
+    //  it('should set "isOpened" property to false when promise is resolved', async () => {
+    //     const popup = new Popup('7');
+    //     const promise = popup.show({message: 'Message'});
+    //
+    //     emitDesktopEvent('popup_closed', {button_id: null});
+    //     await promise;
+    //     expect(popup.isOpened).toBe(false);
+    //   });
+    //
+    //  it('should set "isOpened" property to true', () => {
+    //     const popup = new Popup('7');
+    //     popup.show({message: 'Message'});
+    //     expect(popup.isOpened).toBe(true);
+    //   });
+    //
+    //  it('should emit close event with specified button_id when promise is resolved',
+    //   async () => {
+    //     const popup = new Popup('7');
+    //     const spy = vi.spyOn((popup as any).ee, 'emit');
+    //     const promise = popup.show({message: 'Message'});
+    //     emitDesktopEvent('popup_closed', {button_id: 'Hey!'});
+    //     await promise;
+    //     expect(spy).lastCalledWith('close', 'Hey!');
+    //   });
+    // });
+    //
+    // it('showAlert', () => {
+    //  it('should call "show" with passed message and buttons = [{type: "close"}]', () => {
+    //     const popup = new Popup('7');
+    //     const spy = vi.spyOn(popup, 'show');
+    //
+    //     popup.showAlert('Message');
+    //
+    //     expect(spy).toHaveBeenCalledWith({
+    //       message: 'Message',
+    //       buttons: [{type: 'close'}],
+    //     });
+    //   });
+    // });
+    //
+    // it('showConfirm', () => {
+    //  test(
+    //     'should call "show" with passed message and ' +
+    //     'buttons = [{type: "ok", id: "ok"}, {id: "cancel", type: "cancel"}]',
+    //     () => {
+    //       const popup = new Popup('7');
+    //       const spy = vi.spyOn(popup, 'show');
+    //
+    //       popup.showConfirm('Message');
+    //
+    //       expect(spy).toHaveBeenCalledWith({
+    //         message: 'Message',
+    //         buttons: [{type: 'ok', id: 'ok'}, {id: 'cancel', type: 'cancel'}],
+    //       });
+    //     },
+    //   );
+    //
+    //  it('should resolve true in case, user pressed button with id "ok"', async () => {
+    //     const promise = new Popup('7').showConfirm('Message');
+    //     emitDesktopEvent('popup_closed', {button_id: 'ok'});
+    //     expect(await promise).toBe(true);
+    //   });
+    //
+    //  it('should resolve false in case, user pressed any other button', async () => {
+    //     const promise = new Popup('7').showConfirm('Message');
+    //     emitDesktopEvent('popup_closed', {button_id: 'cancel'});
+    //     await expect(promise).resolves.toBe(false);
+    //   });
+    // });
+  });
+});

package/src/popup/__tests__/preparePopupParams.ts

@@ -0,0 +1,85 @@
+import { expect, it } from 'vitest';
+
+import { preparePopupParams } from '../preparePopupParams';
+
+/**
+ * Creates test text.
+ * @param length - text length.
+ */
+function createText(length: number): string {
+  return new Array(length).fill('a').join('');
+}
+
+it('should throw an error in case, title length is more than 64 symbols', () => {
+  expect(() => preparePopupParams({
+    title: createText(65),
+    message: 'Hey!',
+  })).toThrow(/^Title has incorrect size/);
+
+  expect(() => preparePopupParams({
+    title: createText(64),
+    message: 'Hey!',
+  })).not.toThrow();
+});
+
+it('should throw an error in case, message length is zero or more than 256 symbols', () => {
+  expect(() => preparePopupParams({
+    message: '',
+  })).toThrow(/^Message has incorrect size/);
+
+  expect(() => preparePopupParams({
+    message: createText(257),
+  })).toThrow(/^Message has incorrect size/);
+
+  expect(() => preparePopupParams({
+    message: createText(256),
+  })).not.toThrow();
+});
+
+it('should throw an error in case, buttons count is more than 3', () => {
+  expect(() => preparePopupParams({
+    message: 'a',
+    buttons: new Array(4).fill({ type: 'close' }),
+  })).toThrow(/^Buttons have incorrect size/);
+
+  expect(() => preparePopupParams({
+    message: 'a',
+    buttons: new Array(3).fill({ type: 'close' }),
+  })).not.toThrow();
+});
+
+it('should append button type "close" in case, buttons array is empty', () => {
+  expect(preparePopupParams({ message: 'a' }).buttons).toStrictEqual([{
+    type: 'close',
+    id: '',
+  }]);
+});
+
+it('should throw an error in case, some button text length size is zero or more than 64 symbols', () => {
+  expect(() => preparePopupParams({
+    message: 'A',
+    buttons: [{ type: 'default', text: createText(65) }],
+  })).toThrowError(/^Button text with type/);
+
+  expect(() => preparePopupParams({
+    message: 'A',
+    buttons: [{ type: 'default', text: '' }],
+  })).toThrowError(/^Button text with type/);
+
+  expect(() => preparePopupParams({
+    message: 'A',
+    buttons: [{ type: 'default', text: createText(64) }],
+  })).not.toThrow();
+});
+
+it('should fulfill all optional popup parameters', () => {
+  expect(preparePopupParams({
+    message: 'Message',
+    buttons: [{ type: 'default', text: 'Wow!' }, { type: 'close' }],
+  }))
+    .toStrictEqual({
+      title: '',
+      message: 'Message',
+      buttons: [{ id: '', type: 'default', text: 'Wow!' }, { type: 'close', id: '' }],
+    });
+});

package/src/supports/__tests__/supports.ts

@@ -0,0 +1,123 @@
+import { expect, it } from 'vitest';
+
+import type {
+  MiniAppsMethodName,
+  MiniAppsMethodVersionedParams,
+  MiniAppsMethodWithVersionedParams,
+} from '../../bridge';
+import type { Version } from '../../version';
+import { supports } from '../supports';
+
+type HaveCheckSupportMethodTuple = {
+  [M in MiniAppsMethodWithVersionedParams]: [M, MiniAppsMethodVersionedParams<M>]
+}[MiniAppsMethodWithVersionedParams];
+
+/**
+ * Increases specified version by amount of updates.
+ * @param version - initial version.
+ * @param amount - count of bumps.
+ */
+function increaseVersion(version: Version, amount: number): string {
+  const match = version.match(/(.+\.)(\d+)$/);
+  if (!match) {
+    throw new Error(`Invalid version: ${version}`);
+  }
+  return `${match[1]}${parseInt(match[2], 10) + amount}`;
+}
+
+const tests: [
+  version: Version | 'any',
+  methods: (MiniAppsMethodName | HaveCheckSupportMethodTuple)[],
+][] = [
+  ['any', [
+    'iframe_ready',
+    'iframe_will_reload',
+    'web_app_close',
+    'web_app_data_send',
+    'web_app_expand',
+    'web_app_open_link',
+    'web_app_ready',
+    'web_app_request_theme',
+    'web_app_request_viewport',
+    'web_app_setup_main_button',
+    'web_app_setup_closing_behavior',
+  ]],
+  ['6.1', [
+    'web_app_open_tg_link',
+    'web_app_open_invoice',
+    'web_app_setup_back_button',
+    'web_app_set_background_color',
+    'web_app_set_header_color',
+    'web_app_trigger_haptic_feedback',
+  ]],
+  ['6.2', [
+    'web_app_open_popup',
+  ]],
+  ['6.4', [
+    'web_app_read_text_from_clipboard',
+    'web_app_close_scan_qr_popup',
+    'web_app_close_scan_qr_popup',
+    ['web_app_open_link', 'try_instant_view'],
+  ]],
+  ['6.7', [
+    'web_app_switch_inline_query',
+  ]],
+  ['6.9', [
+    'web_app_invoke_custom_method',
+    'web_app_request_write_access',
+    'web_app_request_phone',
+    ['web_app_set_header_color', 'color'],
+  ]],
+  ['6.10', [
+    'web_app_setup_settings_button',
+  ]],
+];
+
+tests.forEach(([version, methods]) => {
+  if (version === 'any') {
+    methods.forEach((methodOrTuple) => {
+      if (Array.isArray(methodOrTuple)) {
+        const [method, param] = methodOrTuple;
+        it(`should return true in case, passed method is "${method}", parameter is "${param}" and version is 1`, () => {
+          expect(supports(method, param, '1')).toBe(true);
+        });
+
+        return;
+      }
+
+      const method = methodOrTuple;
+      it(`should return true in case, passed method is "${method}" and version is 1`, () => {
+        expect(supports(method, '1')).toBe(true);
+      });
+    });
+    return;
+  }
+
+  methods.forEach((methodOrTuple) => {
+    if (Array.isArray(methodOrTuple)) {
+      const [method, param] = methodOrTuple;
+
+      it(`should return true in case, passed method is "${method}", parameter is "${param}" and version is ${version} or higher`, () => {
+        expect(supports(method, param, version)).toBe(true);
+        expect(supports(method, param, increaseVersion(version, 1))).toBe(true);
+      });
+
+      it(`should return false in case, passed method is "${method}", parameter is "${param}" and version is lower than ${version}`, () => {
+        expect(supports(method, param, increaseVersion(version, -1))).toBe(false);
+      });
+
+      return;
+    }
+
+    const method = methodOrTuple;
+
+    it(`should return true in case, passed method is "${method}" and version is ${version} or higher`, () => {
+      expect(supports(method, version)).toBe(true);
+      expect(supports(method, increaseVersion(version, 1))).toBe(true);
+    });
+
+    it(`should return false in case, passed method is "${method}" and version is lower than ${version}`, () => {
+      expect(supports(method, increaseVersion(version, -1))).toBe(false);
+    });
+  });
+});

package/src/theme-params/__tests__/keys.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+
+import { keyToExternal, keyToLocal } from '../keys';
+
+describe('keyToLocal', () => {
+  it('should replace "^bg" and "_bg" with "background" and "_background". Then replace _[a-z] with [A-Z]', () => {
+    expect(keyToLocal('bg_color')).toBe('backgroundColor');
+    expect(keyToLocal('secondary_bg_color')).toBe('secondaryBackgroundColor');
+    expect(keyToLocal('text_color')).toBe('textColor');
+  });
+});
+
+describe('keyToExternal', () => {
+  it('should replace [A-Z] with _[a-z]. Then replace "background" and "_background" with "^bg" and "_bg"', () => {
+    expect(keyToExternal('backgroundColor')).toBe('bg_color');
+    expect(keyToExternal('secondaryBackgroundColor')).toBe('secondary_bg_color');
+    expect(keyToExternal('textColor')).toBe('text_color');
+  });
+});

package/src/theme-params/__tests__/parseThemeParams.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+
+import { parseThemeParams } from '../parseThemeParams';
+
+[
+  ['accent_text_color', 'accentTextColor'],
+  ['bg_color', 'backgroundColor'],
+  ['button_color', 'buttonColor'],
+  ['button_text_color', 'buttonTextColor'],
+  ['destructive_text_color', 'destructiveTextColor'],
+  ['header_bg_color', 'headerBackgroundColor'],
+  ['hint_color', 'hintColor'],
+  ['link_color', 'linkColor'],
+  ['secondary_bg_color', 'secondaryBackgroundColor'],
+  ['section_header_text_color', 'sectionHeaderTextColor'],
+  ['section_bg_color', 'sectionBackgroundColor'],
+  ['subtitle_text_color', 'subtitleTextColor'],
+  ['text_color', 'textColor'],
+].forEach(([from, to]) => {
+  describe(to, () => {
+    it(`should throw if "${from}" property contains not a string in format "#RRGGBB"`, () => {
+      expect(() => parseThemeParams({ [from]: 999 })).toThrow();
+    });
+
+    it(`should map to "${to}" property parsing it as string in "#RRGGBB" format`, () => {
+      expect(parseThemeParams({ [from]: '#aabbcc' })).toStrictEqual({ [to]: '#aabbcc' });
+    });
+  });
+});

package/src/theme-params/__tests__/serializeThemeParams.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+
+import { serializeThemeParams } from '../serializeThemeParams';
+
+[
+  ['accent_text_color', 'accentTextColor'],
+  ['bg_color', 'backgroundColor'],
+  ['button_color', 'buttonColor'],
+  ['button_text_color', 'buttonTextColor'],
+  ['destructive_text_color', 'destructiveTextColor'],
+  ['header_bg_color', 'headerBackgroundColor'],
+  ['hint_color', 'hintColor'],
+  ['link_color', 'linkColor'],
+  ['secondary_bg_color', 'secondaryBackgroundColor'],
+  ['section_header_text_color', 'sectionHeaderTextColor'],
+  ['section_bg_color', 'sectionBackgroundColor'],
+  ['subtitle_text_color', 'subtitleTextColor'],
+  ['text_color', 'textColor'],
+].forEach(([to, from]) => {
+  describe(from, () => {
+    it(`should omit the "${to}" property in case this property is missing`, () => {
+      expect(serializeThemeParams({})).not.toMatch(`"${to}"`);
+    });
+
+    it(`should map this property to "${to}" property`, () => {
+      expect(serializeThemeParams({ [from]: '#aabbcc' })).toBe(`{"${to}":"#aabbcc"}`);
+    });
+  });
+});

package/src/theme-params/__tests__/themeParamsParser.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+
+import { themeParamsParser } from '../themeParamsParser';
+
+[
+  ['accent_text_color', 'accentTextColor'],
+  ['bg_color', 'backgroundColor'],
+  ['button_color', 'buttonColor'],
+  ['button_text_color', 'buttonTextColor'],
+  ['destructive_text_color', 'destructiveTextColor'],
+  ['header_bg_color', 'headerBackgroundColor'],
+  ['hint_color', 'hintColor'],
+  ['link_color', 'linkColor'],
+  ['secondary_bg_color', 'secondaryBackgroundColor'],
+  ['section_header_text_color', 'sectionHeaderTextColor'],
+  ['section_bg_color', 'sectionBackgroundColor'],
+  ['subtitle_text_color', 'subtitleTextColor'],
+  ['text_color', 'textColor'],
+].forEach(([from, to]) => {
+  describe(to, () => {
+    it(`should throw if "${from}" property contains not a string in format "#RRGGBB"`, () => {
+      expect(() => themeParamsParser().parse({ [from]: 999 })).toThrow();
+    });
+
+    it(`should map to "${to}" property parsing it as string in "#RRGGBB" format`, () => {
+      expect(themeParamsParser().parse({ [from]: '#aabbcc' })).toStrictEqual({ [to]: '#aabbcc' });
+    });
+  });
+});

package/src/timeout/__tests__/isTimeoutError.ts

@@ -0,0 +1,9 @@
+import { expect, it } from 'vitest';
+
+import { isTimeoutError } from '../isTimeoutError';
+import { TimeoutError } from '../TimeoutError';
+
+it('should return true if passed value is instance of TimeoutError', () => {
+  expect(isTimeoutError(null)).toBe(false);
+  expect(isTimeoutError(new TimeoutError(1000))).toBe(true);
+});

package/src/timeout/__tests__/withTimeout.ts

@@ -0,0 +1,28 @@
+import { afterAll, beforeAll, expect, it, vi } from 'vitest';
+
+import { TimeoutError, withTimeout } from '../index';
+
+beforeAll(() => {
+  vi.useFakeTimers();
+});
+
+afterAll(() => {
+  vi.useRealTimers();
+});
+
+it('should throw an error in case timeout reached', () => {
+  const promise = withTimeout(() => new Promise((res) => {
+    setTimeout(res, 500);
+  }), 100);
+
+  Promise.resolve().then(() => vi.advanceTimersByTime(500));
+  expect(promise).rejects.toStrictEqual(new TimeoutError(100));
+}, 1000);
+
+it('should return resolved value by wrapped function', () => {
+  const promise = withTimeout(() => new Promise((res) => {
+    res('I am fine');
+  }), 100);
+
+  expect(promise).resolves.toBe('I am fine');
+}, 1000);

package/src/types/platform.ts

@@ -7,8 +7,8 @@ export type Platform =
   | 'ios'
   | 'macos'
   | 'tdesktop'
-  | 'web'
-  | 'weba'
   | 'unigram'
   | 'unknown'
+  | 'web'
+  | 'weba'
   | string;

package/src/version/__tests__/compareVersions.ts

@@ -0,0 +1,19 @@
+import { expect, it } from 'vitest';
+
+import { compareVersions } from '../compareVersions';
+
+it('should return 1 in case "a" is greater than "b"', () => {
+  expect(compareVersions('6.1', '6.0')).toBe(1);
+  expect(compareVersions('6.1', '6')).toBe(1);
+});
+
+it('should return 0 in case "a" is equal to "b"', () => {
+  expect(compareVersions('6', '6')).toBe(0);
+  expect(compareVersions('6', '6.0')).toBe(0);
+  expect(compareVersions('6.0', '6')).toBe(0);
+});
+
+it('should return -1 in case "a" is lower than "b"', () => {
+  expect(compareVersions('5', '6.0')).toBe(-1);
+  expect(compareVersions('6.0', '6.1')).toBe(-1);
+});

package/src/viewport/__tests__/isStableViewportPlatform.ts

@@ -0,0 +1,15 @@
+import { expect, it } from 'vitest';
+
+import { isStableViewportPlatform } from '../isStableViewportPlatform';
+
+['macos', 'tdesktop', 'unigram', 'web', 'weba'].forEach((platform) => {
+  it(`should return true if passed platform is "${platform}"`, () => {
+    expect(isStableViewportPlatform(platform)).toBe(true);
+  });
+});
+
+['unknown', 'android', 'android_x'].forEach((platform) => {
+  it(`should return false if passed platform is "${platform}"`, () => {
+    expect(isStableViewportPlatform(platform)).toBe(false);
+  });
+});

package/src/viewport/__tests__/utils.ts

@@ -0,0 +1,12 @@
+import { expect, it } from 'vitest';
+
+import { truncate } from '../utils';
+
+it('should return zero if value is less than 0', () => {
+  expect(truncate(-1)).toBe(0);
+});
+
+it('should return value if it is equals to or higher than 0', () => {
+  expect(truncate(0)).toBe(0);
+  expect(truncate(20)).toBe(20);
+});

package/src/viewport/index.ts

@@ -1,3 +1,4 @@
+export * from './isStableViewportPlatform.js';
 export * from './requestViewport.js';
 export * from './types.js';
 export * from './Viewport.js';

package/src/viewport/isStableViewportPlatform.ts

@@ -0,0 +1,10 @@
+import type { Platform } from '~/types/index.js';
+
+/**
+ * Returns true if specified platform has stable viewport. Stable means not changing from time to
+ * time.
+ * @param platform - platform identifier.
+ */
+export function isStableViewportPlatform(platform: Platform): boolean {
+  return ['macos', 'tdesktop', 'unigram', 'web', 'weba'].includes(platform);
+}