Home / Frontend Codes and Demos / Frameworks / Angularjs / Angularjs Jasmine Service Dependency Injection
Angularjs Jasmine Service Dependency Injection

This tutorial will explain how to write the Jasmine unit test case for angularjs service dependency injection. End of the tutorial you will find the demo and download link.This tutorial will help to run the Jasmine unit test in browsers.

Angularjs Jasmine Service Dependency Injection

Angularjs Jasmine Service Dependency Injection

This tutorial will explain how to write the Jasmine unit test case for angularjs service dependency injection. End of the tutorial you will find the demo and download link.This tutorial will help to run the Jasmine unit test in browsers.

{loadposition position-9}

Let’s start the tutorial.

Below starting the project please create the project folder “jasmine” and create the below files and folder inside the project folder.

-jasmine 	--spec 		---controller.js 		---serviceA.js 		---serviceB.js 		---serviceASpec.js 	--jasmineSpec.html

Open the spec/controller.js file and place the below code to that file

var app = angular.module('app', []); app.controller('PasswordController', function($scope,serviceA) {     $scope.data = serviceA.getData(); });

Declare the angular module in the var (app) and use it to across to your all files. At the end of the project you will face error like below if we declaring the module each time when we creating the angular files and injecting the dependency instead of creating common module like above.

Error: [$injector:unpr] Unknown provider: serviceBProvider <- serviceB <- serviceA

Create Services methods.

Open spec/servicesA.js and place the below code.

app.service('serviceA',function(serviceB){    return{        getData:function(){            return serviceB.getServiceData();        }    }  });

Open spec/servicesB.js and place the below code.

app.service('serviceB',function(){    return{        getServiceData : function(){            return "serviceBData";        }    }  });

Create spec functions

Open spec/serviceASpec.js and place the below code.

describe('Service A', function () {          var serviceA, serviceB;      beforeEach(module('app'));      // Inject the dependancy for the testing data     beforeEach(inject(function (_serviceA_,_serviceB_) {         serviceA = _serviceA_;         serviceB = _serviceB_;     }));      it('runServices.fnServices()', function () {             expect(serviceA.getData()).toEqual('serviceBData');     });  });

Open the jasmineSpec.html file and place the below code to that file

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>Angularjs Jasmine Service Dependency Injection</title>      <link rel="shortcut icon" type="image/png" href="jasmine_favicon.png">     <!-- Jasmine dependency -->     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.min.css">     <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.min.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine-html.min.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/boot.min.js"></script>      	<!-- AngularJS dependency -->     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-mocks.js"></script>          <!-- include source files here... -->     <script src="spec/controller.js"></script>     <script src="spec/serviceB.js"></script>     <script src="spec/serviceA.js"></script>     <script src="spec/serviceASpec.js"></script>   </head>   <body>   </body> </html>

The demo will well work in any Jasmine unit test supported browsers and it don’t have dependency with Karma.

Demo

About CV

I'm frontend developer

Check Also

Angularjs and JSON list infinite scroll

Load Large dataset values from JSON using Angularjs

JSON is more better way to transmitting the data in server to client. When you have develop large data application, I suggest to use JSON because its very efficient and speed to get the value in Server. Ajax also intermediate the JSON to help for develop the big data application.