Mocha: Come testare le viste di rendering espresso

Question

- Sfondo

Sto provando a testare un'applicazione Express. Questo è un progetto per hobby per me, quindi non ho usato Express per servire un API JSON (come di solito è fatto).

- Il problema

Il problema è che non riesco a trovare un modo per testare il contenuto della vista al fine di garantire che la pagina sia effettivamente reso contro il file di visualizzazione nel progetto stesso.

- che cosa ho provato

Per esempio, non riesco a testare una pagina di indice semplice, perché il file jade inizia con extends layout. Ciò rende difficile testare se il contenuto dinamico viene reso.

Qualcuno ha suggerimenti per verificare se la vista viene effettivamente resa?

it ('renders the index page', function(done) { 
    var jade = require('jade'); 
    var should = require('should'); 
    var fs = require('fs'); 

    supertest(app) 
    .get('/') 
    .expect(200) 
    .end(function(err, res) { 
     var rawJade = fs.readFileSync('./views/index.jade').toString(); 
     res.text.should.equal(rawJade.convertToHtml()); // jade supports a function like this 
    }); 
)}; 

Answer 1

Ci sono, come al solito, diversi modi per attaccare questo problema. Prima di continuare, ti incoraggio a chiederti perché hai bisogno di farlo. Test come questo sono estremamente volubili. Se fai qualche piccolo cambiamento, ti costringerà a riscrivere i test che ora stanno fallendo.

Detto questo, penso che il modo più semplice per iniziare ad aggiungere le prove che affermano rendering corretto è con https://github.com/cheeriojs/cheerio

Un esempio di base sarebbe simile al seguente:

it ('renders the index page', function(done) { 
 
    var should = require('should'); 
 
    var cheerio = require('cheerio'); 
 

 
    supertest(app) 
 
    .get('/') 
 
    .expect(200) 
 
    .end(function(err, res) { 
 
     err.should.not.be.ok(); 
 
     res.should.be.ok(); 
 
    
 
     var $ = cheerio.load(res.body); 
 
     var header = $('h1:first'); 
 
     header.should.equal('Hello World!'); 
 
    
 
     done(); 
 
    }); 
 
)};

Ora non testerai se la vista renderizzata sembra esattamente come vuoi (voglio dire che potresti farlo ma sarebbe noioso). Ma ciò significa anche che se si apportano piccoli cambiamenti insignificanti, l'intera cosa non si sgretolerà. Invece, puoi concentrarti sulla verifica del corretto rendering degli aspetti fondamentali dell'interfaccia utente (ad esempio, il titolo della pagina è lì, con le proprietà ortografiche e di classe/id corrette)