测试打开 md-dialog 的组件

Question

我正在尝试为打开对话框的 Angular 组件编写单元测试，但我无法这样做，因为我无法触发对话框的关闭。

如何使 md 对话框从测试用例中解析？

我创建了一个存储库，其中包含一个可以重现问题的基本示例，并复制了下面的核心部分。有一个 index.html 用于手动验证代码是否正常工作，一个显示问题的测试用例以及一个如何在 md 代码中编写测试的示例。

存储库 - https://github.com/gseabrook/md-dialog-test-issue

组件非常基础

angular
.module('test', ['ngMaterial'])
.component('dialogTest', {
    template: '<button ng-click="showDialog()">Show Dialog</button>',
    controller: function($scope, $mdDialog) {
        var self = this;

        $scope.showDialog = function() {
            self.dialogOpen = true;

            var confirm = $mdDialog.confirm()
                .title('Dialog title')
                .ok('OK')
                .cancel('Cancel');

            $mdDialog.show(confirm).then(function(result) {
                self.dialogOpen = false;
            }, function() {
                self.dialogOpen = false;
            });
        }
    }
});

而且测试也很简单

it("should open then close the dialog", function() {
    var controller = element.controller("dialogTest");

    expect(controller.dialogOpen).toEqual(undefined);

    expect(element.find('button').length).toEqual(1);
    element.find('button').triggerHandler('click');

    expect(controller.dialogOpen).toBeTruthy();

    rootScope.$apply();
    material.flushInterimElement();

    element.find('button').eq(2).triggerHandler('click');

    rootScope.$apply();
    material.flushInterimElement();

    expect(controller.dialogOpen).toBeFalsy();
});

Answer 1

我设法通过设置根元素解决了这个问题，因为问题似乎与在测试中编译的元素与 angular-material 附加的根元素无关对话框也是。

我已经用完整代码更新了 github 存储库，但重要的部分是

beforeEach(module(function($provide) {
    rootElem = angular.element("<div></div>")
    $provide.value('$rootElement', rootElem);
}));

beforeEach(inject(function(_$rootScope_, _$compile_, $mdDialog, _$material_) {
    ...
    element = getCompiledElement();
    angular.element(window.document.body).append(rootElem);
    angular.element(rootElem).append(element);
}));

测试打开 md-dialog 的组件

Testing component that opens md-dialog

angularjs

angular-material

mddialog