首先，我正在尝试对传递给 Angular Material Dialog 的 Controller 进行单元测试。实例。

作为一个一般性问题，单独测试这样的 Controller 更有意义，还是实际调用$mdDialog.show() 更有意义？

我正在尝试第一种方法，但遇到了一些问题，主要与 Angular Material 如何将“局部变量”绑定(bind)到 Controller 有关。

这是我用来在我的源代码中调用对话框的代码，它按预期工作:

$mdDialog.show({
    controller: 'DeviceDetailController',
    controllerAs: 'vm',
    locals: {deviceId: "123"},
    bindToController: true,
    templateUrl: 'admin/views/deviceDetail.html',
    parent: angular.element(document.body),
    targetEvent: event
});

我不相信docs已经更新，但从 0.9.0 左右的版本开始，局部变量在调用构造函数时可用于 Controller (参见 this issue on Github )。这是被测 Controller 构造函数的精简版，因此您可以明白为什么我需要传入变量并在 Controller “实例化”时可用:

function DeviceDetailController(devicesService) {
    var vm = this;

    vm.device = {};
//    vm.deviceId = null;           //this field is injected when the dialog is created, if there is one. For some reason I can't pre-assign it to null.

    activate();

    //////////
    function activate() {
        if (vm.deviceId != null) {
            loadDevice();
        }
    }

    function loadDevice() {
        devicesService.getDeviceById(vm.deviceId)
            .then(function(data) {
                vm.device = data.collection;
            };
    }
}

我正在尝试测试在调用构造函数之前将 deviceId 传递给构造函数时设备是否已分配给 vm.device。

测试( Jasmine 和诗乃，由 karma 运行):

describe('DeviceDetailController', function() {
    var $controllerConstructor, scope, mockDevicesService;

    beforeEach(module("admin"));

    beforeEach(inject(function ($controller, $rootScope) {
        mockDevicesService = sinon.stub({
            getDeviceById: function () {}
        });
        $controllerConstructor = $controller;
        scope = $rootScope.$new();
    }));

    it('should get a device from devicesService if passed a deviceId', function() {
        var mockDeviceId = 3;
        var mockDevice = {onlyIWouldHaveThis: true};
        var mockDeviceResponse = {collection: [mockDevice]};
        var mockDevicePromise = {
            then: function (cb) {
                cb(mockDeviceResponse);
            }
        };

        var mockLocals = {deviceId: mockDeviceId, $scope: scope};

        mockDevicesService.getDeviceById.returns(mockDevicePromise);

        var ctrlConstructor = $controllerConstructor('DeviceDetailController as vm', mockLocals, true);
        angular.extend(ctrlConstructor.instance, mockLocals);
        ctrlConstructor();

        expect(scope.vm.deviceId).toBe(mockDeviceId);
        expect(scope.vm.device).toEqual(mockDevice);
    });
});

当我运行它时，第一个断言通过而第二个断言失败(“Expected Object({ }) to equal Object({ onlyIWouldHaveThis: true }).”)，这表明 deviceId 被注入(inject)到 Controller 的范围，但显然没有及时让 activate() 方法中的 if 子句看到它。

您会注意到我正在尝试模仿 Angular Material 的基本过程通过调用 $controller() 并将第三个参数设置为“true”来使用，这会导致 $controller()返回 Controller 构造函数，而不是生成的 Controller 。然后我应该能够使用我的局部变量扩展构造函数(就像 Angular Material 在上面链接的代码中所做的那样)，然后调用构造函数来实例化 Controller 。

我尝试了很多方法，包括通过调用 $rootScope.$new(true) 将隔离作用域传递给 Controller ​​，但没有效果(我实际上不能说我完全理解隔离作用域，但 $mdDialog 默认使用它。

感谢任何帮助!

最佳答案

我会尝试的第一件事是从您对 $controller 的调用中丢失“as vm”。您可以只将返回值用于您的期望而不是测试范围。

试试这个:

var ctrlConstructor = $controllerConstructor('DeviceDetailController', mockLocals, true);
    angular.extend(ctrlConstructor.instance, mockLocals);
    var vm = ctrlConstructor();

    expect(vm.deviceId).toBe(mockDeviceId);
    expect(vm.device).toEqual(mockDevice);

关于javascript - 测试传递给 Angular Material Dialog 实例的 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32525533/