What is the method for verifying a function within an injected controller?

Question

What is the method for verifying a function within an injected controller?

Right now, I'm in the process of testing whether the getTodaysHours function on my controller is being called. The goal is for this function to retrieve hours from a mock JSON data and pass if the parameters match. However, I am encountering some issues with the initial step.

vendor.controller

export class VendorController {
    constructor($rootScope, data, event, toastr, moment, _, distanceService, vendorDataService, userDataService, stateManagerService) {
        'ngInject';
        //dependencies
        this.$rootScope = $rootScope;
        this.toastr = toastr;
        this._ = _;
        this.userDataService = userDataService;
        this.vendorDataService = vendorDataService;
        this.stateManagerService = stateManagerService;
        this.event = event;

        //initialize
        data.isDeepLink = true;
        this.data = data;
        this.data.last_update = moment(this.data.updated_at).format('MM/DD/YY h:mm A');
        this.data.distance = distanceService.getDistance(this.data.loc.lng, this.data.loc.lat);
        this.data.todaysHours = this.getTodaysHours();
        this.data.rating_num = Math.floor(data.rating);

        this.hasReviewed = (userDataService.user.reviewed[data._id]) ? true : false;
        this.isGrid = false;
        this.isSearching = false;
        this.hideIntro = true;
        this.menuCollapsed = true;
        this.filterMenuCollapsed = true;

        this.selectedCategory = 'All';
        this.todaysHours = '';
        this.type = '';
        this.searchString = '';

        this.reviewScore = 0;

        this.today = new Date().getDay();

        this.vendorDataService.currentVendor = data;

        //load marker on map
        $rootScope.$broadcast(event.ui.vendor.pageLoad, data);

        //retrieve menu
        vendorDataService.getVendorMenu(data._id)
            .then((res)=> {
                this.data.menu = res.menu;
                this.menuContainer = this.data.menu;
                this.totalResults = this.getTotalResults();
                this.availableMenuCategories = this.getAvailableMenuCategories();
            })
            .catch(() => {
                this.toastr.error('Oops, something went wrong! Unable to load the menu.',  'Error');
            });
    }

    //function to get today's hours
    getTodaysHours() {
        let today = this.data.hours[new Date().getDay()];
        return (today.opening_time || '9:00am') + ' - ' + (today.closing_time || '5:00pm');
    }  
}

The first test passes when mocking the JSON data using $provide constant

