line / liff-mock Goto Github PK

View Code? Open in Web Editor NEW

34.0 7.0 6.0 221 KB

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

Home Page: https://www.npmjs.com/package/@line/liff-mock

License: Apache License 2.0

JavaScript 1.53% TypeScript 98.47%

liff liff-sdk line mock test liff-plugin

liff-mock's Introduction

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

With Pluggable SDK

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

liff-mock's People

Contributors

Stargazers

Watchers

Forkers

hylom tf-185 mookth789

liff-mock's Issues

Need this library work in typescript running on nodejs

Actually this library works well in typescript, but I still got some syntax error.

1) mock

 Argument of type '{ liffId: string; mock: boolean; }' is not assignable to parameter of type 'Config'.
  Object literal may only specify known properties, and 'mock' does not exist in type 'Config'.ts(2345)

2) $mock

any
Property '$mock' does not exist on type 'Liff'.ts(2339)

3) p IN liff.$mock.set((p)

Parameter 'p' implicitly has an 'any' type.ts(7006)

Thank you in advance.

TypeScript error occurs with @line/liff v2.22.0

TypeScript error occurs when I upgrade LIFF SDK to v2.22.0.

In npm-typescript-example, upgrade LIFF SDK to v2.22.0
run npx tsc

$ npx tsc
src/index.ts:16:7 - error TS2345: Argument of type '{ liffId: string; mock: boolean; }' is not assignable to parameter of type 'Config'.
  Object literal may only specify known properties, and 'mock' does not exist in type 'Config'.

16       mock: true,
         ~~~~~~~~~~


Found 1 error in src/index.ts:16

How to use liff-mock in LIFF sdk v2.22.0

I could not use liff-mock in LIFF sdk v2.22.0 pluggable mode.
https://developers.line.biz/en/docs/liff/pluggable-sdk/#pluggable-sdk-use-conditions

The following error occurred when I wrote the following code.

import { useEffect, useState } from "react";
import liff from "@line/liff/core";
import "./App.css";
import { LiffMockPlugin } from '@line/liff-mock';

liff.use(new LiffMockPlugin());

ugin.js:15 Uncaught TypeError: liff.isInClient is not a function
    at LiffMockPlugin2.install (plugin.js:15:31)
    at Object.use (index.es.js:1:2110)
    at App.tsx:11:6

It seems that liff.use() don't support LiffMockPlugin.
In this case, how should I use liff-mock?

Cannot use the CDN version of liff-mock

Hello.

I tried to use the CDN version of liff-mock, but it was not working.
window.liffMock property was found, but the value of liffMock is undefined.

how to reproduce

Create the below HTML file, and open in web browser.

<head>
  <script src="https://unpkg.com/@line/[email protected]/dist/umd/liff-mock.js"></script> <!-- same for 1.0.0-->
  <script>
    window.addEventListener('load', () => {
      console.debug(window.hasOwnProperty('liffMock')); // true
      console.debug(window.liffMock);                   // undefined
    });
  </script>
</head>

how to escape

Use the npm version of liff-mock, it works.

Thanks,