@tma.js/sdk 1.3.0 → 1.4.0

package/src/bridge/events/__tests__/on.ts

@@ -0,0 +1,49 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+
+import { createWindow, type WindowSpy } from '../../../../test-utils/createWindow';
+import { dispatchWindowMessageEvent } from '../../../../test-utils/dispatchWindowMessageEvent';
+import { on } from '../on';
+
+let windowSpy: WindowSpy;
+
+beforeEach(() => {
+  windowSpy = createWindow();
+});
+
+afterEach(() => {
+  windowSpy.mockRestore();
+});
+
+it('should call listener in case, Telegram event was created', () => {
+  const listener = vi.fn();
+  on('viewport_changed', listener);
+
+  const eventData = {
+    height: 123,
+    width: 321,
+    is_expanded: false,
+    is_state_stable: false,
+  };
+  dispatchWindowMessageEvent('viewport_changed', eventData);
+
+  expect(listener).toHaveBeenCalledTimes(1);
+  expect(listener).toHaveBeenCalledWith(eventData);
+});
+
+it('should remove listener in case, returned callback was called', () => {
+  const listener = vi.fn();
+  const emit = () => dispatchWindowMessageEvent('viewport_changed', {
+    height: 123,
+    width: 321,
+    is_expanded: false,
+    is_state_stable: false,
+  });
+
+  const off = on('viewport_changed', listener);
+  emit();
+  expect(listener).toHaveBeenCalledTimes(1);
+
+  off();
+  emit();
+  expect(listener).toHaveBeenCalledTimes(1);
+});

package/src/bridge/events/__tests__/onTelegramEvent.ts

@@ -0,0 +1,51 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+
+import { createWindow, type WindowSpy } from '../../../../test-utils/createWindow';
+import { dispatchWindowMessageEvent } from '../../../../test-utils/dispatchWindowMessageEvent';
+import { onTelegramEvent } from '../onTelegramEvent';
+
+let windowSpy: WindowSpy;
+
+beforeEach(() => {
+  windowSpy = createWindow();
+});
+
+afterEach(() => {
+  windowSpy.mockRestore();
+});
+
+it('should call passed callback with event type and data in case, window generated "message" event with data, presented as object with properties "eventType" (string) and "eventData" (unknown). Object is converted to string.', () => {
+  const callback = vi.fn();
+  onTelegramEvent(callback);
+
+  dispatchWindowMessageEvent('qr_text_received', {});
+
+  expect(callback).toHaveBeenCalledTimes(1);
+  expect(callback).toHaveBeenCalledWith('qr_text_received', {});
+});
+
+it('should not define event handlers twice in case, window object contains "TelegramGameProxy_receiveEvent" property.', () => {
+  (window as any).TelegramGameProxy_receiveEvent = true;
+
+  onTelegramEvent(vi.fn());
+  expect(window).not.toHaveProperty('Telegram');
+});
+
+it('should call passed callback with event type and data in case, external environment generated event.', () => {
+  const callback = vi.fn();
+  onTelegramEvent(callback);
+
+  (window as any).TelegramGameProxy_receiveEvent('test', false);
+
+  expect(callback).toHaveBeenCalledTimes(1);
+  expect(callback).toHaveBeenCalledWith('test', false);
+});
+
+it('should ignore a message event with unexpected data', () => {
+  const callback = vi.fn();
+  onTelegramEvent(callback);
+
+  window.dispatchEvent(new MessageEvent('message', { data: null }));
+
+  expect(callback).toHaveBeenCalledTimes(0);
+});

package/src/bridge/events/__tests__/once.ts

@@ -0,0 +1,64 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+
+import { createWindow, type WindowSpy } from '../../../../test-utils/createWindow';
+import { dispatchWindowMessageEvent } from '../../../../test-utils/dispatchWindowMessageEvent';
+import { once } from '../once';
+
+let windowSpy: WindowSpy;
+
+beforeEach(() => {
+  windowSpy = createWindow();
+});
+
+afterEach(() => {
+  windowSpy.mockRestore();
+});
+
+it('should call listener in case, Telegram event was created', () => {
+  const listener = vi.fn();
+  once('viewport_changed', listener);
+
+  const eventData = {
+    height: 123,
+    width: 321,
+    is_expanded: false,
+    is_state_stable: false,
+  };
+  dispatchWindowMessageEvent('viewport_changed', eventData);
+
+  expect(listener).toHaveBeenCalledTimes(1);
+  expect(listener).toHaveBeenCalledWith(eventData);
+});
+
+it('should remove listener in case, returned callback was called', () => {
+  const listener = vi.fn();
+  const emit = () => dispatchWindowMessageEvent('viewport_changed', {
+    height: 123,
+    width: 321,
+    is_expanded: false,
+    is_state_stable: false,
+  });
+
+  const off = once('viewport_changed', listener);
+
+  off();
+  emit();
+  expect(listener).toHaveBeenCalledTimes(0);
+});
+
+it('should remove listener in case, listener was called', () => {
+  const listener = vi.fn();
+  const emit = () => dispatchWindowMessageEvent('viewport_changed', {
+    height: 123,
+    width: 321,
+    is_expanded: false,
+    is_state_stable: false,
+  });
+
+  once('viewport_changed', listener);
+  emit();
+  expect(listener).toHaveBeenCalledTimes(1);
+
+  emit();
+  expect(listener).toHaveBeenCalledTimes(1);
+});

