如何在控制器中測試功能？

Question

我想在我的vendor.controller中測試一個名為getTodaysHours的函數。

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'
        ]
    };

}

}

我的規格看起來像這樣：

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');
    });
});

並且出現以下錯誤：

錯誤：[$ injector：unpr]未知提供程序：dataProvider <-數據<-VendorController

TypeError：未定義不是/Users/adminuser/Documents/workspace/thcmaps-ui/.tmp/serve/app/index.module.js（第9行）中的對象（評估“ vm.getTodaysHours”）

1. 我不確定是什么導致了第一個錯誤。
2. 我應該在此附加getTodaysHours函數嗎？ 正確的做法是什么？

Answer 1

似乎很明顯，Angular找不到您的data提供者。 考慮到它是一個協作者 ，無論如何您應該提供一個模擬/間諜實現。

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
        });
    });
});

---

關於您另一個問題， getTodaysHours()根本不是您的控制器的方法； 您已經在構造函數中定義了它。 將其移至班級正文，即

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

    getTodaysHours() {
        // ...
    }
}