初心者向けに VSCode で天気アプリを構築する方法 (応答後の自動テスト)

以前、天気予報アプリのバックエンドを一緒に構築しましたが、返された結果が期待どおりであることを確認するにはどうすればよいでしょうか?小さな応答については出力を手動でチェックするのは簡単ですが、返されたデータが大きい場合や行ごとに検証するのが難しい場合はどうすればよいでしょうか?

今日は、さらに深く掘り下げて、EchoAPI の Post-response を使用してテスト プロセスを自動化する方法を探っていきます。これにより、API 応答が期待と一致するかどうかを自動的にチェックできるようになり、時間と労力を節約できます。

EchoAPI でテストを自動化するには、その ポストレスポンス 機能を使用して、API リクエストの後に自動的に実行されるスクリプトを作成します。これらのスクリプトは、API 応答の正確性を検証し、後で変更を加えた場合でもアプリケーションが期待どおりに動作することを確認するのに役立ちます。

EchoAPI を使用して天気予報アプリのテストを自動化する方法を詳しく見てみましょう。

EchoAPI を使用してテストを自動化する手順

VSCode で EchoAPI をセットアップする

VSCode に EchoAPI for VS Code 拡張機能がインストールされていることを確認してください。インストールすると、EchoAPI インターフェイス内でリクエストをテストおよび自動化できるようになります。使用は無料です!!!

GET リクエストを作成します:

メソッドを GET に設定します。

天気予報 API をテストするには、次の URL を使用します:

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

[送信] をクリックして、リクエストが機能し、正しい気象データが返されることを確認します。 Response に次のような JSON レスポンスが表示されます。

応答後スクリプトを追加する

天気 API を手動でテストしたので、応答データを検証する自動テストを追加しましょう。

リクエストの EchoAPI の Post-response タブに移動します。

JavaScript を使用して ポストレスポンス スクリプトを追加し、気象データを自動的にチェックします。

以下を検証する簡単なポストスクリプトの例を示します。

• 応答ステータスは 200 (OK) です。
• 応答には Temperature フィールドが含まれており、「温度」 が数値であることを確認してください
• 応答には Weather フィールドが含まれており、'weather' フィールドが文字列であることを確認します
• 応答には City フィールドが含まれており、'city' フィールドが文字列であることを確認してください

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

テストを実行する

テスト スクリプトを追加した後、[再度送信] をクリックしてリクエストを実行し、テスト スクリプトを自動的に実行します。

次に、右側の「テスト結果」をクリックします。

テスト結果には、チェックが成功したか失敗したかが表示されます。
すべてが成功すると、次のようなものが表示されます:

追加のタスクで事後応答を自動化する (オプション)

複数の 応答後の自動テストを実行する場合は、[応答後] セクションにタスクを追加できます。これにより、すべてのテストを一度に実行できます。

この場合、複数の都市、エラー シナリオに異なるリクエストを追加し、それぞれに特定のテスト スクリプトを添付できます。

エラーチェック

アプリがさまざまなシナリオを確実に処理できるようにするために、リクエストを変更し、エラー ケースをテストできます。

たとえば、無効な都市名を使用してテストします:

リクエスト URL を無効なものに変更します:

// Check if the response status is 200 (OK)

pm.test("Status code is 200", function () {
  pm.response.to.have.status(200);
});

// Check if the response has 'temperature', 'weather', and 'city' fields

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');
});

// Ensure the 'temperature' is a number

pm.test("Temperature is a number", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.temperature).to.be.a('number');
});

// Ensure the 'weather' field is a string

pm.test("Weather is a string", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.weather).to.be.a('string');
});

// Ensure the 'city' field is a string

pm.test("City is a string", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.city).to.be.a('string');
});

新しいタスクでこのケースを処理するテスト スクリプトを追加します:

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

このテストを実行すると、EchoAPI は API が正しいエラー メッセージと無効な入力に対するステータス コードで応答するかどうかを自動的に検証します。

さまざまなシナリオをテストする

既存のテストに加えて、返されたデータがニューヨーク (ビッグ アップル) のものであることを確認してみましょう。新しいタスクを作成し、「This is for ?」という名前を付けます。

リクエスト URL をニューヨークに変更します:

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

応答後のセクションに追加するスクリプトは次のとおりです:

// Check if the response status is 200 (OK)

pm.test("Status code is 200", function () {
  pm.response.to.have.status(200);
});

// Check if the response has 'temperature', 'weather', and 'city' fields

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');
});

// Ensure the 'temperature' is a number

pm.test("Temperature is a number", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.temperature).to.be.a('number');
});

// Ensure the 'weather' field is a string

pm.test("Weather is a string", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.weather).to.be.a('string');
});

// Ensure the 'city' field is a string

pm.test("City is a string", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.city).to.be.a('string');
});

このスクリプトを追加したら、もう一度 「送信」 をクリックします。 EchoAPI はすべてのテストを自動的に実行し、どのテストが成功し、どのテストが失敗したかを表示します。

結果は次のとおりです:

ここのアイコンをドラッグして並べ替えることで、実行順序を調整できます。

スイッチを切り替えて、応答後の実行をオンまたはオフにします。

EchoAPI を使用してテストを自動化する理由

• 無料: 無料です!!!
• 一貫性: API レスポンスが長期にわたって一貫していることを確認します。
• クイック検証: データを毎回手動で確認することなく、API の複数の側面を自動的にチェックします。
• エラー防止: 変更をデプロイする前に、早期にエラーやリグレッションを検出します。

EchoAPI を使用してテストを自動化すると、天気予報アプリが期待どおりに動作するようになります。信頼性の高い API を維持することが、これほど簡単なことはかつてありませんでした。

コーディングをお楽しみください?

以上が初心者向けに VSCode で天気アプリを構築する方法 (応答後の自動テスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。