LIFF Mockを触ってみた

LIFF Mockが2022/04/25にリリースされたので早速触ってみました。
↓リリース記事

https://developers.line.biz/ja/news/2022/?month=04&day=25&article=liff-plugin

LIFF Mockとは

LIFFアプリを自動テストする時に、LIFFの初期化処理、ログイン処理をモックするプラグインです。

モックしないと自動テストを走らせる際に、LINEのログイン画面への遷移が発生してしまったり、SSLに対応していないとエラーになってしまったりと、面倒なことになるので、それを回避することができるってわけですね。

LIFF Mockの導入

公式サイトに従って導入していきます。

LIFF Mockのインストール

まず、LIFF SDKがv2.19.0以降であることを確認します。

次に、LIFF Mockのパッケージをインストールします。

$ npm install @line/liff-mock

とりあえずモックしてみる

下記のようなコードでLIFF Mockを導入し、初期化・ログインし、プロフィールとアクセストークンを書き出してみます。

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

const liffId = 'dummy-liff-id' // テキトーにIDを設定
liff.use(new LiffMockPlugin())
await liff.init({ liffId, mock: true })
if (!liff.isLoggedIn()) {
  await liff.login()
}
const profile = await liff.getProfile()
// { displayName: 'Brown', userId: '123456789', statusMessage: 'hello' }
console.log(profile)
const accessToken = await liff.getAccessToken()
// { accessToken: 'access_token' }
console.log({ accessToken })

ブラウザでアクセスした場合、普通は認証画面に遷移するのですが、LIFF Mockプラグインのおかげで遷移せずに、下記のように無事プロフィールとアクセストークンが出力されます。

{ displayName: 'Brown', userId: '123456789', statusMessage: 'hello' }
{ accessToken: 'access_token' }

出力されるデータはLIFF Mockがデフォルトで設定しているダミーデータになります。

モックデータを設定する

デフォルトのダミーデータを書き換えたければ、liff.$mock.setというメソッドを使えば書き換えることができます。
下記のコードはその例になります。

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

const liffId = 'dummy-liff-id' // テキトーにIDを設定
liff.use(new LiffMockPlugin())
await liff.init({ liffId, mock: true })
+ liff.$mock.set((p) => ({
+   ...p,
+   getProfile: { displayName: 'Cony', userId: '1111111' },
+   getAccessToken: 'CUSTOM_DUMMY_TOKEN'
+ }))
if (!liff.isLoggedIn()) {
  await liff.login()
}
const profile = await liff.getProfile()
// { displayName: 'Cony', userId: '1111111' }
console.log(profile)
const accessToken = await liff.getAccessToken()
// { accessToken: 'CUSTOM_DUMMY_TOKEN' }
console.log({ accessToken })

出力は下記のようになります。

{ displayName: 'Cony', userId: '1111111' }
{ accessToken: 'CUSTOM_DUMMY_TOKEN' }

簡単ですね。

モックを解除する

モックを解除したい時には初期化時のmockプロパティをfalseにするだけで解除できます。

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

- const liffId = 'dummy-liff-id' // テキトーにIDを設定
+ const liffId = '1611111-xxxxxx' // 実際のLIFF IDを設定
liff.use(new LiffMockPlugin())
- await liff.init({ liffId, mock: true })
+ await liff.init({ liffId, mock: false })
if (!liff.isLoggedIn()) {
  await liff.login()
}
const profile = await liff.getProfile()
// { displayName: 'Brown', userId: '123456789', statusMessage: 'hello' }
console.log(profile)
const accessToken = await liff.getAccessToken()
// { accessToken: 'access_token' }
console.log({ accessToken })

こちらを実行すると、LINEにログインしていない場合はLINEの認証画面への遷移が発生し、下記のようにログインしたユーザの実際のプロフィール情報と、実際のアクセストークンが表示されます。

{ displayName: 'あなたのLINE名', userId: 'あなたのLINE User ID' }
{ accessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }

おわりに

LIFFアプリは初期化処理がややこしいからE2Eテストとかは難しいよね〜ってことで避けてたのですが、LIFF Mockプラグインの登場で言い訳ができなくなってきました。