tighten up transition tests

test/runtime/index.js

@@ -4,6 +4,7 @@ import * as path from 'path';
 import * as fs from 'fs';
 import * as acorn from 'acorn';
 import * as babel from 'babel-core';
+import { transitionManager } from '../../shared.js';
 
 import { addLineNumbers, loadConfig, loadSvelte, env, setupHtmlEqual } from '../helpers.js';
 
@@ -94,6 +95,29 @@ describe( 'runtime', () => {
 
 			return env()
 				.then( window => {
+					// set of hacks to support transition tests
+					transitionManager.running = false;
+					transitionManager.transitions = [];
+
+					const raf = {
+						time: 0,
+						callback: null,
+						tick: now => {
+							raf.time = now;
+							if ( raf.callback ) raf.callback();
+						}
+					};
+					window.performance = { now: () => raf.time };
+					global.requestAnimationFrame = cb => {
+						let called = false;
+						raf.callback = () => {
+							if ( !called ) {
+								called = true;
+								cb();
+							}
+						};
+					};
+
 					global.window = window;
 
 					try {
@@ -148,7 +172,7 @@ describe( 'runtime', () => {
 					Object.assign = Object_assign;
 
 					if ( config.test ) {
-						config.test( assert, component, target, window );
+						config.test( assert, component, target, window, raf );
 					} else {
 						component.destroy();
 						assert.equal( target.innerHTML, '' );
@@ -175,9 +199,10 @@ describe( 'runtime', () => {
 		});
 	});
 
+	const shared = path.resolve( 'shared.js' );
 	describe( 'shared helpers', () => {
 		fs.readdirSync( 'test/runtime/samples' ).forEach( dir => {
-			runTest( dir, path.resolve( 'shared.js' ) );
+			runTest( dir, shared );
 		});
 	});
 

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

@@ -3,21 +3,15 @@ export default {
 		name: 'world'
 	},
 
-	test ( assert, component, target, window ) {
+	test ( assert, component, target, window, raf ) {
 		global.count = 0;
-		let now = 0;
-		let callback;
-
-		window.performance = { now: () => now };
-		global.requestAnimationFrame = cb => callback = cb;
 
 		component.set({ visible: true });
 		assert.equal( global.count, 1 );
 		const div = target.querySelector( 'div' );
 		assert.equal( div.foo, 0 );
 
-		now = 300;
+		raf.tick( 300 );
-		callback();
 		component.set({ name: 'everybody' });
 		assert.equal( div.foo, 0.75 );
 		assert.htmlEqual( div.innerHTML, 'hello everybody!' );
@@ -25,22 +19,18 @@ export default {
 		component.set({ visible: false, name: 'again' });
 		assert.htmlEqual( div.innerHTML, 'hello everybody!' );
 
-		now = 500;
+		raf.tick( 500 );
-		callback();
 		assert.equal( div.foo, 0.25 );
 
 		component.set({ visible: true });
-		now = 700;
+		raf.tick( 700 );
-		callback();
 		assert.equal( div.foo, 0.75 );
 		assert.htmlEqual( div.innerHTML, 'hello again!' );
 
-		now = 800;
+		raf.tick( 800 );
-		callback();
 		assert.equal( div.foo, 1 );
 
-		now = 900;
+		raf.tick( 900 );
-		callback();
 
 		component.destroy();
 	}

test/runtime/samples/transition-js-if-block-bidi/_config.js

@@ -1,39 +1,29 @@
 export default {
-	test ( assert, component, target, window ) {
+	test ( assert, component, target, window, raf ) {
 		global.count = 0;
-		let now = 0;
-		let callback;
-
-		window.performance = { now: () => now };
-		global.requestAnimationFrame = cb => callback = cb;
 
 		component.set({ visible: true });
 		assert.equal( global.count, 1 );
 		const div = target.querySelector( 'div' );
 		assert.equal( div.foo, 0 );
 
-		now = 300;
+		raf.tick( 300 );
-		callback();
 		assert.equal( div.foo, 0.75 );
 
 		component.set({ visible: false });
 		assert.equal( global.count, 1 );
 
-		now = 500;
+		raf.tick( 500 );
-		callback();
 		assert.equal( div.foo, 0.25 );
 
 		component.set({ visible: true });
-		now = 700;
+		raf.tick( 700 );
-		callback();
 		assert.equal( div.foo, 0.75 );
 
-		now = 800;
+		raf.tick( 800 );
-		callback();
 		assert.equal( div.foo, 1 );
 
-		now = 900;
+		raf.tick( 900 );
-		callback();
 
 		component.destroy();
 	}

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

@@ -1,61 +1,45 @@
 export default {
-	test ( assert, component, target, window ) {
+	test ( assert, component, target, window, raf ) {
-		let now = 0;
-		let callback;
-
-		window.performance = { now: () => now };
-		global.requestAnimationFrame = cb => callback = cb;
-
 		component.set({ visible: true });
 		let div = target.querySelector( 'div' );
 		assert.equal( div.foo, 0 );
 
-		now = 200;
+		raf.tick( 200 );
-		callback();
 		assert.equal( div.foo, 0.5 );
 
-		now = 400;
+		raf.tick( 400 );
-		callback();
 		assert.equal( div.foo, 1 );
 
-		now = 500;
+		raf.tick( 500 );
-		callback();
 		assert.equal( div.foo, 1 );
 
 		component.set({ visible: false });
-		now = 600;
+		raf.tick( 600 );
-		callback();
 		assert.equal( div.foo, 1 );
 		assert.equal( div.bar, 0.75 );
 
-		now = 900;
+		raf.tick( 900 );
-		callback();
 		assert.equal( div.foo, 1 );
 		assert.equal( div.bar, 0 );
 
 		// test outro before intro complete
-		now = 1000;
+		raf.tick( 1000 );
 		component.set({ visible: true });
 		div = target.querySelector( 'div' );
-		callback();
 
-		now = 1200;
+		raf.tick( 1200 );
-		callback();
 		assert.equal( div.foo, 0.5 );
 
 		component.set({ visible: false });
-		now = 1300;
+		raf.tick( 1300 );
-		callback();
 		assert.equal( div.foo, 0.75 );
 		assert.equal( div.bar, 0.75 );
 
-		now = 1400;
+		raf.tick( 1400 );
-		callback();
 		assert.equal( div.foo, 1 );
 		assert.equal( div.bar, 0.5 );
 
-		now = 2000;
+		raf.tick( 2000 );
-		callback();
 
 		component.destroy();
 	}

test/runtime/samples/transition-js-if-block-intro/_config.js

@@ -1,25 +1,16 @@
 export default {
-	test ( assert, component, target, window ) {
+	test ( assert, component, target, window, raf ) {
-		let now = 0;
-		let callback;
-
-		window.performance = { now: () => now };
-		global.requestAnimationFrame = cb => callback = cb;
-
 		component.set({ visible: true });
 		const div = target.querySelector( 'div' );
 		assert.equal( window.getComputedStyle( div ).opacity, 0 );
 
-		now = 200;
+		raf.tick( 200 );
-		callback();
 		assert.equal( window.getComputedStyle( div ).opacity, 0.5 );
 
-		now = 400;
+		raf.tick( 400 );
-		callback();
 		assert.equal( window.getComputedStyle( div ).opacity, 1 );
 
-		now = 500;
+		raf.tick( 500 );
-		callback();
 
 		component.destroy();
 	}

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

@@ -0,0 +1,21 @@
+export default {
+	test ( assert, component, target, window, raf ) {
+		assert.equal( target.querySelector( 'div' ), component.refs.no );
+		assert.equal( component.refs.no.foo, 0 );
+
+		raf.tick( 200 );
+		assert.equal( component.refs.no.foo, 0.5 );
+
+		raf.tick( 500 );
+		component.set({ x: true });
+		assert.equal( component.refs.no, undefined );
+		assert.equal( component.refs.yes.foo, 0 );
+
+		raf.tick( 700 );
+		assert.equal( component.refs.yes.foo, 0.5 );
+
+		raf.tick( 1000 );
+
+		component.destroy();
+	}
+};

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

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