Unit testing JavaScript: Jasmine & karma intro

1. JASMINE & KARMA
Unit testing your JavaScript code
Maurice de Beijer

2. Goals
• Understand how to write Jasmine BDD specs
• Run Jasmine specs using Karma
• Test AngularJS code with Jasmine and Karma

4. Jasmine
• Test suites describe the functionality
• Using a describe() function
• Can be nested
• Specs test the functionality
• Using an it() function
• Contain one or more expectations

5. Basic Jasmine tests

6. Running Jasmine tests
• We need a test runner to execute tests
• The browser
• Visual Studio with R#
• Karma

7. Successful test in the Browser

9. Matchers
• Used to verify expectations
• toBe()
• toEqual()
• toMatch()
• toBeDefined()
• toBeTruthy()
• toContain()
• toBeGreaterThan()
• toBeCloseTo()
• And more
• Can create custom matchers if needed
• You can also throw an Error to fail a test

10. Jasmine spies
• Can intercept function calls
• Verify if the function was called
• Optionally with specific parameters
• Can be configured to:
• Call original function
• Return a predefined result
• Call a fake function
• Throw an Error

12. Karma Setup
• Karma is a NodeJS application
• So first install Node.js
• Install Karma using NPM
• NPM Install Karma-Cli – g
• NPM Install Karma –save-dev
• Karma requires a configuration file
• Create using karma init
• Requires a browser to run tests
• PhantomJS is an invisible browser
• Can use multiple browser at the same time
• Either in the config file
• Or by navigating to http://localhost:9876/

13. Successful test in Karma

14. Failing test in Karma

15. Testing AngularJS code
• Include angular-mocks.js as the last AngularJS script
• Changes some of the normal behavior
• Create Jasmine test as normal
• Add beforeEach() to load module under test
• Use the inject() function to trigger Dependency Injection
• The $controller service is the factory to create controllers
• Usually requires at least a $scope
• Other dependencies can be provided
• If not the normal DI lookup happens.

16. $httpBackend
• Fake implementation of the XmlHttpRequest
• Expected requests can be configured
• whenGET, whenPOST etc
• expectGET, expectPOST etc
• When... functions are soft requirement
• Do not fail a test
• Will resolve multiple time
• Expect… functions are assertions
• Fail a test is not satisfied
• Appears to the calling code as asynchronous
• Use flush() to resolve requests

17. Questions?
• Source code on GitHub
• https://github.com/mauricedb/Jasmine-Karma-Intro