package/src/bridge/events/__tests__/singletonEmitter.ts

@@ -0,0 +1,22 @@
+import { afterEach, beforeEach, expect, it } from 'vitest';
+
+import type { WindowSpy } from '../../../../test-utils/createWindow';
+import { createWindow } from '../../../../test-utils/createWindow';
+import { singletonEmitter } from '../singletonEmitter';
+
+let windowSpy: WindowSpy;
+
+beforeEach(() => {
+  windowSpy = createWindow({
+    innerWidth: 1920,
+    innerHeight: 1080,
+  });
+});
+
+afterEach(() => {
+  windowSpy.mockRestore();
+});
+
+it('should return the same instance of emitter', () => {
+  expect(singletonEmitter()).toEqual(singletonEmitter());
+});

package/src/bridge/events/__tests__/subscribe.ts

@@ -0,0 +1,49 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+
+import { createWindow, type WindowSpy } from '../../../../test-utils/createWindow';
+import { dispatchWindowMessageEvent } from '../../../../test-utils/dispatchWindowMessageEvent';
+import { subscribe } from '../subscribe';
+
+let windowSpy: WindowSpy;
+
+beforeEach(() => {
+  windowSpy = createWindow();
+});
+
+afterEach(() => {
+  windowSpy.mockRestore();
+});
+
+it('should call listener in case, Telegram event was created', () => {
+  const listener = vi.fn();
+  subscribe(listener);
+
+  const eventData = {
+    height: 123,
+    width: 321,
+    is_expanded: false,
+    is_state_stable: false,
+  };
+  dispatchWindowMessageEvent('viewport_changed', eventData);
+
+  expect(listener).toHaveBeenCalledTimes(1);
+  expect(listener).toHaveBeenCalledWith('viewport_changed', eventData);
+});
+
+it('should remove listener in case, returned callback was called', () => {
+  const listener = vi.fn();
+  const emit = () => dispatchWindowMessageEvent('viewport_changed', {
+    height: 123,
+    width: 321,
+    is_expanded: false,
+    is_state_stable: false,
+  });
+
+  const unsubscribe = subscribe(listener);
+  emit();
+  expect(listener).toHaveBeenCalledTimes(1);
+
+  unsubscribe();
+  emit();
+  expect(listener).toHaveBeenCalledTimes(1);
+});

package/src/bridge/events/__tests__/unsubscribe.ts

@@ -0,0 +1,34 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+
+import { createWindow, type WindowSpy } from '../../../../test-utils/createWindow';
+import { dispatchWindowMessageEvent } from '../../../../test-utils/dispatchWindowMessageEvent';
+import { subscribe } from '../subscribe';
+import { unsubscribe } from '../unsubscribe';
+
+let windowSpy: WindowSpy;
+
+beforeEach(() => {
+  windowSpy = createWindow();
+});
+
+afterEach(() => {
+  windowSpy.mockRestore();
+});
+
+it('should remove listener', () => {
+  const listener = vi.fn();
+  const emit = () => dispatchWindowMessageEvent('viewport_changed', {
+    height: 123,
+    width: 321,
+    is_expanded: false,
+    is_state_stable: false,
+  });
+
+  subscribe(listener);
+  emit();
+  expect(listener).toHaveBeenCalledTimes(1);
+
+  unsubscribe(listener);
+  emit();
+  expect(listener).toHaveBeenCalledTimes(1);
+});

package/src/bridge/events/parsers/__tests__/clipboardTextReceived.ts

