Warum blockiert Angular $ timeout End-to-End-Tests?

Question

Ich habe eine Anweisung gemacht, die verwendet wird, um Benachrichtigungen an einen Benutzer anzuzeigen. Um zu zeigen, die Benachrichtigung ich dies schrieb:

$scope.$watch($messaging.isUpdated, function() { 
    $scope.messages = $messaging.getMessages(); 
    if ($scope.messages.length > 0) { 
     $timeout(function() { 
      for (var i = 0; i < $scope.messages.length; i++) { 
       if (i + 1 < $scope.messages.length) { 
        $messaging.removeMessage($scope.messages[i]); 
       } else { 
        $messaging.removeMessage($scope.messages[i]); 
       } 
      } 
     }, 5000); 
    } 
}); 

Ich bin mit $ timeout um sicherzustellen, dass die Nachrichten auf dem Bildschirm für 5 Sekunden bleiben.

Jetzt möchte ich End-To-End-Test auf es schreiben, damit ich sicher sein kann, dass die Benachrichtigung angezeigt wird. Problem ist, wenn die Benachrichtigung angezeigt wird, dass das End-To-End ebenfalls wie die Benachrichtigung abgelaufen ist. Dies macht es unmöglich zu überprüfen, ob die richtige Benachrichtigung angezeigt wird. .

Dies ist mein Testcode:

it('submit update Center', function() { 
    input('center.Name').enter('New Name'); 
    input('center.Department').enter('New Department'); 
    input('center.Contact').enter('New contact'); 
    input('center.Street').enter('New street'); 
    input('center.City').enter('New city'); 
    input('center.Country').enter('New Country'); 
    element('button#center_button').click(); 

    expect(element('.feedback').count()).toBe(1); 
    expect(element('.feedback:first').attr('class')).toMatch(/success/); 

    expect(element('.error.tooltip').count()).toBe(0); 
}); 

Ich möchte die Javascript SetTimeout vermeiden, mit() und hoffen, dass es eine andere (Winkel) Lösung für dieses Problem.

Answer 1

Schlechte Nachrichten, Kumpel. Es ist ein bekanntes Problem in AngularJs. Es gibt eine Diskussion here und eine "irgendwie verwandt" issue hier.

Glücklicherweise können Sie diese umgehen, indem Sie Ihren eigenen $timeout Service Aufrollen, rief setTimeout und $apply von Hand aufrufen (dies ist ein Vorschlag aus der Diskussion, die ich genannt habe). Es ist wirklich einfach, obwohl es wirklich hässlich ist. Ein einfaches Beispiel:

app.service('myTimeout', function($rootScope) { 
    return function(fn, delay) { 
    return setTimeout(function() { 
     fn(); 
     $rootScope.$apply(); 
    }, delay); 
    }; 
}); 

Hinweis diese nicht kompatibel mit kantigen $timeout ist, aber Sie können Ihre Funktionalität erweitern, wenn Sie benötigen.

Answer 2

winzige Notiz für Sie if/else-Anweisung

$scope.$watch($messaging.isUpdated, function() { 
$scope.messages = $messaging.getMessages(); 
if ($scope.messages.length > 0) { 
    $timeout(function() { 
     for (var i = 0; i < $scope.messages.length; i++) { 
      if (i + 1 < $scope.messages.length) { 
       $messaging.removeMessage($scope.messages[i]); 
      } else { /**** unnecessay else here *****/ 
       $messaging.removeMessage($scope.messages[i]); 
      } 
     } 
    }, 5000); 
}});