mdダイアログを開くテストコンポーネント

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

です問題は、テストでコンパイルされている要素が、角度要素がダイアログを追加したルート要素と接続されていないことに関連しているように見えました。

私は完全なコードと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); 
})); 

です