Angular Unit Testing
Download as PPTX, PDF1 like677 views
This document provides an overview of unit testing AngularJS applications using Karma, Jasmine, and Angular mocks. It discusses how to set up tests using Karma and Jasmine, write specs using matchers and spies, and mock dependencies using Angular mocks. Key points covered include isolating units of code for testing, using Karma to run tests in browsers, the structure of Jasmine specs, and mocking HTTP requests and other services.
Angular Unit Testing
- 1. U N I T - T E S T I N G A N G U L A R J S I N P R A C T I C E • Karma • Jasmine • About • Review a Controller Spec Demo • Angular Mocks
- 2. A N G U L A R U N I T T E S T I N G • The goal is to test small units of code by isolating it from the rest of the code to determine whether it behaves exactly as we expected • Testing inspires correct AngularJS design and help us to avoid mixing concerns in one piece of the code which does everything (separate controller logic from DOM by using directives and BL in services) • Angular's built-in DI makes testing easier by stubbing or mocking a component's dependencies, without having to mess with any global variable that could affect another test
- 3. • Karma is a NodeJS command line test runner which spawns a web server to load the application's source code and execute the tests in a launched browser instance (or multiple different browser instances) to see if the tests pass under different browser environments • Karma is executed on the command line and will display the results of your tests on the command line once they have run in the browser. • It makes no specific assumptions about how you write your tests
- 4. • Jasmine is a behavior driven development framework for testing javascript code • Jasmine provides functions to help with structuring tests and also making assertions • It does not rely on: • Browsers • DOM • Any JS framework
- 5. J A S M I N E 1 0 1 • We begin by creating a test suite with the global describe function that wrap our specs. it takes two arguments, a string and a function • We define a spec by the global function it which also takes two arguments, a string description and a function that contains at least one expectations • We use the expect function chained to a matcher function implementing a boolean comparison between the actual value and the expected value • A test with all true expectations is considered a passing test, whereas a spec with one or more expectations that evaluate to false is considered a failing test Q U I C K I N T R O D U C T I O N
- 6. M A T C H E R S • toEqual(val) not.toEqual(val) • toBe(val) not.toBe(val) • toMatch(pattern) not.toMatch(pattern) • toBeDefined() ... • toBeUndefined() • toBeNull() • toBeTruthy() • toContain(val) • toBeGreaterThen(val) • toThrow(exp)
- 7. • Rather than setting up our test conditions manually in every test, we can use the beforeEach (afterEach) method to run a group of setup functions. The beforeEach() function takes a single argument: a function that is called once before each spec is run. It can be used in a describe block, like so:
- 8. S P I E S • A spy can stub any function and tracks calls to it and all arguments. • A spy only exists in the describe or it block it is defined, and will be removed after each spec. • There are special matchers for interacting with spies. • The toHaveBeenCalled matcher will return true if the spy was called. • The toHaveBeenCalledWith matcher will return true if the argument list matches any of the recored calls to the spy
- 9. Mocks vs Spies vs Stubs vs Fixtures • Mocks replace entire objects/interfaces to control data flow • Spies replace/patch existing functions to intercept behavior • Stubs hijack the return value of a function to control program flow • Fixtures holds a set of sample data returned from a mocked backend request • AngularJS has mocks built-in. Spies, stubs and fixtures can be used with javascript
- 10. A N G U L A R M O C K S • Angular also provides the ngMock module, which provides mocking for your tests. This is used to inject and mock Angular services within unit tests. • ngMock also extends various core ng services so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work with. One of the most useful parts of ngMock is $httpBackend, which lets us mock XHR requests in tests, and return sample data instead. (fixtures) • $httpBackend • $controller • $interval • $timeout
- 11. Test an angular controller example: Jasmine & ngMock