@@ -0,0 +1,21 @@
+import { expect, it } from 'vitest';
+
+import { clipboardTextReceived } from '../clipboardTextReceived';
+
+it('should return parsed value in case, passed value satisfies schema', () => {
+  const cases = [
+    { req_id: 'abc', data: 'ok' },
+    { req_id: 'abc' },
+    { req_id: 'abc', data: null },
+  ];
+
+  cases.forEach((value) => {
+    expect(clipboardTextReceived().parse(value)).toStrictEqual(value);
+    expect(clipboardTextReceived().parse(JSON.stringify(value)))
+      .toStrictEqual(value);
+  });
+});
+
+it('should throw an error in case, passed value does not satisfy schema', () => {
+  expect(() => clipboardTextReceived().parse({})).toThrow();
+});

package/src/bridge/events/parsers/__tests__/invoiceClosed.ts

@@ -0,0 +1,12 @@
+import { expect, it } from 'vitest';
+
+import { invoiceClosed } from '../invoiceClosed';
+
+it('should return parsed value in case, passed value satisfies schema', () => {
+  const value = { slug: 'abc', status: 'def' };
+  expect(invoiceClosed().parse(value)).toStrictEqual(value);
+});
+
+it('should throw an error in case, passed value does not satisfy schema', () => {
+  expect(() => invoiceClosed().parse({})).toThrow();
+});

package/src/bridge/events/parsers/__tests__/popupClosed.ts

@@ -0,0 +1,10 @@
+import { expect, it } from 'vitest';
+
+import { popupClosed } from '../popupClosed';
+
+it('should return parsed value in case, passed value satisfies schema', () => {
+  expect(popupClosed().parse({ button_id: 'ok' })).toStrictEqual({ button_id: 'ok' });
+  expect(popupClosed().parse({})).toStrictEqual({});
+  expect(popupClosed().parse({ button_id: null })).toStrictEqual({});
+  expect(popupClosed().parse({ button_id: 100 })).toStrictEqual({ button_id: '100' });
+});

package/src/bridge/events/parsers/__tests__/qrTextReceived.ts

@@ -0,0 +1,9 @@
+import { expect, it } from 'vitest';
+
+import { qrTextReceived } from '../qrTextReceived';
+
+it('should return parsed value in case, passed value satisfies schema', () => {
+  expect(qrTextReceived().parse({ data: 'ok' })).toStrictEqual({ data: 'ok' });
+  expect(qrTextReceived().parse({})).toStrictEqual({});
+  expect(qrTextReceived().parse({ data: 100 })).toStrictEqual({ data: '100' });
+});

package/src/bridge/events/parsers/__tests__/theme-changed.ts

@@ -0,0 +1,42 @@
+import { expect, it } from 'vitest';
+
+import { themeChanged } from '../theme-changed';
+
+it('should return parsed value in case, passed value satisfies schema', () => {
+  const values = [
+    {
+      theme_params: {
+        accent_text_color: '#aaccbb',
+        bg_color: '#ffaabb',
+        button_color: '#faaafa',
+        button_text_color: '#666271',
+        destructive_text_color: '#111332',
+        header_bg_color: '#aab133',
+        hint_color: '#113322',
+        link_color: '#882133',
+        secondary_bg_color: '#2231aa',
+        section_bg_color: '#111332',
+        section_header_text_color: '#111332',
+        subtitle_text_color: '#111332',
+        text_color: '#bbaadd',
+      },
+    },
+    {
+      theme_params: {},
+    },
+  ];
+
+  values.forEach((value) => {
+    expect(themeChanged().parse(value)).toStrictEqual(value);
+    expect(themeChanged().parse(JSON.stringify(value))).toStrictEqual(value);
+  });
+});
+
+it('should throw an error in case, passed value does not satisfy schema', () => {
+  expect(() => themeChanged().parse({})).toThrow();
+  expect(() => themeChanged().parse({
+    theme_params: {
+      bg_color: 'Hello there!',
+    },
+  })).toThrow();
+});

package/src/bridge/events/parsers/__tests__/viewportChanged.ts

@@ -0,0 +1,49 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+
+import { viewportChanged } from '../viewportChanged';
+
+const windowSpy = vi.spyOn(window, 'window', 'get');
+// const innerWidth = 2000;
+
+beforeEach(() => {
+  windowSpy.mockImplementation(() => ({ innerWidth: 2000 }) as any);
+});
+
+afterEach(() => {
+  windowSpy.mockRestore();
+});
+
+it('should return parsed value in case, passed value satisfies schema', () => {
+  const values = [
+    {
+      height: 900,
+      is_state_stable: true,
+      is_expanded: true,
+    },
+    {
+      width: null,
+      height: 900,
+      is_state_stable: true,
+      is_expanded: true,
+    },
+    {
+      height: 900,
+      width: 100,
+      is_state_stable: true,
+      is_expanded: true,
+    },
+  ];
+
+  values.forEach((value) => {
+    const width = !value.width ? window.innerWidth : value.width;
+    expect(viewportChanged().parse(value)).toStrictEqual({ ...value, width });
+    expect(viewportChanged().parse(JSON.stringify(value))).toStrictEqual({
+      ...value,
+      width,
+    });
+  });
+});
+
+it('should throw an error in case, passed value does not satisfy schema', () => {
+  expect(() => viewportChanged().parse({})).toThrow();
+});

