Testování vašeho kódu

ReneRubalcava

<\/HEAD>

<\/P>

Píšete skvělé aplikace<\/STRONG><\/EM>. Vaši uživatelé jsou spokojení, vy jste spokojení, všechno je růžové<\/EM>. Někdo řekne, že chce nějaké nové funkce. Vy jste jako super kámo, mám to pod kontrolou<\/EM>. Začnete psát a refaktorovat, přidávat nové moduly, upravovat pár dalších a někde během toho se celá vaše aplikace zhroutí. Něco se pokazilo a udělali jste tolik změn, že nevíte, co se kde pokazilo.<\/P><\/P>Jste v pořádném průšvihu.<\/STRONG><\/P><\/P>Možná jste nikdy nebyli v tak hrozném scénáři, ale vsadím se, že jste museli udělat nějaké ošklivé věci ve svém kódu, aby věci fungovaly, protože jste museli obejít nějaký divný problém, který se objevil při přidávání nových funkcí.<\/P><\/P>Ta ostuda<\/H2>Jako vývojáři všichni cítíme, že bychom to měli dělat. Možná začneme nový projekt s nadšením to dělat. Měli bychom testovat náš kód. Přiznávám, že jsem začal projekt s mnoha testy, ale někde po cestě to nedodržuji a cítím se kvůli tomu hrozně. Ale nemusí to tak být. Unit tests<\/A> jsou vhodné pro velké projekty, věřte mi. Možná je to TDD<\/A> nebo BDD<\/A> nebo prostě píšete testy až dodatečně. Ať to děláte jakkoliv, později si sami poděkujete, jak projekt roste.<\/P>

<\/P>

Zde je

repo na testování<\/A> z předchozích Esri Dev Summits a skvělý Karma příklad<\/A>. Mám rád Karma, je to skvělý test runner, ale nedávno jsem znovu navštívil TheIntern<\/A> pro testování. Intern je opravdu skvělý a můžete si přečíst několik opravdu skvělých příspěvků na SitePen<\/A> o něm. Podívejte se na ten o InternRecorderu<\/A>, který je úžasný.<\/P>

<\/P>

Zjednodušte svůj tok<\/H2>Jedinou nevýhodou Intern oproti něčemu jako Karma, co jsem nikdy nedokázal rozchodit, je mít spuštěné testy v terminálu při každé změně souboru, ale obešel jsem to použitím live-reload<\/A> ve svém vývojovém nástroji.<\/P>

<\/P>

Spojte live-reload s

Gruntem<\/A> a několika pluginy a pokaždé když udělám změnu v mé aplikaci, aplikace se znovu načte v prohlížeči a moje stránka s testy se také znovu načte, takže okamžitě vidím, jestli jsem něco rozbil.<\/P>

<\/P>

<\/P>

<\/P>

Zelená je krásná barva.<\/P>

<\/P>

Nyní nebudu zabíhat do celého

red-green-refactor<\/A> kousku tdd nebo unit testingu. Existuje spousta tutoriálů venku, které vám s tím pomohou. Existuje také celý svět špionů a mocků pro testování. Jen řeknu, že mám rád SinonJS<\/A> pro tento účel. Znám ho a jsem na něj zvyklý, ale jiní mohou mít jiné preference.<\/P>

<\/P>

Jak tedy vypadá ukázkový test? Třeba takto.<\/P>

define(function(require) {
  var registerSuite = require('intern!object');
  var expect = require('intern\chai!expect');
  var View = require('app\components\map\WebMapView');
  var topic = require('dojo\topic');
  var config = require('app\config');
  var utils = require('esri\arcgis\utils');
  var chai = require('intern\chai!');
  var sinon = require('sinon');
  var sinonChai = require('sinon-chai');
  chai.use(sinonChai);
  var mapView;
  registerSuite({
    name: 'components: WebMapView',
    setup: function() {
      \/\/- nastavte test zde
      sinon.stub(utils, 'createMap').returns({
        then: function(){}
      });
    },
    beforeEach: function() {
      \/\/- spusťte před
    },
    afterEach: function() {
      \/\/- spusťte po
      if (mapView && mapView.destroy) {
        mapView.destroy();
      }
    },
    teardown: function() {
      \/\/- zničte widget
      utils.createMap.restore();
    },
    'Component is valid': function() {
      expect(View).to.not.be.undefined;
    },
    'View publishes a valid map given a webmapid': function() {
      mapView = new View({
        webmapid: config.webmap.webmapid
 &nbsp.&nbpsp;});
  expect(mapView.webmapid).to.equal(config.webmap.webmapid);
  }
});
});

