w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Script Angularjs

Angularjs Jasmine Service Dependency Injection

W3TWEAKS by W3TWEAKS
November 26, 2019
in Angularjs

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.

You might also like

Iterate javascript object keys using angularjs ngRepeat

Iterate javascript object keys using angularjs ngRepeat

October 27, 2020
Enable and Disable drop down box using angularjs ngDisabled

Enable and Disable drop down box using angularjs ngDisabled

November 26, 2019

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

Tags: AngularjsdemoDependencyInjectionJasmineServicetutorial
Previous Post

Android WebView application Prompt | Android Studio

Next Post

Javascript Permutations and Combinations of Array Values

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Iterate javascript object keys using angularjs ngRepeat

Iterate javascript object keys using angularjs ngRepeat

by W3TWEAKS
October 27, 2020

This tutorial will explain how to get or iterate the JavaScript Object keys / Properties using AngularJs ngRepeat. It is...

Enable and Disable drop down box using angularjs ngDisabled

Enable and Disable drop down box using angularjs ngDisabled

by W3TWEAKS
November 26, 2019

In AngularJs we can able to disable or enable the dropdown like jQuery does. Using ngDisabled function in angularjs we...

Select all and Deselect all checkboxes in angularjs

Select all and Deselect all checkboxes in angularjs

by W3TWEAKS
October 22, 2021

This tutorial will explain how to achieve check all and uncheck all checkbox using angularjs and listing all checked values...

Angularjs and JSON list infinite scroll

Angularjs and JSON list infinite scroll

by Vetrivel Pandian
September 19, 2019

JSON is more better way to transmitting the data in server to client. When you have develop large data application,...

Next Post
Javascript Permutations and Combinations of Array Values

Javascript Permutations and Combinations of Array Values

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools