@tma.js/sdk 1.3.0 → 1.4.1

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);
+    });
+  });
+});

package/src/misc/__tests__/isRecord.ts

@@ -0,0 +1,21 @@
+import { expect, it } from 'vitest';
+
+import { isRecord } from '../isRecord';
+
+it('should return false for non-object value', () => {
+  [true, 123, 'abc'].forEach((v) => {
+    expect(isRecord(v)).toBe(false);
+  });
+});
+
+it('should return false for null value', () => {
+  expect(isRecord(null)).toBe(false);
+});
+
+it('should return false for array', () => {
+  expect(isRecord([])).toBe(false);
+});
+
+it('should return true for object', () => {
+  expect(isRecord({ a: true })).toBe(true);
+});

package/src/navigation/HashNavigator/__tests__/HashNavigator.ts

@@ -0,0 +1,144 @@
+import { describe, expect, it } from 'vitest';
+
+import { HashNavigator } from '../HashNavigator';
+
+// TODO: Add more tests.
+
+describe('constructor', () => {
+  it('should throw an error if entries list is empty', () => {
+    expect(() => new HashNavigator([], 0)).toThrow('Entries list should not be empty.');
+  });
+
+  it('should throw an error if cursor equals to higher than entries count', () => {
+    expect(() => new HashNavigator([{ pathname: '/' }], 1))
+      .toThrow('Cursor should be less than entries count.');
+    expect(() => new HashNavigator([{ pathname: '/' }], 2))
+      .toThrow('Cursor should be less than entries count.');
+  });
+});
+
+describe('methods', () => {
+  // describe('go', () => {
+  // });
+  //
+  // describe('forward', () => {
+  // });
+  //
+  // describe('back', () => {
+  // });
+
+  describe('getEntries', () => {
+    it('should return deep clone of navigator entries', () => {
+      const initialEntries = [{
+        search: '?b',
+        hash: '#c',
+        pathname: '/a',
+      }];
+      const navigator = new HashNavigator(initialEntries, 0);
+      const entries = navigator.getEntries();
+
+      expect(entries).toStrictEqual(initialEntries);
+      expect(entries).not.toBe(initialEntries);
+
+      expect(entries[0]).toStrictEqual(initialEntries[0]);
+      expect(entries[0]).not.toBe(initialEntries[0]);
+    });
+  });
+
+  // describe('push', () => {
+  // });
+  //
+  describe('replace', () => {
+    it('should replace current entry', () => {
+      const navigator = new HashNavigator([{
+        search: '?b',
+        hash: '#c',
+        pathname: '/a',
+      }], 0);
+      const [prevEntry] = navigator.getEntries();
+
+      expect(navigator.cursor).toBe(0);
+      navigator.replace('/b');
+      const [entry] = navigator.getEntries();
+
+      expect(prevEntry).not.toStrictEqual(entry);
+      expect(navigator.cursor).toBe(0);
+    });
+  });
+});
+
+describe('getters', () => {
+  describe('pathname', () => {
+    it('should return current entry pathname', () => {
+      expect(new HashNavigator([{ pathname: '/abc' }], 0).pathname).toBe('/abc');
+    });
+  });
+
+  describe('search', () => {
+    it('should return current entry search', () => {
+      expect(
+        new HashNavigator([{
+          search: '?a=1',
+          pathname: '/',
+        }], 0).search,
+      ).toBe('?a=1');
+    });
+  });
+
+  describe('hash', () => {
+    it('should return current entry hash', () => {
+      expect(
+        new HashNavigator([{
+          hash: '#abc',
+          pathname: '/',
+        }], 0).hash,
+      ).toBe('#abc');
+    });
+  });
+
+  describe('path', () => {
+    it('should combine current entry pathname, search and hash', () => {
+      expect(
+        new HashNavigator([{
+          search: '?b',
+          hash: '#c',
+          pathname: '/a',
+        }], 0).path,
+      ).toBe('/a?b#c');
+    });
+  });
+
+  describe('canGoBack', () => {
+    it('should return false if cursor === 0', () => {
+      expect(
+        new HashNavigator([{ pathname: '/' }], 0).canGoBack,
+      ).toBe(false);
+    });
+
+    it('should return true if cursor > 0', () => {
+      expect(
+        new HashNavigator([
+          { pathname: '/a' },
+          { pathname: '/b' },
+        ], 1).canGoBack,
+      ).toBe(true);
+    });
+  });
+
+  describe('canGoForward', () => {
+    it('should return false if cursor === entries.length - 1', () => {
+      expect(
+        new HashNavigator([{ pathname: '/' }], 0).canGoForward,
+      ).toBe(false);
+    });
+
+    it('should return true if cursor < entries.length - 1', () => {
+      expect(
+        new HashNavigator([
+          { pathname: '/a' },
+          { pathname: '/b' },
+        ], 0).canGoForward,
+      ).toBe(true);
+    });
+  });
+});

package/src/navigation/HashNavigator/__tests__/drop.ts

@@ -0,0 +1,42 @@
+import { afterEach, expect, it, vi } from 'vitest';
+
+import { drop } from '../drop';
+
+// TODO: Add more tests.
+
+function mockHistoryLength(length: number) {
+  vi
+    .spyOn(window.history, 'length', 'get')
+    .mockImplementation(() => length);
+}
+
+function mockPushState(impl?: History['pushState']) {
+  const spy = vi.spyOn(window.history, 'pushState');
+
+  if (impl) {
+    spy.mockImplementation(impl);
+  }
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+it('should do nothing in case, history contains only 1 element', () => {
+  const pushStateSpy = vi.fn();
+  mockHistoryLength(1);
+  mockPushState(pushStateSpy);
+
+  expect(pushStateSpy).not.toHaveBeenCalled();
+});
+
+it('should push empty state', () => {
+  const pushStateSpy = vi.fn();
+  mockHistoryLength(2);
+  mockPushState(pushStateSpy);
+
+  drop();
+
+  expect(pushStateSpy).toHaveBeenCalledOnce();
+  expect(pushStateSpy).toHaveBeenCalledWith(null, '');
+});

package/src/navigation/HashNavigator/__tests__/go.ts

@@ -0,0 +1,9 @@
+import { expect, it } from 'vitest';
+
+import { go } from '../go';
+
+// TODO: Add more tests.
+
+it('should return true if delta is 0', () => {
+  expect(go(0)).resolves.toBe(true);
+});