.front-page # .logo[ ![Buster JS](img/buster-logo.png) ] ## En javascript testing tutorial TRH Minikonferanse Torgeir Thoresen 11/5/2012 .bg[ ![Buster JS](img/buster-logo.png) ] --- # Buster.js Et test-rammeverk for javascript Skrevet i javascript Kjører på node Kan teste javascript-kode - på node - i browseren (qunit static html-style) - i flere browsere samtidig (JsTestDriver-style) .bg[ ![Buster JS](img/buster-logo.png) ] --- .cols.two # Punchlines
- In beta - We aim to release a stable 1.0 by end of May 2012. - A browser JavaScript testing toolkit. - A Node.js testing toolkit. - Flexible. - Written by you. - Set of reusable libraries. busterjs.org
.circle.red.hugequote.right[ ” ]
.bg[ ![Buster JS](img/buster-logo.png) ] --- # Installasjon Trenger `npm` (node sin pakke-manager) $ npm install -g buster Flytt deg inn i kode-mappa $ npm link buster Buster blir tilgjengelig direkte $ buster
.bg[ ![Buster JS](img/buster-logo.png) ] --- .cols.two # En test Du velger selv test-stil
xunit .smallcode buster.testCase('some object', { setUp: function () { }, 'should do something': function () { }, tearDown: function () { } });
BDD .smallcode buster.spec.expose(); describe('some object', function () { before(function () { }); it('should do something', function () { }); after(function () { }); });
.bg[ ![Buster JS](img/buster-logo.png) ] --- # Eksempel Prosjekt-struktur $ tree . ├── lib │ └── math-genious.js └── test ├── buster.js └── math-genious-test.js 2 directories, 4 files .bg[ ![Buster JS](img/buster-logo.png) ] --- # Eksempel - Test `test/math-genious-test.js` if (typeof MathGenious === 'undefined') { // require module when in node MathGenious = require('../lib/math-genious.js').MathGenious; buster = require('buster'); } buster.spec.expose(); describe('math genious', function () { it('should sum two numbers', function () { var sum = MathGenious.sum(1, 2); expect(sum).toEqual(3); }); it('should sum all arguments', function () { var sum = MathGenious.sum(1, 2, 3, 4); expect(sum).toEqual(10); }); }); .bg[ ![Buster JS](img/buster-logo.png) ] --- # Eksempel - Kode `lib/math-genious.js` (function (context) { context.MathGenious = { sum: sum }; function sum () { var i, len, sum = 0; for (i = 0, len = arguments.length; i < len; i += 1) { sum += arguments[i]; } return sum; } })(this); .bg[ ![Buster JS](img/buster-logo.png) ] --- # Eksempel - konfig for node `test/buster.js` module\.exports['node tests'] = { env: 'node', rootPath: '../', tests: [ 'test/*-test.js' ] } .bg[ ![Buster JS](img/buster-logo.png) ] --- # Eksempel - konfig for browser `test/buster.js` module\.exports['browser tests'] = { env: 'browser', rootPath: '../', sources: [ 'lib/*.js' ], tests: [ 'test/*-test.js' ] }; .bg[ ![Buster JS](img/buster-logo.png) ] --- # Eksempel - Kjøring av node-tester .bash $ buster test -g node math genious: .. 1 test case, 2 tests, 2 assertions, 0 failures, 0 errors, 0 timeouts .bg[ ![Buster JS](img/buster-logo.png) ] --- # Eksempel - Kjøring av browser-tester Start en capture-server .bash $ buster server buster-server running on http://localhost:1111 Capture en browser .bash $ open http://localhost:1111/capture Kjør testene i de captura browserne .bash $ buster test -g browser Chrome 20.0, Linux: .. 1 test case, 2 tests, 2 assertions, 0 failures, 0 errors, 0 timeouts .bg[ ![Buster JS](img/buster-logo.png) ] --- # Reportere $ buster test -g node --reporter specification math genious ✓ should sum two numbers ✓ should sum all arguments 1 test case, 2 tests, 2 assertions, 0 failures, 0 errors, 0 timeouts Finished in 0.008s `specification`, `quiet`, `xml`, `tap`, `dots`, `html`, `teamcity`, `...` .bg[ ![Buster JS](img/buster-logo.png) ] --- # Autotest .bash $ buster autotest Watching /home/torgeir/code/ Test command: buster-test Have fun! Endrer/Lager ny fil .bash $ touch ny-fil.js Testene kjøres automatisk .bash 10:23:49 Running tests `````````````````````` middleware: .... model: .... route: ......... 3 test cases, 17 tests, 21 assertions, 0 failures, 0 errors, 0 timeouts .bg[ ![Buster JS](img/buster-logo.png) ] --- # Mer - Asynkrone tester - Rikt assertions-bibliotek - Proxy ajax-requests for en web server - Sinon.js - mocking, stubbing - Phantom.js? Kjør fra IDE? .bg[ ![Buster JS](img/buster-logo.png) ] --- .center.middle # Shameless plug .circle.yellow.center[ remark ] [gnab.github.com/remark](//gnab.github.com/remark/) --- .front-page # .circle.red.center.hugequestionmark[ ? ] ## Takk! [code](//github.com/torgeir/busterjs-lightning-talk) | [slides](//torgeir.github.com/busterjs-lightning-talk)