Testen Sie eine Komponente für Virtual Agent

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 2 Minuten Lesedauer

    • Testen Sie Ihre benutzerdefinierte Komponente Virtual Agent, bevor Sie sie in Ihrer Instanz bereitstellen.

    Vorbereitungen

    Erforderliche Rolle: virtual_agent_admin oder admin

    Warum und wann dieser Vorgang ausgeführt wird

    Virtual Agent -Komponenten müssen im Virtual Agent -Client-Chat getestet werden, um sicherzustellen, dass die Komponente richtig auf Benutzereingaben reagiert. Sie können Eigenschaften in Ihrem Komponentenprojekt festlegen, um Ihre Komponente in einem Mock-Test-Client-Tool Virtual Agent zu testen.

    Prozedur

    1. Fügen Sie Ihrem Komponentenprojekt eine Abhängigkeit vom Test-Client-Tool hinzu.
      1. Öffnen Sie<component-name> Datei /package.json in Ihrem Komponentenprojekt.
      2. Fügen Sie „@servicenow/sdk-ci“: „1.0.8“ und „@servicenow/library-translate“: „^18.0.0“ dem devDependencies- Objekt hinzu.
      Hier ist eine Beispieldatei „package.json “ mit den richtigen Abhängigkeiten. 
      "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. Fügen Sie Beispieleigenschaften hinzu, die als Anfangsstatus der Komponente in Ihrem Test verwendet werden sollen.
      1. Fügen Sie einen hinzu<component-name> Datei /example/sampleProps.json mit anfänglichen Eigenschaften, die in Ihrem Test gerendert werden sollen.
      Hier ist eine Beispieldatei sampleProps.json mit anfänglichen Eigenschaften, die für eine Schiebereglerkomponente festgelegt sind. 
      {	
	"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. Aktualisieren Sie die Datei „ example.js “, um die Komponente über das Test-Client-Tool mit den von Ihnen erstellten Beispieleigenschaften zu öffnen.
      1. Öffnen Sie<component-name> Datei /example/element.js in Ihrem Komponentenprojekt.
      2. Fügen Sie Anweisungen hinzu, um @servicenow/sdk-ci und die von Ihnen erstellte Beispieleigenschaftendatei zu importieren.
      3. Fügen Sie die folgende Anweisung hinzu: Ersetzen Sie<component-name> mit dem Namen Ihrer Komponente, um das Testtool mit den Anfangsdaten aus Ihren Beispieleigenschaften zu erstellen. 
        const el = document.createElement('tool-ci-custom-control-tester');
el.componentTagName="<component-name>";
el.initialExampleData=sampleProps;
document.body.appendChild(el);
      Hier ist ein Beispiel für die Datei example.js, die die Komponente mit dem Test-Client-Tool öffnet. 
      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. Führen Sie den Entwicklungsserverbefehl aus, um Ihre Komponente in einem Testbrowser anzuzeigen. 
      $ snc ui-component develop [--entry entry --open --port port --host host]

      Übergeben Sie Werte für diese Parameter.

      Name Beschreibung
      Eintrag Pfad zum Testmodul in Ihrem Komponentenprojekt.

      Standard: beispiel/index.js.
      offen Öffnet den Standardbrowser und navigiert zur Testseite.

      Standard: false.
      port Port, an dem der Entwicklungsserver ausgeführt wird

      Standard: 8081.
      host Zu verwendende Hostadresse, wenn Ihr lokaler Entwicklungsserver von extern für andere zugänglich sein soll. In der Regel auf 0.0.0.0festgelegt 
      $ snc ui-component develop --entry example/hello.js --open --port 3000

      Die Komponente wird im Test-Client-Tool geöffnet. Sie sehen die Anfangsdaten im Feld JSON-Eingabedaten für benutzerdefinierte Steuerung und die Ausgabe der Komponente im Feld Rückgabedaten für benutzerdefinierte Steuerung.

      Das Test-Client-Tool, das eine Beispiel-Schiebereglerkomponente anzeigt.

    Nächste Maßnahme

    Wenn Ihre Komponente wie erwartet funktioniert, stellen Sie sie in Ihrer Instanz bereit. Weitere Informationen finden Sie unter Stellen Sie eine Komponente in einer Instanz bereit.

    Nachdem Sie die Komponente entwickelt und in Ihrer Instanz bereitgestellt haben, fügen Sie sie mithilfe eines benutzerdefinierten Steuerelements und einer benutzerdefinierten Definition zu Virtual Agent-Designer hinzu. Weitere Informationen finden Sie unter Benutzerdefinierte Virtual Agent-Steuerungen.