Comment se moquer de fenêtre de document avec moka/chai

Quand j'essaie de test de l'unité de la getElement fonction

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

moka ne sais rien à propos de document, j'ai donc pensé que vous pourriez faire quelque chose comme ceci:

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

Bien que cela fonctionne, je me demande si c'est la bonne approche et peut-être il ya un paquet disponible pour résoudre ce problème, parce que mon approche peut obtenir laborieux si plus navigateur de l'API sont utilisées ?

OriginalL'auteur Jeanluca Scaljeri | 2016-04-08

  1. 15

    J'écris des tests similaires à ce que vous avez proposé quand j'avais simplement besoin de se moquer d'une certaine fonction dans la fenêtre:

    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;
});

    J'ai été en utilisant maquette du navigateur dans d'autres tests quand j'ai voulu le plus complet de la fenêtre de l'objet:

    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;
});

    Notez que vous voulez probablement pour restaurer la fenêtre de l'objet (global.window = windowRef; ci-dessus) après jouer avec globals.

    mondiale.fenêtre a fonctionné pour moi, vous le recommandons fortement que vous n'avez pas besoin d'un libs.
    J'ai utilisé l'idée ici, mais je préfère const fenêtre = global.fenêtre; global.fenêtre = {...}; ... mondiale.window=; Dans le cas d'un dumby objet de la fenêtre est ajoutée à l'échelle mondiale.
    Vrai! Modifié pour refléter le fait que maintenant.
    de la fenêtre ne sera pas restaurer la veuve de l'objet depuis la fenêtre const créé avec window = global.window est une copie en référence. Au lieu de cela, vous pouvez cloner la fenêtre en haut de l'essai avec: preservedWindow = Object.assign({}, window) puis réaffecter quand faire un test: global.window = preservedWindow (remarque qui pourrait encore être problématique, puisque l'Objet.attribuer seulement une copie, mais devrait être assez bon dans la plupart des cas)
    Hmm, ça ne serait pas mieux d'utiliser la fenêtre d'origine de l'objet au lieu d'une copie?

    OriginalL'auteur Simon Bengtsson

  2. 12

    Il y a quelques options qui s'offrent à vous:

    Option 1: Utilisation De JSDOM

    Par l'ajout d'un DOM à votre code, vous pouvez l'unité de test beaucoup de votre code côté client dans node.js

    Option 2: Utilisation de MOKA sur le client

    Moka ne s'exécutent à l'intérieur du client et vous pouvez l'utiliser côté client séparée des tests unitaires. Ceci tend à être mon approche préférée que je puisse le tester à l'encontre de certains navigateurs et pas un spécifique JS implantation.

    Option 3: Utilisation PhantomJS

    PhantomJS vous permet de contrôler un navigateur sans au sein de votre environnement de test.

    Option 4: Headless Chrome

    Maintenant que Headless Chrome est sorti, le PhantomJS le responsable a pris sa retraite.

    Je suppose que le JSDOM version est la plus rapide. Il ressemble à ce que j'ai besoin!
    Pourquoi avez-vous de la croix-out PhantomJS? Ne pas 2.0 résoudre les problèmes?
    PhantomJS développement est suspendu jusqu'à nouvel avis (plus de détails)." -- Je ne peux pas recommander un paquet qui n'est plus maintenu lorsqu'il existe d'autres options disponibles.
    Je tourne le dos un instant/mois-ou-so....

    OriginalL'auteur Jeremy J Starcher