单元测试$ mdDialog角度材质

时间:2017-03-20 06:20:06

标签: angularjs unit-testing angular-material karma-jasmine angular-mock

我在一个函数中调用了一个$ mdDialog。我想单元测试$ mdDialog ok并取消案例。

以下是我的控制器代码( 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:无法读取属性'然后'未定义的

我提到了这个GitHub问题example。但我没有为我的问题找到解决方案

提前致谢

1 个答案:

答案 0 :(得分:4)

问题是您正在注入一个版本的 $ 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);
    });
});

非常相似的东西应该有效 希望这有帮助。