Testar um componente para Virtual Agent

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 2 min. de leitura

    • Teste seu componente personalizado Virtual Agent antes de implantá-lo em sua instância.

    Antes de Iniciar

    Função exigida: virtual_agent_admin ou admin

    Por Que e Quando Desempenhar Esta Tarefa

    Os componentesVirtual Agent devem ser testados no bate-papo do cliente Virtual Agent para garantir que o componente responda corretamente à entrada do usuário. Você pode definir propriedades em seu projeto de componente para testar seu componente em uma ferramenta cliente de teste simulada Virtual Agent.

    Procedimento

    1. Adicione uma dependência na ferramenta cliente de teste ao seu projeto de componente.
      1. Abrir o<component-name> Arquivo /package.json no seu projeto de componente.
      2. Adicione "@servicenow/sdk-ci": "1.0.8" e "@servicenow/library-translate": "^18.0.0" ao objeto devDependencies.
      Este é um exemplo de arquivo package.json com as dependências corretas. 
      "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. Adicione propriedades de amostra para usar como o estado inicial do componente em seu teste.
      1. Adicionar um<component-name> Arquivo /example/sampleProps.json com propriedades iniciais a serem renderizadas no teste.
      Este é um exemplo de arquivo sampleProps.json com propriedades iniciais definidas para um componente do controle deslizante. 
      {	
	"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. Atualize o arquivo example.js para abrir o componente por meio da ferramenta cliente de teste usando as propriedades de amostra que você criou.
      1. Abrir o<component-name> Arquivo /example/element.js no seu projeto de componente.
      2. Adicione instruções para importar @servicenow/sdk-ci e o arquivo de propriedades de amostra que você criou.
      3. Adicione a seguinte declaração, substituindo<component-name> com o nome do seu componente para criar a ferramenta de teste com dados iniciais de suas propriedades de amostra. 
        const el = document.createElement('tool-ci-custom-control-tester');
el.componentTagName="<component-name>";
el.initialExampleData=sampleProps;
document.body.appendChild(el);
      Aqui está um exemplo de arquivo example.js que abre o componente usando a ferramenta cliente de teste. 
      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. Execute o comando do servidor de desenvolvimento para exibir seu componente em um navegador de teste. 
      $ snc ui-component develop [--entry entry --open --port port --host host]

      Passe valores para esses parâmetros.

      Nome Descrição
      entrada Caminho para o módulo de teste no seu projeto de componente.

      Padrão: example/index.js.
      em aberto Abre o navegador padrão e navega até a página de teste.

      Padrão: falso.
      port Porta na qual o servidor de desenvolvimento é executado.

      Padrão: 8081.
      Host Endereço de host a ser usado se você quiser que seu servidor de desenvolvimento local seja acessível externamente por outras pessoas. Normalmente definido como 0.0.0.0 
      $ snc ui-component develop --entry example/hello.js --open --port 3000

      O componente é aberto na ferramenta cliente de teste. Você pode ver os dados iniciais fornecidos no campo Dados de entrada JSON do controle personalizado e a saída do componente no campo Dados de retorno do controle personalizado.

      A ferramenta cliente de teste exibindo um componente do controle deslizante de amostra.

    O que Fazer Depois

    Se o componente estiver funcionando conforme o esperado, implante-o em sua instância. Consulte Implantar um componente em uma instância.

    Depois de desenvolver o componente e implantá-lo em sua instância, adicione-o a Designer do Virtual Agent usando um controle e uma definição personalizados. Para obter mais informações, consulte Controles personalizados do Virtual Agent.