2

ダイアログを開く 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();
});
4

1 に答える 1