Unit-Test-Vorlage in Winkeln modal-Service ($ uibModal)

ich eine sehr einfache service.show habe(), die im Grunde $ uibModal mit einiger Konfiguration ruft und gibt die Modalinstanz

function modalService($uibModal) { 
    return { 
    show(message) { 
     return $uibModal.open({ 
     bindToController: true, 
     controllerAs: '$ctrl', 
     template: "<div id='message'>{{$ctrl.message}}</div>", 
     controller: [function() { 
      this.message = message; 
     }] 
     }); 
    } 
    } 
}

Ich mag wäre schreiben Testen Sie, ob das aktuelle Modal gültig ist und ob es die erwartete Nachricht enthält. Etwas wie folgt aus:

it('should show correct message', (done) => { 
    modal = modalService.show('hello'); 
    modal.rendered.then(()=> { 
     expect($('#message').text()).toBe('hello'); 
     done() 
    }); 
    });

aber rendered Versprechen nie gelöst wird. Ich kann eine Workaround wie expect$timeout$timeout und tun $timeout.flush() tun tun, aber nicht sicher, ob dies der richtige Weg ist und auch auf diese Weise kann ich immer noch nicht reinigen (afterEach), um das modale schließen und bereit sein, eine andere Nachricht zu testen.

Quelle

2017-02-24 jonasnas

Der korrekte Weg wird sein, das modale Fenster nach der Nachricht zu öffnen und es zu schließen, und da Bootstrap ngAnimate für die Animation verwendet, müssen wir ngAnimateMock Modul enthalten, um die ausstehende Animation zu löschen.

Überprüfen Sie den folgenden Code für die Lösung:

var myApp = angular.module('myApp', ['ngAnimate', 'ui.bootstrap']); 
 

 
myApp.factory('modalService', ['$uibModal', function($uibModal) { 
 
    return { 
 
    show(message) { 
 
     return $uibModal.open({ 
 
     bindToController: true, 
 
     controllerAs: '$ctrl', 
 
     template: '<div id="message">{{$ctrl.message}}</div>', 
 
     controller: [function() { 
 
      this.message = message; 
 
     }] 
 
     }); 
 
    } 
 
    } 
 
}]); 
 

 
describe('modalService service', function() { 
 
    describe('modalService', function() { 
 
    var modalService; 
 
    var $rootScope; 
 
    var $animate; 
 

 
    beforeEach(function() { 
 
     module('ngAnimateMock') 
 
     module('uib/template/modal/window.html') 
 
     module('myApp'); 
 
    }); 
 

 
    beforeEach(inject(function(_$rootScope_, _modalService_, _$animate_) { 
 
     $rootScope = _$rootScope_; 
 
     modalService = _modalService_; 
 
     $animate = _$animate_; 
 
    })); 
 

 
    it('should open the dialog with the correct message',() => { 
 
     var modal = modalService.show('hello'); 
 

 
     $rootScope.$digest(); 
 
     // Finish the animation. 
 
     $animate.flush(); 
 

 
     expect($('#message').text()).toEqual('hello'); 
 

 
     // Close the dialog. 
 
     modal.close(); 
 

 
     $rootScope.$digest(); 
 
     // Finish the animation. 
 
     $animate.flush(); 
 
    }); 
 

 
    it('again should show the correct message',() => { 
 
     var modal = modalService.show('new message'); 
 

 
     $rootScope.$digest(); 
 
     // Finish the animation. 
 
     $animate.flush(); 
 

 
     expect($('#message').text()).toEqual('new message'); 
 

 
     // Close the dialog. 
 
     modal.close(); 
 

 
     $rootScope.$digest(); 
 
     // Finish the animation. 
 
     $animate.flush(); 
 
    }); 
 
    }); 
 
});

<body> 
 
    <!-- because we are testing our controller and not running we don't need a controller or even a module --> 
 
    <!-- so there is no ng-app or ng-controller in the markup --> 
 

 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css"> 
 

 
    <!-- the order that these files load is critical, think twice before changing --> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-mocks.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script> 
 

 
    <h2>Finished jasmine-unit-test</h2> 
 

 
</body>

Quelle

2017-02-25 09:28:40 Gaurav

Der erste Test besteht, aber die zweite nicht mit der Meldung ' 'neue messagehello' Voraussichtlich gleich‚neuen message'.' Das 'modal.close()' entfernt Modal von dom nicht. Hast du eine Ahnung, warum es passieren könnte? – jonasnas

und warum brauche ich ein Modul ('uib/template/modal/window.html')? – jonasnas

Das Code-Snippet, das ich zur Verfügung gestellt habe, beide werden bestanden. Kannst du codepen/jsfiddle usw. anbieten, damit ich das untersuchen kann? Und bezüglich Ihrer anderen Frage müssen Sie 'module ('uib/template/modal/window.html')' 'einschließen, denn wenn Sie' $ uibModal.open() 'intern aufrufen, ruft es die Vorlage 'window.html' ab. . – Gaurav

Unit-Test-Vorlage in Winkeln modal-Service ($ uibModal)

Antwort

Verwandte Themen