Client Side Testing

A quick trip around javascript and Angular unit testing using Jasmine and Chutzpah.

Transcript

1. Testing the web
   with Chutzpah
   and Jasmine
   

   View Slide

2. 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
   

   View Slide

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

   View Slide

4. 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
   

   View Slide

5. 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
   

   View Slide

6. 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
   

   View Slide

7. 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
   

   View Slide

8. 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
   

   View Slide

9. 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);
   });
   });
   });
   

   View Slide

10. 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
    

    View Slide

11. 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
    

    View Slide

12. 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
    

    View Slide

13. 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
    

    View Slide

14. View Slide