Všechen ten hluk v podstatě shrnuje toto.

'View publishes a valid map given a webmapid': function() {
  mapView = new View({
    webmapid: config.webmap.webmapid
  });
  expect(mapView.webmapid).to.equal(config.webmap.webmapid);
}

Základně říkám, že když vytvořím tuto komponentu, očekávám, že bude mít webmap s webmapid, který jsem dal konstruktoru. To je vše. Implementace je ponechána na mně, ale test se zajímá pouze o konečný výsledek.

Vypráví příběh

Testy jsou skvělá dokumentace. Nemohu vám spočítat kolikrát jsem si otevřel testy knihovny nebo frameworku, abych lépe pochopil jak ji používat pokud jsem byl zmatený něčím v dokumentaci. Mohou být neuvěřitelně cenným zdrojem. Nenahrazují dokumentaci, ale jsou fantastickými společníky.

Existuje spousta tutoriálů o JavaScript unit testingu k přečtení. Hodně z nich je založeno na QUnit nebo Jasmine, ale jak jsem řekl, opravdu jsem si oblíbil Intern. Intern dobře integruje se Sauce Labs, ale pokud nepotřebujete celou platformu, můžete použít lokální selenium driver a chromedriver. A pokud používáte Grunt, mohu použít grunt-run, abych spustil driver před spuštěním funkčních testů.

run: {
  options: {
    wait: false
  },
  webdriver: {
    cmd: 'java',
    args: [
      '-jar',
      'tests/lib/selenium-server-standalone-2.46.0.jar',
      '-Dwebdriver.chrome.driver=node_modules/chromedriver/bin/chromedriver'
    ]
  }
}

Ale tyto detaily jsou pravděpodobně lepší nechat na budoucí blogový příspěvek.

Napište nějaké testy

Nyní pracuji na Yeoman generatoru, který pomůže tento proces zjednodušit pro vývoj ArcGIS JS API a který také zahrnuje testování. Ještě není úplně hotový, ale doufám, že ho brzy dokončím.

Nyní netvrdím, že musíte testovat úplně všechno, ale je dobrý nápad testovat chování vaší aplikace.

Dvě věci k zamyšlení:

1. Psaní testů předem - testování pomáhá řídit váš vývoj.
   
2. Psaní testů dodatečně - lze udělat, psaní aplikace vám může pomoci dostat nápad na papír, ale riskujete psaní testů jen proto aby prošly.
   

Pamatujte si, že jsem řekl, že testy se nezajímají o implementace vašeho kódu. Testujete vstup a a očekáváte výsledek b. To je vše. Je to tedy dobrý způsob, jak rychle zaznamenat, čeho se snažíte dosáhnout. Pokud testy napíšete až dodatečně, riskujete, že napíšete testy tak, aby odpovídaly vašemu kódu, který může být chybný. ALE, pokud tyto testy znovu spustíte, když píšete více kódu, alespoň budete vědět, jestli jste něco, co dříve fungovalo, neporušili.<\/P>

<\/P>

Existuje spousta zdrojů o testování JavaScriptu. Tady jsou dva, na které si vzpomínám.<\/P>

Úvod do JavaScript Unit Testing<\/A><\/P>

JavaScript Testing Recipes<\/A><\/P>

Intern Tutorial esri jsapi<\/A><\/P>

<\/P>

Tady je demo projekt<\/A>, který zahrnuje testování a grunt tooling, aby vám pomohl.<\/P>

<\/P>

Pro více tipů a triků geodev,

navštivte můj blog<\/A>.<\/P><\/BODY><\/HTML>