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

Ответ 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();
    });
    //...

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