package/src/bridge/methods/__tests__/createPostEvent.ts

@@ -0,0 +1,37 @@
+import { expect, it, vi } from 'vitest';
+
+import { createPostEvent } from '../../index';
+import * as postEventModule from '../postEvent';
+
+vi.mock('~/bridge/methods/postEvent.js', () => ({
+  postEvent: vi.fn(),
+}));
+
+it('should throw error if passed method is unsupported in specified version', () => {
+  const postEvent = createPostEvent('6.0');
+  expect(() => postEvent('web_app_request_write_access'))
+    .toThrow('Method "web_app_request_write_access" is unsupported in the Mini Apps version 6.0.');
+});
+
+it('should throw error if passed method parameter is unsupported in specified version', () => {
+  const postEvent = createPostEvent('6.3');
+  expect(() => postEvent('web_app_open_link', {
+    url: '',
+    try_instant_view: true,
+  }))
+    .toThrow('Parameter "try_instant_view" in method "web_app_open_link" is unsupported in the Mini Apps version 6.3.');
+
+  expect(() => postEvent('web_app_set_header_color', {
+    color: '#aaaaaa',
+  }))
+    .toThrow('Parameter "color" in method "web_app_set_header_color" is unsupported in the Mini Apps version 6.3.');
+});
+
+it('should call global postEvent function', () => {
+  const postEvent = createPostEvent('6.3');
+  const spy = vi.spyOn(postEventModule, 'postEvent');
+
+  postEvent('web_app_request_viewport');
+  expect(spy).toHaveBeenCalledOnce();
+  expect(spy).toHaveBeenCalledWith('web_app_request_viewport', undefined);
+});

package/src/bridge/methods/__tests__/postEvent.ts

