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

Overview

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

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
You might also like...

mock APIs, intelligently, with context, and perform other stuff as well

@sasta-sa/project mock APIs, intelligently, with context, and perform other stuff as well 😄 Setting up Clone the project git clone https://github.com

Jan 27, 2022

A mock Twitter page implemented without, partially with, and then with a design system.

Design Systems Workshop A mock Twitter page implemented without, partially with, and then with a design system. Setup Install npm dependencies, then s

Dec 8, 2022

Test utility to mock `window.matchMedia` for JSDOM environments.

mock-match-media Test utility for mocking window.matchMedia in JSDOM environments. JSDOM doesn't provide support for window.matchMedia, which means te

Oct 12, 2022

A library for boolean aliases to help you make your code more confusing and make your coworkers hate you.

yup-nope A library for boolean aliases to help you make your code more confusing and make your coworkers hate you. Installation Using npm: npm install

Dec 10, 2022

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

catalogist 📚 📓 📒 📖 🔖 The easy way to catalog and make your software and (micro)services visible to your organization through an API You were a pe

Dec 13, 2022

Jquery Plugin for Make easy Toast

Jquery Plugin for Make easy Toast

Nice Toast JS nice and easy toast for jquery Requirements jQuery Installation NPM npm install nice-toast-js Yarn yarn add nice-toast-js CDN - jsDelivr

Jul 26, 2022

Automated testing for single-page applications (SPAs). Small, portable, and easy to use. Click on things, fill in values, await for things exist, etc.

SPA Check Automated testing for single-page applications (SPAs). Small, portable, and easy to use. Click on things, fill in values, await for things e

Dec 23, 2022

An easy to implement marquee JQuery plugin with pause on hover support. I know its easy because even I can use it.

Simple-Marquee Copyright (C) 2016 Fabian Valle An easy to implement marquee plugin. I know its easy because even I can use it. Forked from: https://gi

Aug 29, 2022

An easy-to-use library to make your life easier when working with random numbers or random choices in javascript.

vrandom An easy-to-use library to make your life easier when working with random numbers or random choices in javascript. Table of contents Installati

Aug 16, 2022
Comments
  • Cannot use the CDN version of 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,

    opened by epaew 3
  • Need this library work in typescript running on nodejs

    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.

    opened by bombxdev 2
  • feat: Add CDN example app

    feat: Add CDN example app

    Page: https://line.github.io/liff-mock/examples/cdn-example/

    This PR added super simple example app for CDN usage. The target brunch of GitHub pages is now add-cdn-example but I'll change it to main after this PR is landed.

    opened by cola119 0
  • feat: call liff.init automatically if liff.init is called in LIFF browser

    feat: call liff.init automatically if liff.init is called in LIFF browser

    LIFF App in LIFF Browser doesn't have to call liff.login since it is invoked by liff.init automatically. https://developers.line.biz/en/reference/liff/#login

    This PR fixed to align liff.init behavior.

    opened by cola119 0
Releases(v1.0.3)
  • v1.0.3(Nov 11, 2022)

    What's Changed

    • feat: Add CDN example app by @cola119 in https://github.com/line/liff-mock/pull/8
    • Support @line/liff v2.21.3 by @cola119 in https://github.com/line/liff-mock/pull/10
    • v1.0.3 by @cola119 in https://github.com/line/liff-mock/pull/11

    Full Changelog: https://github.com/line/liff-mock/compare/v1.0.2...v1.0.3

    Source code(tar.gz)
    Source code(zip)
  • v1.0.2(Jun 13, 2022)

    What's Changed

    • Fix: cdn build entry to index.ts by @so99ynoodles in https://github.com/line/liff-mock/pull/6

    New Contributors

    • @so99ynoodles made their first contribution in https://github.com/line/liff-mock/pull/6

    Full Changelog: https://github.com/line/liff-mock/compare/v1.0.1...v1.0.2

    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(May 17, 2022)

    What's Changed

    • Setup GitHub Actions by @cola119 in https://github.com/line/liff-mock/pull/3
    • doc: add CDN link by @cola119 in https://github.com/line/liff-mock/pull/1
    • feat: call liff.init automatically if liff.init is called in LIFF browser by @cola119 in https://github.com/line/liff-mock/pull/2

    New Contributors

    • @cola119 made their first contribution in https://github.com/line/liff-mock/pull/3

    Full Changelog: https://github.com/line/liff-mock/compare/v1.0.0...v1.0.1

    Source code(tar.gz)
    Source code(zip)
The Remix Stack for deploying to Vercel with testing, linting, formatting, structure and mock for 3rd party API integration.

Remix DnB Stack See it live: https://dnb-stack.vercel.app/ Learn more about Remix Stacks. npx create-remix --template robipop22/dnb-stack What's in th

Robert Pop 61 Dec 13, 2022
The universal DevTools for LIFF (WebView) browser

LIFF Inspector ?? The universal DevTools for LIFF (WebView) browser LIFF Inspector is the official DevTools for LIFF(LNE Frontend Framework) that is i

LINE 34 Dec 19, 2022
A social-media mock app for the ones who love to read - and maybe show it off

?? ?? Cachalote ?? ?? Share what you are reading and find people who also likes it - or not! What does it do? This app focuses on three main questions

Thaís França 3 May 22, 2022
Javascript-testing-practical-approach-2021-course-v3 - Javascript Testing, a Practical Approach (v3)

Javascript Testing, a Practical Approach Description This is the reference repository with all the contents and the examples of the "Javascript Testin

Stefano Magni 2 Nov 14, 2022
AREX: It is a “Differential Testing” and “Record and Replay Testing” Tool.

AREX: It is a “Differential Testing” and “Record and Replay Testing” Tool. Test restful API by record, replay and stub request/response. Differential

ArexTest 15 Nov 1, 2022
Base-mock-api - Repo to storage my fake api's to use in my 2022 projects.

Base Mock API's Project made 100% with JavaScript, with the objective of creating endpoints to use in projects. Prerequisites Before you begin, ensure

Arthur Cabral 0 Nov 20, 2022
Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code

RoughDraft.js v0.1.5 Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code. <section>

Nick Dreckshage 464 Dec 21, 2022
Linely is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

Linely Linely is inspired by LocalStack. Goal of this tool is to create a mock service for LINE. Setup Docker docker run -d -p 3000:3000 dyoshikawa/li

null 4 Jan 24, 2022
NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

NiseLine NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE. Getting Started Launch NiseLine server. docker ru

null 4 Jan 24, 2022
NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

NiseLine NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE. Getting Started Launch NiseLine server by Docker

クラスメソッド株式会社 5 Jul 29, 2022