Slide 1

Slide 1 text

Testing the web with Chutzpah and Jasmine

Slide 2

Slide 2 text

Page “I’m a c# guy that uses NUnit” › In the javascriptworld, Jasmine is your NUnitequivalent. (http://jasmine.github.io/) › In Jasmine, you create ‘Suites’ that describe a set of expectations you have for the thing you want to test. › Jasmine also allows you to also set your expectations within these suites. / Copyright ©2014 by Readify Pty Ltd 2

Slide 3

Slide 3 text

Page So how do I do X in Jasmine? › Setup and teardown: › Ignore tests: / Copyright ©2014 by Readify Pty Ltd 3

Slide 4

Slide 4 text

Page Cool, now how do I run my tests? › Chutzpah! (https://github.com/mmanela/chutzpah) › Chutzpah generates html to run our specs with Jasmine in a headless browser (phantomjs). › It will also generate html to run our specs in our browser of choice (handy for debugging tests!) › It also takes care of loading dependencies for us where needed. / Copyright ©2014 by Readify Pty Ltd 4

Slide 5

Slide 5 text

Page So how to we hook it all up? › Install-Package Chutzpah › Install the Chutzpah VS Extensions › Add and configure your chutzpah.json › Don’t worry about installing Jasmine! Chutzpah bundles it up for you  › Write your hello world unit test! / Copyright ©2014 by Readify Pty Ltd 5

Slide 6

Slide 6 text

Page Man this thing is busted! › Chutzpah is a bit of a black box when used from VS – if it doesn’t seem to be working from VS, you can always use the command line runner. › Running chutzpah.console.exe {fullpathtofile.js} /trace will give you a detailed log of the test run named chutzpah.log alongside the console exe (in your packages folder) / Copyright ©2014 by Readify Pty Ltd 6

Slide 7

Slide 7 text

Page Okay cool, now how about Ng? › To test an Ng app, because of how angular’smodule / DI system works, we need to make sure we include all necessary references to the applications scripts in our chutzpah.json › If you have a bunch of bootstrapping activity in your standard app.js, you may want to craft a slimmed down version for testing / Copyright ©2014 by Readify Pty Ltd 7

Slide 8

Slide 8 text

Page Dude, where’s my Mocks? › ngMock(https://docs.angularjs.org/api/ngMock) › Injects and mocks most of the core angular services for us, such as $http and $log › It *must* be loaded by Chutzpah after angular.js (it overrides default behaviour) › No further wireuprequired! › Jasmine also provides some mocking functions similar to NSubstitute / Copyright ©2014 by Readify Pty Ltd 8

Slide 9

Slide 9 text

Page Example Ng Test / Copyright ©2014 by Readify Pty Ltd 9 describe("Landing Page Directive", function() { var $sut; describe('If form is started', function() { var goToDashboardCalled = false; beforeEach(function() { module(function($provide) { $provide.service('utilityService', function() { return { goToDashboard: function() { goToDashboardCalled = true; } } }); }); inject(function($compile, $rootScope, $httpBackend) { $httpBackend.expectPOST('apiBaseUrlforms/getbasicformdetails').respond(200); $rootScope.formStarted = true; var elem = angular.element("
"); $sut = $compile(elem)($rootScope); $rootScope.$digest(); }); }); it('Redirects to the dashboard.', function() { expect(goToDashboardCalled).toBe(true); }); }); });

Slide 10

Slide 10 text

Page Hey what were those things? › Module: allows us to replace services to be injected into our class under test. This allows us to mockother things out. › Inject: allows us to mutate mocked dependencies to set them up for our SUT, and also supply them when building our SUT. › These are both given to us via ngMock, and for ease of use are attached to the window object for us. / Copyright ©2014 by Readify Pty Ltd 10

Slide 11

Slide 11 text

Page Ng testing gotchas › Http interactions *must* be mocked. › You can only set up dependencies via Module() before your call to Inject(). If you call it after… BOOM. › If something doesn’t seem to be working, remember to double check your chutzpah.jsonand the html generated by Chutzpah for script errors! / Copyright ©2014 by Readify Pty Ltd 11

Slide 12

Slide 12 text

Page Staying DRY › So you have a bunch of code you want to run before every test? Sick of copy pasta? › Jasmine allows us to define a spec-helper.js file which can include global beforeEvery and afterEvery functions! › This can be a useful place to bootstrap things like Ng constants, if you have some. / Copyright ©2014 by Readify Pty Ltd 12

Slide 13

Slide 13 text

Page Bonus slide: CI › So now I have my tests, how do I plug them into my CI pipeline? › Use the Chutzpah console exe that you checked in with your chutzpah package because you are a good developer and detest package restore. › And it goes a little something like this… / Copyright ©2014 by Readify Pty Ltd 13

Slide 14

Slide 14 text

No content