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