Jasmine in Angular Unit-test: Modify a Read-only value with "Object.definedProperty"

If you are using Typescript and when you're not as well-versed with it (like I do), then surely you'll come into type issue from time to time.

If unlucky, eslint will also give you some headache time during your development work too, but that's good sign that you are learning.

Problems

Modifying a read-only value in Angular Unit-Test (*.spec.ts) files will give you warning like below:

Cannot assign a value to a read-only property even on Unit Test script

the routerSpy is a mocked Router from '@angular/router'.

let routerSpy: jasmine.SpyObj<Router>;

Solution

With the help from native Javascript Object.defineProperty(), we can set value manually through method below:

Set value through Object.defineProperty

Unit test on Angular with Jasmine, test case executed randomly

 Problems

If your written unit test is written in an order that has test like:

expect(modalCtrlSpy.dismiss.calls.count()).toBe(1);

The "count()" is accumulated throughout the test cases from the start until the end of a "described" scenario. If test cases get executed without following the order as written test, it fails due to "count()" result get accumulated differently across the test. It can't match the "expected" accumulated result if test run randomly.

Solution

In the karma.conf.js file, add "random: false" under client.jasmine object to prevent test case being executed randomly.

Unit test for Directive with template - AngularJs

As we are adding unit test for directive, its implementation can vary from simple to very complex.

The complex implementation require more knowledge about how to write deeper test in order to get better tested coverage.

To start testing you'll need to start with $compile of DOM element, link function, to angular's controller or anonymous function controller, to template...  

Here are the sources to learn about writing directive's unit test.

1) UNIT TESTING DIRECTIVES 

• very interactive and straight forward Directive Unit Testing Guide
• covered topics
• "setup karma.config.js"
• "how to start testing directive", 
• "working with template" (ng-html2js processor)
• has more thorough coverage of possible solutions required for Directive unit testing

2) Testing AngularJS directive controllers with Jasmine and Karma (1st tutorial) (2nd tutorial) 

• Covered
• setup sample karma.config.js
• unit test of anonymous function as controller
• make use of ng-html2js process

• The best part of this tutorial is in "2nd tutorial" link, it provided sample of Directive using anonymous function as its controller
• Testing with anonymous function as controller

  
  angular.directive('myDirective', function() {
    return {
      restrict: 'a',
      controller: function() {} // <--- anonymous controller
    };
  });
  

  
  
• Alternative beside anonymous function as controller

  
  angular
  .controller('myCtrl', function() {})
  .directive('myDirective', function() {
    return {
      restrict: 'a',
      controller: 'myCtrl'
    };
  });
  

3) Testing AngularJS Directives

• covered simple test of directive on
• utilise jQlite 
• unit test of directive's controller from one of the defined angular controller

Possible issue to overcome:

1. To test a custom validation angular directive
• unit test of form changes detection