Как синхронная тестовая анимация в AngularJS 1.3.15?

У меня проблема миграции с angular -animate.js с версии 1.2 до 1.3. Вот моя анимация

'use strict';
angular.module('cookbook', ['ngAnimate'])
    .animation('.slide-down', function() {
        var NG_HIDE_CLASS = 'ng-hide';

        return {
            beforeAddClass: function(element, className, done) {
                alert('before add');
                if(className === NG_HIDE_CLASS) {
                    element.slideUp(done);
                }
            },
            removeClass: function(element, className, done) {
                if(className === NG_HIDE_CLASS) {
                    element.hide().slideDown(done);
                }
            }
        };
    });

Синхронный тест

'use strict';

describe('A Brief Look At Testing Animations(changed) - ', function() {
    var scope;
    var element;
    var $animate;
    var $rootElement;

    beforeEach(module('cookbook', 'ngAnimateMock'));

    describe('Synchronous testing of animations', function() {

        var animatedShow = false;
        var animatedHide = false;

        beforeEach(module(function($animateProvider) {
            $animateProvider.register('.slide-down', function() {
                return {
                    beforeAddClass: function(element, className, done) {
                        debugger;alert(1);
                        animatedHide = true;
                        done();
                    },
                    removeClass: function(element, className, done) {
                        animatedShow = true;
                        done();
                    }
                };
            });
        }));

        beforeEach(inject(function($injector) {
            scope = $injector.get('$rootScope').$new();
            $rootElement = $injector.get('$rootElement');
        }));

        beforeEach(inject(function($compile) {
            element = angular.element('<div class="slide-down" ng-show="hint"></div>');
            $compile(element)(scope);
            scope.$digest();
            $rootElement.append(element);
        }));

        it('should animate to show', function() {
            scope.hint = true;
            scope.$digest();
            expect(animatedShow).toBeTruthy();
        });

        it('should animate to hide', function() {
            scope.hint = true;
            scope.$digest();
            scope.hint = false;
            scope.$digest();
            expect(animatedHide).toBeTruthy();
        });

    });
});

и spec runner

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Angular Spec Runner</title>

    <link rel="shortcut icon" type="image/png" href="../../lib/jasmine-2.0.0/jasmine_favicon.png">
    <link rel="stylesheet" type="text/css" href="../../lib/jasmine-2.0.0/jasmine.css">

    <script type="text/javascript" src="../../lib/jasmine-2.0.0/jasmine.js"></script>
    <script type="text/javascript" src="../../lib/jasmine-2.0.0/jasmine-html.js"></script>
    <script type="text/javascript" src="../../lib/jasmine-2.0.0/boot.js"></script>

    <script type="text/javascript" src="../../lib/angular-1.2.28_/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../lib/angular-1.3.15/angular.js"></script>
    <script type="text/javascript" src="../../lib/angular-1.3.15/angular-route.js"></script>
    <script type="text/javascript" src="../../lib/angular-1.3.15/angular-ui-router.js"></script>
    <script type="text/javascript" src="../../lib/angular-1.3.15/angular-mocks.js"></script>
    <script type="text/javascript" src="../../lib/angular-1.2.28_/angular-animate.js"></script>

    <!--DOESN'T WORK WITH 1.3.15-->
    <!--<script type="text/javascript" src="../../lib/angular-1.3.15/angular-animate.js"></script>-->


    <!-- include source files here... -->
    <script type="text/javascript" src="../src/cookbook.js"></script>
    <link rel="stylesheet" href="../src/styles.css">

    <!-- include spec files here... -->
    <script type="text/javascript" src="cookbookSpec.js"></script>

</head>

<body>
</body>

</html>

Когда я использую angular -animate 1.2.28, все тесты передаются, но после переключения на 1.3.15 тесты не выполняются. Теперь я пытаюсь исследовать разницу между двумя версиями angular -animate. Может быть, у кого-то была эта проблема. Спасибо всем за ваши ответы.

ОТВЕТЫ

Ответ 1

