Come mock/finestra del documento con la moka/chai

Quando cerco di test di unità il getElement funzione

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

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

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 più browser API sono utilizzati ?

 

2 Replies
  1. 16

    Ci sono un paio di opzioni a vostra disposizione:

    Opzione 1: Utilizzare JSDOM

    Con l’aggiunta di un DOM per il codice, è possibile unit test molto di codice lato client all’interno di node.js

    Opzione 2: Uso la MOKA sul client

    Moka fa eseguire all’interno del client e non è possibile utilizzare diversi client-side unit test. Questo tende ad essere il mio approccio preferito come posso testare contro browser specifici e non specifici JS impianto.

    Opzione 3: Utilizzare PhantomJS

    PhantomJS consente il controllo di un browser headless all’interno del vostro ambiente di test.

    Opzione 4: Headless Chrome

    Ora che Headless Chrome, il PhantomJS manutentore si è ritirato.

    • Credo che il JSDOM versione è la più veloce. Sembra che quello che ho bisogno!
    • Perché hai croce PhantomJS? Non 2.0 risolvere i problemi?
    • PhantomJS sviluppo è sospeso fino a nuovo avviso (per ulteriori dettagli).” — Non posso consigliare un pacchetto che non è più mantenuto quando ci sono altre opzioni disponibili.
    • Mi rivolgo la mia schiena per un momento/mese-o-così….
  2. 15

    Ho scritto delle prove di simile a ciò che è proposto quando avevo solo bisogno di deridere una certa funzione di finestra:

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

    Sono stato con mock-browser nelle altre prove, quando ho voluto una più completa finestra oggetto:

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

    Notare che probabilmente si desidera ripristinare la finestra object (global.window = windowRef; sopra), dopo messing con globals.

    • globale.la finestra ha funzionato per me, consiglio vivamente in quanto non necessita di alcun ulteriore libs.
    • Ho usato l’idea, ma io preferisco const finestra = global.finestra; globale.finestra = {…}; … globale.finestra = finestra; Nel caso di un dumby finestra sempre lo stesso oggetto viene aggiunto a scala globale.
    • Vero! Modificato per riflettere il fatto che ora.
    • finestra non ripristina la vedova oggetto in quanto la finestra const creato con window = global.window è una copia per riferimento. Invece è possibile clonare la finestra in cima alla prova con: preservedWindow = Object.assign({}, window) quindi riassegnare una volta fatto il test: global.window = preservedWindow (nota che potrebbe essere problematico in quanto Oggetto.assegnare soltanto una copia superficiale, ma dovrebbe essere sufficiente nella maggior parte dei casi)
    • Hmm, non sarebbe meglio utilizzare la finestra originale oggetto invece di una copia?

Lascia un commento