Jasmine AngularJs How to access Controller's properties

Question

This is my AngularJs code, I would like to write a unit test which should call variables and functions inside the controller function.

For example, I would like to expect whether the abcCode is toBeDefined();

please let me know how to load the module and to call the properties inside the controller function (abcCodesCntrl). your suggestions would be really helpful. thanks

function () {

angular.module('abcapp',[])
    .component('abcCodes', {
        templateUrl: 'app/abcCodes/abcCodes.html',
        controller: abcCodesCntrl
    })
    .config(function ($stateProvider) {
        $stateProvider
            .state('abcCodes', {
                parent: 'home',
                url: 'abcCodes',
                template: '<abc-codes flex layout="column"></abc-codes>',
                data: {
                    label: "abc Codes",
                    icon: 'business',
                    menu: true
                }
            });
    });

/** @ngInject */
function abcCodesCntrl(F $state, abcCodeSvc, $scope, $mdDialog) {
    var ctrl = this;


    ctrl.abcCodes = [];

    ctrl.loadingabcCodes = false;

} }

Eduard Jacko · Accepted Answer · 2018-10-15 10:08:10Z

1

beforeEach(() => {
  angular.mock.module('abcapp');
});

it('pass', inject( $rootScope => {
  const scope = $rootScope.$new();
  const element = angular.element('<abc-codes/>');
  const template = $compile(element)(scope);
  const controller = template.controller('abcCodes');
  expect(controller.abcCodes).toBeDefined();
}))

if you can use es6 than controller become class

export class abcCodesCntrl{
  /** @ngInject */
  constructor( $state, abcCodeSvc, $scope, $mdDialog) {
    this.$state = $state;
    this.abcCodeSvc = abcCodeSvc;
    this.$scope = $scope;
    this.$mdDialog = $mdDialog;
    this.abcCodes = [];
    this.loadingabcCodes = false;
  }
}

not much improvement, but you could test controller separated from directive which mean you dont need create and initialize the element. Just test the functionality it self. Also soon as you add methods, its much easier to read.

answered Oct 15, 2018 at 10:08

Eduard Jacko

2,1611 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hariharan Ram Over a year ago

Thanks for your input. Here we can't change our Dev code. we have not used es6 . the above code didn't work for us. not able to expect or call the variable or function which is inside a controller.

Hariharan Ram Over a year ago

describe('test', function () { var $compile,$rootScope; beforeEach(module('ui.router')); beforeEach(() => { angular.mock.module('abcapp'); }); beforeEach(inject(function($compile, $rootScope){ $compile = $compile; $rootScope = $rootScope; })); it('pass', function () { const element = angular.element('<abc-codes/>'); const template = $compile(element)($rootScope); const controller = template.controller('abcCodesCntrl'); expect(controller.abcCodes).toBeDefined(); }) })

Hariharan Ram Over a year ago

Could you please suggest some solution for this, it would be really helpful for us to proceed further. thanks.

Collectives™ on Stack Overflow

Jasmine AngularJs How to access Controller's properties

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related