Testar um componente para Virtual Agent

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

    • Teste o componente personalizado Virtual Agent antes de implantá-lo na instância.

    Antes de Iniciar

    Função necessária: virtual_agent_admin ou admin

    Por Que e Quando Desempenhar Esta Tarefa

    Virtual Agent componentes 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 de cliente de teste fictícia 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 em seu projeto de componente.
      2. Adicione "@servicenow/sdk-ci": "1.0.8" e "@servicenow/library-translate": "^18.0.0" ao objeto devDependencies.
      Aqui está um exemplo de arquivo package.json com as dependências corretas. 
      "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. 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.
      Aqui está um exemplo de arquivo sampleProps.json com propriedades iniciais definidas para um componente de 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 de cliente de teste usando as propriedades de amostra que você criou.
      1. Abrir o<component-name> Arquivo /example/element.js em 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);
      Este é um exemplo de arquivo example.js que abre o componente usando a ferramenta de 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.
      porta Porta em que o servidor de desenvolvimento é executado.

      Padrão: 8081.
      Host Endereço de host a ser usado se você quiser que o 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 de cliente de teste. Você pode ver os dados iniciais fornecidos no campo Dados de entrada JSON de controle personalizado e a saída do componente no campo Dados de retorno de controle personalizado.

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

    O que Fazer Depois

    Se o componente estiver funcionando conforme o esperado, implante-o na 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.