Ricette di test per componenti web: Parte 1 – Test dei componenti di presentazione

Iniziamo i nostri test unitari, useremo mocha come linguaggio di test e fixture da open-wc per il rendering del componente. Useremo anche sinon per stub e fake

Come potete vedere, Ho creato uno pseudo renderer all’interno di ‘el’

Passiamo ai casi di test veri e propri

  1. Testare se la scheda ha una valutazione appropriata del film

Testeremo la seguente linea con un dato input

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

Il nostro caso di test va come segue

  1. Prendere l’elemento o shadowRoot dal fixture renderer. Io per lo più provo su shadow renderer
  2. controlla se l’elemento contiene l’output previsto

Quindi ci aspettiamo che il nostro film Rating sia 7.2, quindi secondo il nostro input dato, il test case dovrebbe avere successo. Puoi provare a fornire un input diverso.

Esegui ora npm run test per controllare e testare la copertura

2. Controlla che il titolo del film sia corretto

3. Controlla che il poster del film sia corretto

4. Negativo: Controllare che non ci sia la locandina del film

Così finiamo di testare il nostro componente web di presentazione, nella prossima parte andremo a testare i componenti statici e più importante il test degli eventi personalizzati.

Ecco il nostro codice finale

Passa alla seconda parte della serie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.