So deaktivieren Sie Animationen in Winkelmesser für angular js-Anwendung

Kann mir jemand empfehlen, wie man deaktivieren Animationen in angular js-Anwendung während der Ausführung Winkelmesser tests. Ich habe folgenden code in meinem Winkelmesser config Datei aber das hilft mir nicht weiter:

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

InformationsquelleAutor der Frage user3345216 | 2014-10-27

angularjs protractor

Können Sie aus der Winkel - Winkelmesser-Konfiguration:
https://github.com/angular/angular.js/blob/master/protractor-shared-conf.js

Sollten Sie es unter onPrepare block:

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

InformationsquelleAutor der Antwort bugdayci

Ich persönlich benutze den folgenden code in die "onPrepare" - Funktion in mein 'conf.js' Datei deaktivieren, beide Eckig/CSS-Animationen:

...
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 wollte nicht schreiben Sie den obigen code, ich fand es online bei der Suche nach Möglichkeiten, um die Geschwindigkeit meiner eigenen tests.

InformationsquelleAutor der Antwort John Stennett

9

Deaktivieren von CSS-Animationen /Übergänge

Zusätzlich zum deaktivieren ngAnimation (dh element(by.css('body')).allowAnimations(false);), müssen Sie möglicherweise deaktivieren einige Animationen, die angewendet wurde, die durch CSS.

Ich habe festgestellt, dass dies manchmal trägt einige solche animierten Elementen, die den Anschein Winkelmesser 'anklickbar' (dh EC.elementToBeClickable(btnUiBootstrapModalClose)), nicht wirklich zu reagieren .click() usw.

In meinem speziellen Fall, ich war es Leid mit einer Benutzeroberfläche.bootstrap modal, rutschte in die und aus, und ich war nicht immer in der Lage, seine internen 'schließen' - Schaltfläche zuverlässig geklickt.

Fand ich, dass deaktivieren von css-Animationen geholfen. Ich habe eine Klasse, um ein stylesheet:
```
.notransition * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}
```
... und Winkelmesser, ich habe etwas wie:
```
_self.disableCssAnimations = function() {
  return browser.executeScript("document.body.className += ' notransition';");
};
```
Kann es werden moderne Verfahren zum anwenden dieses Konzept, aber ich fand, dass die oben funktionierte sehr gut für mich - neben der Stabilisierung der tests, Sie laufen schneller, als Sie warten nicht, für Animationen.

InformationsquelleAutor der Antwort JcT

Sehen, ein 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();
  });

InformationsquelleAutor der Antwort hankduan

-3

@DavidPisoni
Es scheint, gültig auf den ersten Blick. Noch gibt es ein paar Dinge, die Sie wollen, um Kasse
- in Winkelmesser 2.0 sollten Sie Sie wieder ein Versprechen, wenn Sie etwas zu tun mit browser wie in der e2e-common-stuff
- Wenn Sie mit eckig-bootstrap-es gibt Orte, wo Sie nicht verwenden $animieren service, und stattdessen die Anwendung der Animationen durch bloßen javascript
InformationsquelleAutor der Antwort bugdayci

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Deaktivieren von CSS-Animationen /Übergänge