From f76fac2973d9354ea17959292aae52a6baafd3a5 Mon Sep 17 00:00:00 2001 From: Rich-Harris Date: Mon, 1 May 2017 13:59:20 -0400 Subject: [PATCH] tighten up transition tests --- test/runtime/index.js | 29 +++++++++++++- .../_config.js | 22 +++-------- .../transition-js-if-block-bidi/_config.js | 22 +++-------- .../_config.js | 38 ++++++------------- .../transition-js-if-block-intro/_config.js | 17 ++------- .../_config.js | 21 ++++++++++ .../main.html | 20 ++++++++++ 7 files changed, 95 insertions(+), 74 deletions(-) create mode 100644 test/runtime/samples/transition-js-if-else-block-intro/_config.js create mode 100644 test/runtime/samples/transition-js-if-else-block-intro/main.html diff --git a/test/runtime/index.js b/test/runtime/index.js index 153d8100f3..604042d0a4 100644 --- a/test/runtime/index.js +++ b/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 ); }); }); diff --git a/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js b/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js index 9177411dd6..fcf391ac60 100644 --- a/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js +++ b/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; - callback(); + raf.tick( 300 ); 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; - callback(); + raf.tick( 500 ); assert.equal( div.foo, 0.25 ); component.set({ visible: true }); - now = 700; - callback(); + raf.tick( 700 ); assert.equal( div.foo, 0.75 ); assert.htmlEqual( div.innerHTML, 'hello again!' ); - now = 800; - callback(); + raf.tick( 800 ); assert.equal( div.foo, 1 ); - now = 900; - callback(); + raf.tick( 900 ); component.destroy(); } diff --git a/test/runtime/samples/transition-js-if-block-bidi/_config.js b/test/runtime/samples/transition-js-if-block-bidi/_config.js index d4cd3982f0..8a6db10074 100644 --- a/test/runtime/samples/transition-js-if-block-bidi/_config.js +++ b/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; - callback(); + raf.tick( 300 ); assert.equal( div.foo, 0.75 ); component.set({ visible: false }); assert.equal( global.count, 1 ); - now = 500; - callback(); + raf.tick( 500 ); assert.equal( div.foo, 0.25 ); component.set({ visible: true }); - now = 700; - callback(); + raf.tick( 700 ); assert.equal( div.foo, 0.75 ); - now = 800; - callback(); + raf.tick( 800 ); assert.equal( div.foo, 1 ); - now = 900; - callback(); + raf.tick( 900 ); component.destroy(); } diff --git a/test/runtime/samples/transition-js-if-block-intro-outro/_config.js b/test/runtime/samples/transition-js-if-block-intro-outro/_config.js index f267ce2ad2..146ac082d5 100644 --- a/test/runtime/samples/transition-js-if-block-intro-outro/_config.js +++ b/test/runtime/samples/transition-js-if-block-intro-outro/_config.js @@ -1,61 +1,45 @@ export default { - test ( assert, component, target, window ) { - let now = 0; - let callback; - - window.performance = { now: () => now }; - global.requestAnimationFrame = cb => callback = cb; - + test ( assert, component, target, window, raf ) { component.set({ visible: true }); let div = target.querySelector( 'div' ); assert.equal( div.foo, 0 ); - now = 200; - callback(); + raf.tick( 200 ); assert.equal( div.foo, 0.5 ); - now = 400; - callback(); + raf.tick( 400 ); assert.equal( div.foo, 1 ); - now = 500; - callback(); + raf.tick( 500 ); assert.equal( div.foo, 1 ); component.set({ visible: false }); - now = 600; - callback(); + raf.tick( 600 ); assert.equal( div.foo, 1 ); assert.equal( div.bar, 0.75 ); - now = 900; - callback(); + raf.tick( 900 ); 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; - callback(); + raf.tick( 1200 ); assert.equal( div.foo, 0.5 ); component.set({ visible: false }); - now = 1300; - callback(); + raf.tick( 1300 ); assert.equal( div.foo, 0.75 ); assert.equal( div.bar, 0.75 ); - now = 1400; - callback(); + raf.tick( 1400 ); assert.equal( div.foo, 1 ); assert.equal( div.bar, 0.5 ); - now = 2000; - callback(); + raf.tick( 2000 ); component.destroy(); } diff --git a/test/runtime/samples/transition-js-if-block-intro/_config.js b/test/runtime/samples/transition-js-if-block-intro/_config.js index 50a427062f..04d3c6245e 100644 --- a/test/runtime/samples/transition-js-if-block-intro/_config.js +++ b/test/runtime/samples/transition-js-if-block-intro/_config.js @@ -1,25 +1,16 @@ export default { - test ( assert, component, target, window ) { - let now = 0; - let callback; - - window.performance = { now: () => now }; - global.requestAnimationFrame = cb => callback = cb; - + test ( assert, component, target, window, raf ) { component.set({ visible: true }); const div = target.querySelector( 'div' ); assert.equal( window.getComputedStyle( div ).opacity, 0 ); - now = 200; - callback(); + raf.tick( 200 ); assert.equal( window.getComputedStyle( div ).opacity, 0.5 ); - now = 400; - callback(); + raf.tick( 400 ); assert.equal( window.getComputedStyle( div ).opacity, 1 ); - now = 500; - callback(); + raf.tick( 500 ); component.destroy(); } diff --git a/test/runtime/samples/transition-js-if-else-block-intro/_config.js b/test/runtime/samples/transition-js-if-else-block-intro/_config.js new file mode 100644 index 0000000000..768b16567c --- /dev/null +++ b/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(); + } +}; \ No newline at end of file diff --git a/test/runtime/samples/transition-js-if-else-block-intro/main.html b/test/runtime/samples/transition-js-if-else-block-intro/main.html new file mode 100644 index 0000000000..1b30160b02 --- /dev/null +++ b/test/runtime/samples/transition-js-if-else-block-intro/main.html @@ -0,0 +1,20 @@ +{{#if x}} +
yes
+{{else}} +
no
+{{/if}} + + \ No newline at end of file