Angular JS Unit Testing - Overview
Download as ODP, PDF0 likes872 views
This document discusses Angular JS unit testing and provides examples of testing controllers, routes, services, and directives. It introduces Karma and Jasmine, two popular tools for Angular testing. Karma is a test runner that executes unit tests. Jasmine is a BDD framework used for writing unit tests with matchers to make assertions. Examples are given for setting up tests for controllers, routes, services, and directives by injecting dependencies and compiling elements.
Angular JS Unit Testing - Overview
- 1. Angular JS Unit Testing By, Thirumal S.
- 2. Agenda ● What is karma and Jasmine ● Jasmine Matchers ● Testing Angular Routes ● Testing Angular Controller ● Testing Angular Directive
- 3. What is Karma? ● Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application's source code and executes your tests. ● Karma is a NodeJS application, and should be installed through npm.
- 4. What is Jasmine? ● Jasmine is a test driven development framework for JavaScript that has become the most popular choice for testing Angular applications. ● Jasmine provides functions to help with structuring your tests and also making assertions.
- 5. Jasmine Matchers ● toEqual checks for equality, not necessarily the same object. Var a=10; expect(a).toEqual(10) ● toBe checks if two objects are the same. Var a=10,b=10; expect(a).toBe(b)
- 6. ● toBeTruthy checks if a value is truthy (not just true ). ● toBeFalsy checks if a value is falsy (not just false ). ● toContain checks if a value is inside another. Var a= “Hello World”; expect(a).toContain(“World”) ● toBeDefined checks if a value is defined. ● toBeUndefined checks if a value is undefined. ● toBeNull checks if a value is null. ● toBeCloseTo checks decimal proximity. ● For More About Jasmine Matchers https://github.com/JamieMason/Jasmine-Matchers
- 7. Angular Testing Controllers// get the module that contain the controller beforeEach(module('todolist')); // inject the $controller and the rootScope beforeEach(inject(function ($rootScope, $controller) { // create a fresh new scope for the controller scope = $rootScope.$new(); // create a controller with this scope ctrl = $controller('TodoListController',{$scope: scope}); }));
- 8. Angular Testing Routes / get the module that contain the controller beforeEach(module('todolist')); // inject the $State and the rootScope beforeEach(inject(function ($rootScope, $state, $templateCache_) { // create a fresh new scope for the controller scope = $rootScope.$new(); state = $state; template = $templateCache; // create a controller with this scope ctrl = $controller('TodoListController',{$scope: scope}); }));
- 9. Angular Testing Services // get the module that contain the service beforeEach(module('todolist')); // inject the $injector beforeEach(inject(function ($injector) { // use the $injector to get a hold on the service service = $injector.get(‘ServiceName’); }));
- 10. Angular Testing Directives// get the module that contain the service beforeEach(module('todolist')); // inject the $compile service and the $rootScope beforeEach(inject(function ($compile, $rootScope) { // use the $rootScope to create a scope for the directive scope = $rootScope; // create an angular element from a HTML string element = angular.element(‘<div my-directive ></div>’) // compile the element with the scope $compile(element)(scope) scope.$apply() }));
- 11. Thank you.