quick tour to front end unit testing using jasmine
DESCRIPTION
A session from Software Architect 2014 conference.TRANSCRIPT
Quick Tour to Front-End Unit Testing Using
Jasmine
Gil Fink
Join the conversation on Twitter: @SoftArchConf #SA2014
Agenda
• Why Unit Testing?
• Behavior Driven Development
• Unit Testing in JavaScript?
• Jasmine
• Jasmine and Karma
Life Without Unit Testing
Why Unit Testing?
• Tests
– Act as safety net when you modify your code
• Increase your confidence in your code
– Encourage good design
– Help to detect bugs in early stages of the project
– Serve as live documentation
Behavior Driven Development
• Development approach based on test driven development (TDD)
• Combines the good parts of different development approaches
– Test driven development (TDD)
– Domain driven development (DDD)
– Object oriented analysis (OOA)
– Object oriented design (OOD)
– The combination of approaches isn’t mandatory
Behavior Driven Development – Cont.
• BDD specifies that tests should be created for the requirements (behaviors)
– Set by the business owners
• Developers and business owners should collaborate to specify the requirements
• The output of the tests should be readable
– For to the developer
– For the business owners
BDD and TDD
BDD Language
• In BDD you
– describe your code
– tell the test what it (the code) should do
– expect your code to do something
//suite describe ('', function(){ //test it ('', function(){ //expectation expect(); )}; });
Unit Testing in JavaScript?
• JavaScript is everywhere – Browsers
– Servers
– Operation Systems
– Databases
– Mobile
– Devices
• You are doing it in any other language…
Jasmine
• JavaScript BDD framework
• Can be downloaded from: http://jasmine.github.io/
Setting Up The Environment
• Download Jasmine – or use a package manager such as Bower or Nuget
• Create a Spec (Test) Runner file – Responsible to run all the unit tests – Runs in the browser
• Create the Unit Test files
• Jasmine can also run headless – Without a browser context
SETTING THE ENVIRONMENT Demo
Suggested Folder Structure
js
|--src
|--tests
| |--spec
|--vendor
| |--jasmine
SpecRunner.html
Jasmine Tests Suites
• First create a Suite which is a Specs container
– Use the describe function
– Typically a single suite should be written for each JavaScript file
describe("Suite Name", function() { // Put here your tests });
Jasmine Tests
• A Spec (Test) is defined by calling the it function
– Receives a spec name and a spec callback function
– Contains expectations that test the state of the code
describe("Suite Name", function() { it("a spec with one expectation", function() { // create the spec body }); });
Expectations
• Expectations are assertions
– Can be either true or false
• Use the expect function within a spec to declare an expectation
– Receives the actual value as parameter
• Include fluent API for matchers
– A Matcher is a comparison between the actual and the expected values
Matchers Example
it("matchers", function() { var a = 12, b = a, c = function () { }; expect(a).toBe(b); expect(a).not.toBe(null); expect(a).toEqual(12); expect(null).toBeNull(); expect(c).not.toThrow(); });
CREATING SUITES AND SPECS Demo
More on Suites and Specs
• You can disable a test suite by using xdescribe
• You can mark a spec as pending (not running)
– Using xit
– By calling the pending function
xdescribe("A spec", function() { xit(“that is pending", function() {
pending(); }); });
Creating a Custom Matcher
• You can create your own custom matcher
• The matcher should return true/false according to the actual value and the expectation you set
Setup and Teardown
• Jasmine includes
– beforeEach – runs before each test
– afterEach – runs after each test
• Should exists inside a test suite
Setup/Teardown Example
describe("A suite", function() { var index = 0; beforeEach(function() { index += 1; }); afterEach(function() { index = 0; }); it("a spec", function() { expect(index).toEqual(1); }); });
USING SETUP AND TEARDOWN Demo
Nested describe Calls
• Calls for describe can be nested
– Good for creation of hierarchies
• The beforeEach/afterEach of nested describe runs after a parent describe
describe("A spec", function() { describe("nested inside a second describe", function() { }); });
Working with Spies
• A spy is a test double object
• It replaces the real implementation and fake its behavior
• Use spyOn, createSpy and createSpyObj functions
WORKING WITH SPIES Demo
Jasmine Async Support
• Jasmine enables to test async code
• Calls to beforeEach, it, and afterEach take an additional done function
beforeEach(function(done) { setTimeout(function() { value = 0; done(); }, 1); }); // spec will not start until the done in beforeEach is called it("should support async execution", function(done) { value++; expect(value).toBeGreaterThan(0); done(); });
WORKING WITH ASYNC FUNCTIONS Demo
Jasmine and Karma
• Karma is a test runner for JavaScript
– Executes JavaScript code in multiple browser instances
– Makes BDD/TDD development easier
– Can use any JavaScript testing library
• In this session we will use Jasmine
JASMINE AND KARMA Demo
Questions?
Summary
• Unit Tests are an important part of any development process
• Jasmine library can help you to test your JavaScript code
• Add tests to your JavaScript code!
Resources
• Session slide deck –
• Jasmine – http://jasmine.github.io/
• My Website – http://www.gilfink.net
• Follow me on Twitter – @gilfink
Thank You