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

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

始める前に

• 環境の設定
• プロジェクトの設定
• コンポーネントの開発
• 仮想エージェント と通信するためのプロパティの追加

必要なロール：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": "xanadu",
       "@servicenow/library-translate": "^18.0.0",
       "@servicenow/now-button": "xanadu",
       "@servicenow/now-dropdown": "xanadu",
       "@servicenow/sass-generic": "xanadu",
       "@servicenow/cli-archetype": "xanadu",
       "@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)] フィールドでコンポーネントの出力を確認できます。

   

次のタスク

コンポーネントが予想どおりに機能している場合は、インスタンスに展開します。「インスタンスへのコンポーネントの展開」を参照してください。

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

関連概念

• カスタムコンポーネントビルダー