Come finestra/documento con moka/chai

Question

beffe quando cerco di unit test la funzione getElement

class BarFoo { 
    getElement() { 
     return document.querySelector('#barfoo'); 
    } 
} 

moka non sa nulla di document, così ho pensato che si potrebbe fare qualcosa di simile:

beforeEach(() => { 
    global.document = { 
     querySelector:() => { ... } 
    } 
} 

Anche se questo funziona, mi chiedo se questo è l'approccio corretto e forse c'è un pacchetto disponibile per risolvere questo problema, perché il mio approccio può ottenere faticoso se si utilizzano API più del browser di?

Answer 1

Ci sono alcune opzioni a vostra disposizione:

Opzione 1: Uso JSDOM

aggiungendo un DOM al codice, è possibile unit test molto del vostro codice lato client all'interno node.js

Opzione 2: utilizzare MOCHA sul client

Mocha viene eseguito all'interno del client ed è possibile utilizzare test di unità separati lato client. Questo tende ad essere il mio approccio preferito in quanto posso testare specifici browser e non uno specifico impianto JS.

Opzione 3: utilizzare PhantomJS

PhantomJS consente di controllare un browser senza testa all'interno del vostro ambiente di test.

Opzione 4: Headless Chrome

Ora che senza testa Chrome è fuori, la PhantomJS manutentore è in pensione.

Answer 2

ho scritto test simile a quello che avete proposto quando ho solo bisogno di prendere in giro una certa funzione sulla finestra:

it('html test', function() { 
    const window = global.window; 
    global.window = {document: {querySelector: function() { return null; }}}; 
    let lib = require('lib-that-uses-queryselector'); 
    assert(true); 
    global.window = window; 
}); 

ho utilizzato mock-browser in altri test, quando ho voluto un oggetto più completa vetrina:

it('html test', function() { 
    const window = global.window; 
    let MockBrowser = require('mock-browser').mocks.MockBrowser; 
    global.window = new MockBrowser().getWindow(); 
    let lib = require('lib-that-uses-window'); 
    assert(true); 
    global.window = window; 
}); 

Nota che, probabilmente, si desidera ripristinare l'oggetto finestra (global.window = window; sopra) dopo messing with globals.