При попытке запустить тест я понял, что могу только:

  • используйте addClass и removeClass из $animate, чтобы добавить/удалить класс ng-hide; использование "ng-show" напрямую не сработало. При использовании этих методов я понял, что метод "removeClass" из объекта, зарегистрированного как анимация, никогда не вызывался, те, которые были вызваны, были: " beforeAddClass" и " beforeRemoveClass", поэтому я изменил это. Когда я об этом узнал, я обнаружил, что проблема несколько связана: $animate.removeClass() не работает, если анимация addClass не завершена.
  • используйте rootScope вместо области видимости (я не мог понять, почему)

После поиска немного больше, я нашел это comment по проблеме; кажется, что есть некоторые ошибки с анимацией; в комментарии предлагается использовать разные версии angular и angular -animate, так как есть несколько исправлений для анимации в конвейере. Поэтому я даю ему попробовать и использовать версии обновлений (v1.4.0-build.4010 + sha.213c2a7), и теперь он работает лучше... Использование директивы ng-show теперь работает. (но все еще только доAdAdClass и beforeRemoveClass вызываются и не могут получить доступ к работам...).

Я не предлагаю вам обновлять (даже если v.1.4.0 еще не выпущен), просто указывая на наличие проблем и ошибок по этому вопросу...) Вот код (с предлагаемыми версиями v1.4.0-build.4010):

describe('animate', function() {
  var scope, $animate, $rootElement, $compile, $rootscope;

  describe('Synchronous testing of animations', function() {

    var animatedShow = false;
    var animatedHide = false;

    beforeEach(module('cookbook', function( $animateProvider ) {
      animatedShow = false;
      animatedHide = false;

      $animateProvider.register('.slide-down', function() {
        return {
          beforeAddClass: function( element, className, done ) {
            animatedHide = true;
            done();
          },
          beforeRemoveClass: function( element, className, done ) {
            animatedShow = true;
            done();
          }
        };
      });
    }));
    beforeEach(inject(function( _$injector_, _$animate_, _$compile_ ) {
      $compile = _$compile_;
      $animate = _$animate_;
      $rootscope = _$injector_.get('$rootScope');
      scope = _$injector_.get('$rootScope').$new();
      $rootElement = _$injector_.get('$rootElement');
    }));
    it('should animate to hide', function() {
      $rootscope.hint = true;
      var el = $compile('<div class="slide-down" ng-show="hint"></div>')($rootscope);
      $rootElement.append(el);
      angular.element(document.body).append($rootElement);
      $rootscope.$digest();
      $rootscope.hint = false;
      $rootscope.$digest();
      expect(animatedHide).toBeTruthy();
    });
    it('should animate to show', function() {
      $rootscope.hint = false;
      var el = $compile('<div class="slide-down" ng-show="hint"></div>')($rootscope);
      $rootElement.append(el);
      angular.element(document.body).append($rootElement);
      $rootscope.$digest();
      $rootscope.hint = true;
      $rootscope.$digest();
      expect(animatedShow).toBeTruthy();
    });
  });
});

Я также согласен, что этот тест не тестирует настоящий код анимации; возможно, тест e2e должен быть лучше.

Вот код с использованием angular и angular -animate v1.3.15 и с помощью addClass и removeClass:

    //...the rest of code is identical

    it('should animate to hide', function() {
      var el = $compile('<div class="slide-down"></div>')($rootscope);
      $rootElement.append(el);
      angular.element(document.body).append($rootElement);
      $rootscope.$digest();
      $animate.addClass(el, 'ng-hide');
      $rootscope.$digest();
      expect(animatedHide).toBeTruthy();
    });
    it('should animate to show', function() {
      var el = $compile('<div class="slide-down ng-hide"></div>')($rootscope);
      $rootElement.append(el);
      angular.element(document.body).append($rootElement);
      $rootscope.$digest();
      $animate.removeClass(el, 'ng-hide');
      $rootscope.$digest();
      expect(animatedShow).toBeTruthy();
    });
    //...

Надеюсь, это поможет... Спасибо.