コード コンポーネントをテストしてデバッグする
より複雑なコンポーネントの開発では、そのロジックをインタラクティブな方法でテストおよびデバッグすることが必要な場合があります。 便利なユーティリティの 1 つである Power Apps コンポーネント テスト ハーネスを使用すると、さまざまなデータとコンテキストの入力をテストし、コンポーネントが正常に機能していることを確認できます。 また、コード コンポーネントは TypeScript、CSS、HTML などの標準的な Web テクノロジを使用して構築するため、そのエコシステムでは、最新のブラウザーで利用可能なクライアント デバッグ機能のような多くのユーティリティが提供されています。
Power Apps コンポーネント テスト ハーネスでコード コンポーネントをテストしてデバッグする
Power Apps コンポーネント テスト ハーネスは Microsoft によって構築されたユーティリティであり、ローカライズされた環境で Power Apps コンポーネントをすばやくレンダリングするのに役立ちます。 このモジュールのコード コンポーネントの作成に関する演習を行っているなら、このユーティリティの動作は既に見ているはずです。 ローカル テスト ハーネスは、npm start コマンドを使用して、Power Apps コンポーネント プロジェクト内から開始できます。
テスト ハーネスを起動すると、前の演習で作成したものと同じように、コンポーネントがブラウザー ウィンドウに表示されます。
コンテキストの入力
テスト ハーネスでは、コンポーネントにさまざまな入力を使用して、レンダリング方法を指定することができます。これは、コンポーネントをさまざまな表示のコンテキストで適切にレンダリングするのに役立ちます。
コンテキストの入力ドロップダウン メニューでは、Web、タブレット、電話などのフォーム ファクターを選択できます。 また、幅と高さのフィールドを明示的に指定し、さまざまな寸法でのコンポーネントのレンダリングを確認することもできます。
データの入力
データの入力ドロップダウン メニューを使用すると、さまざまなデータ パラメーターが提供されたときにコンポーネントが期待どおりに機能することを確認でき、特定のフィールドで指定されているタイプに基づいてコンポーネントがどのようにレンダリングされるかを確認することもできます。
コンポーネントがデータセット コンポーネントの場合は、モック データが含まれる CSV ファイルを読み込むことができます。 コンポーネントを作成する対象のサンプルの環境から CSV をエクスポートするか、新しく CSV を作成することができます。
上記の例で新しい CSV ファイルを作成する場合は、次の例と同じようなファイルにしてください。
名前, 電話番号 1, 住所 1_市区町村
Joe, 123-555-0100, Seattle
Mary, 123-555-0101, Atlanta
Steve, 123-555-0102, Redmond
CSV が正常に読み込まれると、コンポーネントにそのレコードが表示されます。このレコードには、プロパティ コントロールと同様に、コンポーネントの対応するタイプ グループ (コンポーネントの ControlManifest.Input.xml ファイルで定義) で指定されているさまざまなタイプを割り当てることができます。
ブラウザーのデバッグ機能を使用したコード コンポーネントのデバッグ
最新のブラウザーのほとんどには、さまざまなデバッグ機能が組み込まれています。 Microsoft Edge、Google Chrome、Mozilla Firefox、Apple Safari にはそれぞれ、組み込みの開発ツールが用意されており、対話型デバッグを実行できます。 各ブラウザーの詳細については、次のリンクを参照してください。
| ブラウザー | 開発者ツールのドキュメント |
|---|---|
| Microsoft Edge | https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium |
| Google Chrome | https://developers.google.com/web/tools/chrome-devtools |
| Mozilla Firefox | https://developer.mozilla.org/docs/Tools/Debugger |
| Apple Safari | https://support.apple.com/guide/safari-developer/welcome/mac |
この演習では、Microsoft Edge を使用します。 アクティブな Microsoft Edge ブラウザーが開いた状態で、キーボードで F12 キーを押して Microsoft Edge の DevTools を起動します。
[要素] パネルで HTML を調べる
DevTools でようこそ次に表示されるタブは要素です。 要素を選択すると、[要素] パネルを使用して、ページにレンダリングされる HTML を確認できます。 次の 3 つのうちいずれかの方法でアクセスできる検査機能を使用して、コントロールがレンダリングされる場所に移動できます。
[要素] パネルの左上で検査する要素をページから選択しますアイコンを選択し、次にコンポーネント テスト ハーネスの要素を選択します。 右側のビューアの要素が選択されます (下の図の 3 を参照)。
コンポーネントの要素を強調表示して右クリックし、検査を選択します。
[要素] パネルで要素を選択します。
コンソール ログの検査と [コンソール] パネルでのスクリプトの実行
クライアント スクリプト内でデバッグ コンテキストを提供するためによく使われるメカニズムは、console.log() メソッドです。 コンポーネントのロジック内でログ記録を行う場合は、このメソッドを使用できます。 これらのログは、実行するたびに DevTools のコンソール パネルに表示され、コンポーネント内で実行されるロジックを追跡するのに役立ちます。 次の図は、テスト ハーネスからの 2 つのログの例を示したものです。
また、コンソールから独自のスクリプトを実行することもできます。 この方法は、実際の環境のコンテキストからさまざまなメソッド呼び出しやロジックをテストするために役立ちます。
[ソース] パネルでのデバッガーのブレークポイントの設定
DevTools の最も有用なユーティリティの 1 つは、変数とメソッド実装のフローを検査できるように、コードでデバッガーのブレークポイントを設定する機能です。 この例では、Power Apps コンポーネントの一部として開発した index.ts ファイルにブレークポイントを設定します。 次の例では、refreshData メソッドを実行するたびにブレークポイントで停止します。
コントロールのボタンを選択すると、このブレークポイントにヒットします。これにより、イベント ハンドラーのロジックを手動でステップ実行できます。 また、次の図に示すように、値 (変更された値など) を検査することもできます。
