LIFF Mockを触ってみた
LIFF Mockが2022/04/25にリリースされたので早速触ってみました。
↓リリース記事
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プラグインの登場で言い訳ができなくなってきました。
Author And Source
この問題について(LIFF Mockを触ってみた), 我々は、より多くの情報をここで見つけました https://zenn.dev/arahabica/articles/608675d55da99b著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol