LIFF Mock 使ってますか？

2024.2.16
LINE DC Frontend Meetup ~Webアプリ開発で盛り上がろう！編~

https://linedevelopercommunity.connpass.com/event/308139/

Transcript

1. -*''
   .PDL
   ࢖ͬͯ·͔͢ʁ -*/&
   %$
   'SPOUFOE
   .FFUVQ
   d8FCΞϓϦ։ൃͰ੝Γ্͕Ζ͏ʂฤd 2024.2.16 Sumihiro Kagawa
2. ⾃⼰紹介
3. ⾃⼰紹介 n 加川 澄廣（かがわ すみひろ） l LINE API Expert (2019.04〜) l 経歴 Ø 経理→プログラマー→アーキテクト→PM→ITコンサル →現職 l 所属 Ø 株式会社ブレイブテクノロジー - LINE Technology Partner（ミニアプリ部⾨） 2022 - 23 - LINE ミニアプリを利⽤した順番待ち関連サービスの開発・運⽤をしています - 開発部⾨統括 l 趣味 Ø 開発コンテストへの参加 Ø e-bike でゆるゆる⾛る - 時には 100km 超えの⻑距離（アワイチ、ビワイチ など）も⾛ります sumihiro3 sumihiro.kagawa 3
4. 今⽇のテーマ “LIFF Mock”
5. “LIFF Mock” とは “LIFF Mockは、LIFFアプリのテストを簡単にするため のLIFFプラグインです。LIFF Mockを使うと、LIFF SDKにモックモードを追加できます。 モックモードでは、LIFFアプリがLIFFサーバーから独⽴ し、LIFF APIがモックデータを返すため、単体テストや 負荷テストをより簡単に⾏うことができます。” https://developers.line.biz/ja/docs/liff/liff-plugin/#liff-mock
6. “LIFF Mock” とは “LIFF Mockは、LIFFアプリのテストを簡単にするため のLIFFプラグインです。LIFF Mockを使うと、LIFF SDKにモックモードを追加できます。 モックモードでは、LIFFアプリがLIFFサーバーから独⽴ し、LIFF APIがモックデータを返すため、単体テストや 負荷テストをより簡単に⾏うことができます。” https://developers.line.biz/ja/docs/liff/liff-plugin/#liff-mock
7. つまり
8. “LIFF Mock” が無い時 n liff.init() したら LIFFサーバーから本番環境へリダイレクトされてしまい ローカル環境でテストできない -*''
   αʔόʔ ຊ൪αʔόʔʢzΤϯυϙΠϯτ63-zʣ ΁ϦμΠϨΫτ ຊ൪αʔόʔ͔Β Ϩεϙϯε͕ฦΔ ϩʔΧϧαʔόʔ ຊ൪αʔόʔ OHSPL ͳͲΛ࢖ͬͯϩʔΧϧαʔόʔΛ ΤϯυϙΠϯτʹઃఆͰ͖Δ͕ɺ ςετͷ౓ʹઃఆ͢Δͷ͸໘౗
9. “LIFF Mock” がある時 n liff.init() してもローカル環境で完結するのでテストがしやすい ϩʔΧϧαʔόʔ ຊ൪αʔόʔ -*''
   αʔόʔ ϩʔΧϧαʔόʔ͔ΒϨεϙϯε͕ฦΔ
10. “LIFF Mock” がある時 n LIFF API のレスポンスに任意データを返せるので更にテストが容易に︕ ϩʔΧϧαʔόʔ ຊ൪αʔόʔ -*''
    αʔόʔ ϩʔΧϧαʔόʔ͔ΒϨεϙϯε͕ฦΔ -*''
    "1*
    ͷϞοΫσʔλΛ ಠࣗʹઃఆͯ͠ฦ͢͜ͱ͕Ͱ͖Δ
11. “LIFF Mock” の基本的な使い⽅ n npm パッケージを導⼊して、モックモードを有効にするだけ︕ https://github.com/line/liff-mock “LIFF Mock” の plugin を導⼊ モックモードを有効にする 予め設定された モックデータが返る
12. “LIFF Mock” に任意のモックデータを設定する n `liff.$mock.set` でテストに応じたモックデータを設定できる https://github.com/sumihiro3/liff-mock-sample 環境変数などからテスト種別（例ではユーザーID）を取得 `liff.$mock.set` でモックデータを設定する 各 LIFF API に対して テストに応じたモックデータを設定する ಠࣗؔ਺ͰϞοΫσʔλΛઃఆ ͢Δ͜ͱ΋Ͱ͖Δʢ࣍ϖʔδʣ
13. “LIFF Mock” に任意のモックデータを設定する n独⾃関数でモックデータを設定することもできる https://github.com/sumihiro3/liff-mock-sample ϞοΫσʔλΛ֎෦ϑΝΠϧͰ ఆ͓͚ٛͯ͠͹ɺߋʹςετ͕؆୯ʹʂ
14. “LIFF Mock” で e2e テストなど フロントエンドのテストが簡単に︕
15. “LIFF Mock” で e2e テスト n 例えば Profile に応じた画⾯表⽰のテスト Ø QR コードのスキャン結果も併せてテスト https://github.com/sumihiro3/liff-mock-sample 1SPGJMFը૾͕͋Δ࣌ 1SPGJMFը૾͕ແ͍࣌
16. “LIFF Mock” で e2e テスト https://github.com/sumihiro3/liff-mock-sample 1SPGJMFը૾͕ઃఆ͞Ε͍ͯΔ࣌͸ ը૾͕දࣔ͞Ε͍ͯΔ͔Λςετ -*''
    .PDL
    ʹઃఆͨ͠ ϞοΫσʔλΛऔಘ ϞοΫͷ1SPGJMFσʔλ͕දࣔ͞Εͯ ͍Δ͔Λςετ ςετͮ͠Β͍
    23ίʔυͷ εΩϟϯ݁Ռ΋؆୯ʹςετͰ͖Δ
17. “LIFF Mock” で フロントエンドのテストを より便利に︕
18. 今回紹介したサンプル実装を 公開しています︕ https://github.com/sumihiro3/liff-mock-sample
19. ご清聴 ありがとうございました︕
20. SNS アカウントなど @sumihiro3 Sumihiro.Kagawa LINE API Expert 20
21. E.O.C.