describe('vendor controller', () => {
    let vm,
        data = {"_id":"56b54f9368e685ca04aa0b87","lat_lon":"33.713018,-117.841101","hours":[{"day_of_the_week":"sun","closing_time":" 7:00pm","opening_time":"11:00am","day_order":0,"id":48880},...];

    beforeEach(angular.mock.module('thcmaps-ui', ($provide) => {
        $provide.constant('data', new data);
      }));

    //first test
    it('should pass', () => {
        expect(data._id).toEqual('56b54f9368e685ca04aa0b87');
    });

    //second test
    it('should call getTodaysHours', () => {
    expect(vm.getTodaysHours()).toHaveBeenCalled();
    });
});

Next, I attempted to inject the controller (unsure about correct syntax):

beforeEach(angular.mock.module('thcmaps-ui', ($provide) => {
    $provide.constant('data', new data);
  }));
beforeEach(inject(($controller) => {
    vm = $controller('VendorController');
    spyOn(vm,'getTodaysHours').and.callThrough();
}));

This resulted in a forEach error. Also, the second test reported an undefined error while evaluating vm.getTodaysHours():

PhantomJS 2.1.1 (Mac OS X 0.0.0) vendor controller should pass FAILED forEach@/Users/adminuser/Documents/workspace/thcmaps-ui/bower_components/angular/angular.js:341:24 loadModules@/Users/adminuser/Documents/workspace/thcmaps-ui/bower_components/angular/angular.js:4456:12 createInjector@/Users/adminuser/Documents/workspace/thcmaps-ui/bower_components/angular/angular.js:4381:22 workFn@/Users/adminuser/Documents/workspace/thcmaps-ui/bower_components/angular-mocks/angular-mocks.js:2507:60 /Users/adminuser/Documents/workspace/thcmaps-ui/bower_components/angular/angular.js:4496:53

PhantomJS 2.1.1 (Mac OS X 0.0.0) vendor controller should call getTodaysHours FAILED forEach@/Users/adminuser/Documents/workspace/thcmaps-ui/bower_components/angular/angular.js:341:24 loadModules@/Users/adminuser/Documents/workspace/thcmaps-ui/bower_components/angular/angular.js:4456:12 createInjector@/Users/adminuser/Documents/workspace/thcmaps-ui/bower_components/angular/angular.js:4381:22 workFn@/Users/adminuser/Documents/workspace/thcmaps-ui/bower_components/angular-mocks/angular-mocks.js:2507:60 /Users/adminuser/Documents/workspace/thcmaps-ui/bower_components/angular/angular.js:4496:53 TypeError: undefined is not an object (evaluating 'vm.getTodaysHours') in /Users/adminuser/Documents/workspace/thcmaps-ui/.tmp/serve/app/index.module.js (line 9) /Users/adminuser/Documents/workspace/thcmaps-ui/.tmp/serve/app/index.module.js:9:244419

javascript angularjs json unit-testing jasmine

Answer 1

Answer №1

When creating your controller with the $controller function, it's important to inject its dependencies. Take a look at this sample controller:

class MyController {
  constructor($rootScope, $log) {
    // Save the dependencies
    this.$rootScope = $rootScope;
    this.$log = $log;
  }

  // Retrieve value from $rootScope
  getValue() {
    this.$log.debug('Retrieving value');
    return this.$rootScope.foobar;
  }

  // Get current date
  getDate() {
    this.$log.debug('Getting date');
    return Date.now()
  }

  static get $inject() {
    return ['$scope', '$log'];
  }
}

This ES6 controller defines its dependencies in the static $inject getter at the end of the class declaration. AngularJS recognizes these when the controller is instantiated.

In this case, the controller depends on $rootScope and $log. When testing, make sure to inject the dependencies like so:

describe('Spec: MyController', () => {
  var controller;

  beforeEach(inject(($rootScope, $log, $controller) => {
    controller = $controller('MyController', {
      $rootScope,
      $log
    });
  });

  it('should return a value from the $rootScope', () => {
    var value = controller.getValue();
    // ... perform checks
  });

  it('should return the current date', () => {
    var date = controller.getDate();
    // ... perform checks
  });
});

Newer versions of Jasmine allow using the this keyword in tests, simplifying variable management and avoiding global declarations.

By sharing this across test blocks, you can eliminate enclosures and globals. Example:
beforeEach(inject(function ($rootScope, $log, $controller) {
  this.controller = $controller('MyController', {
    $rootScope,
    $log
  });
});

it('should return a value from the $rootScope', function () {
  this.value = controller.getValue();
  // ... perform checks
});

Remember to pass an object containing the dependencies to $controller, allowing for mock services or providers instead of spies.

$controller: https://docs.angularjs.org/guide/unit-testing
this:

Apologies for the awkward link regarding Jasmine documentation, technical limitations prevented including a direct anchor link to the relevant section.

Answer 2

When creating your controller with the $controller function, it's important to inject its dependencies. Take a look at this sample controller:

class MyController {
  constructor($rootScope, $log) {
    // Save the dependencies
    this.$rootScope = $rootScope;
    this.$log = $log;
  }

  // Retrieve value from $rootScope
  getValue() {
    this.$log.debug('Retrieving value');
    return this.$rootScope.foobar;
  }

  // Get current date
  getDate() {
    this.$log.debug('Getting date');
    return Date.now()
  }

  static get $inject() {
    return ['$scope', '$log'];
  }
}

This ES6 controller defines its dependencies in the static $inject getter at the end of the class declaration. AngularJS recognizes these when the controller is instantiated.

In this case, the controller depends on $rootScope and $log. When testing, make sure to inject the dependencies like so:

describe('Spec: MyController', () => {
  var controller;

  beforeEach(inject(($rootScope, $log, $controller) => {
    controller = $controller('MyController', {
      $rootScope,
      $log
    });
  });

  it('should return a value from the $rootScope', () => {
    var value = controller.getValue();
    // ... perform checks
  });

  it('should return the current date', () => {
    var date = controller.getDate();
    // ... perform checks
  });
});

Newer versions of Jasmine allow using the this keyword in tests, simplifying variable management and avoiding global declarations.

By sharing this across test blocks, you can eliminate enclosures and globals. Example:
beforeEach(inject(function ($rootScope, $log, $controller) {
  this.controller = $controller('MyController', {
    $rootScope,
    $log
  });
});

it('should return a value from the $rootScope', function () {
  this.value = controller.getValue();
  // ... perform checks
});

Remember to pass an object containing the dependencies to $controller, allowing for mock services or providers instead of spies.

$controller: https://docs.angularjs.org/guide/unit-testing
this:

Apologies for the awkward link regarding Jasmine documentation, technical limitations prevented including a direct anchor link to the relevant section.

What is the method for verifying a function within an injected controller?

Answer №1

Similar questions

Modifications to object persist even after being reassigned

Is a specific format necessary for express next(err) to function properly?

How to display JSON data accurately within a UITableView

Tallying the total number of elements within the Item class both pre and post header classes

What is the maximum amount of information that can be stored in a data attribute within the DOM?

Steps for creating a monochromatic blinking background for notifications

You cannot access the property 'subscribe' on a void type in Angular 2

"Learn the steps to seamlessly add text at the current cursor position with the angular-editor tool

How can you locate and emphasize specific text within various elements using JavaScript?

Having difficulty loading CSS and other files while utilizing ngRoute in AngularJS

Modify the color of the table map based on specific conditions in a React.js application

Attempting to load the parent window of a framed page from a separate domain results in a permission denial issue in Internet

Why isn't offsetTop working for a div within a table in HTML and Javascript?

JavaScript Reactive: Managing subscriptions in flatMap streams

The concept of circular dependencies in ES6 JavaScript regarding require statements

Encountering an issue: The output folder specified is invalid while attempting to generate a unified HTML template file with gulp-angular-templatecache

What is preventing Safari and Firefox from properly handling audio data from MediaElementSource?

Leveraging ng-model with expressions in ng-repeat in AngularJS.Would you

Managing interactions with dynamically created buttons

Utilizing class binding in a unique way by setting class through a custom