Testing Recipes for web components: Parte 1 – Testando Componentes de Apresentação

Deixamos começar nossos testes unitários, estaremos usando mocha para linguagem de teste e fixture from open-wc para renderizar o componente. Também estaremos usando sinon para stubs e fakes

Como você pode ver, Eu criei um pseudo renderizador dentro de ‘el’

Vamos para casos de teste reais

  1. Testar se o cartão tem uma classificação de filme apropriada

Testaremos na linha seguinte com a entrada dada

<div class="movie__rating">${movie.vote_average}</div>

Nosso caso de teste vai como segue

  1. Pega o elemento ou a sombraRoot do renderizador de fixação. Eu testei principalmente sobre o renderizador de sombra
  2. verifica se o elemento contém saída esperada

Então estamos esperando que a classificação do filme seja 7,2, então, de acordo com a nossa entrada dada, o caso de teste deve ser bem sucedido. Você pode tentar fornecendo entrada diferente.

Executar agora npm run test para verificar e testar a cobertura

2. Verifique se o filme tem título apropriado

3. Verifique se o filme tem poster apropriado

4. Negativo: Check não tem cartaz do filme

Então vamos terminar para testar o nosso componente web de apresentação, na próxima parte vamos testar os componentes de estado e mais importante o teste de eventos personalizados.

Aqui está o nosso código final

Vá para a segunda parte da série

Deixe uma resposta

O seu endereço de email não será publicado.