单元测试 $mdDialog angular material

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

非常相似的东西应该可以工作。
希望这有帮助。

单元测试 $mdDialog angular material

Unit test $mdDialog angular material

unit-testing

angularjs

karma-jasmine

angular-mock

angular-material