Testen Sie eine Komponente für Virtual Agent

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 2 Minuten Lesedauer

    • Testen Sie Virtual AgentAnwenderdefinierte Komponente, bevor sie in Ihrer Instanz bereitgestellt wird.

    Vorbereitungen

    Erforderliche Rolle: virtual_agent_admin oder admin

    Warum und wann dieser Vorgang ausgeführt wird

    Virtual AgentKomponenten müssen innerhalb von getestet werden Virtual AgentClient-Chat, um sicherzustellen, dass die Komponente korrekt auf Anwendereingaben reagiert. Sie können Eigenschaften in Ihrem Komponentenprojekt festlegen, um Ihre Komponente in einem Mock zu testen Virtual AgentClient-Tool testen.

    Prozedur

    1. Fügen Sie Ihrem Komponentenprojekt eine Abhängigkeit vom Test-Client-Tool hinzu.
      1. Öffnen Sie <component-name>/Package.JSON Datei in Ihrem Komponentenprojekt.
      2. Hinzufügen „@servicenow/sdk-ci“: „1,0.8“ Und „@servicenow/Library-translate“: „^18.0,0“ An DevenAbhängigkeiten Objekt.
      Hier ist ein Beispiel Package.JSON Datei mit den richtigen Abhängigkeiten. 
      "dependencies": {
    "@servicenow/ui-renderer-snabbdom": "Zürich",
    "@servicenow/library-translate": "^18.0.0",
    "@servicenow/now-button": "Zürich",
    "@servicenow/now-dropdown": "Zürich",
    "@servicenow/sass-generic": "Zürich",
    "@servicenow/cli-archetype": "Zürich",
    "@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 ein hinzu <component-name>/example/sampleProps.JSON Datei mit anfänglichen Eigenschaften, die in Ihrem Test gerendert werden sollen.
      Hier ist ein Beispiel SampleProps.JSON Datei 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 Beispiel.js Datei zum Öffnen der Komponente über das Test-Client-Tool mithilfe der von Ihnen erstellten Beispieleigenschaften.
      1. Öffnen Sie <component-name>/example/Element.js Datei in Ihrem Komponentenprojekt.
      2. Fügen Sie Anweisungen zum Importieren hinzu @servicenow/sdk-ci Und die Beispieleigenschaftendatei, die Sie erstellt haben.
      3. Fügen Sie die folgende Anweisung hinzu und ersetzen Sie sie <component-name> Mit dem Namen Ihrer Komponente, um das Testtool mit anfänglichen Daten 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 Beispiel.js Datei, 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 Entwicklungsserver-Befehl 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: Example/index.js .
      offen Öffnet den Standardbrowser und navigiert zur Testseite.

      Standard: Falsch.
      port Port, auf dem der Entwicklungsserver ausgeführt wird.

      Standard: 8081.
      host Hostadresse, die verwendet werden soll, wenn Ihr lokaler Entwicklungsserver für andere extern zugänglich sein soll. Normalerweise auf festgelegt 0.0.0.0 
      $ snc ui-component develop --entry example/hello.js --open --port 3000

      Die Komponente wird im Test-Client-Tool geöffnet. Sie können die bereitgestellten Anfangsdaten in anzeigen JSON-Eingabedaten für anwenderdefinierte Steuerung Feld und Ausgabe der Komponente in Anwenderdefinierte Steuerung Gibt Daten Zurück Feld.

      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. Anweisungen finden Sie unter ServiceNow® Developer Site.

    Fügen Sie die Komponente nach der Entwicklung und der Bereitstellung in Ihrer Instanz zu hinzu Virtual Agent-DesignerVerwenden einer anwenderdefinierten Steuerung und Definition. Weitere Informationen finden Sie unter Anwenderdefinierte Virtual Agent-Steuerungen .