fix(collapse): set initial state to avoid animation

- Ensure animation does not occur when first loaded

Closes #5075
Fixes #4848
Fixes #4885

src/collapse/collapse.js

@@ -4,6 +4,12 @@ angular.module('ui.bootstrap.collapse', [])
     var $animateCss = $injector.has('$animateCss') ? $injector.get('$animateCss') : null;
     return {
       link: function(scope, element, attrs) {
+        if (!scope.$eval(attrs.uibCollapse)) {
+          element.addClass('in')
+            .addClass('collapse')
+            .css({height: 'auto'});
+        }
+
         function expand() {
           element.removeClass('collapse')
             .addClass('collapsing')

src/collapse/test/collapse.spec.js

@@ -1,5 +1,5 @@
 describe('collapse directive', function() {
-  var element, scope, $compile, $animate;
+  var element, compileFn, scope, $compile, $animate;
 
   beforeEach(module('ui.bootstrap.collapse'));
   beforeEach(module('ngAnimateMock'));
@@ -10,7 +10,8 @@ describe('collapse directive', function() {
   }));
 
   beforeEach(function() {
-    element = $compile('<div uib-collapse="isCollapsed">Some Content</div>')(scope);
+    element = angular.element('<div uib-collapse="isCollapsed">Some Content</div>');
+    compileFn = $compile(element);
     angular.element(document.body).append(element);
   });
 
@@ -20,12 +21,14 @@ describe('collapse directive', function() {
 
   it('should be hidden on initialization if isCollapsed = true', function() {
     scope.isCollapsed = true;
+    compileFn(scope);
     scope.$digest();
     expect(element.height()).toBe(0);
   });
 
   it('should collapse if isCollapsed = true on subsequent use', function() {
     scope.isCollapsed = false;
+    compileFn(scope);
     scope.$digest();
     $animate.flush();
     scope.isCollapsed = true;
@@ -36,6 +39,7 @@ describe('collapse directive', function() {
 
   it('should be shown on initialization if isCollapsed = false', function() {
     scope.isCollapsed = false;
+    compileFn(scope);
     scope.$digest();
     $animate.flush();
     expect(element.height()).not.toBe(0);
@@ -43,6 +47,7 @@ describe('collapse directive', function() {
 
   it('should expand if isCollapsed = false on subsequent use', function() {
     scope.isCollapsed = false;
+    compileFn(scope);
     scope.$digest();
     $animate.flush();
     scope.isCollapsed = true;
@@ -56,6 +61,7 @@ describe('collapse directive', function() {
 
   it('should expand if isCollapsed = true on subsequent uses', function() {
     scope.isCollapsed = false;
+    compileFn(scope);
     scope.$digest();
     $animate.flush();
     scope.isCollapsed = true;
@@ -72,6 +78,7 @@ describe('collapse directive', function() {
 
   it('should change aria-expanded attribute', function() {
     scope.isCollapsed = false;
+    compileFn(scope);
     scope.$digest();
     $animate.flush();
     expect(element.attr('aria-expanded')).toBe('true');
@@ -84,6 +91,7 @@ describe('collapse directive', function() {
 
   it('should change aria-hidden attribute', function() {
     scope.isCollapsed = false;
+    compileFn(scope);
     scope.$digest();
     $animate.flush();
     expect(element.attr('aria-hidden')).toBe('false');