Alter expand/collapse text when adding/removing parts

app/assets/javascripts/modules/collapsible_group.js

@@ -16,7 +16,7 @@
           $links = element.find('.js-toggle-all');
 
       element.on('click', '.js-toggle-all', toggleAll);
-      element.on('shown.bs.collapse hidden.bs.collapse', updateLinkText);
+      element.on('shown.bs.collapse hidden.bs.collapse nested:fieldRemoved nested:fieldAdded', updateLinkText);
 
       function toggleAll(event) {
         var action = hasOpenItems() ? 'hide' : 'show';
@@ -26,7 +26,7 @@
       }
 
       function hasOpenItems() {
-        return element.find('.collapse.in').length > 0;
+        return element.find('.collapse.in:visible').length > 0;
       }
 
       function updateLinkText() {

app/views/shared/_part.html.erb

@@ -7,7 +7,7 @@
       </a>
     </h4>
   </div>
-  <div id="<%= f.object.slug || 'untitled-part' %>" class="js-part-toggle-target panel-collapse <% if f.object.valid? %>collapse <% end %>in" aria-expanded="true">
+  <div id="<%= f.object.slug || 'untitled-part' %>" class="js-part-toggle-target panel-collapse collapse in" aria-expanded="true">
     <div class="panel-body">
         <%= f.inputs do %>
           <%= f.input :title,

spec/javascripts/spec/collapsible_group.spec.js

@@ -92,4 +92,16 @@ describe('A collapsible group module', function() {
     });
   });
 
+  describe('when a new group is added or removed', function() {
+    it('updates the link text', function() {
+      element.find('.collapse').first().addClass('in');
+      element.trigger('nested:fieldAdded');
+      expect(element.find('.js-toggle-all').text()).toBe('Collapse');
+
+      element.find('.collapse.in').first().hide();
+      element.trigger('nested:fieldRemoved');
+      expect(element.find('.js-toggle-all').text()).toBe('Expand');
+    });
+  });
+
 });