Making Client side Tests

Client Side Tests

Unit testing AngularJS client side code ensure that the individual parts that make up the UI of the application are working as expected.

Mocking

When testing different AngularJS components, it may be necessary to mock controllers, services, etc. You can use, $controllerProvider to attach mock controllers and $provide to attach mock service, factories, and other providers.

StackOverflow Example

beforeEach(module('mean.module', function($controllerProvider){
    $controllerProvider.register('myController', function($scope){
        //Mock controller
    }
}));

---

Tests

Services

Controllers

Directives

Templates

If your directive uses a templateUrl it is necessary to setup the tests to be able to find the template. Because http(s) connection are mocked in client side tests, when Angular attempts to get your template from the server it will not be able to.

The tests are setup by default to find any html files inside the packages public folders (package/**/public/**/*.html) and make them available as Angular modules.

For example:

packages/custom/common/public/directives/categoryNav/categoryNav.js:

angular.module('mean.common')
  .directive('categoryNav', function(){
    return {
      scope: {
        list: '=list'
      },
      templateUrl: 'common/directives/categoryNav/categoryNav.html'
    };
  });

To make this directive available in the test we just add it into a beforeEach().

packages/custom/common/tests/directives/categoryNav/categoryNav.spec.js:

beforeEach(module('common/directives/categoryNav/categoryNav.html'));