Testen Sie eine Komponente für Virtual Agent

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 2 Minuten Lesedauer

    • Testen Sie Ihre anwenderdefinierte 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 Testclient-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 des Typs „ package.json “ mit den richtigen Abhängigkeiten. 
      "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. Fügen Sie Beispieleigenschaften hinzu, die Sie als Anfangsstatus der Komponente in Ihrem Test verwenden möchten.
      1. Fügen Sie eine hinzu<component-name> /example/sampleProps.json mit anfänglichen Eigenschaften zum Rendern in Ihrem Test.
      Hier ist eine Beispieldatei vom Typ „ 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 zum Importieren von @servicenow/sdk-ci und der von Ihnen erstellten Beispieleigenschaftendatei hinzu.
      3. Fügen Sie die folgende Aussage hinzu und ersetzen Sie<component-name> mit dem Namen Ihrer Komponente, um das Test-Tool mit den ursprü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 eine Beispieldatei vom Typ „ 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: example/index.js.
      offen Öffnet den Standardbrowser und navigiert zur Testseite.

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

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

      Die Komponente wird im Testclient-Tool geöffnet. Sie können die anfänglich bereitgestellten Daten im Feld JSON-Eingabedaten für anwenderdefiniertes Steuerelement und die Ausgabe der Komponente im Feld Rückgabedaten für anwenderdefiniertes Steuerelement sehen.

      Das Test-Client-Tool, in dem eine Beispiel-Schiebereglerkomponente angezeigt wird.

    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 für eine Instanz bereit.

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