如何在控制器中测试功能？

Question

I would like to test a function called getTodaysHours in my vendor.controller.

vendor.controller.js

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

    //bootstrap
    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;


//get todays hours
getTodaysHours() {
    let today = this.data.hours[new Date().getDay()];
    today.opening_time = today.substring(0,6);
    today.closing_time = today.substring(10,15);


    return (today.opening_time || '9:00am') + ' - ' + (today.closing_time || '5:00pm');
}

vendorData.service.js

export class VendorDataService {
constructor($rootScope, $resource, $q, $state, $stateParams, constant, userDataService, event, localStorageService, searchFilterService) {
    'ngInject';

    //deps
    this.$resource = $resource;
    this.$rootScope = $rootScope;
    this.$q = $q;
    this.$state = $state;
    this.$stateParams = $stateParams;
    this.searchFilterService = searchFilterService;
    this.localStorageService = localStorageService;
    this.userDataService = userDataService;
    this.constant = constant;
    this.event = event;

    //ng resource
    this.vendorResource = this.$resource('api/vendor/:vendor');
    this.vendorReviewResource = $resource('api/vendor/:id', null, {review: {method: 'PATCH'}});
    this.menuResource = this.$resource('api/vendor/menu/:id');
    this.vendorCoordinate = localStorageService.get(constant.storageKey.vendorCoordinate);

    //store current vendor
    this.currentVendor = {
        hours:[
            '10:00AM - 5:00PM',
            '9:00AM - 5:00PM',
            '9:00AM - 5:00PM',
            '9:00AM - 5:00PM',
            '9:00AM - 5:00PM',
            '9:00AM - 5:00PM',
            '10:00AM - 5:00PM'
        ]
    };

}

}

My spec looks something like this:

describe('vendor controller', () => {
    let vm;

    beforeEach(angular.mock.module('thcmaps-ui'));
    beforeEach(inject(($controller, vendorDataService) => {
        vm = $controller('VendorController');

    }));

    it('should state store hours for today', () => {
        expect(vm.getTodaysHours).toEqual('9:00AM - 5:00PM');
    });
});

and I'm getting the following errors:

Error: [$injector:unpr] Unknown provider: dataProvider <- data <- VendorController

TypeError: undefined is not an object (evaluating 'vm.getTodaysHours') in /Users/adminuser/Documents/workspace/thcmaps-ui/.tmp/serve/app/index.module.js (line 9)

1. I'm not sure what's causing the first error.
2. Should I be attaching the getTodaysHours function to this ? What is the proper way to do it?

Answer 1

Seems obvious, Angular can't find your data provider. Given it's a collaborator , you should be providing a mock / spy implementation anyway.

let vm, data;

beforeEach(() => {
    data = {
        _id: 1,
        updated_at: 'now',
        loc: {
            lng: 123,
            lat: 456
        },
        rating: 1.2
    };

    module('thcmaps-ui');
    inject($controller => {
        vm = $controller('VendorController', {
            data: data
        });
    });
});

---

On to you other question, getTodaysHours() is simply not a method of your controller; you've defined it inside the constructor. Move it to the class body, ie

class VendorController {
    constructor(...) {
        // ...
    }

    getTodaysHours() {
        // ...
    }
}