VSCodeで初心者向けの天気アプリを開発する方法（2）: レスポンス後の自動テスト

前回、天気アプリのバックエンドを構築しましたが、期待通りの結果が返ってきていることをどのように確認しますか？小さなレスポンスなら手動で確認するのは簡単ですが、返ってくるデータが大きかったり、1行ずつ確認が難しい場合はどうすれば良いでしょうか？

今回はEchoAPIのポストレスポンス機能を使って、テストプロセスを自動化する方法について詳しく解説します。この機能を使うことで、APIレスポンスが期待通りであるか自動的にチェックでき、時間と労力を大幅に節約できます。

EchoAPIのポストレスポンス機能を使えば、APIリクエスト後に自動的にスクリプトを実行し、アプリケーションが意図した通りに動作しているかを確認できます。さっそく、EchoAPIを使った天気アプリの自動テストの方法を見ていきましょう。

EchoAPIでのテスト自動化手順

EchoAPIをVSCodeにセットアップ

まずは、VSCodeにEchoAPI for VS Code拡張機能をインストールしてください。インストール後はEchoAPIのインターフェース内でリクエストをテストし、自動化できます。しかも無料です！

GETリクエストを作成する

メソッドをGETに設定し、次のURLを使って天気APIのテストリクエストを作成します。

http://localhost:3000/weather?city=London

送信ボタンを押してリクエストが正常に動作し、正しい天気データが返ってくることを確認してください。ResponseにJSONレスポンスが表示されるはずです。

ポストレスポンススクリプトを追加

手動で天気APIの動作確認ができたら、レスポンスデータの検証を行うための自動テストを追加します。

EchoAPIのポストレスポンスタブに移動し、JavaScriptでスクリプトを追加します。このスクリプトは、以下の内容を自動的にチェックします。

• ステータスコードが200 (OK)であること。

• レスポンスにtemperature、weather、cityフィールドが含まれていること。

• temperatureが数値であること。

• weatherが文字列であること。

• cityが文字列であること。

// ステータスコードが200 (OK)であることを確認
pm.test("Status code is 200", function () {
  pm.response.to.have.status(200);
});

// temperature、weather、cityフィールドが含まれていることを確認
pm.test("Response contains temperature, weather, and city", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData).to.have.property('temperature');
  pm.expect(jsonData).to.have.property('weather');
  pm.expect(jsonData).to.have.property('city');
});

// temperatureが数値であることを確認
pm.test("Temperature is a number", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.temperature).to.be.a('number');
});

// weatherが文字列であることを確認
pm.test("Weather is a string", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.weather).to.be.a('string');
});

// cityが文字列であることを確認
pm.test("City is a string", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.city).to.be.a('string');
});

テストを実行する

テストスクリプトを追加したら、再度送信ボタンを押してリクエストを実行し、自動でテストスクリプトを実行します。

Test resultをクリックしてテスト結果を確認しましょう。

すべてのチェックが成功すれば、以下のような結果が表示されます。

追加のテスト自動化（任意）

複数のポストレスポンス自動テストを行いたい場合、ポストレスポンスセクションに異なるリクエストを追加し、各リクエストに特定のテストスクリプトを追加できます。

エラーチェック

例えば、無効な都市名でテストする場合、以下のようにURLを変更します。

http://localhost:3000/weather?city=InvalidCity

// 無効な都市の場合のステータスコードが500 (Internal Server Error)であることを確認
pm.test("Status code is 500 for invalid city", function () {
  pm.response.to.have.status(500);
});

// エラーメッセージが返されることを確認
pm.test("Error message is returned for invalid city", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData).to.have.property('error');
  pm.expect(jsonData.error).to.eql("Failed to fetch weather data");
});

他のシナリオをテスト

例えば、New Yorkのデータが正しいことを検証したい場合、新しいタスクを作成し、City is New York というスクリプトを追加します。

http://localhost:3000/weather?city=New%20York

// 'City'がNew Yorkであることを確認
pm.test("City is 🍎", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.city).to.eql("New York");
});

再度送信ボタンを押し、EchoAPIがすべてのテストを実行し、結果を表示します。

結果はこちらです:

EchoAPIでのテスト自動化の利点

• 無料: 無料で利用可能！

• 一貫性: 時間が経ってもAPIレスポンスが一貫しているか確認できます。

• 迅速な検証: 手動でデータを確認する手間を省き、さまざまなAPI要素を自動的にチェックできます。

• エラーチェック: 配布前にエラーや回帰問題を早期に発見可能。

EchoAPIでのテスト自動化により、天気アプリが期待通りに機能することを確実にできます。

EchoAPI for VS Code-Ultra-lightweight API debugging tool for VS Code.