Merge pull request #937 from meenie/tests/uiView

test(uiView): Added in tests for ngClass, ngRepeat, and animations.

test/viewDirectiveSpec.js

@@ -10,8 +10,8 @@ describe('uiView', function () {
     var depends = ['ui.router'];
 
     try {
-      angular.module('ngAnimateMock');
-      depends.push('ngAnimateMock');
+      angular.module('ngAnimate');
+      depends.push('ngAnimate', 'ngAnimateMock');
     } catch(e) {
       angular.module('mock.animate', []).value('$animate', null);
       module('mock.animate');
@@ -83,6 +83,19 @@ describe('uiView', function () {
       this.someProperty = "value"
     },
     controllerAs: "vm"
+  },
+  lState = {
+    views: {
+      view1: {
+        template: 'view1'
+      },
+      view2: {
+        template: 'view2'
+      },
+      view3: {
+        template: 'view3'
+      }
+    }
   };
 
   beforeEach(module(function ($stateProvider) {
@@ -98,6 +111,7 @@ describe('uiView', function () {
       .state('i', iState)
       .state('j', jState)
       .state('k', kState)
+      .state('l', lState)
   }));
 
   beforeEach(inject(function ($rootScope, _$compile_) {
@@ -229,42 +243,6 @@ describe('uiView', function () {
       // verify if the initial view has been updated
       expect(elem.find('li').length).toBe(scope.items.length);
     }));
-
-    // related to issue #857
-    it('should handle ui-view inside ng-if', inject(function ($state, $q, $compile) {
-      // ngIf does not exist in 1.0.8
-      if (angular.version.full === '1.0.8') return;
-
-      scope.someBoolean = false;
-      elem.append($compile('<div ng-if="someBoolean"><ui-view></ui-view></div>')(scope));
-
-      $state.transitionTo(aState);
-      $q.flush();
-
-      // Verify there is no ui-view in the DOM
-      expect(elem.find('ui-view').length).toBe(0);
-
-      // Turn on the div that holds the ui-view
-      scope.someBoolean = true;
-      scope.$digest();
-
-      // Verify that the ui-view is there and it has the correct content
-      expect(elem.find('ui-view').text()).toBe(aState.template);
-
-      // Turn off the ui-view
-      scope.someBoolean = false;
-      scope.$digest();
-
-      // Verify there is no ui-view in the DOM
-      expect(elem.find('ui-view').length).toBe(0);
-
-      // Turn on the div that holds the ui-view once again
-      scope.someBoolean = true;
-      scope.$digest();
-
-      // Verify that the ui-view is there and it has the correct content
-      expect(elem.find('ui-view').text()).toBe(aState.template);
-    }));
   });
 
   describe('autoscroll attribute', function () {
@@ -327,4 +305,225 @@ describe('uiView', function () {
 
     expect(elem.text()).toBe('value');
   }));
+
+  describe('play nicely with other directives', function() {
+    // related to issue #857
+    it('should work with ngIf', inject(function ($state, $q, $compile) {
+      // ngIf does not exist in 1.0.8
+      if (angular.version.full === '1.0.8') return;
+
+      scope.someBoolean = false;
+      elem.append($compile('<div ng-if="someBoolean"><ui-view></ui-view></div>')(scope));
+
+      $state.transitionTo(aState);
+      $q.flush();
+
+      // Verify there is no ui-view in the DOM
+      expect(elem.find('ui-view').length).toBe(0);
+
+      // Turn on the div that holds the ui-view
+      scope.someBoolean = true;
+      scope.$digest();
+
+      // Verify that the ui-view is there and it has the correct content
+      expect(elem.find('ui-view').text()).toBe(aState.template);
+
+      // Turn off the ui-view
+      scope.someBoolean = false;
+      scope.$digest();
+
+      // Verify there is no ui-view in the DOM
+      expect(elem.find('ui-view').length).toBe(0);
+
+      // Turn on the div that holds the ui-view once again
+      scope.someBoolean = true;
+      scope.$digest();
+
+      // Verify that the ui-view is there and it has the correct content
+      expect(elem.find('ui-view').text()).toBe(aState.template);
+    }));
+
+    it ('should work with ngClass', inject(function($state, $q, $compile) {
+      scope.showClass = false;
+      elem.append($compile('<div><ui-view ng-class="{\'someClass\': showClass}"></ui-view></div>')(scope));
+
+      expect(elem.find('ui-view')).not.toHaveClass('someClass');
+
+      scope.showClass = true;
+      scope.$digest();
+
+      expect(elem.find('ui-view')).toHaveClass('someClass');
+
+      scope.showClass = false;
+      scope.$digest();
+
+      expect(elem.find('ui-view')).not.toHaveClass('someClass');
+    }));
+
+    describe ('working with ngRepeat', function() {
+      // ngRepeat does not work properly with uiView in 1.0.8 & 1.1.5
+      if (['1.0.8', '1.1.5'].indexOf(angular.version.full) !== -1) return;
+
+      it ('should have correct number of uiViews', inject(function($state, $q, $compile) {
+        elem.append($compile('<div><ui-view ng-repeat="view in views" name="{{view}}"></ui-view></div>')(scope));
+
+        // Should be no ui-views in DOM
+        expect(elem.find('ui-view').length).toBe(0);
+
+        // Lets add 3
+        scope.views = ['view1', 'view2', 'view3'];
+        scope.$digest();
+
+        // Should be 3 ui-views in the DOM
+        expect(elem.find('ui-view').length).toBe(scope.views.length);
+
+        // Lets add one more - yay two-way binding
+        scope.views.push('view4');
+        scope.$digest();
+
+        // Should have 4 ui-views
+        expect(elem.find('ui-view').length).toBe(scope.views.length);
+
+        // Lets remove 2 ui-views from the DOM
+        scope.views.pop();
+        scope.views.pop();
+        scope.$digest();
+
+        // Should have 2 ui-views
+        expect(elem.find('ui-view').length).toBe(scope.views.length);
+      }));
+
+      it ('should populate each view with content', inject(function($state, $q, $compile) {
+        elem.append($compile('<div><ui-view ng-repeat="view in views" name="{{view}}"></ui-view></div>')(scope));
+
+        $state.transitionTo(lState);
+        $q.flush();
+
+        expect(elem.find('ui-view').length).toBe(0);
+
+        scope.views = ['view1', 'view2'];
+
+        scope.$digest();
+
+        var uiViews = elem.find('ui-view');
+
+        expect(uiViews.eq(0).text()).toBe(lState.views.view1.template);
+        expect(uiViews.eq(1).text()).toBe(lState.views.view2.template);
+        expect(uiViews.eq(2).length).toBe(0);
+
+        scope.views.push('view3');
+        scope.$digest();
+
+        uiViews = elem.find('ui-view');
+
+        expect(uiViews.eq(0).text()).toBe(lState.views.view1.template);
+        expect(uiViews.eq(1).text()).toBe(lState.views.view2.template);
+        expect(uiViews.eq(2).text()).toBe(lState.views.view3.template);
+      }));
+    });
+  });
+
+  describe('AngularJS 1.2.* Animations', function() {
+    // Only doing tests for AngularJS 1.2.*
+    if (['1.0.8', '1.1.5'].indexOf(angular.version.full) !== -1) return;
+
+    it ('should do transition animations', inject(function($state, $q, $compile, $animate) {
+      var content = 'Initial Content',
+          animation;
+      elem.append($compile('<div><ui-view>' + content + '</ui-view></div>')(scope));
+
+      // Enter Animation
+      animation = $animate.queue.shift();
+      expect(animation.event).toBe('enter');
+      expect(animation.element.text()).toBe(content);
+
+      $state.transitionTo(aState);
+      $q.flush();
+
+      // Enter Animation
+      animation = $animate.queue.shift();
+      expect(animation.event).toBe('enter');
+      expect(animation.element.text()).toBe(aState.template);
+      // Leave Animation
+      animation = $animate.queue.shift();
+      expect(animation.event).toBe('leave');
+      expect(animation.element.text()).toBe(content);
+
+      $state.transitionTo(bState);
+      $q.flush();
+
+      // Enter Animation
+      animation = $animate.queue.shift();
+      expect(animation.event).toBe('enter');
+      expect(animation.element.text()).toBe(bState.template);
+      // Leave Animation
+      animation = $animate.queue.shift();
+      expect(animation.event).toBe('leave');
+      expect(animation.element.text()).toBe(aState.template);
+
+      // No more animations
+      expect($animate.queue.length).toBe(0);
+    }));
+
+    it ('should do ngClass animations', inject(function($state, $q, $compile, $animate) {
+      scope.classOn = false;
+      var content = 'Initial Content',
+          className = 'yay',
+          animation;
+      elem.append($compile('<div><ui-view ng-class="{\'' + className + '\': classOn}">' + content + '</ui-view></div>')(scope));
+      // Don't care about enter class
+      $animate.queue.shift();
+
+      scope.classOn = true;
+      scope.$digest();
+
+      animation = $animate.queue.shift();
+      expect(animation.event).toBe('addClass');
+      expect(animation.element.text()).toBe(content);
+
+      scope.classOn = false;
+      scope.$digest();
+
+      animation = $animate.queue.shift();
+      expect(animation.event).toBe('removeClass');
+      expect(animation.element.text()).toBe(content);
+
+      // No more animations
+      expect($animate.queue.length).toBe(0);
+    }));
+
+    it ('should do ngIf animations', inject(function($state, $q, $compile, $animate) {
+      scope.shouldShow = false;
+      var content = 'Initial Content',
+          animation;
+      elem.append($compile('<div><ui-view ng-if="shouldShow">' + content + '</ui-view></div>')(scope));
+
+      // No animations yet
+      expect($animate.queue.length).toBe(0);
+
+      scope.shouldShow = true;
+      scope.$digest();
+
+      // $ViewDirective enter animation - Basically it's just the <!-- uiView --> comment
+      animation = $animate.queue.shift();
+      expect(animation.event).toBe('enter');
+      expect(animation.element.text()).toBe('');
+
+      // $ViewDirectiveFill enter animation - The second uiView directive that files in the content
+      animation = $animate.queue.shift();
+      expect(animation.event).toBe('enter');
+      expect(animation.element.text()).toBe(content);
+
+      scope.shouldShow = false;
+      scope.$digest();
+
+      // uiView leave animation
+      animation = $animate.queue.shift();
+      expect(animation.event).toBe('leave');
+      expect(animation.element.text()).toBe(content);
+
+      // No more animations
+      expect($animate.queue.length).toBe(0);
+    }));
+  });
 });