handle transition managers nested more than one level deep - refs #3324

src/global/TransitionManager.js

@@ -88,7 +88,7 @@ function check(tm) {
 
     if (tm.parent) tm.parent.decrementOutros(tm);
 
-    if (!tm.parent || tm.parent.outrosComplete) {
+    if (allOutrosComplete(tm)) {
       tm.detachNodes();
     }
   }
@@ -107,6 +107,10 @@ function check(tm) {
   }
 }
 
+function allOutrosComplete(manager) {
+  return !manager || (manager.outrosComplete && allOutrosComplete(manager.parent));
+}
+
 // check through the detach queue to see if a node is up or downstream from a
 // transition and if not, go ahead and detach it
 function detachImmediate(manager) {

tests/browser/render/components.js

@@ -186,4 +186,25 @@ export default function() {
 
     t.htmlEqual(fixture.innerHTML, '<div id="move-test-target">root</div><span>cmp</span>');
   });
+
+  test(`three (or more) levels of nested transition don't prematurely detach innermost nodes (#3324)`, t => {
+    const cmp1 = Ractive.extend({ template: '{{yield}}' });
+    const cmp2 = Ractive.extend({ template: `{{{'<b>test</b>'}}}` });
+    const done = t.async();
+
+    const r = new Ractive({
+      components: { cmp1, cmp2 },
+      template: '{{#if show}}<div go-out><cmp1><cmp2 /></cmp1></div>{{/if}}',
+      data: { show: true },
+      target: fixture,
+      transitions: {
+        go(tr) {
+          t.ok(fixture.querySelector('b'), 'triple is still rendered');
+          tr.complete();
+        }
+      }
+    });
+
+    r.set('show', false).then(done, done);
+  });
 }