仮想エージェント のコンポーネントのテスト

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：5分

    • 仮想エージェント カスタムコンポーネントをインスタンスに展開する前にテストします。

    始める前に

    必要なロール：virtual_agent_admin または admin

    このタスクについて

    仮想エージェント コンポーネントを 仮想エージェント クライアントチャット内でテストし、コンポーネントがユーザー入力に正しく応答することを確認する必要があります。コンポーネントプロジェクトのプロパティを設定して、モック 仮想エージェントテストクライアントツールでコンポーネントをテストできます。

    手順

    1. テストクライアントツールの依存関係をコンポーネントプロジェクトに追加します。
      1. コンポーネントプロジェクトで <component-name>/package.json ファイルを開きます。
      2. "@servicenow/sdk-ci": "1.0.8" と "@servicenow/library-translate": "^18.0.0" を devDependencies オブジェクトに追加します。
      正しい依存関係を含む package.json ファイルの例を次に示します。 
      "dependencies": {
    "@servicenow/ui-renderer-snabbdom": "チューリッヒ",
    "@servicenow/library-translate": "^18.0.0",
    "@servicenow/now-button": "チューリッヒ",
    "@servicenow/now-dropdown": "チューリッヒ",
    "@servicenow/sass-generic": "チューリッヒ",
    "@servicenow/cli-archetype": "チューリッヒ",
    "@servicenow/sdk-ci": "1.0.8"
}
    2. テストでコンポーネントの初期ステータスとして使用するサンプルプロパティを追加します。
      1. <component-name>/example/sampleProps.json ファイルに、テスト内で表示する初期プロパティを追加します。
      以下は、スライダーコンポーネントに初期プロパティが設定された sampleProps.json ファイルの例です。 
      {	
	"label": "How many penguins do you want to buy?",
	"defaultValue": 10,
	"sliderMin": 20,
	"sliderMax": 80,
	"unitName": "penguins",
	"unitIcon": "https://image.flaticon.com/icons/svg/141/141836.svg"  
}
    3. example.js ファイルを更新し、作成したサンプルプロパティを使用して、テストクライアントツールでコンポーネントを開きます。
      1. コンポーネントプロジェクトで <component-name>/example/element.js ファイルを開きます。
      2. @servicenow/sdk-ci と作成したサンプルプロパティファイルをインポートするステートメントを追加します。
      3. <component-name> を、サンプルプロパティの初期データを使用してテストツールを作成するためのコンポーネント名で置き換えて、次のステートメントを追加します。 
        const el = document.createElement('tool-ci-custom-control-tester');
el.componentTagName="<component-name>";
el.initialExampleData=sampleProps;
document.body.appendChild(el);
      以下は、テストクライアントツールを使用してコンポーネントを開く example.js ファイルの例です。 
      import '../src/now-chat-control-slider';

import '@servicenow/sdk-ci';

import sampleProps from './sampleProps.json';

const el = document.createElement('tool-ci-custom-control-tester');
el.componentTagName="<component-name>";
el.initialExampleData=sampleProps;
document.body.appendChild(el);
    4. 開発サーバーコマンドを実行して、テストブラウザーでコンポーネントを表示します。 
      $ snc ui-component develop [--entry entry --open --port port --host host]

      これらのパラメーターに値を渡します。

      名前 説明
      エントリー コンポーネントプロジェクト内のテストモジュールへのパス。

      デフォルト： example/index.js。
      open デフォルトのブラウザーを開き、テストページに移動します。

      デフォルト値：false。
      port 開発サーバーが実行されているポート。

      デフォルト：8081。
      host ローカル開発サーバーを他のユーザーが外部からアクセスできるようにする場合に使用するホストアドレス。通常は 0.0.0.0 に設定します 
      $ snc ui-component develop --entry example/hello.js --open --port 3000

      コンポーネントがテストクライアントツールで開きます。[カスタムコントロールの JSON 入力データ (Custom Control JSON Input Data)] フィールドで指定された初期データを、[カスタムコントロールの戻りデータ (Custom Control Return Data)] フィールドでコンポーネントの出力を確認できます。

      サンプルスライダーコンポーネントを表示するテストクライアントツール

    次のタスク

    コンポーネントが予想どおりに機能している場合は、インスタンスに展開します。手順については、 ServiceNow® 開発者サイト.

    コンポーネントを開発してインスタンスに展開した後、カスタムコントロールと定義を使用して 仮想エージェントデザイナー に追加します。詳細については、「仮想エージェントのカスタムコントロール」を参照してください。