@vkontakte/vkui-connect-mock

About

This library mocks VK Connect methods from vkui-connect for developing in desktop browser

How to install

Add library to your project dependencies

npm install @vkontakte/vkui-connect-mock

or

yarn add @vkontakte/vkui-connect-mock

How to use

Import necessary methods from this library instead of using vkui-connect:

import VKConnect from '@vkontakte/vkui-connect-mock';

And then init VK Connect:

VKConnect.subscribe((e) => {
  if (e.detail.type === 'VKWebAppGetUserInfoResult') {
    // do something
  }
});
VKConnect.send('VKWebAppGetUserInfo', {});

More documentation regarding VK Connect is here.

How to edit mocked data

There are getter and setter for mocked data of each method. For example, you want to change response of VKWebAppGetUserInfo method:

import { response as res } from  '@vkontakte/vkui-connect-mock';
res.VKWebAppGetUserInfo.data = {
  type: 'VKWebAppGetUserInfoResult',
  data: {
    photo_100: 'https://pp.userapi.com/c841034/v841034569/3b8c1/pt3sOw_qhfg.jpg',
    photo_200: 'https://pp.userapi.com/c841034/v841034569/3b8c1/pt3sOw_qhfg.jpg',
    first_name: 'Friedrich',
    last_name: 'Engels',
    sex: 0,
    city: {
      id: 1,
      title: 'London',
    },
    country: {
      id: 1,
      title: 'UK'
    },
    timezone: 0
  },
}

You can find more information about methods responses here.

Available Methods

• VKWebAppInit
• VKWebAppGetAuthToken
• VKWebAppCallAPIMethod
• VKWebAppGetGeodata
• VKWebAppGetUserInfo
• VKWebAppGetPhoneNumber
• VKWebAppGetClientVersion
• VKWebAppGetEmail

WIP Methods

• VKWebAppOpenPayForm
• VKWebAppShare
• VKWebAppAllowNotifications
• VKWebAppDenyNotifications
• VKWebAppShowWallPostBox
• VKWebAppSetLocation
• VKWebAppAllowMessagesFromGroup
• VKWebAppJoinGroup

Developer Mode

Commands

• npm run clean - Remove lib/ directory
• npm run lint - Run ESlint with airbnb-config
• npm run build - Babel will transpile ES6 => ES5 and minify the code.
• npm run prepublish - Hook for npm. Do all the checks before publishing your module.