fix outros on compound if blocks, get IfBlock.js coverage to 100%

src/generators/dom/visitors/IfBlock.js

@@ -215,6 +215,7 @@ function compoundWithOutros ( generator, block, state, node, branches, dynamic,
 	const if_current_block_index = hasElse ? '' : `if ( ~${current_block_index} ) `;
 
 	block.addVariable( current_block_index );
+	block.addVariable( name );
 
 	block.builders.create.addBlock( deindent`
 		var ${if_block_creators} = [
@@ -233,12 +234,12 @@ function compoundWithOutros ( generator, block, state, node, branches, dynamic,
 	if ( hasElse ) {
 		block.builders.create.addBlock( deindent`
 			${current_block_index} = ${get_block}( ${params} );
-			${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
+			${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
 		` );
 	} else {
 		block.builders.create.addBlock( deindent`
 			if ( ~( ${current_block_index} = ${get_block}( ${params} ) ) ) {
-				${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
+				${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
 			}
 		` );
 	}
@@ -253,37 +254,35 @@ function compoundWithOutros ( generator, block, state, node, branches, dynamic,
 
 	const parentNode = state.parentNode || `${anchor}.parentNode`;
 
-	const changeBlock = deindent`
-		var ${name} = ${if_blocks}[ ${previous_block_index} ];
-		if ( ${name} ) {
-			${name}.outro( function () {
-				${if_blocks}[ ${previous_block_index} ].destroy( true );
-				${if_blocks}[ ${previous_block_index} ] = null;
-			});
-		}
+	const destroyOldBlock = deindent`
+		${name}.outro( function () {
+			${if_blocks}[ ${previous_block_index} ].destroy( true );
+			${if_blocks}[ ${previous_block_index} ] = null;
+		});
 	`;
 
-	if ( hasElse ) {
-		block.builders.create.addBlock( deindent`
-			${name} = ${if_blocks}[ ${current_block_index} ];
-			if ( !${name} ) {
-				${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
+	const createNewBlock = deindent`
+		${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
+		${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
+	`;
+
+	const changeBlock = hasElse ?
+		deindent`
+			${destroyOldBlock}
+
+			${createNewBlock}
+		` :
+		deindent`
+			if ( ${name} ) {
+				${destroyOldBlock}
 			}
 
-			${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
-		` );
-	} else {
-		block.builders.create.addBlock( deindent`
 			if ( ~${current_block_index} ) {
-				${name} = ${if_blocks}[ ${current_block_index} ];
-				if ( !${name} ) {
-					${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
-				}
-
-				${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
+				${createNewBlock}
+			} else {
+				${name} = null;
 			}
-		` );
-	}
+		`;
 
 	if ( dynamic ) {
 		block.builders.update.addBlock( deindent`

test/runtime/samples/transition-js-if-else-block-dynamic-outro/_config.js

@@ -0,0 +1,22 @@
+export default {
+	data: {
+		z: 'z'
+	},
+
+	test ( assert, component, target, window, raf ) {
+		assert.equal( target.querySelector( 'div' ), component.refs.no );
+
+		component.set({ x: true });
+
+		raf.tick( 25 );
+		assert.equal( component.refs.yes.foo, undefined );
+		assert.equal( component.refs.no.foo, 0.75 );
+
+		raf.tick( 75 );
+		assert.equal( component.refs.yes.foo, undefined );
+		assert.equal( component.refs.no.foo, 0.25 );
+
+		raf.tick( 100 );
+		component.destroy();
+	}
+};

test/runtime/samples/transition-js-if-else-block-dynamic-outro/main.html

@@ -0,0 +1,20 @@
+{{#if x}}
+	<div ref:yes out:foo>{{z}}</div>
+{{else}}
+	<div ref:no out:foo>{{z}}</div>
+{{/if}}
+
+<script>
+	export default {
+		transitions: {
+			foo: function ( node, params ) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>

test/runtime/samples/transition-js-if-else-block-outro/_config.js

@@ -0,0 +1,18 @@
+export default {
+	test ( assert, component, target, window, raf ) {
+		assert.equal( target.querySelector( 'div' ), component.refs.no );
+
+		component.set({ x: true });
+
+		raf.tick( 25 );
+		assert.equal( component.refs.yes.foo, undefined );
+		assert.equal( component.refs.no.foo, 0.75 );
+
+		raf.tick( 75 );
+		assert.equal( component.refs.yes.foo, undefined );
+		assert.equal( component.refs.no.foo, 0.25 );
+
+		raf.tick( 100 );
+		component.destroy();
+	}
+};

test/runtime/samples/transition-js-if-else-block-outro/main.html

@@ -0,0 +1,20 @@
+{{#if x}}
+	<div ref:yes out:foo>yes</div>
+{{else}}
+	<div ref:no out:foo>no</div>
+{{/if}}
+
+<script>
+	export default {
+		transitions: {
+			foo: function ( node, params ) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>

test/runtime/samples/transition-js-if-elseif-block-outro/_config.js

@@ -0,0 +1,23 @@
+export default {
+	data: {
+		x: false,
+		y: true
+	},
+
+	test ( assert, component, target, window, raf ) {
+		assert.equal( target.querySelector( 'div' ), component.refs.no );
+
+		component.set({ x: true, y: false });
+
+		raf.tick( 25 );
+		assert.equal( component.refs.yes.foo, undefined );
+		assert.equal( component.refs.no.foo, 0.75 );
+
+		raf.tick( 75 );
+		assert.equal( component.refs.yes.foo, undefined );
+		assert.equal( component.refs.no.foo, 0.25 );
+
+		raf.tick( 100 );
+		component.destroy();
+	}
+};

test/runtime/samples/transition-js-if-elseif-block-outro/main.html

@@ -0,0 +1,20 @@
+{{#if x}}
+	<div ref:yes out:foo>yes</div>
+{{elseif y}}
+	<div ref:no out:foo>no</div>
+{{/if}}
+
+<script>
+	export default {
+		transitions: {
+			foo: function ( node, params ) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>