单元测试$mdDialog角材料

Question

我在一个函数中调用了一个$mdDialog。我想对$mdDialog进行单元测试，确定并取消案例。

下面是我的控制器代码(app.controller.js).

 (function () {
    'use strict';

    app.controller('AppCtrl', AppCtrl);

    AppCtrl.$inject = ['$scope', '$mdDialog'];

    function AppCtrl($scope, $mdDialog) {

        $scope.saveEntry = function (ev) {
            var confirm = $mdDialog.prompt()
                .title('Save Entry')
                .textContent('If you want, you can add a description to explain what you changed.')
                .placeholder('Version Description')
                .ariaLabel('Version Description')
                .initialValue('')
                .targetEvent(ev)
                .ok('Save')
                .cancel('Cancel');

            $mdDialog.show(confirm).then(function (result) {
                $scope.status = true;
            }, function () {
                $scope.status = false;
            });
        };
    }

})();

下面是规范代码(app.controller.spec.js)：

describe('Unit test AppController: mdDialog', function () {
    var $controller, $mdDialog;
    beforeEach(function () {
        module('App');
        inject(function (_$controller_, _$mdDialog_) {
            $controller = _$controller_;
            $mdDialog = _$mdDialog_;
        });
    });

    it(': Opened', function () {
        var $scope = {};
        var controller = $controller('AppCtrl', { $scope: $scope });

        var $mdDialogOpened = false;
        $mdDialog.show = jasmine.createSpy().and.callFake(function () {
            $mdDialogOpened = true;
        });

        $scope.saveEntry();
        $scope.$digest();

        expect($mdDialog.show).toHaveBeenCalled;
        expect($mdDialogOpened).toBe.true;
    });
});

当我运行上面的代码时，我得到了以下错误：TypeError:无法读取未定义的属性'then‘

我引用了这个GitHub问题https://github.com/angular/material/issues/1482。但我没有办法解决我的问题

提前感谢

Answer 1

问题是，您正在注入一个版本的$mdDialog，并试图在另一个版本上进行测试。

你可以试试这样的方法：

describe('Unit test AppController: mdDialog', function () {
    var ctrl, mdDialog, scope;

    beforeEach(function () {
        module('App');
        inject(function ($rootScope, $controller, $mdDialog) {
        scope = $rootScope.$new();
        mdDialog = $mdDialog; //keep the reference, for later testing.

        spyOn(mdDialog, 'show');
        mdDialog.show.and.callFake(function () {
        return {
            then: function (callBack) {
                        callBack(true); //return the value to be assigned.
                    }
        }
        });     

        ctrl = $controller('AppCtrl',{$scope:scope, $mdDialog:mdDialog}); //Inject the dependency

        });
    });

    it(': Opened', function () {
        scope.saveEntry(); //exercise the method.
        scope.$digest();

        expect(mdDialog.show).toHaveBeenCalled();
        expect(scope.status).toBe(true);
    });
});

类似的东西应该能起作用。

希望能帮上忙。