Escrever um teste do Jest para o serviço de conexão
Objetivos de aprendizagem
Após concluir esta unidade, você estará apto a:
- Listar os três adaptadores primários para serviços de conexão.
- Explicar os dados de simulação para o serviço de conexão.
- Entender as variáveis reativas e seus efeitos.
Testando o serviço @wire
Os componentes web do Lightning utilizam um serviço de conexão reativo criado no Lightning Data Service para ler os dados do Salesforce. Os componentes utilizam @wire
em sua classe JavaScript para ler os dados de um dos adaptadores de conexão nos módulos lightning/ui*Api
.
O serviço de conexão é parcialmente reativo porque suporta variáveis reativas. As variáveis reativas são prefixadas com um $
. Quando uma variável reativa muda, o serviço de conexão fornece novos dados. Se os dados existirem no cache do cliente, uma solicitação de rede pode não estar envolvida.
Usamos o utilitário de teste @salesforce/sfdx-lwc-jest
para testar como esses componentes tratam dados e erros do serviço de conexão.
O teste exige que você tenha total controle sobre a entrada que seu teste consome. Nenhum código externo ou dependências de dados são permitidos. Importamos a API de utilitário de teste de sfdx-lwc-jest
para simular os dados; assim, nosso teste não ficará dependente de fatores imprevisíveis como invocação remota ou latência do servidor.
Existem três adaptadores para simular dados de serviço de conexão.
- Adaptador de conexão genérico: O adaptador genérico emite dados sob demanda quando a API emit() é acionada. Ele não inclui informações adicionais sobre os próprios dados.
- Adaptador de conexão do Lightning Data Service (LDS): O adaptador LDS imita o comportamento do Lightning Data Service e inclui informações sobre as propriedades dos dados.
- Adaptador de conexão do Apex: O adaptador de conexão do Apex imita chamadas para um método do Apex e inclui qualquer status de erro.
Vamos analisar um decorador @wire
típico. Importe um adaptador de conexão usando a sintaxe de importação nomeada. Decore uma propriedade ou função com @wire
e especifique o adaptador de conexão. Cada adaptador de conexão define um tipo de dados.
Esse código importa o campo Account.Name e o utiliza no objeto de configuração de um adaptador de conexão.
Vamos analisar mais detalhadamente.
- A linha 8 está usando o decorador
@wire
para acessar o métodogetRecord
importado e passar a variável$recordId
reativa como seu primeiro argumento. O segundo argumento é uma referência aoAccount.Name
importado do esquema na linha 3. - A linha 9 pode ser uma função ou propriedade privada que recebe o fluxo de dados do serviço de conexão. Se for uma propriedade, os resultados são retornados para a propriedade de dados ou propriedade de erro da propriedade. Se for uma função, os resultados serão retornados em um objeto com uma propriedade de dados e uma propriedade de erro.
Agora vamos dar uma olhada nos diferentes adaptadores.
Usando o adaptador de conexão genérico
Primeiro, usamos o serviço @wire
com CurrentPageReference.
O serviço lightning-navigation oferece adaptadores e funções de conexão para gerar um URL ou navegar até uma referência de página. Vamos usar CurrentPageReference
para obter uma referência até a página atual no Salesforce e criar um teste.
- No Visual Studio Code, clique com o botão direto na pasta
LWC
e selecione SFDX: Criar componente web do Lightning. - Digite
wireCPR
como nome do novo componente. - Pressione Enter.
- Pressione Enter novamente para aceitar o local
force-app/main/default/lwc
padrão. - Na nova pasta
wireCPR/__tests__
, abra o arquivowireCPR.test.js
. - Substitua o novo arquivo por:
- Salve o arquivo e execute os testes.
Vamos analisar mais detalhadamente.
- A linha 3 tem uma nova importação:
CurrentPageReference
. - A linha 6 captura um arquivo com dados simulados de
PageReference
. Ainda não criamos isso, então essa é a primeira razão para o erro do teste. Corrigiremos o problema em seguida. - É na linha 26 que preenchemos os dados simulados usando
emit()
. - A linha 28 inicia a Promessa que espera que os dados simulados sejam atualizados no
preElement
.
Vamos criar o arquivo de dados de teste e atualizar o código para que o teste seja aprovado. Primeiro, crie um novo diretório no diretório __tests__
para armazenar o arquivo de dados simulado.
- Clique com o botão direito do mouse no diretório
__tests__
e selecione Nova pasta. - Digite
data
como nome do novo componente. - Pressione Enter.
- Clique com o botão direito do mouse no diretório
data
e selecione Novo arquivo. - Insira
CurrentPageReference.json
. - Pressione Enter.
- Insira o bloco de código json a seguir no novo arquivo:
- Salve o arquivo e execute os testes.
- O teste recebe essa mensagem de erro. Excelente. Mesmo um teste com falha pode promover o progresso ao identificar rapidamente qualquer problema enquanto você trabalha com o código.
Em seguida, adicionamos o código HTML e JavaScript.
- Abra
wireCPR.html
. - Adicione o código a seguir dentro das marcas
template
: - Salve o arquivo.
- Abra
wireCPR.js
e substitua o código pelo seguinte: - Salve o arquivo e execute os testes.
- Os testes passam.
Vamos conferir o que está acontecendo. Quando o adaptador @wire
é usado, busca informações retornadas de um serviço. Precisamos criar uma simulação desses dados para utilizar em vez de fazer a chamada para o serviço a fim de obter os dados. Assim, continuamos a testar apenas os itens que temos atualmente e não aspectos fora de nosso escopo. Isso também ajuda a manter a rapidez dos testes.
Usando o adaptador de conexão do Lightning Data Service
Em seguida, utilizamos @wire
com o Lightning Data Service (LDS). O LDS concede acesso rápido a objetos personalizados e padrão. Nosso componente obtém dados do Salesforce usando o LDS e os exibe. Criaremos o teste para verificar se os dados são exibidos como esperado usando o adaptador LDS.
- Crie um novo componente web do Lightning no Visual Studio Code.
- Defina o nome como
wireLDS
. - Substitua o código no arquivo de teste
wireLDS.test.js
: - Salve o arquivo e execute os testes.
- O teste falha devido à falta do arquivo de dados simulado que criamos a seguir.
Antes disso, vamos analisar o código de teste para ver o que está acontecendo.
- A linha 3 tem uma nova importação:
getRecord
.getRecord
está vindo da API LDS. - A linha 6 está simulando novamente os dados do arquivo
getRecord.json
no diretóriodata
. - A linha 23 usa o método emit em
getRecord
commockGetRecord
como um argumento. - A linha 25 inicia o retorno da
Promessa
e conferimos que vários elementos são atualizados com os dados simulados.
Em seguida, criamos o arquivo de dados simulado e o restante dos arquivos para obter um teste que seja aprovado. Executamos os testes depois que cada arquivo é criado para ver a progressão dos erros de teste até que sejam aprovados.
- Crie o diretório
data
no diretório__tests__
. - Crie o arquivo de dados de teste com o nome
getRecord.json
. - Adicione o código a seguir:
- Salve o arquivo e execute os testes.
- O teste falha.
- Abra
wireLDS.html
e insira o código a seguir entre as marcas template: - Salve o arquivo e execute os testes.
- O teste falha novamente, mas estamos quase lá. Você só precisa adicionar o controlador JavaScript para obter os dados.
- Abra
wireLDS.js
e substitua todo o código por: - Salve o arquivo e execute os testes.
- Os testes passam.
Mas e se houver um erro ao obter os dados? Também é possível testá-lo. Vamos adicionar um novo bloco describe em nosso arquivo de teste wireLDS.test.js
.
- Adicione o código a seguir logo após o bloco describe “getRecord @wire data” para que esteja dentro do bloco describe “c-wire-l-d-s”. É possível aninhar blocos describe para ajudar a clarificar os testes.
- Salve o arquivo e execute os testes.
- Os testes passam porque o método
error()
está sendo utilizado nogetRecordAdapter
. Isso gera um erro nos dados simulados para queaccount.error
seja verdadeira.
Usando o adaptador de conexão do Apex
Em seguida, vamos nos aprofundar no Apex e ver como podemos usar @wire
para testá-lo.
A classe do Apex que o LWC está importando é considerada uma conexão externa que precisará ser simulada. Isso significa que podemos testar sem precisar criar a classe do Apex. Tudo o que precisamos fazer é simular a resposta esperada da chamada do Apex. Neste caso, estamos esperando exibir contas que são retornadas da classe do Apex. Criaremos testes que esperem que as contas sejam exibidas quando retornadas, ou uma mensagem se nenhuma for retornada.
Vamos criar o LWC que o utiliza.
- Crie um novo componente web do Lightning no Visual Studio Code.
- Defina o nome como
wireApex
. - Substitua o código no arquivo de teste
wireApex.test.js
: - Salve o arquivo e execute os testes.
- Você recebe um erro para o arquivo de dados simulado ausente.
A maior parte do código é familiar. Há um novo item, jest.clearAllMocks()
, no código de limpeza para redefinir as simulações entre os testes. Isso é necessário porque temos dois arquivos fictícios para dois testes diferentes. O primeiro teste procura a chamada do Apex para enviar seis contas. O segundo teste declara o que acontece se nenhuma conta for encontrada. O último é o teste para declarar o que acontece se o Apex tiver um erro.
Vamos adicionar os arquivos de dados simulados e o restante do código.
- Crie o diretório
data
no diretório__tests__
. - Crie dois arquivos no novo diretório
data
chamadosgetAccountList.json
egetAccountListNoRecords.json
. - Insira o código abaixo em
getAccountList.json
: - O arquivo
getAccountListNoRecords.json
é preenchido com um objeto JSON em branco: - Agora insira esse código entre as marcas
template
emwireApex.html
: - Conclua ao substituir o código no
wireApex.js
com o seguinte: Observe que estamos obtendo apenas o métodogetAccountList
da classe do ApexAccountController
. Lembre-se: esse método precisa ser anotado com@AuraEnabled(cacheable=true)
para que funcione com LWCs. O@wire
o utiliza para preencher uma função comerror
oudata
retornados. - Salve todos os arquivos e execute os testes.
- Os testes passam.
Na próxima unidade, você abordará a simulação de outros componentes e concluirá as maneiras de testar os componentes web do Lightning com Jest.
Recursos
- Guia do desenvolvedor: Componentes web do Lightning: Usar o serviço de conexão para obter dados
- Guia do desenvolvedor: Componentes web do Lightning: adaptadores e funções de conexão do lightning/ui*Api
- Guia do desenvolvedor: Componentes web do Lightning: Escrever testes de Jest para componentes web do Lightning que utilizam o serviço de conexão
- Guia do desenvolvedor da API de interface do usuário: Obter um registro
- Extensões do Salesforce para Visual Studio Code: Componentes web do Lightning: Teste
- GitHub: salesforce/wire-service-jest-util
- GitHub: trailheadapps/lwc-recipes
- GitHub: wire-service-jest-util/docs/Migrating from version 2.x to 3.x