Se si adotta l'approccio TDD (Test-Driven Development) allo sviluppo con Node.js, è bene tenere a mente il rapporto esistente tra la struttura HTML delle nostre pagine e i test che vengono eseguiti.

Solitamente per verificare la funzionalità della navigazione della nostra applicazione si utilizza un browser headless che simula l'avvenuto click su un determinato link HTML.

Quindi nella pagina di approdo si verifica la presenza di un determinato elemento del DOM che dovrebbe confermare che siamo sulla pagina corretta e che tale pagina è stata restituita correttamente.

I problemi sorgono quando la struttura HTML non segue le buone pratiche di base relative alla semantica dell'uso degli elementi HTML, ossia:

  1. Gli elementi univoci dovrebbero avere un attributo id.
  2. Gli elementi ripetuti dovrebbero avere un attributo class.

Consideriamo questo frammento HTML:

<form class="form"></form>
<form class="form"></form>

Immaginiamo che il primo form sia un form per i contatti ed il secondo un form per l'iscrizione alla newsletter. Giustamente a livello CSS si è ritenuto corretto usare la stessa classe per poter condividere gli stili ma ora a livello di test risulta difficile distinguerli e selezionarli.

In realtà si sarebbe dovuto scrivere:

<form id="contact-form" class="form"></form>
<form id="newsletter-form" class="form"></form>

Oppure:

<form class="form contact-form"></form>
<form class="form newsletter-form"></form>

La seconda soluzione è meno specifica, ma si può usare quando ad esempio ci sono due form di iscrizione a due newsletter distinte.

Seguire quindi le buone pratiche della semantica degli elementi HTML semplifica di molto la realizzazione dei test.