將復雜的Angular控制器注入Jasmine

Question

我的任務是開始圍繞一些舊的Angular代碼編寫測試。 而且，我是Angular的新手，還是Jasmine的初學者。

看到了另一篇類似的帖子，但得到作者的答復，並在其文件中添加了參考路徑。 我不相信我有這個問題。

嘗試從Angular模塊中插入一個控制器，這樣我就可以圍繞其內部方法（在本例中為“ addPayment”函數）編寫測試。

我繼續遇到$ injector錯誤，但是我很困惑，無法理解如何解決它。 我確信它與控制器的依賴關系有關，但我不了解糾正它所需要的語法。

app.js：

'use strict'

angular.module('AdminDashboard', ['ui.router', 'toastr', 'ui.bootstrap', 'checklist-model', 'ngSanitize', 'ngCsv', 'ngResource', 'angular-spinkit'])
.config(function(toastrConfig) {
    angular.extend(toastrConfig, {
        timeout: 5000
    });
});

Controller.js：

angular.module('AdminDashboard')
    .controller('MakePaymentCtrl', ['$scope', '$state', '$stateParams', '$location', '$sce', 'paymentsFactory', '$resource', '$log', '$q', '$modal', 'toastr', function ($scope, $state, $stateParams, $location, $sce, paymentsFactory, $resource, $log, $q, $modal, toastr) {
    var controller = this;
    controller.loading = true;

    controller.loading = true;
    controller.submittedPayments = [];

    controller.canPostDatePayments = function () {
        return controller.CustomerModel.CanPostDatePayments.Item1;
    }

    controller.addPayment = function () {
        var newPayment = { PaymentId: 0, Agent: controller.agent };
        if (!controller.CustomerModel.CanPostDatePayments.Item1) {
            newPayment.ScheduledDate = moment().format('L');
        }
        controller.submittedPayments.push(newPayment);
    }
}]);

Test.js：

///<reference path="~/Scripts/jasmine/jasmine.js"/>
///<reference path="../../../../../../../../Scripts/angular.min.js"/>
///<reference path="../../../../../../../../Scripts/angular-mocks.js"/>
///<reference path="../../../../../../../../../Web.Payments/Areas/Admin/Scripts/dashboard/app.js"/>
///<reference path="../../../../../../../../../Web.Payments/Areas/Admin/Scripts/dashboard/payments/controllers/Controller.js"/>

describe('Controller: public/MakePaymentCtrl', function() {
    var $controller;

    beforeEach(module('AdminDashboard'));

    beforeEach(inject(function(_$controller_){
        $controller = _$controller_;
        $controller('MakePaymentCtrl');
    }));

    describe("controller.addPayment", function () {
        it("Contains spec with expectation", function () {
            expect(true).toBe(true);
        });
    });
});

Answer 1

是的，沒有為控制器列出您的依賴項注入。 您需要執行以下操作：

beforeEach(inject(function(_$controller_, $rootScope, $state, $stateParams, $location, $sce, paymentsFactory, $resource, $log, $q, $modal, toastr){
    $scope = $rootScope.$new();
    $controller = _$controller_;
    $controller('MakePaymentCtrl', {$scope:$scope,$state:$state,$stateParams:$stateParams,$location:$location', $sce:$sce,paymentsFactory:paymentsFactory,$resource:$resource,$log:$log,$q:$q, $modal:$modal,toastr:toastr};
}));

同樣，在控制器中使用$ resource通常也不是一個好習慣。 您通常會在服務或工廠看到這一點。 提供舊版代碼后，請盡可能嘗試對其進行清理。