Js testing

  • 868 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
868
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavascriptTestingJasmine, Chai, and Phantomby Brandon DImperio
  • 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. 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. I dont always test
  • 5. Yay Coding!Really, coding?
  • 6. Jasmine testing is codingOk, maybe scripting, butalmost coding!You get testing, whileyour developers get tokeep coding.
  • 7. Enter JasmineNo, not this one
  • 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. 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. 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. PhantomJsIs your automated testing not quite fastenough?Automated testing tools not quite extensibleenough?Try PhantomJsFull web stackNo browser required
  • 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. 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. 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. 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. 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. 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. 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. 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. More topics● Unit testing● Entity Framework● Dependency Injection● Asp.Net MVC4● MvcOData○ Knockout -> OdataUrl Generation -> Ajax -> MVC ->WCF Data services -> Entity Framework
  • 21. Mehttp://stackoverflow.com/users/57883/maslowimaginarydevelopment @ gmail