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. o date - Format a date to a specified format. o filter - Select a subset of items from an array. o json - Format an object to a JSON string. o limitTo - Limits an array/string to a specified number of o elements/characters. lowercase - Format a string to lower case. o number - Format a number to a string. o orderBy - Orders an array by an expression. o uppercase - Format a string to upper case. o

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 o

Testing Custom Filters • Testing custom filters is similar to testing controllers Filters are the easiest components to test in AngularJS o • Create a test suite with describe . The string parameter should include the name of the filter being tested. o The function parameter is the block of code that implements the suite o • 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. o • 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 o application component depends on it Singletons – Each component dependent on a service gets a reference o 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 o module • Registering a service This is done via the module API. o Can use the module’s factory method to register a service o Can use the module’s service method to register a service o You can also register services via the $provide service inside of a o 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. o The function parameter is the block of code that implements the suite o • 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. o

Testing Services (2) • Create mocks of dependency services We are not interested in testing the functionality of the dependency o services Only need to mock the functionality that is needed by the service that is o being tested • Created a nested test suite for the service method being tested Use a describe block for each method o • 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