LINE Developer CommunityはLINE APIに関連する最新情報や開発Tipsを共有するコミュニティです。
2022年5月に行われた【LINEミニアプリ】LIFF Deep Dive【LIFFプラグインリリース記念】では、LINEのLIFF担当チームをゲストとし、LIFFと新機能について登壇してもらいました。この記事は、第4回目の書き起こし記事です。
これまででの書き起こし記事はこちら。
自己紹介
上野 康平と申します。2019年の11月にLINE株式会社に新卒で入社して、LINEバイトのフロントエンド開発とLIFF SDKの開発に従事してます。LIFFの開発環境を作って機能を実装まで一連の流れができたので、ここからは機能を実装して、それに対して単体テストを行ったりだとか、あとは実際にLIFFアプリを動かしてみて、デバッグを行う説明していきたいと思います。
LIFF のテスト難しい問題
みなさんの中で単体テストを書いたことがある人はいると思うんですけど、例えばこのような関数のテストを書きたいというケースを考えてみたいと思います。この関数は見ての通り、処理の途中でLIFF APIを呼び出しています。getProfileというAPIを呼び出していてそのプロフィール情報を何かしら処理して何かしら値を返すという関数になっているんですけど、LIFFに依存した関数になっています。
それに対してJestだったり、なんでもいいですけど 関数を呼び出して、その結果が期待する値と等しくなっているってことをテストしたい。これを純粋にそのままテストランナーを走らせてテストを実行すると、恐らくLIFF IDが見つかりません、とかログインを最初にしなければなりません、エラーが出てテストを行うことができないと思います。
どういうことかというと、LIFFに依存した関数のテストを行うときは、LIFF APIがネットワーク越しにさまざまな情報を取得していくので、ネットワークにアクセスできる環境が必要になったりだとか、あとは仮にネットワークアクセスができたとしても、APIの戻り値が実際の値なので、固定値になっていたりだとか状況をテストしたいんだけど、そのAPIの戻り値を変更することができないという問題点があったり、今のgetProfileのように事前にliff.initだったりだとか、liff.loginといったAPIを呼び出しておく必要があるといった様々な前提条件だったりだとか、環境強制があります。
LIFF Mockとは
これらすべてはですね単体テストを不安定にさせる要素不安定というか、もはや不可能にする要素です。そんな時にですねliffのAPI呼び出しをモックできる。何が嬉しいかというとAPI呼び出しをモックしてるので、ネットワークアクセスを実際に行う必要がなくなったりだとかレスポンスの値を自由に変更することができたりだとか他のAPIに依存しないので、独立して単体のAPIを呼び出すことができるようになります。
これらを満たせれば、ようやくLIFFに依存した関数の単体テストを実施することができるようになります。それを可能にするのが、今回、我々が公開したLIFF MockというLIFFプラグインです。
LIFF Mockの使い方とインストール
使い方は簡単でnpmでLIFF Mockをインストールしていただいて、liff.initの直前にliff.use APIを使ってLIFF Mockプラグインを有効化してください。そしてMockを有効したい場合、つまりテスト走ら知らせたいときなどは、initのときにMockのoptionをtureにするということで、これ以降のLIFFAPIはすべてMockされることになります。
LIFFMock、LIFFアプリのデモ
簡単に実際のコードでデモしていきたいと思うんですけど今回は先ほど池田さんが紹介していたLIFFアプリの実際の関数を簡単にテストしてみたいと思います。このようにshareMessagesという関数をテストしようとした時に、これは何をしているかというとshareTargetPickerというAPIが有効かどうかを調べて、有効でない場合はshareTargetPicker APIは使いませんというエラーを返す挙動になっています。このAPIが利用できる場合は実際にAPIを呼び出してレスポンスを返すといった関数になっています。
愚直にこれに対して単体テスト書いてみると、まず最初にshareTargetPicker APIが利用できない時にちゃんと正しいエラーを返すことを確認するテストがこのようになります。shareMessagesを呼び出してこのエラーメッセージを出しているということを確認しています。もう一つは、shareTargetPicker APIが利用できる場合は正しくレスポンスを返却しているかどうか。今回の場合は、successというオブジェクトをちゃんと返却しているかどうかをテストしています。
LIFF Mockのユースケース
LIFF Mock使わずに純粋にそのままの状態でテストを走らせてみたいと思います。実際にliff.initを呼び出していなかったり、loginを呼んでいないのでLIFF IDが必要ですとか、そういったエラーをLIFF SDKが投げています。その結果、どちらがテストも失敗してしまっています。
LIFF Mockを使って先ほど説明したように、LIFF Mockプラグインを組み込んで事前にMockオプションを有効にしてliff.initを呼び出します。この場合は、LIFF IDは何でもいい、というのもliff.initはMockされているので、LIFF IDは文字列であれば何でもよくなります。それでは実行したいと思います。
今回は1つ目のテストの成功して2つのテストは失敗しています 2つ目のテストが失敗した理由はisApiAvailableのAPIがFALSEを返しているため、こっちの処理が実行されているため1つ目はしっかりと実行されているので成功しているんですけど、2つ目は失敗しています。isApiAvailableがモックされているので、そのAPIの戻り値を自由に変更することができます。
今回は、ここをTRUEにすることで実際にここのif文がTRUEになって、この中身の処理が実行されるように変更します。最後にshareTargetPickerのレスポンスもこのような形を返すようにモックしてあげます。こうすることで晴れてふたつともテストが成功する、つまり正しくAPIが有効でないのであればエラーを返すし、有効であればAPIのレスポンスを返しているってことがテストで確認することができました。これがLIFF Mockのユースケースになります。
LIFF Inspector とは
デバッグについてですが、iPhoneであったり、Androidだったりで動いているLIFFアプリケーションのコンソールログだったり、トラックログだったりDOM情報だったりをデバッグすることは現状不可能になっています。PCのブラウザであればChrome DevToolsを開くことで、これらの情報を見ることができるんですけど、LIFFブラウザはツールがないので、これらデバッグ情報を見ることができません。そこで、我々がLIFF Inspectorといったものを開発しました。
LIFF Inspector でLIFFアプリケーションのデバッグが可能に
LIFF Inspectorは簡単に言ってしまえばLIFF ブラウザ様のデバックツールです。利用方法はLIFF Mockと一緒でこのプラグインをパッケージのインストールしていただいて、liff.initの前にliff.useで有効化します。LIFF Inspectorがどのように動いているかを簡単な図で説明すると、今ここにiPhoneなどで動いているLIFFアプリケーションがこれらのLIFFアプリケーションが出すデバッグ情報をローカルPCにネットワーク越しに送信します。受け取ったデバッグ情報を、またさらにPC上のChromeDevToolsに表示することによって、端末で動いているデバッグ情報を自分のPCで確認することが可能になります。
LIFF Inspector のデモ
LIFF InspectorがインストールされているのでローカルでLIFF Inspector用のサーバーを実行しますとすると、このアドレスでサーバーが実行されます。ここで注意していただきたいのはLIFFアプリケーションはHTTPSで動いているため、自分のPCのローカルサーバもHTTPSにする必要があります。ミックスコンテンツということで、ブラウザが通信をブロックしてしまいます。HTPPで立っているサーバをHTTPS化する方法はいろいろとあるんですが、今回はngrokツールを使ってHTTPS化をしていきたいと思います。
ここでHTTPSのURLが発行されたのでこれをコピーして、自分のPCのローカルで立てたサーバーをLIFFアプリケーションに知らせる必要があるので、一つの方法としてエンドポイントURLにli.originというクエリをつけます。そこには、先程ngrokで建てたサーバーのURLを貼り付けて保存します。ここで実際にスマホでLIFFアプリを立ち上げると、この画面でDevToolsのURLが表示されます。
Chromeで表示するとiPhoneで動いているLIFFアプリのデバッグ情報であったり、DOM情報が取得できてます。オーバーレイが表示されたりだとかあとは友達にシェアというAPIを出してみたいと思います。実際にコンソールログが表示されてあとはネットワークのログも表示されています。同じツールを使ってLIFFブラウザに対してもデバッグ行うことが可能になりました。これがLIFF Inspectorの紹介になります。僕からは単体テストとデバッグについて紹介しました。引き続き佐藤さんお願いします。
Discussion