Incorrect Results from Angular Code Coverage

Question

Incorrect Results from Angular Code Coverage

Currently using Angular.js, Karma, Karma-coverage (Istanbul), and Jasmine for my stack.

While conducting Code Coverage analysis on my app, I encountered an issue which leads to my question - Service A is showing up as covered by tests (in green) even though it actually has no associated tests.

I have a suspicion that the cause of this issue might be:

Service A is utilized by Controller B.
Controller B has test coverage results displaying accurately as covered by tests.
However, while testing Controller B, Service A is not being mocked.

It seems like due to Service A indirectly being called by the tests of Controller B, the incorrect result is being obtained.

Any insights or suggestions? Is my suspicion correct? Are there any workarounds to ensure accurate test coverage results in this scenario?

Appreciate your help!

javascript angularjs jasmine istanbul karma-coverage

Answer 1

Answer №1

Regrettably, this is how code coverage is determined. When the code runs, it counts as being "covered". Fortunately, there are steps you can take to minimize some of the inaccurate results. One option is to mock your dependencies!

For instance, you can use a jasmine spy instead of the real service in the following example:

describe('Controller Tests', function() {
  var $scope, mockServiceA;
  
  beforeEach(module('app', function($provide) {
    mockServiceA = jasmine.createSpyObj('mockServiceA', ['foo']);
    $provide.value('ServiceA', mockServiceA);
  }));

  beforeEach(inject(function($rootScope, $controller) {
    $scope = $rootScope.$new();
    $controller('ControllerB', {
      $scope: $scope
    });
  }));
  
  describe('ControllerB', function() {
    it('should call mock service', function() {
      expect(mockServiceA.foo).not.toHaveBeenCalled();
      $scope.useServiceA();
      expect(mockServiceA.foo).toHaveBeenCalled();
    });
  });
});

Check out this functional Plunker for an example: http://plnkr.co/edit/x8gQQNsHT0R5n5iJSxKw?p=info

Answer 2

Regrettably, this is how code coverage is determined. When the code runs, it counts as being "covered". Fortunately, there are steps you can take to minimize some of the inaccurate results. One option is to mock your dependencies!

For instance, you can use a jasmine spy instead of the real service in the following example:

describe('Controller Tests', function() {
  var $scope, mockServiceA;
  
  beforeEach(module('app', function($provide) {
    mockServiceA = jasmine.createSpyObj('mockServiceA', ['foo']);
    $provide.value('ServiceA', mockServiceA);
  }));

  beforeEach(inject(function($rootScope, $controller) {
    $scope = $rootScope.$new();
    $controller('ControllerB', {
      $scope: $scope
    });
  }));
  
  describe('ControllerB', function() {
    it('should call mock service', function() {
      expect(mockServiceA.foo).not.toHaveBeenCalled();
      $scope.useServiceA();
      expect(mockServiceA.foo).toHaveBeenCalled();
    });
  });
});

Check out this functional Plunker for an example: http://plnkr.co/edit/x8gQQNsHT0R5n5iJSxKw?p=info

Incorrect Results from Angular Code Coverage

Answer №1

Similar questions

The issue with the AngularJS input field directive is that it fails to clear errors when the scope's value changes

Having trouble deciding between JSON, XML, or using a database?

Using Jquery Mobile to make an AJAX POST request with XML

Leverage JavaScript to retrieve the number of active Ajax requests in JSF

Make sure that the parent element is only visible once all of its child elements have

What is the best way to conceal a dropdown menu when the page first loads?

What is the method for specifying a specific sub-dependency version in a package in Node.js?

Concentrating on div elements using React

Obtaining the value of a checkbox with React

"Exploring the Power of Angular Change Detection with Promises in a Hybrid

Error: req.body or req.params.id is not defined in the current context (PUT and PATCH requests)

The validation using regex is unsuccessful when the 6th character is entered

I keep receiving the same error (ENOENT) for all npm commands

How can I incorporate a material-ui component using innerHTML?

What is the best way to interweave my objects within this tree using recursion?

A single Modal, Ajax, and data that is continuously refreshed

A guide on retrieving real-time data from PHP using Ajax

Simplified jQuery function for multiple div mouseover operations

What is the fewest amount of commands needed to generate a client-side Javascript code that is ready for use?

React - Error: you have a syntax problem because there is an unexpected token <