@@ -0,0 +1,137 @@
+import {
+  afterEach,
+  beforeAll,
+  expect,
+  it,
+  type SpyInstance,
+  vi,
+} from 'vitest';
+
+import { setTargetOrigin } from '../../../globals';
+import { postEvent } from '../../index';
+
+let windowSpy: SpyInstance<[], Window & typeof globalThis>;
+
+beforeAll(() => {
+  windowSpy = vi.spyOn(window, 'window', 'get');
+});
+
+afterEach(() => {
+  windowSpy.mockReset();
+});
+
+it('should call "window.parent.postMessage" with object with properties {eventType: string, eventData: any} converted to string in case, current environment is iframe', () => {
+  const postMessageSpy = vi.fn();
+  windowSpy.mockImplementation(() => ({
+    self: 1000,
+    top: 900,
+    parent: { postMessage: postMessageSpy },
+  }) as any);
+
+  expect(postMessageSpy).toHaveBeenCalledTimes(0);
+  postEvent('web_app_close');
+  expect(postMessageSpy).toHaveBeenCalledTimes(1);
+  expect(postMessageSpy).toHaveBeenCalledWith(JSON.stringify({
+    eventType: 'web_app_close',
+    eventData: undefined,
+  }), 'https://web.telegram.org');
+
+  postMessageSpy.mockClear();
+
+  expect(postMessageSpy).toHaveBeenCalledTimes(0);
+  postEvent('web_app_set_header_color', { color_key: 'bg_color' });
+  expect(postMessageSpy).toHaveBeenCalledTimes(1);
+  expect(postMessageSpy).toHaveBeenCalledWith(JSON.stringify({
+    eventType: 'web_app_set_header_color',
+    eventData: { color_key: 'bg_color' },
+  }), 'https://web.telegram.org');
+
+  postMessageSpy.mockClear();
+
+  expect(postMessageSpy).toHaveBeenCalledTimes(0);
+  postEvent('web_app_close', { targetOrigin: 'abc' });
+  expect(postMessageSpy).toHaveBeenCalledTimes(1);
+  expect(postMessageSpy).toHaveBeenCalledWith(JSON.stringify({
+    eventType: 'web_app_close',
+    eventData: undefined,
+  }), 'abc');
+
+  postMessageSpy.mockClear();
+
+  expect(postMessageSpy).toHaveBeenCalledTimes(0);
+  postEvent(
+    'web_app_set_header_color',
+    { color_key: 'bg_color' },
+    { targetOrigin: 'abc' },
+  );
+  expect(postMessageSpy).toHaveBeenCalledTimes(1);
+  expect(postMessageSpy).toHaveBeenCalledWith(JSON.stringify({
+    eventType: 'web_app_set_header_color',
+    eventData: { color_key: 'bg_color' },
+  }), 'abc');
+});
+
+it('should call "window.TelegramWebviewProxy.postEvent" in case this path exists. Function accepts event name (string) as the first argument and event data (object converted to string) as the second one.', () => {
+  const spy = vi.fn();
+  windowSpy.mockImplementation(() => ({
+    TelegramWebviewProxy: { postEvent: spy },
+  }) as any);
+
+  // Without parameters.
+  expect(spy).toHaveBeenCalledTimes(0);
+  postEvent('web_app_close');
+  expect(spy).toHaveBeenCalledTimes(1);
+  expect(spy).toHaveBeenCalledWith('web_app_close', undefined);
+
+  spy.mockClear();
+
+  // With parameters.
+  expect(spy).toHaveBeenCalledTimes(0);
+  postEvent('web_app_set_header_color', { color_key: 'bg_color' });
+  expect(spy).toHaveBeenCalledTimes(1);
+  expect(spy).toHaveBeenCalledWith('web_app_set_header_color', '{"color_key":"bg_color"}');
+});
+
+it('should call "window.external.notify" in case it exists. Passed value is object, converted to string. This object should contain fields "eventType" and "eventData".', () => {
+  const spy = vi.fn();
+  windowSpy.mockImplementation(() => ({
+    external: { notify: spy },
+  }) as any);
+
+  // Without parameters.
+  expect(spy).toHaveBeenCalledTimes(0);
+  postEvent('web_app_close');
+  expect(spy).toHaveBeenCalledTimes(1);
+  expect(spy).toHaveBeenCalledWith('{"eventType":"web_app_close"}');
+
+  spy.mockClear();
+
+  // With parameters.
+  expect(spy).toHaveBeenCalledTimes(0);
+  postEvent('web_app_set_header_color', { color_key: 'bg_color' });
+  expect(spy).toHaveBeenCalledTimes(1);
+  expect(spy).toHaveBeenCalledWith('{"eventType":"web_app_set_header_color","eventData":{"color_key":"bg_color"}}');
+});
+
+it('should throw an error in case, current environment is unknown', () => {
+  windowSpy.mockImplementation(() => ({}) as any);
+  expect(() => postEvent('web_app_close'))
+    .toThrow('Unable to determine current environment and possible way to send event');
+});
+
+it('should use globally set target origin', () => {
+  const postMessageSpy = vi.fn();
+  windowSpy.mockImplementation(() => ({
+    self: 1000,
+    top: 900,
+    parent: { postMessage: postMessageSpy },
+  }) as any);
+
+  setTargetOrigin('here we go!');
+  postEvent('iframe_ready');
+
+  expect(postMessageSpy).toHaveBeenCalledWith(
+    JSON.stringify({ eventType: 'iframe_ready' }),
+    'here we go!',
+  );
+});

package/src/classnames/__tests__/classNames.ts

@@ -0,0 +1,20 @@
+import { expect, it } from 'vitest';
+
+import { classNames } from '../classNames';
+
+it('should ignore all non-empty strings and objects', () => {
+  expect(classNames('', 2, 'b', null, undefined, false, true, [], 'a', 'c')).toBe('b a c');
+});
+
+it('should pick only keys which values are truthy', () => {
+  expect(classNames({
+    a: true,
+    b: null,
+    c: false,
+    d: undefined,
+    e: {},
+    f: 3,
+    g: 0,
+    h: '',
+  })).toBe('a e f');
+});

package/src/classnames/__tests__/mergeClassNames.ts

@@ -0,0 +1,21 @@
+import { expect, it } from 'vitest';
+
+import { mergeClassNames } from '../mergeClassNames';
+
+it('should ignore non-object values', () => {
+  expect(mergeClassNames({}, null, undefined, false, true, {}));
+});
+
+it('should merge objects keys by values applying classNames function', () => {
+  expect(mergeClassNames(
+    { a: 'hey there', b: 'space' },
+    { a: 'John', b: 'station' },
+    { c: 'wowow' },
+    { f: { mod: true, ignore: false, add: 'non empty string' } },
+  )).toStrictEqual({
+    a: 'hey there John',
+    b: 'space station',
+    c: 'wowow',
+    f: 'mod add',
+  });
+});