Wie Sie Animationen in Winkelmesser für angular js Anwendung deaktivieren

Question

Kann mir jemand vorschlagen, wie Sie Animationen in angular js Anwendung während der Winkelmesser Tests deaktivieren. Ich habe unten Code in meinem Winkelmesser Konfigurationsdatei hinzugefügt, aber das macht mir nicht helfen:

var disableNgAnimate = function() { 
    angular.module('disableNgAnimate', []).run(function($animate) { 
     $animate.enabled(false); 
    }); 
}; 
browser.addMockModule('disableNgAnimate', disableNgAnimate); 

Answer 1

dies Siehe Beispiel: https://github.com/angular/protractor/blob/master/spec/basic/elements_spec.js#L123

it('should export an allowAnimations helper', function() { 
    browser.get('index.html#/animation'); 
    var animationTop = element(by.id('animationTop')); 
    var toggledNode = element(by.id('toggledNode')); // animated toggle 

    // disable animation 
    animationTop.allowAnimations(false); 

    // it should toggle without animation now 
    element(by.id('checkbox')).click(); 
    }); 

Answer 2

Sie können die Winkelmesser Konfiguration des Winkels check out: https://github.com/angular/angular.js/blob/master/protractor-shared-conf.js

Sie sollten es unter onPrepare Block hinzu:

onPrepare: function() { 
/* global angular: false, browser: false, jasmine: false */ 

// Disable animations so e2e tests run more quickly 
var disableNgAnimate = function() { 
    angular.module('disableNgAnimate', []).run(['$animate', function($animate) { 
    $animate.enabled(false); 
    }]); 
}; 

browser.addMockModule('disableNgAnimate', disableNgAnimate); 

Answer 3

@DavidPisoni Es scheint auf den ersten Blick gültig. Dennoch gibt es ein paar Dinge, die Sie

• in Protractor 2.0 Sie zurückgeben sollte ein Versprechen zur Kasse möchten, wenn Sie etwas mit Browser wie in der e2e-common Sachen

• tun Wenn Sie mit Winkel Bootstrap gibt es Orte, an denen sie animieren nicht-Dienst verwenden $, und die Anwendung stattdessen die Animationen durch bloßen Javascript

Answer 4

Deaktivieren CSS Animationen/Transitions

Zusätzlich zur Deaktivierung von ngAnimation (z. B. element(by.css('body')).allowAnimations(false);) müssen Sie möglicherweise einige Animationen deaktivieren, die über CSS angewendet wurden.

ich gefunden habe, dies manchmal zu einigen solchen animierte Elemente trägt, dass Winkelmesser erscheinen anklickbare (dh EC.elementToBeClickable(btnUiBootstrapModalClose)) zu sein, zu reagieren eigentlich nicht zu .click() usw.

In meinem speziellen Fall, Ich litt an einem ui.bootstrap-Modal, das ein- und ausging, und ich war nicht immer in der Lage, den internen "Schließen" -Knopf zuverlässig anzuklicken.

Ich fand, dass disabling css animations geholfen. Ich habe eine Klasse zu einem Stylesheet:

.notransition * { 
    -webkit-transition: none !important; 
    -moz-transition: none !important; 
    -o-transition: none !important; 
    -ms-transition: none !important; 
    transition: none !important; 
} 

... und in Winkelmesser, ich habe so etwas wie:

_self.disableCssAnimations = function() { 
    return browser.executeScript("document.body.className += ' notransition';"); 
}; 

Es kann schlankeres Möglichkeiten, dieses Konzept anwenden, aber ich fand, dass das oben genannte funktionierte sehr gut für mich - zusätzlich zur Stabilisierung der Tests laufen sie schneller, da sie nicht auf Animationen warten.

Answer 5

ich persönlich den folgenden Code in der "onPrepare" -Funktion in meinem 'conf.js' Datei verwenden, um beide Angular/CSS-Animationen zu deaktivieren:

... 
onPrepare: function() { 
    var disableNgAnimate = function() { 
     angular 
      .module('disableNgAnimate', []) 
      .run(['$animate', function($animate) { 
       $animate.enabled(false); 
      }]); 
    }; 

    var disableCssAnimate = function() { 
     angular 
      .module('disableCssAnimate', []) 
      .run(function() { 
       var style = document.createElement('style'); 
       style.type = 'text/css'; 
       style.innerHTML = '* {' + 
        '-webkit-transition: none !important;' + 
        '-moz-transition: none !important' + 
        '-o-transition: none !important' + 
        '-ms-transition: none !important' + 
        'transition: none !important' + 
        '}'; 
       document.getElementsByTagName('head')[0].appendChild(style); 
      }); 
    }; 

    browser.addMockModule('disableNgAnimate', disableNgAnimate); 
    browser.addMockModule('disableCssAnimate', disableCssAnimate); 
} 
... 

Bitte beachten Sie: Ich nicht den obigen Code geschrieben hat, Ich habe es online gefunden und nach Möglichkeiten gesucht, meine eigenen Tests zu beschleunigen.