打开 md-dialog 的测试组件 [英] Testing component that opens md-dialog

问题描述

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

如何使 md 对话框从测试用例中解析出来?

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

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

组件非常基础

角度.module('test', ['ngMaterial']).component('dialogTest', {模板:'<button ng-click="showDialog()">显示对话框</button>',控制器:函数($scope，$mdDialog){var self = this;$scope.showDialog = function() {self.dialogOpen = true;var confirm = $mdDialog.confirm().title('对话框标题').好的好的').cancel('取消');$mdDialog.show(confirm).then(function(result) {self.dialogOpen = false;}， 功能() {self.dialogOpen = false;});}}});

而且测试也很简单

it("应该打开然后关闭对话框", function() {var controller = element.controller("dialogTest");期望(controller.dialogOpen).toEqual(未定义)；期望(元素.查找('按钮').长度).toEqual(1)；element.find('button').triggerHandler('click');期望(controller.dialogOpen).toBeTruthy();rootScope.$apply();material.flushInterimElement();element.find('button').eq(2).triggerHandler('click');rootScope.$apply();material.flushInterimElement();期望(controller.dialogOpen).toBeFalsy()；});

解决方案

我设法通过设置根元素来解决该问题，因为问题似乎与测试中正在编译的元素与 angular 的根元素未连接有关-material 也附加了对话框.

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

beforeEach(module(function($provide) {rootElem = angular.element("
")$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);}));

I am trying to write a unit test for an Angular component that opens a dialog, but am unable to do so because I cannot trigger the closing of the dialog.

How can I cause the md dialog to resolve from the test case?

I have created a repository with a basic example where the problem can be reproduced, and copied the central bits below. There is an index.html to manually verify that the code is working, a test case that displays the problem and an example of how the tests are written in the md code.

Repository - https://github.com/gseabrook/md-dialog-test-issue

The component is extremely basic

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

And the test is also very simple

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

解决方案

I managed to resolve the issue by setting the root element as the problem seemed to be related to element being compiled in the test being unconnected with the root element that angular-material appended the dialog too.

I've updated the github repository with the full code, but the important bits are

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 的测试组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！