msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

tighten up transition tests

Browse Source
pull/525/head
Rich-Harris 8 years ago
parent f5bc3e3c84
commit f76fac2973
7 changed files with 95 additions and 74 deletions
Show Stats Download Patch File Download Diff File

29
test/runtime/index.js
Unescape View File

@ -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 );
});
});

22
test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js
Unescape View File

@ -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();
}

22
test/runtime/samples/transition-js-if-block-bidi/_config.js
Unescape View File

@ -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();
}

38
test/runtime/samples/transition-js-if-block-intro-outro/_config.js
Unescape View File

@ -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();
}

17
test/runtime/samples/transition-js-if-block-intro/_config.js
Unescape View File

@ -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();
}

21
test/runtime/samples/transition-js-if-else-block-intro/_config.js
Unescape View File

@ -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();
}
};

20
test/runtime/samples/transition-js-if-else-block-intro/main.html
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save