md-dialogunu açan test bileşeni

Question

Bir iletişim kutusu açan bir Açısal bileşen için bir birim testi yazmaya çalışıyorum, ancak bunu yapamıyorum, çünkü iletişim kutusunun kapanmasını tetikleyemiyorum.

md iletişim kutusunun test vakasından nasıl çözülmesini sağlayabilirim?

Sorunun yeniden üretilebileceği temel bir örneğe sahip bir depo oluşturdum ve aşağıdaki merkezi bitleri kopyaladım. Kodun çalıştığını manuel olarak doğrulamak için bir index.html, sorunu görüntüleyen bir test durumu ve testlerin md kodunda nasıl yazıldığına dair bir örnek vardır.

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

bileşen

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

son derece temel Ve Test olarak kök öğeyi ayarlayarak da ben sorunu çözmek başardı

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

çok basittir problem, açısal materyalin de diyaloğa eklediği kök eleman ile bağlantısız olan testte derlenen eleman ile ilgili gibi görünüyordu .

Ben tam kodu ile github depo güncelledik ama önemli bit

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

vardır