diff --git a/test/viewDirectiveSpec.js b/test/viewDirectiveSpec.js index 2c184d86c..749cf58cf 100644 --- a/test/viewDirectiveSpec.js +++ b/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('
')(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('
')(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('
')(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('
')(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('
')(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('
' + content + '
')(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('
' + content + '
')(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('
' + content + '
')(scope)); + + // No animations yet + expect($animate.queue.length).toBe(0); + + scope.shouldShow = true; + scope.$digest(); + + // $ViewDirective enter animation - Basically it's just the 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); + })); + }); });