Skip to content

line/liff-mock

Repository files navigation

LIFF Mock

LIFF Mock is a LIFF Plugin that make testing your LIFF app easy.

※ LIFF Plugin feature is available since LIFF SDK v2.19.0.

Usage

NPM

$ npm install @line/liff-mock
import liff from '@line/liff';
import { LiffMockPlugin } from '@line/liff-mock';

liff.use(new LiffMockPlugin());

liff.init({
  liffId: 'liff-xxxx',
  mock: true, // enable mock mode
});

if (!liff.isInClient()) liff.login();
const profile = await liff.getProfile();
// { displayName: 'Brown', userId: '123456789', statusMessage: 'hello' }
console.log(profile);

If you use LIFF Mock with Pluggable SDK mode, you have to install IsInClientModule before the installation of LiffMockPlugin because LIFF Mock depends on liff.isInClient API.

import liff from '@line/liff/core';
import IsInClientModule from "@line/liff/is-in-client";
import { LiffMockPlugin } from '@line/liff-mock';

liff.use(new IsInClientModule());  // <-- Please install IsInClientModule before LiffMockPlugin
liff.use(new LiffMockPlugin());

liff.init({
  liffId: 'liff-xxxx',
  mock: true, // enable mock mode
});

if (!liff.isInClient()) liff.login();
const profile = await liff.getProfile();
// { displayName: 'Brown', userId: '123456789', statusMessage: 'hello' }
console.log(profile);

CDN

https://unpkg.com/@line/[email protected]/dist/umd/liff-mock.js

<!-- in <head> tag -->
<script src="https://unpkg.com/@line/[email protected]/dist/umd/liff-mock.js"></script>
const liff = window.liff;
const liffMockPlugin = window.liffMock;

liff.use(new LiffMockPlugin());

liff.init({
  liffId: 'liff-xxxx',
  mock: true, // enable mock mode
});

if (!liff.isInClient()) liff.login();
const profile = await liff.getProfile();
// { displayName: 'Brown', userId: '123456789', statusMessage: 'hello' }
console.log(profile);

API

liff.$mock.set

Set mock data

type set = (
  data: Partial<MockData> | ((prev: Partial<MockData>) => Partial<MockData>)
) => void;
const profile = await liff.getProfile();
// { displayName: 'Brown', userId: '123456789', statusMessage: 'hello' }
console.log(profile);

liff.$mock.set((p) => ({
  ...p,
  getProfile: { displayName: 'Cony', userId: '1111111' },
}));

const profile = await liff.getProfile();
// { displayName: 'Cony', userId: '1111111' }
console.log(profile);

liff.$mock.clear

Restore default mock data

type clear: () => void;
// liff.$mock.set(...)
const profile = await liff.getProfile();
// { displayName: 'Cony', userId: '1111111' }
console.log(profile);

liff.$mock.clear();

const profile = await liff.getProfile();
// { displayName: 'Brown', userId: '123456789', statusMessage: 'hello' }
console.log(profile);

Example

See examples

Contribution

$ nvm use
$ npm ci