Tester un composant pour Agent virtuel

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 2 minutes de lecture

    • Testez votre Agent virtuel composant personnalisé avant de le déployer sur votre instance.

    Avant de commencer

    Rôle requis : virtual_agent_admin ou admin

    Pourquoi et quand exécuter cette tâche

    Agent virtuel Les composants doivent être testés dans la Agent virtuel messagerie instantanée du client pour s’assurer qu’ils répondent correctement à l’entrée de l’utilisateur. Vous pouvez définir des propriétés dans votre projet de composant pour tester votre composant dans un outil client de test fictif Agent virtuel .

    Procédure

    1. Ajoutez une dépendance sur l’outil client de test à votre projet de composant.
      1. Ouvrez le fichier <component-name>/package.json dans votre projet de composant.
      2. Ajoutez « @servicenow/sdk-ci » : « 1.0.8 » et « @servicenow/library-translate » : « ^18.0.0 » à l’objet devDependencies .
      Voici un exemple package.json fichier avec les dépendances correctes. 
      "dependencies": {
    "@servicenow/ui-renderer-snabbdom": "washingtondc",
    "@servicenow/library-translate": "^18.0.0",
    "@servicenow/now-button": "washingtondc",
    "@servicenow/now-dropdown": "washingtondc",
    "@servicenow/sass-generic": "washingtondc",
    "@servicenow/cli-archetype": "washingtondc",
    "@servicenow/sdk-ci": "1.0.8"
}
    2. Ajoutez des exemples de propriétés à utiliser comme état initial du composant dans votre test.
      1. Ajoutez un fichier <nom-composant>/exemple/sampleProps.json avec les propriétés initiales à afficher dans votre test.
      Voici un exemple sampleProps.json fichier avec des propriétés initiales définies pour un composant de curseur. 
      {	
	"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. Mettez à jour le fichier example.js pour ouvrir le composant via l’outil client de test à l’aide des exemples de propriétés que vous avez créées.
      1. Ouvrez le fichier <component-name>/example/element.js dans votre projet de composant.
      2. Ajoutez des instructions pour importer @servicenow/sdk-ci et l’exemple de fichier de propriétés que vous avez créé.
      3. Ajoutez l’instruction suivante, en remplaçant <component-name> par le nom de votre composant pour créer l’outil de test avec les données initiales de vos exemples de propriétés. 
        const el = document.createElement('tool-ci-custom-control-tester');
el.componentTagName="<component-name>";
el.initialExampleData=sampleProps;
document.body.appendChild(el);
      Voici un exemple example.js fichier qui ouvre le composant à l’aide de l’outil client de test. 
      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. Exécutez la commande du serveur de développement pour afficher votre composant dans un navigateur de test. 
      $ snc ui-component develop [--entry entry --open --port port --host host]

      Transmettez des valeurs pour ces paramètres.

      Nom Description
      entry Chemin d’accès au module de test dans votre projet de composant.

      Par défaut : exemple/index.js.
      ouvert Ouvre le navigateur par défaut et accède à la page de test.

      Valeur par défaut : false.
      port Port où le serveur de développement s’exécute.

      Par défaut : 8081.
      hôte Adresse de l’hôte à utiliser si vous souhaitez que votre serveur de développement local soit accessible en externe par d’autres utilisateurs. Généralement défini sur 0.0.0.0 
      $ snc ui-component develop --entry example/hello.js --open --port 3000

      Le composant s’ouvre dans l’outil client de test. Vous pouvez voir les données initiales fournies dans le champ Données d’entrée JSON de contrôle personnalisé et la sortie du composant dans le champ Données de retour de contrôle personnalisé .

      L’outil client de test affichant un exemple de composant de curseur.

    Que faire ensuite

    Si votre composant fonctionne comme prévu, déployez-le sur votre instance. Consultez Déployer un composant sur une instance.

    Après avoir développé le composant et l’avoir déployé sur votre instance, ajoutez-le à l’aide Concepteur d'agent virtuel d’un contrôle et d’une définition personnalisés. Pour plus d’informations, consultez Contrôles personnalisés de Virtual Agent.