JavascriptTestingJasmine, Chai, and Phantomby Brandon DImperio
Developers test more thanenough, right?● Our quality is so high, we dont need to test.● We dont have dedicated testers● Ou...
Manual testing is the wayto go● They remember to test everything every timea change is made, right?● Manual testing is fun...
I dont always test
Yay Coding!Really, coding?
Jasmine testing is codingOk, maybe scripting, butalmost coding!You get testing, whileyour developers get tokeep coding.
Enter JasmineNo, not this one
JasmineJsBDD for your JavaScriptJasmine is a behavior-driven development framework for testing your JavaScript code. It do...
Start Jasmine(function () {var jasmineEnv = jasmine.getEnv();jasmineEnv.updateInterval = 250;var htmlReporter = new jasmin...
ChaiAssertion frameworkvar assert = require(chai).assert, foo = bar, beverages = { tea: [ chai, matcha, oolong ] };assert....
PhantomJsIs your automated testing not quite fastenough?Automated testing tools not quite extensibleenough?Try PhantomJsFu...
Phantom Barebonesexampleconsole.log(Loading a web page);var page = require(webpage).create();var url = http://www.phantomj...
Phantom Sample Post// Example using HTTP POST operationvar page = require(webpage).create(),server = http://posttestserver...
Phantom Sample - Renderto imagevar page = require(webpage).create();page.viewportSize = { width: 400, height : 400 };page....
Phantom Sample - Renderto image(cont.)for (y = 0; y < height; y = y + 1) {for (x = 0; x < width; x = x + 1, i = i + 4) {rx...
PhantomJs+Chaiphantom.injectJs("chai.js");var assert = chai.assert;var expect = chai.expect;var bAssert = function(delegat...
My Chai (not Mai-Tai)bAssert(function(){ assert.typeOf(test,string,test is a string);});bAssert(function(){var currentItem...
Referenceshttp://pivotal.github.io/jasmine/http://chaijs.com/http://phantomjs.org/Mine:http://jsfiddle.net/Maslow/V8ryc/sh...
Topics Available● Meta-Programming○ T4○ CoffeeScript● Javascript Topics○ Knockout■ Custom bindings■ KoGrid■ jQuery● ALM○ T...
More topics● Unit testing● Entity Framework● Dependency Injection● Asp.Net MVC4● MvcOData○ Knockout -> OdataUrl Generation...
Mehttp://stackoverflow.com/users/57883/maslowimaginarydevelopment @ gmail
Js testing
Upcoming SlideShare
Loading in...5
×

Js testing

1,042

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,042
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Js testing

  1. 1. JavascriptTestingJasmine, Chai, and Phantomby Brandon DImperio
  2. 2. Developers test more thanenough, right?● Our quality is so high, we dont need to test.● We dont have dedicated testers● Our testers find everything just fine.● Where were going we dont need roads. -Doc
  3. 3. Manual testing is the wayto go● They remember to test everything every timea change is made, right?● Manual testing is fun, fast, and enjoyable.
  4. 4. I dont always test
  5. 5. Yay Coding!Really, coding?
  6. 6. Jasmine testing is codingOk, maybe scripting, butalmost coding!You get testing, whileyour developers get tokeep coding.
  7. 7. Enter JasmineNo, not this one
  8. 8. JasmineJsBDD for your JavaScriptJasmine is a behavior-driven development framework for testing your JavaScript code. It does not depend on any other JavaScriptframeworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.describe("Jasmine", function() {it("makes testing JavaScript awesome!", function() {expect(yourCode).toBeLotsBetter();});});
  9. 9. Start Jasmine(function () {var jasmineEnv = jasmine.getEnv();jasmineEnv.updateInterval = 250;var htmlReporter = new jasmine.HtmlReporter();jasmineEnv.addReporter(htmlReporter);jasmineEnv.specFilter = function (spec) {return htmlReporter.specFilter(spec);};var currentWindowOnload = window.onload;window.onload = function() {if (currentWindowOnload) {currentWindowOnload();}document.querySelector(.version).innerHTML = jasmineEnv.versionString();execJasmine();};function execJasmine() {console.log("running jasmine");jasmineEnv.execute();}})();
  10. 10. ChaiAssertion frameworkvar assert = require(chai).assert, foo = bar, beverages = { tea: [ chai, matcha, oolong ] };assert.typeOf(foo, string, foo is a string);assert.equal(foo, bar, foo equal `bar`);assert.lengthOf(foo, 3, foo`s value has a length of 3);assert.lengthOf(beverages.tea, 3, beverages has 3 typesof tea);Orvar expect = require(chai).expect, foo = bar, beverages = { tea: [ chai, matcha, oolong ] };expect(foo).to.be.a(string);expect(foo).to.equal(bar);expect(foo).to.have.length(3);expect(beverages).to.have.property(tea).with.length(3);Orvar should = require(chai).should() //actually call thethe function, foo = bar, beverages = { tea: [ chai, matcha, oolong ] };foo.should.be.a(string);foo.should.equal(bar);foo.should.have.length(3);beverages.should.have.property(tea).with.length(3);
  11. 11. PhantomJsIs your automated testing not quite fastenough?Automated testing tools not quite extensibleenough?Try PhantomJsFull web stackNo browser required
  12. 12. Phantom Barebonesexampleconsole.log(Loading a web page);var page = require(webpage).create();var url = http://www.phantomjs.org/;page.open(url, function (status) {//Page is loaded!phantom.exit();});
  13. 13. Phantom Sample Post// Example using HTTP POST operationvar page = require(webpage).create(),server = http://posttestserver.com/post.php?dump,data = universe=expanding&answer=42;page.open(server, post, data, function (status) {if (status !== success) {console.log(Unable to post!);} else {console.log(page.content);}phantom.exit();});
  14. 14. Phantom Sample - Renderto imagevar page = require(webpage).create();page.viewportSize = { width: 400, height : 400 };page.content = <html><body><canvas id="surface"></canvas></body></html>;page.evaluate(function() {var el = document.getElementById(surface),context = el.getContext(2d),width = window.innerWidth,height = window.innerHeight,cx = width / 2,cy = height / 2,radius = width / 2.3,imageData,pixels,hue, sat, value,i = 0, x, y, rx, ry, d,f, g, p, u, v, w, rgb;el.width = width;el.height = height;imageData = context.createImageData(width, height);pixels = imageData.data;
  15. 15. Phantom Sample - Renderto image(cont.)for (y = 0; y < height; y = y + 1) {for (x = 0; x < width; x = x + 1, i = i + 4) {rx = x - cx;ry = y - cy;d = rx * rx + ry * ry;if (d < radius * radius) {hue = 6 * (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI);sat = Math.sqrt(d) / radius;g = Math.floor(hue);f = hue - g;u = 255 * (1 - sat);v = 255 * (1 - sat * f);w = 255 * (1 - sat * (1 - f));pixels[i] = [255, v, u, u, w, 255, 255][g];pixels[i + 1] = [w, 255, 255, v, u, u, w][g];pixels[i + 2] = [u, u, w, 255, 255, v, u][g];pixels[i + 3] = 255;}}}context.putImageData(imageData, 0, 0);document.body.style.backgroundColor = white;document.body.style.margin = 0px;});page.render(colorwheel.png);phantom.exit();
  16. 16. PhantomJs+Chaiphantom.injectJs("chai.js");var assert = chai.assert;var expect = chai.expect;var bAssert = function(delegate, onError, onSuccess) {success = false;try {delegate();success = true;} catch (err) {//chai delegate failedif (onError) {onError(err);} else {if (bNavigator.config.attemptToLogAssertCaller) {var callerNameMatch = bAssert.caller.toString().match(/function([^(]+)/);if (callerNameMatch && callerNameMatch[1]) {console.error(<chai> + err + <caller> + callerNameMatch[1] +</caller></chai>);} else console.error(<chai> + err + <callerunknown /></chai>);//console.log(caller was + callerNameMatch[1]);} else {console.error(<chai> + err + </chai>);}}} //end catchif (success === true && onSuccess) {onSuccess();}};
  17. 17. My Chai (not Mai-Tai)bAssert(function(){ assert.typeOf(test,string,test is a string);});bAssert(function(){var currentItemIndex=page.evaluate(function(){return $(.first-index:first).text();});console.log(currentItemIndex=+currentItemIndex);assert.notEqual(currentItemIndex,,current item index should never be empty);});
  18. 18. Referenceshttp://pivotal.github.io/jasmine/http://chaijs.com/http://phantomjs.org/Mine:http://jsfiddle.net/Maslow/V8ryc/showhttp://jsfiddle.net/Maslow/66MJU/show/https://github.com/ImaginaryDevelopment/javascript/tree/master/phantomThese slideshttp://j.mp/13spNkW
  19. 19. Topics Available● Meta-Programming○ T4○ CoffeeScript● Javascript Topics○ Knockout■ Custom bindings■ KoGrid■ jQuery● ALM○ TFS - Custom Workflow builds○ SonarSource Code quality analysis● Functional Programming
  20. 20. More topics● Unit testing● Entity Framework● Dependency Injection● Asp.Net MVC4● MvcOData○ Knockout -> OdataUrl Generation -> Ajax -> MVC ->WCF Data services -> Entity Framework
  21. 21. Mehttp://stackoverflow.com/users/57883/maslowimaginarydevelopment @ gmail
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×