AngularJS Unit Testing AngularJS Filters and Services with Karma - - PowerPoint PPT Presentation

AngularJS

Unit Testing AngularJS Filters and Services with Karma & Jasmine

Filters

• Filters can be added in AngularJS to format or

transform data

• AngularJS provides filters to
• currency - Format a number to a currency format.
• date - Format a date to a specified format.
• filter - Select a subset of items from an array.
• json - Format an object to a JSON string.
• limitTo - Limits an array/string to a specified number of

elements/characters.

• lowercase - Format a string to lower case.
• number - Format a number to a string.
• rderBy - Orders an array by an expression.
• uppercase - Format a string to upper case.

Adding & Making Filters

• Filters can be added to expressions using the pipe

character, |

• Filters can be added to directives using the pipe

character, |

• You can create a custom filter by registering a new

filter factory function with your module

• The filter returns a function that returns a value

Testing Custom Filters

• Testing custom filters is similar to testing controllers
• Filters are the easiest components to test in AngularJS
• Create a test suite with describe.
• The string parameter should include the name of the filter being tested.
• The function parameter is the block of code that implements the suite
• Use beforeEach to load the module that contains

the filter being tested.

• Inject the $filter services in a beforeEach block
• Use $filter to load the custom filter you wish to test.
• Test the functionality of the custom filter

Examples

• Walk through process of creating and running filter

tests for sample application.

Services

• Services are substitutable objects that are wired

together using dependency injection (DI)

• You can use services to organize and share code

across your app

• Angular services are:
• Lazily instantiated – Angular only instantiates a service when an

application component depends on it

• Singletons – Each component dependent on a service gets a reference

to the single instance generated by the service factory

• Like other core Angular identifiers, built-in services

always start with $ (e.g. $http).

Custom Services

• To create a custom services
• register the service's name and service factory function, with an Angular

module

• Registering a service
• This is done via the module API.
• Can use the module’s factory method to register a service
• Can use the module’s service method to register a service
• You can also register services via the $provide service inside of a

module's config function

• Each approach makes a singleton object available

to the app

Testing Services

• Testing services is similar to testing controllers
• Create a test suite with describe.
• The string parameter should include the name of the service being tested.
• The function parameter is the block of code that implements the suite
• Use beforeEach to load the module that contains

the service being tested.

• Inject the service being tested and its

dependencies in a beforeEach block

• Use $filter to load the custom filter you wish to test.

Testing Services (2)

• Create mocks of dependency services
• We are not interested in testing the functionality of the dependency

services

• Only need to mock the functionality that is needed by the service that is

being tested

• Created a nested test suite for the service method

being tested

• Use a describe block for each method
• Test the functionality of the service method

Examples

• Walk through process of creating and running

custom service tests for sample application.

Resources

• http://www.w3schools.com/angular/angular_filters.asp
• http://angular-tips.com/blog/2014/04/introduction-to-unit-test-

filters/

• https://docs.angularjs.org/guide/services
• http://www.sitepoint.com/unit-testing-angularjs-services-

controllers-providers/

• http://odetocode.com/blogs/scott/archive/2013/06/11/angul

arjs-tests-with-an-http-mock.aspx