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的组件

1 个答案: