Introduction aux tests frontaux

Comment commencer à tester des applications frontales à l'aide de Mocha et Chai

Attention: cet article est ancien et peut ne pas refléter l'état actuel de la technique

Mocha est un outil de test génial et polyvalent. Il existe de nombreux frameworks de test, et j'ai choisi Mocha en raison de sa popularité et de sa facilité d'utilisation.

Voyons d'abord comment exécuter les tests dans un navigateur. Télécharger


Placez les fichiers respectifs mocha.js, chai.js, chai-jquery.js dans un sous-dossier test / sous sur votre site.

Choisissez votre fichier index.html et chargez-le, puis nous configurerons Mocha pour utiliser le style de test BDD et nous le chargerons dans un fichier appelé test.web.js, qui hébergera nos règles de test.

<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
  mocha.setup('bdd');
  expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>

À l'intérieur de votre corps, mettez un div # moka:

<div id="mocha"></div>

le fichier test / test.web.js est la pièce principale du jeu et hébergera les règles de test.

describe('Array', function(){
  describe('#indexOf()', function(){
    it('should return -1 when the value is not present', function(){
      [1,2,3].indexOf(5).should.equal(-1);
      [1,2,3].indexOf(0).should.equal(-1);
    })
  })
})

describe(‘After this’, function() { it(‘should be logged in’, function(done) { expect($(’#the-main-div’)).to.exist; done(); }); });

Ces tests peuvent maintenant être exécutés dans le navigateur, en ouvrant la console du navigateur et en tapantmocha.run().

C'est génial car pendant l'exécution des tests, vous pouvez regarder le changement d'écran et lire les messages de la console.

UtilisantPhantomJS- une implémentation WebKit sans tête - vous pouvez exécuter les tests dans le terminal. L'inconvénient est que PhantomJS n'est pas le véritable environnement dans lequel votre code s'exécutera, mais il est préférable pour la détection automatique des problèmes.

Comment faire? Téléchargez et installez PhantomJS. Installez Mocha en utilisant le globalnpminstallation:npm install -g mocha. Téléchargez ce packagehttps://github.com/Backbonist/front-tests, et placez-le dans le répertoire de votre projet, sous test / par exemple.

Vous pouvez ensuite exécuter vos tests en appelantphantomjs run-mocha.js http://test-site.com

Le problème avec cette approche est que vous ne pouvez pas exécuter par programme les tests exécutés dans l'environnement réel où ils seront exécutés. Ce n'est pas vraiment un problème lors de la construction de prototypes et du développement avant l'ouverture au public, mais en production, vous ne voulez pas exécuter la suite de tests à partir du navigateur chaque fois que vous souhaitez tester. Sur tous les navigateurs, non?Testemest fait pour cela. C'est juste un testeur, indépendant du framework de test, il peut donc exécuter Mocha, Jasmine, QUnit ou ce que vous utilisez.

  1. $ npm install testem -g

  2. allez dans le répertoire de test de votre application, tapez$ testem

  3. ouvrez le navigateur à l'emplacement spécifié pour exécuter les tests.

Vous pouvez exécuter les tests sur n'importe quel navigateur de votre choix en les lançant, ou dire à testem d'exécuter les tests pour vous en lançant

$ testem -l Chrome,Safari

Vous pouvez également utiliser testem en mode CI (Continuous Integration).

$ testem ci

cela lance automatiquement les tests spécifiés par le navigateur et les sorties dans un format nommé TAP, qui est lisible par nous les humains, et peut être entré dans un serveur d'intégration continue pour automatiser le processus.

Test du navigateur

Vous développerez probablement votre site sur Chrome ou Firefox: leurs outils de développement sont géniaux et vous aident à accélérer le processus.

Google Chrome a des versions distinctes que vous pouvez utiliser pour tester votre site Web. La version stable et normale et Chrome Canary.

Canary est un navigateur que vous pouvez exécuter côte à côte avec le Google Chrome normal. Son avantage est que vous obtenez des mises à jour quotidiennes de ce qui est consacré aux sources Chromium et que vous pouvez accéder aux nouvelles fonctionnalités 11 semaines avant leur envoi vers le principal canal Chrome stable, etbogues de fichiersi tu as besoin. Vous pouvez même le définir comme navigateur par défaut.

Mozilla a le sienFirefox tous les soirsqui fait la même chose que Chrome Canary: des mises à jour quotidiennes arriveront sur votre navigateur.

Vous voudrez peut-être utiliser leChaîne de développement Chrome, etFirefox Auroraqui représentent une version «moins à la pointe» que Canary / Nightly.

Pour tester Safari, vous pouvez utiliser leWebKit Nightly Builds. Lorsque vous utilisez WebKit, vous exécutez essentiellement Safari avec une version mise à jour du moteur sous-jacent.


Plus de tutoriels devtools: