Recetas de pruebas para componentes web: Parte 1 – Probando Componentes de Presentación

Comencemos nuestras pruebas unitarias, usaremos mocha para el lenguaje de pruebas y fixture de open-wc para renderizar el componente. También usaremos sinon para stubs y fakes

Como podéis ver, He creado un pseudo renderizador dentro de

Vamos a los casos de prueba reales

  1. Prueba si la tarjeta tiene una clasificación de película adecuada

Estaremos probando la siguiente línea con la entrada dada

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

Nuestro caso de prueba va como sigue

  1. Obtener el elemento o shadowRoot del renderizador de accesorios. Principalmente pruebo sobre el renderizador de sombras
  2. comprobar si el elemento contiene la salida esperada

Así que estamos esperando que la calificación de la película sea 7.2, por lo que según nuestra entrada dada, el caso de prueba debería tener éxito. Puede probar suministrando una entrada diferente.

Ahora ejecute npm run test para comprobar y probar la cobertura

2. Comprobar que el título de la película es correcto

3. Comprobar que el cartel de la película es correcto

4. Negativo: Comprobar que no tiene el cartel de la película

Así llegamos al final para probar nuestro componente web de presentación, en la siguiente parte pasaremos a probar los componentes con estado y lo más importante las pruebas de eventos personalizados.

Aquí está nuestro código final

Vamos a la segunda parte de la serie

Deja una respuesta

Tu dirección de correo electrónico no será publicada.