Zombie.js: insanely fast, full-stack, headless testing in Node.js

Poetro: Zombie.js: insanely fast, full-stack, headless #testing in #nodejs - a dream come true(?) - [Twitter - Poetro]

Ez egy érdekes próbálkozás. Több ismert és használt eszközt gyúr egy teljesen új eszközbe. Még akár működőképes is lehet.

A lényeg: vesszük a Node.js rendszert, hozzá a JSDom nevű modult, amiről a weblaboros Node.js alapok II. cikkem második felében írtam, és egybegyúrja egy tesztelési keretrendszerbe.

Ahogy erről a pár napja született bejegyzésben írnak egy igencsak rugalmas ugyanakkor gyors rendszerről van szó. Szerintem még nem vetekszik a böngészőben futtatott kóddal, bár mivel nincs szükség a megjelenítésre még akár igaz is lehet a dolog, elvégre a böngészők a futásuk nagy részében a megjelenítéssel foglalkoznak, és nem a JavaScript kód futtatásával. Ezt sajnos most még nem tudom letesztelni, de ha majd lesz időm és energiám akkor talán össze fogom hasonlítani a kettőt.

A kód letölthető a Github-ról is, bár inkább ajánlott npm-ből telepíteni. Dokumentációt a projekt oldalán találunk. Telepítés után a tesztelés már közel gyerekjáték:

var zombie = require("zombie");
var assert = require("assert");

// Betöltjük az oldalt localhost-ról
zombie.visit("http://localhost:3000/", function (err, browser) {
  if (!err) {
    // Az oldal már be van töltve

    // Kitöltjük az email és password mezőket majd elküldjük a form-ot.
    browser.
      fill("email", "zombie@underworld.dead").
      fill("password", "eat-the-living").
      pressButton("Sign Me Up!", function(err, browser) {
        // Form elküldve, az új oldal betöltődött.
        assert.equal(browser.text("title"), "Welcome To Brains Depot");
      });
  }
});

Természetesen van lehetőség még pár kisebb részlet megadására is, mint például a User-Agent megadása, illetve, hogy a HTML-ben levő JavaScript kód lefusson-e.

A Zombie.js a Shizzle.js JavaScript motort használja a DOM-ban való keresésre, tehát (szinte) minden amit jQuery-ben megtehetünk kiválasztásra, az itt is működni fog. Például:

// Megnézzük, hogy biztosan létezik-e `brains` azonosítójú (id) elem.
assert.ok(browser.querySelector("#brains"));

// A `body` elemnek kell hogy legyen két `hand` osztályú eleme.
assert.equal(browser.body.querySelectorAll(".hand").length, 2);

Ez leginkább az újabb böngészők querySelector és querySelectorAll képességére hajaz, bár a kettő nem ekvivalens.

Az űrlapoknak és linkeknek külön figyelmet szentel a modul, rengeteg segédfüggvénnyel könnyítve meg az elemek kitöltését, és a velük végzett interakciót. És ezen interakciók eseményeket váltanak ki, amit szintén tesztelni tudunk. Például ha jQuery kódot tesztelünk, a Zombie.js-t kérhetjük, hogy szimuláljon egy link kattintást, és ekkor a jQuery-vel rárakott eseménykezelőnk szintén le fog futni, aminek a működését szintén tesztelni tudjuk.

Amint látható, egy igencsak összetett modullal van dolgunk, és amennyiben a tesztelésünk során nem támaszkodunk az elemek méretére ( width , height , margin , padding ), és elhelyezkedésére ( offset ) akkor tökéletes társ lehet a tesztelésben. Sajnos mivel nincs megjelenítő réteg, ezért az előbb említett értékek teljesen irrelevánsak, és valószínűleg 0 -t vagy valami más teljesen használhatatlan értéket adnak vissza. További dokumentációval az API oldal szolgál.