remove redundant component.destroy calls, rename others to $destroy

pull/1864/head
Rich Harris 7 years ago
parent 3da78c7e46
commit 3f52b5ac0e

@ -1,2 +1 @@
--bail
test/test.js test/test.js

@ -4,29 +4,28 @@ export default {
// instead // instead
skip: true, skip: true,
test ( assert, component, target, window ) { test(assert, component, target, window) {
assert.equal( component.t, 0 ); assert.equal(component.t, 0);
assert.equal( component.d, 0 ); assert.equal(component.d, 0);
assert.equal( component.v, 0.5 ); assert.equal(component.v, 0.5);
assert.equal( component.paused, true ); assert.equal(component.paused, true);
const audio = target.querySelector( 'audio' ); const audio = target.querySelector('audio');
const timeupdate = new window.Event( 'timeupdate' ); const timeupdate = new window.Event('timeupdate');
const durationchange = new window.Event( 'durationchange' ); const durationchange = new window.Event('durationchange');
const volumechange = new window.Event( 'volumechange' ); const volumechange = new window.Event('volumechange');
audio.currentTime = 10; audio.currentTime = 10;
audio.duration = 20; audio.duration = 20;
audio.volume = 0.75; audio.volume = 0.75;
audio.dispatchEvent( timeupdate ); audio.dispatchEvent(timeupdate);
audio.dispatchEvent( durationchange ); audio.dispatchEvent(durationchange);
audio.dispatchEvent( volumechange ); audio.dispatchEvent(volumechange);
audio.play(); audio.play();
assert.equal( component.t, 10 ); assert.equal(component.t, 10);
assert.equal( component.d, 0 ); // not 20, because read-only. Not sure how to test this! assert.equal(component.d, 0); // not 20, because read-only. Not sure how to test this!
assert.equal( component.v, 0.75 ); assert.equal(component.v, 0.75);
assert.equal( component.paused, true ); // ditto... assert.equal(component.paused, true); // ditto...
component.destroy();
} }
}; };

@ -3,18 +3,16 @@ export default {
a: 42 a: 42
}, },
test ( assert, component, target, window ) { test(assert, component, target, window) {
const input = target.querySelector( 'input' ); const input = target.querySelector('input');
assert.equal( input.value, '42' ); assert.equal(input.value, '42');
const event = new window.Event( 'input' ); const event = new window.Event('input');
input.value = 43; input.value = 43;
input.dispatchEvent( event ); input.dispatchEvent(event);
assert.equal( input.value, '43' ); assert.equal(input.value, '43');
assert.equal( component.a, 43 ); assert.equal(component.a, 43);
component.destroy();
} }
}; };

@ -13,13 +13,11 @@ export default {
<p>selected: a</p> <p>selected: a</p>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
const select = target.querySelector( 'select' ); const select = target.querySelector('select');
const options = [ ...target.querySelectorAll( 'option' ) ]; const options = [...target.querySelectorAll('option')];
assert.equal( select.value, 'a' ); assert.equal(select.value, 'a');
assert.ok( options[0].selected ); assert.ok(options[0].selected);
component.destroy();
} }
}; };

@ -33,7 +33,5 @@ export default {
assert.equal(select.value, 'b'); assert.equal(select.value, 'b');
assert.ok(options[1].selected); assert.ok(options[1].selected);
component.destroy();
}, },
}; };

@ -9,24 +9,22 @@ export default {
<p>selected: nothing</p> <p>selected: nothing</p>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
component.items = [ 'one', 'two', 'three' ]; component.items = [ 'one', 'two', 'three' ];
component.selected = 'two'; component.selected = 'two';
const options = target.querySelectorAll( 'option' ); const options = target.querySelectorAll('option');
assert.ok( !options[0].selected ); assert.ok(!options[0].selected);
assert.ok( options[1].selected ); assert.ok(options[1].selected);
assert.ok( !options[2].selected ); assert.ok(!options[2].selected);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<select> <select>
<option value='one'>one</option> <option value='one'>one</option>
<option value='two'>two</option> <option value='two'>two</option>
<option value='three'>three</option> <option value='three'>three</option>
</select> </select>
<p>selected: two</p> <p>selected: two</p>
` ); `);
component.destroy();
} }
}; };

@ -30,15 +30,15 @@ export default {
<pre>ONE SOURCE\nTWO SOURCE</pre> <pre>ONE SOURCE\nTWO SOURCE</pre>
`, `,
test ( assert, component, target, window ) { test(assert, component, target, window) {
const event = new window.MouseEvent( 'input' ); const event = new window.MouseEvent('input');
const textarea = target.querySelector( 'textarea' ); const textarea = target.querySelector('textarea');
textarea.value = 'one source changed'; textarea.value = 'one source changed';
textarea.dispatchEvent( event ); textarea.dispatchEvent(event);
assert.equal( component.compiled, 'ONE SOURCE CHANGED\nTWO SOURCE' ); assert.equal(component.compiled, 'ONE SOURCE CHANGED\nTWO SOURCE');
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<select> <select>
<option value='[object Object]'>One.html</option> <option value='[object Object]'>One.html</option>
<option value='[object Object]'>Two.html</option> <option value='[object Object]'>Two.html</option>
@ -47,28 +47,28 @@ export default {
<textarea></textarea> <textarea></textarea>
<pre>ONE SOURCE CHANGED\nTWO SOURCE</pre> <pre>ONE SOURCE CHANGED\nTWO SOURCE</pre>
` ); `);
// const select = target.querySelector( 'select' ); // const select = target.querySelector('select');
// console.log( `select.options[0].selected`, select.options[0].selected ) // console.log(`select.options[0].selected`, select.options[0].selected)
// console.log( `select.options[1].selected`, select.options[1].selected ) // console.log(`select.options[1].selected`, select.options[1].selected)
// console.log( `select.value`, select.value ) // console.log(`select.value`, select.value)
// console.log( `select.__value`, select.__value ) // console.log(`select.__value`, select.__value)
// select.options[1].selected = true; // select.options[1].selected = true;
// console.log( `select.options[0].selected`, select.options[0].selected ) // console.log(`select.options[0].selected`, select.options[0].selected)
// console.log( `select.options[1].selected`, select.options[1].selected ) // console.log(`select.options[1].selected`, select.options[1].selected)
// console.log( `select.value`, select.value ) // console.log(`select.value`, select.value)
// console.log( `select.__value`, select.__value ) // console.log(`select.__value`, select.__value)
// select.dispatchEvent( new window.Event( 'change' ) ); // select.dispatchEvent(new window.Event('change'));
component.selectedComponent = components[1]; component.selectedComponent = components[1];
assert.equal( textarea.value, 'two source' ); assert.equal(textarea.value, 'two source');
textarea.value = 'two source changed'; textarea.value = 'two source changed';
textarea.dispatchEvent( event ); textarea.dispatchEvent(event);
assert.equal( component.compiled, 'ONE SOURCE CHANGED\nTWO SOURCE CHANGED' ); assert.equal(component.compiled, 'ONE SOURCE CHANGED\nTWO SOURCE CHANGED');
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<select> <select>
<option value='[object Object]'>One.html</option> <option value='[object Object]'>One.html</option>
<option value='[object Object]'>Two.html</option> <option value='[object Object]'>Two.html</option>
@ -77,8 +77,6 @@ export default {
<textarea></textarea> <textarea></textarea>
<pre>ONE SOURCE CHANGED\nTWO SOURCE CHANGED</pre> <pre>ONE SOURCE CHANGED\nTWO SOURCE CHANGED</pre>
` ); `);
component.destroy();
} }
}; };

@ -11,19 +11,17 @@ export default {
<p>foo, bar, baz</p> <p>foo, bar, baz</p>
`, `,
test ( assert, component, target, window ) { test(assert, component, target, window) {
const event = new window.MouseEvent( 'input' ); const event = new window.MouseEvent('input');
const inputs = target.querySelectorAll( 'input' ); const inputs = target.querySelectorAll('input');
inputs[0].value = 'blah'; inputs[0].value = 'blah';
inputs[0].dispatchEvent( event ); inputs[0].dispatchEvent(event);
assert.deepEqual( component.a, [{ name: 'blah' }, { name: 'bar' }, { name: 'baz' }] ); assert.deepEqual(component.a, [{ name: 'blah' }, { name: 'bar' }, { name: 'baz' }]);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input><input><input> <input><input><input>
<p>blah, bar, baz</p> <p>blah, bar, baz</p>
` ); `);
component.destroy();
} }
}; };

@ -7,16 +7,14 @@ export default {
<span>foo</span><span>bar</span><span>baz</span> <span>foo</span><span>bar</span><span>baz</span>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
component.a = [ component.a = [
{ id: 'yep' }, { id: 'yep' },
{ id: 'nope' } { id: 'nope' }
]; ];
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<span>yep</span><span>nope</span> <span>yep</span><span>nope</span>
` ); `);
component.destroy();
} }
}; };

@ -11,19 +11,17 @@ export default {
<p>foo, bar, baz</p> <p>foo, bar, baz</p>
`, `,
test ( assert, component, target, window ) { test(assert, component, target, window) {
const event = new window.MouseEvent( 'input' ); const event = new window.MouseEvent('input');
const inputs = target.querySelectorAll( 'input' ); const inputs = target.querySelectorAll('input');
inputs[0].value = 'blah'; inputs[0].value = 'blah';
inputs[0].dispatchEvent( event ); inputs[0].dispatchEvent(event);
assert.deepEqual( component.a, [ 'blah', 'bar', 'baz' ] ); assert.deepEqual(component.a, [ 'blah', 'bar', 'baz' ]);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input><input><input> <input><input><input>
<p>blah, bar, baz</p> <p>blah, bar, baz</p>
` ); `);
component.destroy();
} }
}; };

@ -3,10 +3,8 @@ export default {
<div><p class='widget'>Hello</p></div> <div><p class='widget'>Hello</p></div>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
component.arriving = false; component.arriving = false;
assert.htmlEqual( target.innerHTML, `<div><p class='widget'>Goodbye</p></div>` ); assert.htmlEqual(target.innerHTML, `<div><p class='widget'>Goodbye</p></div>`);
component.destroy();
} }
}; };

@ -5,6 +5,5 @@ export default {
component.y = 2; component.y = 2;
assert.equal(component.x, 4); assert.equal(component.x, 4);
assert.equal(target.innerHTML, '<p>4</p>'); assert.equal(target.innerHTML, '<p>4</p>');
component.destroy();
} }
}; };

@ -6,6 +6,5 @@ export default {
assert.equal(component.c, 5); assert.equal(component.c, 5);
assert.equal(component.cSquared, 25); assert.equal(component.cSquared, 25);
assert.equal(target.innerHTML, '<p>3 + 2 = 5</p>\n<p>5 * 5 = 25</p>'); assert.equal(target.innerHTML, '<p>3 + 2 = 5</p>\n<p>5 * 5 = 25</p>');
component.destroy();
} }
}; };

@ -1,8 +1,7 @@
export default { export default {
html: `<span>got</span>`, html: `<span>got</span>`,
test ( assert, component ) { test(assert, component) {
assert.equal( component.foo, 'got' ); assert.equal(component.foo, 'got');
component.destroy();
} }
}; };

@ -1,8 +1,7 @@
export default { export default {
html: `ABCD`, html: `ABCD`,
test ( assert, component ) { test (assert, component) {
assert.equal( component.compute, 'ABCD' ); assert.equal(component.compute, 'ABCD');
component.destroy();
} }
}; };

@ -1,6 +1,6 @@
export default { export default {
test(assert, component) { test(assert, component) {
component.destroy(); component.$destroy();
component.destroy(); component.$destroy();
} }
}; };

@ -11,8 +11,8 @@ export default {
warnings.push(warning); warnings.push(warning);
}; };
component.destroy(); component.$destroy();
component.destroy(); component.$destroy();
assert.deepEqual(warnings, [ assert.deepEqual(warnings, [
`Component was already destroyed` `Component was already destroyed`

@ -11,23 +11,21 @@ export default {
<p>drink milk</p> <p>drink milk</p>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
const [ p1, p2 ] = target.querySelectorAll( 'p' ); const [ p1, p2 ] = target.querySelectorAll('p');
component.todos = [ component.todos = [
{ id: 123, description: 'buy beer' }, { id: 123, description: 'buy beer' },
{ id: 234, description: 'drink beer' } { id: 234, description: 'drink beer' }
]; ];
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<p>buy beer</p> <p>buy beer</p>
<p>drink beer</p> <p>drink beer</p>
` ); `);
const [ p3, p4 ] = target.querySelectorAll( 'p' ); const [ p3, p4 ] = target.querySelectorAll('p');
assert.equal( p1, p3 ); assert.equal(p1, p3);
assert.equal( p2, p4 ); assert.equal(p2, p4);
component.destroy();
} }
}; };

@ -16,7 +16,5 @@ export default {
<p>b</p> <p>b</p>
<p>c</p> <p>c</p>
`); `);
component.destroy();
} }
}; };

@ -11,19 +11,17 @@ export default {
<p>2: implement client-side hydration</p> <p>2: implement client-side hydration</p>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
const [ p1, p2 ] = target.querySelectorAll( 'p' ); const [ p1, p2 ] = target.querySelectorAll('p');
component.todos = [ component.todos = [
{ id: 234, description: 'implement client-side hydration' } { id: 234, description: 'implement client-side hydration' }
]; ];
assert.htmlEqual( target.innerHTML, '<p>1: implement client-side hydration</p>' ); assert.htmlEqual(target.innerHTML, '<p>1: implement client-side hydration</p>');
const [ p3 ] = target.querySelectorAll( 'p' ); const [ p3 ] = target.querySelectorAll('p');
assert.ok( !target.contains( p1 ), 'first <p> element should be removed' ); assert.ok(!target.contains(p1), 'first <p> element should be removed');
assert.equal( p2, p3, 'second <p> element should be retained' ); assert.equal(p2, p3, 'second <p> element should be retained');
component.destroy();
} }
}; };

@ -8,25 +8,23 @@ export default {
<p>second: </p> <p>second: </p>
`, `,
test ( assert, component, target, window ) { test(assert, component, target, window) {
const event = new window.MouseEvent( 'click' ); const event = new window.MouseEvent('click');
const buttons = target.querySelectorAll( 'button' ); const buttons = target.querySelectorAll('button');
buttons[1].dispatchEvent( event ); buttons[1].dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>0: foo</button> <button>0: foo</button>
<button>1: bar</button> <button>1: bar</button>
<button>2: baz</button> <button>2: baz</button>
<p>first: 1</p> <p>first: 1</p>
<p>second: bar</p> <p>second: bar</p>
` ); `);
assert.equal( component.first, '1' ); assert.equal(component.first, '1');
assert.equal( component.second, 'bar' ); assert.equal(component.second, 'bar');
component.destroy();
} }
}; };

@ -8,25 +8,23 @@ export default {
<p>fromState: </p> <p>fromState: </p>
`, `,
test ( assert, component, target, window ) { test(assert, component, target, window) {
const event = new window.MouseEvent( 'click' ); const event = new window.MouseEvent('click');
const buttons = target.querySelectorAll( 'button' ); const buttons = target.querySelectorAll('button');
buttons[1].dispatchEvent( event ); buttons[1].dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>foo</button> <button>foo</button>
<button>bar</button> <button>bar</button>
<button>baz</button> <button>baz</button>
<p>fromDom: bar</p> <p>fromDom: bar</p>
<p>fromState: bar</p> <p>fromState: bar</p>
` ); `);
assert.equal( component.fromDom, 'bar' ); assert.equal(component.fromDom, 'bar');
assert.equal( component.fromState, 'bar' ); assert.equal(component.fromState, 'bar');
component.destroy();
} }
}; };

@ -1,7 +1,7 @@
export default { export default {
props: { props: {
foo: [ 1 ], foo: [1],
bar: [ 2 ], bar: [2],
clicked: 'neither' clicked: 'neither'
}, },
@ -11,26 +11,24 @@ export default {
<p>clicked: neither</p> <p>clicked: neither</p>
`, `,
test ( assert, component, target, window ) { test(assert, component, target, window) {
const buttons = target.querySelectorAll( 'button' ); const buttons = target.querySelectorAll('button');
const event = new window.MouseEvent( 'click' ); const event = new window.MouseEvent('click');
buttons[0].dispatchEvent( event ); buttons[0].dispatchEvent(event);
assert.equal( component.clicked, 'foo' ); assert.equal(component.clicked, 'foo');
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>foo</button> <button>foo</button>
<button>bar</button> <button>bar</button>
<p>clicked: foo</p> <p>clicked: foo</p>
` ); `);
buttons[1].dispatchEvent( event ); buttons[1].dispatchEvent(event);
assert.equal( component.clicked, 'bar' ); assert.equal(component.clicked, 'bar');
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>foo</button> <button>foo</button>
<button>bar</button> <button>bar</button>
<p>clicked: bar</p> <p>clicked: bar</p>
` ); `);
component.destroy();
} }
}; };

@ -15,18 +15,16 @@ export default {
<p>selected: foo</p> <p>selected: foo</p>
`, `,
test ( assert, component, target, window ) { test(assert, component, target, window) {
const buttons = target.querySelectorAll( 'button' ); const buttons = target.querySelectorAll('button');
const event = new window.MouseEvent( 'click' ); const event = new window.MouseEvent('click');
buttons[1].dispatchEvent( event ); buttons[1].dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>foo</button> <button>foo</button>
<button>bar</button> <button>bar</button>
<button>baz</button> <button>baz</button>
<p>selected: bar</p> <p>selected: bar</p>
` ); `);
component.destroy();
} }
}; };

@ -1,2 +1,2 @@
<input class='wont-focus'> <input class='wont-focus'>
<input class='will-focus' on:click='{() => event.target.focus()}'> <input class='will-focus' on:click='{e => e.target.focus()}'>

@ -1,17 +1,15 @@
export default { export default {
test ( assert, component ) { test(assert, component) {
let count = 0; let count = 0;
const expected = { x: 1 }; const expected = { x: 1 };
component.$on( 'foo', data => { component.$on('foo', data => {
assert.equal( data, expected ); assert.equal(data, expected);
count += 1; count += 1;
}); });
component.fire( 'foo', expected ); component.fire('foo', expected);
assert.equal( count, 1 ); assert.equal(count, 1);
component.destroy();
} }
}; };

@ -5,11 +5,9 @@ export default {
html: '1, 3, 5, 7, 9', html: '1, 3, 5, 7, 9',
test ( assert, component, target ) { test(assert, component, target) {
component.numbers = [ 10, 11, 12, 13, 14, 15, 16 ]; component.numbers = [10, 11, 12, 13, 14, 15, 16];
assert.htmlEqual( target.innerHTML, `11, 13, 15` ); assert.htmlEqual(target.innerHTML, `11, 13, 15`);
component.destroy();
} }
}; };

@ -6,7 +6,7 @@ export default {
html: `<div>1</div>`, html: `<div>1</div>`,
test(assert, component) { test(assert, component) {
component.destroy(); component.$destroy();
const { foo } = component.get(); const { foo } = component.get();
assert.equal(foo, undefined); assert.equal(foo, undefined);
} }

@ -5,11 +5,11 @@ export default {
html: '<h1>Hello world!</h1>', html: '<h1>Hello world!</h1>',
test ( assert, component, target ) { test (assert, component, target) {
component.name = 'everybody'; component.name = 'everybody';
assert.htmlEqual( target.innerHTML, '<h1>Hello everybody!</h1>' ); assert.htmlEqual(target.innerHTML, '<h1>Hello everybody!</h1>');
component.destroy(); component.$destroy();
assert.htmlEqual( target.innerHTML, '' ); assert.htmlEqual(target.innerHTML, '');
} }
}; };

@ -15,7 +15,5 @@ export default {
component.x = 6; component.x = 6;
assert.htmlEqual(target.innerHTML, ``); assert.htmlEqual(target.innerHTML, ``);
component.destroy();
} }
}; };

@ -7,17 +7,15 @@ export default {
before-if-after before-if-after
`, `,
test ( assert, component, target ) { test (assert, component, target) {
component.x = 4; component.x = 4;
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
before-elseif-after before-elseif-after
` ); `);
component.x = 6; component.x = 6;
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
before-else-after before-else-after
` ); `);
component.destroy();
} }
}; };

@ -7,17 +7,15 @@ export default {
<p>x is greater than 10</p> <p>x is greater than 10</p>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
component.x = 4; component.x = 4;
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<p>x is less than 5</p> <p>x is less than 5</p>
` ); `);
component.x = 6; component.x = 6;
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<p>x is between 5 and 10</p> <p>x is between 5 and 10</p>
` ); `);
component.destroy();
} }
}; };

@ -1,7 +1,7 @@
export default { export default {
test(assert, component) { test(assert, component) {
assert.deepEqual(component.events, ['create']); assert.deepEqual(component.events, ['create']);
component.destroy(); component.$destroy();
assert.deepEqual(component.events, ['create', 'destroy']); assert.deepEqual(component.events, ['create', 'destroy']);
} }
}; };

@ -10,13 +10,11 @@ export default {
<p>hello!</p> <p>hello!</p>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
component.value = 'goodbye!'; component.value = 'goodbye!';
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<p>goodbye!</p> <p>goodbye!</p>
<p>goodbye!</p> <p>goodbye!</p>
` ); `);
component.destroy();
} }
}; };

@ -5,13 +5,11 @@ export default {
<span>3</span><span>2</span><span>1</span> <span>3</span><span>2</span><span>1</span>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
component.refs.list.update(); component.refs.list.update();
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
` ); `);
component.destroy();
} }
}; };

@ -3,10 +3,8 @@ export default {
html: `<div><p>true</p></div>`, html: `<div><p>true</p></div>`,
test ( assert, component, target ) { test(assert, component, target) {
component.foo = true; component.foo = true;
assert.htmlEqual( target.innerHTML, `<div><p>true</p>\n<p>true</p></div>` ); assert.htmlEqual(target.innerHTML, `<div><p>true</p>\n<p>true</p></div>`);
component.destroy();
} }
}; };

@ -7,13 +7,11 @@ export default {
html: `<div><p>does not change</p></div>`, html: `<div><p>does not change</p></div>`,
test ( assert, component, target ) { test(assert, component, target) {
const p = target.querySelector( 'p' ); const p = target.querySelector('p');
component.raw = '<p>does not change</p>'; component.raw = '<p>does not change</p>';
assert.equal( target.innerHTML, `<div><p>does not change</p></div>` ); assert.equal(target.innerHTML, `<div><p>does not change</p></div>`);
assert.strictEqual( target.querySelector( 'p' ), p ); assert.strictEqual(target.querySelector('p'), p);
component.destroy();
} }
}; };

@ -9,12 +9,12 @@ export default {
html: `before${ns}<span><em>raw html!!!\\o/</span></em>${ns}after`, html: `before${ns}<span><em>raw html!!!\\o/</span></em>${ns}after`,
test ( assert, component, target ) { test(assert, component, target) {
component.raw = ''; component.raw = '';
assert.equal( target.innerHTML, `before${ns}${ns}after` ); assert.equal(target.innerHTML, `before${ns}${ns}after`);
component.raw = 'how about <strong>unclosed elements?'; component.raw = 'how about <strong>unclosed elements?';
assert.equal( target.innerHTML, `before${ns}how about <strong>unclosed elements?</strong>${ns}after` ); assert.equal(target.innerHTML, `before${ns}how about <strong>unclosed elements?</strong>${ns}after`);
component.destroy(); component.$destroy();
assert.equal( target.innerHTML, '' ); assert.equal(target.innerHTML, '');
} }
}; };

@ -4,19 +4,17 @@ export default {
selected: 'b' selected: 'b'
}, },
test ( assert, component, target, window ) { test(assert, component, target, window) {
const select = target.querySelector( 'select' ); const select = target.querySelector('select');
assert.equal( select.value, 'b' ); assert.equal(select.value, 'b');
const event = new window.Event( 'change' ); const event = new window.Event('change');
select.value = 'c'; select.value = 'c';
select.dispatchEvent( event ); select.dispatchEvent(event);
assert.equal( select.value, 'c' ); assert.equal(select.value, 'c');
assert.equal( component.lastChangedTo, 'c' ); assert.equal(component.lastChangedTo, 'c');
assert.equal( component.selected, 'c' ); assert.equal(component.selected, 'c');
component.destroy();
} }
}; };

@ -14,8 +14,8 @@ export default {
</select> </select>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
assert.htmlEqual( target.innerHTML,` assert.htmlEqual(target.innerHTML,`
<select> <select>
<option value="a">One</option> <option value="a">One</option>
<option value="b">Two</option> <option value="b">Two</option>
@ -23,9 +23,9 @@ export default {
</select> </select>
`); `);
assert.equal( target.querySelector( 'select' ).value, 'a' ); assert.equal(target.querySelector('select').value, 'a');
component.destroy(); component.$destroy();
assert.htmlEqual( target.innerHTML, '' ); assert.htmlEqual(target.innerHTML, '');
} }
}; };

@ -4,7 +4,7 @@ export default {
}, },
test(assert, component) { test(assert, component) {
component.destroy(); component.$destroy();
component.x = 2; component.x = 2;
} }
}; };

@ -7,10 +7,9 @@ export default {
a: 42 a: 42
}, },
test ( assert, component ) { test(assert, component) {
const obj = { a: 1 }; const obj = { a: 1 };
component.set( obj ); component.set(obj);
component.set( obj ); // will fail if the object is not cloned component.set(obj); // will fail if the object is not cloned
component.destroy();
} }
}; };

@ -18,7 +18,7 @@ export default {
values.push(current.foo); values.push(current.foo);
}); });
component.destroy(); component.$destroy();
assert.deepEqual(values, [2]); assert.deepEqual(values, [2]);
assert.equal(valueOnDestroy, 2); assert.equal(valueOnDestroy, 2);

@ -1,8 +1,7 @@
export default { export default {
skip: true, // nice-to-have tricky though, so skipping for now skip: true, // nice-to-have tricky though, so skipping for now
test ( assert, component ) { test(assert, component) {
component.foo = { x: 2 }; component.foo = { x: 2 };
component.destroy();
} }
}; };

@ -7,9 +7,8 @@ export default {
</svg> </svg>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
const circle = target.querySelector( 'circle' ); const circle = target.querySelector('circle');
assert.equal( circle.getAttribute( 'class' ), 'red' ); assert.equal(circle.getAttribute('class'), 'red');
component.destroy();
} }
}; };

@ -3,12 +3,10 @@
export default { export default {
html: `<svg class='foo'></svg>`, html: `<svg class='foo'></svg>`,
test ( assert, component, target ) { test(assert, component, target) {
const svg = target.querySelector( 'svg' ); const svg = target.querySelector('svg');
assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' ); assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
assert.equal( svg.getAttribute( 'class' ), 'foo' ); assert.equal(svg.getAttribute('class'), 'foo');
component.destroy();
} }
}; };

@ -5,11 +5,10 @@ export default {
</svg> </svg>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
const circles = target.querySelectorAll( 'circle' ); const circles = target.querySelectorAll('circle');
assert.equal( circles[0].namespaceURI, 'http://www.w3.org/2000/svg' ); assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
assert.equal( circles[1].namespaceURI, 'http://www.w3.org/2000/svg' ); assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
assert.equal( circles[2].namespaceURI, 'http://www.w3.org/2000/svg' ); assert.equal(circles[2].namespaceURI, 'http://www.w3.org/2000/svg');
component.destroy();
} }
}; };

@ -8,12 +8,10 @@ export default {
<use xlink:href='#stamp' x='20' y='20'/> <use xlink:href='#stamp' x='20' y='20'/>
</svg> </svg>
`, `,
test ( assert, component, target ) { test(assert, component, target) {
const use = target.querySelector( 'use' ); const use = target.querySelector('use');
const href = use.attributes[ 'xlink:href' ]; const href = use.attributes[ 'xlink:href' ];
assert.equal( href.namespaceURI, 'http://www.w3.org/1999/xlink' ); assert.equal(href.namespaceURI, 'http://www.w3.org/1999/xlink');
component.destroy();
} }
}; };

@ -1,12 +1,10 @@
export default { export default {
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
component.visible = true; component.visible = true;
const div = target.querySelector( 'div' ); const div = target.querySelector('div');
assert.strictEqual( div.style.opacity, '0' ); assert.strictEqual(div.style.opacity, '0');
raf.tick( 50 ); raf.tick(50);
assert.strictEqual( div.style.opacity, '' ); assert.strictEqual(div.style.opacity, '');
component.destroy();
} }
}; };

@ -1,24 +1,22 @@
export default { export default {
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
component.visible = true; component.visible = true;
const div = target.querySelector( 'div' ); const div = target.querySelector('div');
assert.equal( div.foo, 0 ); assert.equal(div.foo, 0);
raf.tick( 50 ); raf.tick(50);
assert.equal( div.foo, 0 ); assert.equal(div.foo, 0);
raf.tick( 150 ); raf.tick(150);
assert.equal( div.foo, 1 ); assert.equal(div.foo, 1);
component.visible = false; component.visible = false;
assert.equal( div.bar, undefined ); assert.equal(div.bar, undefined);
raf.tick( 200 ); raf.tick(200);
assert.equal( div.bar, 1 ); assert.equal(div.bar, 1);
raf.tick( 300 ); raf.tick(300);
assert.equal( div.bar, 0 ); assert.equal(div.bar, 0);
component.destroy();
} }
}; };

@ -1,29 +1,27 @@
export default { export default {
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
component.visible = true; component.visible = true;
const div = target.querySelector( 'div' ); const div = target.querySelector('div');
assert.equal( div.foo, 0 ); assert.equal(div.foo, 0);
raf.tick( 50 ); raf.tick(50);
assert.equal( div.foo, 0 ); assert.equal(div.foo, 0);
raf.tick( 100 ); raf.tick(100);
assert.equal( div.foo, 0.5 ); assert.equal(div.foo, 0.5);
component.visible = false; component.visible = false;
raf.tick( 125 ); raf.tick(125);
assert.equal( div.foo, 0.75 ); assert.equal(div.foo, 0.75);
raf.tick( 150 ); raf.tick(150);
assert.equal( div.foo, 1 ); assert.equal(div.foo, 1);
raf.tick( 175 ); raf.tick(175);
assert.equal( div.foo, 0.75 ); assert.equal(div.foo, 0.75);
raf.tick( 250 ); raf.tick(250);
assert.equal( div.foo, 0 ); assert.equal(div.foo, 0);
component.destroy();
} }
}; };

@ -12,7 +12,7 @@ export default {
raf.tick(50); raf.tick(50);
assert.equal(div.foo, 0.5); assert.equal(div.foo, 0.5);
component.destroy(); component.$destroy();
raf.tick(100); raf.tick(100);
}, },

@ -3,36 +3,34 @@ export default {
name: 'world' name: 'world'
}, },
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
global.count = 0; global.count = 0;
component.visible = true; component.visible = true;
assert.equal( global.count, 1 ); assert.equal(global.count, 1);
const div = target.querySelector( 'div' ); const div = target.querySelector('div');
assert.equal( div.foo, 0 ); assert.equal(div.foo, 0);
raf.tick( 75 ); raf.tick(75);
component.name = 'everybody'; component.name = 'everybody';
assert.equal( div.foo, 0.75 ); assert.equal(div.foo, 0.75);
assert.htmlEqual( div.innerHTML, 'hello everybody!' ); assert.htmlEqual(div.innerHTML, 'hello everybody!');
component.visible = false; component.visible = false;
component.name = 'again'; component.name = 'again';
assert.htmlEqual( div.innerHTML, 'hello everybody!' ); assert.htmlEqual(div.innerHTML, 'hello everybody!');
raf.tick( 125 ); raf.tick(125);
assert.equal( div.foo, 0.25 ); assert.equal(div.foo, 0.25);
component.visible = true; component.visible = true;
raf.tick( 175 ); raf.tick(175);
assert.equal( div.foo, 0.75 ); assert.equal(div.foo, 0.75);
assert.htmlEqual( div.innerHTML, 'hello again!' ); assert.htmlEqual(div.innerHTML, 'hello again!');
raf.tick( 200 ); raf.tick(200);
assert.equal( div.foo, 1 ); assert.equal(div.foo, 1);
raf.tick( 225 ); raf.tick(225);
component.destroy();
} }
}; };

@ -4,40 +4,38 @@ export default {
things: [ 'a', 'b', 'c' ] things: [ 'a', 'b', 'c' ]
}, },
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
component.visible = true; component.visible = true;
const divs = target.querySelectorAll( 'div' ); const divs = target.querySelectorAll('div');
assert.equal( divs[0].foo, 0 ); assert.equal(divs[0].foo, 0);
assert.equal( divs[1].foo, 0 ); assert.equal(divs[1].foo, 0);
assert.equal( divs[2].foo, 0 ); assert.equal(divs[2].foo, 0);
raf.tick( 50 ); raf.tick(50);
assert.equal( divs[0].foo, 0.5 ); assert.equal(divs[0].foo, 0.5);
assert.equal( divs[1].foo, 0.5 ); assert.equal(divs[1].foo, 0.5);
assert.equal( divs[2].foo, 0.5 ); assert.equal(divs[2].foo, 0.5);
component.visible = false; component.visible = false;
raf.tick( 70 ); raf.tick(70);
assert.equal( divs[0].foo, 0.7 ); assert.equal(divs[0].foo, 0.7);
assert.equal( divs[1].foo, 0.7 ); assert.equal(divs[1].foo, 0.7);
assert.equal( divs[2].foo, 0.7 ); assert.equal(divs[2].foo, 0.7);
assert.equal( divs[0].bar, 0.8 ); assert.equal(divs[0].bar, 0.8);
assert.equal( divs[1].bar, 0.8 ); assert.equal(divs[1].bar, 0.8);
assert.equal( divs[2].bar, 0.8 ); assert.equal(divs[2].bar, 0.8);
component.visible = true; component.visible = true;
raf.tick( 100 ); raf.tick(100);
assert.equal( divs[0].foo, 0.3 ); assert.equal(divs[0].foo, 0.3);
assert.equal( divs[1].foo, 0.3 ); assert.equal(divs[1].foo, 0.3);
assert.equal( divs[2].foo, 0.3 ); assert.equal(divs[2].foo, 0.3);
assert.equal( divs[0].bar, 1 ); assert.equal(divs[0].bar, 1);
assert.equal( divs[1].bar, 1 ); assert.equal(divs[1].bar, 1);
assert.equal( divs[2].bar, 1 ); assert.equal(divs[2].bar, 1);
component.destroy();
} }
}; };

@ -3,30 +3,28 @@ export default {
things: [ 'a', 'b', 'c' ] things: [ 'a', 'b', 'c' ]
}, },
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
let divs = target.querySelectorAll( 'div' ); let divs = target.querySelectorAll('div');
assert.equal( divs[0].foo, 0 ); assert.equal(divs[0].foo, 0);
assert.equal( divs[1].foo, 0 ); assert.equal(divs[1].foo, 0);
assert.equal( divs[2].foo, 0 ); assert.equal(divs[2].foo, 0);
raf.tick( 50 ); raf.tick(50);
assert.equal( divs[0].foo, 0.5 ); assert.equal(divs[0].foo, 0.5);
assert.equal( divs[1].foo, 0.5 ); assert.equal(divs[1].foo, 0.5);
assert.equal( divs[2].foo, 0.5 ); assert.equal(divs[2].foo, 0.5);
component.things = [ 'a', 'b', 'c', 'd' ]; component.things = [ 'a', 'b', 'c', 'd' ];
divs = target.querySelectorAll( 'div' ); divs = target.querySelectorAll('div');
assert.equal( divs[0].foo, 0.5 ); assert.equal(divs[0].foo, 0.5);
assert.equal( divs[1].foo, 0.5 ); assert.equal(divs[1].foo, 0.5);
assert.equal( divs[2].foo, 0.5 ); assert.equal(divs[2].foo, 0.5);
assert.equal( divs[3].foo, 0 ); assert.equal(divs[3].foo, 0);
raf.tick( 75 ); raf.tick(75);
assert.equal( divs[0].foo, 0.75 ); assert.equal(divs[0].foo, 0.75);
assert.equal( divs[1].foo, 0.75 ); assert.equal(divs[1].foo, 0.75);
assert.equal( divs[2].foo, 0.75 ); assert.equal(divs[2].foo, 0.75);
assert.equal( divs[3].foo, 0.25 ); assert.equal(divs[3].foo, 0.25);
component.destroy();
} }
}; };

@ -7,16 +7,16 @@ export default {
] ]
}, },
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
let divs = target.querySelectorAll( 'div' ); let divs = target.querySelectorAll('div');
assert.equal( divs[0].foo, 0 ); assert.equal(divs[0].foo, 0);
assert.equal( divs[1].foo, 0 ); assert.equal(divs[1].foo, 0);
assert.equal( divs[2].foo, 0 ); assert.equal(divs[2].foo, 0);
raf.tick( 50 ); raf.tick(50);
assert.equal( divs[0].foo, 0.5 ); assert.equal(divs[0].foo, 0.5);
assert.equal( divs[1].foo, 0.5 ); assert.equal(divs[1].foo, 0.5);
assert.equal( divs[2].foo, 0.5 ); assert.equal(divs[2].foo, 0.5);
component.things = [ component.things = [
{ name: 'a' }, { name: 'a' },
@ -24,24 +24,22 @@ export default {
{ name: 'b' }, { name: 'b' },
{ name: 'c' } { name: 'c' }
]; ];
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<div>a</div> <div>a</div>
<div>woo!</div> <div>woo!</div>
<div>b</div> <div>b</div>
<div>c</div> <div>c</div>
` ); `);
divs = target.querySelectorAll( 'div' ); divs = target.querySelectorAll('div');
assert.equal( divs[0].foo, 0.5 ); assert.equal(divs[0].foo, 0.5);
assert.equal( divs[1].foo, 0 ); assert.equal(divs[1].foo, 0);
assert.equal( divs[2].foo, 0.5 ); assert.equal(divs[2].foo, 0.5);
assert.equal( divs[3].foo, 0.5 ); assert.equal(divs[3].foo, 0.5);
raf.tick( 75 ); raf.tick(75);
assert.equal( divs[0].foo, 0.75 ); assert.equal(divs[0].foo, 0.75);
assert.equal( divs[1].foo, 0.25 ); assert.equal(divs[1].foo, 0.25);
assert.equal( divs[2].foo, 0.75 ); assert.equal(divs[2].foo, 0.75);
assert.equal( divs[3].foo, 0.75 ); assert.equal(divs[3].foo, 0.75);
component.destroy();
} }
}; };

@ -29,7 +29,5 @@ export default {
raf.tick(250); raf.tick(250);
assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']); assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
assert.equal(component.introCount, 4); assert.equal(component.introCount, 4);
component.destroy();
} }
}; };

@ -1,30 +1,28 @@
export default { export default {
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
global.count = 0; global.count = 0;
component.visible = true; component.visible = true;
assert.equal( global.count, 1 ); assert.equal(global.count, 1);
const div = target.querySelector( 'div' ); const div = target.querySelector('div');
assert.equal( div.foo, 0 ); assert.equal(div.foo, 0);
raf.tick( 300 ); raf.tick(300);
assert.equal( div.foo, 0.75 ); assert.equal(div.foo, 0.75);
component.visible = false; component.visible = false;
assert.equal( global.count, 1 ); assert.equal(global.count, 1);
raf.tick( 500 ); raf.tick(500);
assert.equal( div.foo, 0.25 ); assert.equal(div.foo, 0.25);
component.visible = true; component.visible = true;
raf.tick( 700 ); raf.tick(700);
assert.equal( div.foo, 0.75 ); assert.equal(div.foo, 0.75);
raf.tick( 800 ); raf.tick(800);
assert.equal( div.foo, 1 ); assert.equal(div.foo, 1);
raf.tick( 900 ); raf.tick(900);
component.destroy();
} }
}; };

@ -12,21 +12,17 @@ export default {
<div>5</div> <div>5</div>
`, `,
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
const divs = target.querySelectorAll('div');
raf.tick(100); raf.tick(100);
component.threshold = 4; component.threshold = 4;
raf.tick( 200 ); raf.tick(200);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<div>1</div> <div>1</div>
<div>2</div> <div>2</div>
<div>3</div> <div>3</div>
<div>4</div> <div>4</div>
`); `);
component.destroy();
} }
}; };

@ -12,7 +12,7 @@ export default {
<div>5</div> <div>5</div>
`, `,
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
const divs = target.querySelectorAll('div'); const divs = target.querySelectorAll('div');
raf.tick(100); raf.tick(100);
@ -31,7 +31,5 @@ export default {
<div>4</div> <div>4</div>
<div>5</div> <div>5</div>
`); `);
component.destroy();
} }
}; };

@ -11,7 +11,7 @@ export default {
<div>5</div> <div>5</div>
`, `,
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
const divs = target.querySelectorAll('div'); const divs = target.querySelectorAll('div');
assert.equal(divs[0].foo, 0); assert.equal(divs[0].foo, 0);
@ -20,9 +20,9 @@ export default {
assert.equal(divs[0].foo, 1); assert.equal(divs[0].foo, 1);
component.threshold = 4; component.threshold = 4;
assert.equal( divs[4].foo, 1 ); assert.equal(divs[4].foo, 1);
raf.tick( 200 ); raf.tick(200);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<div>1</div> <div>1</div>
<div>2</div> <div>2</div>
@ -31,15 +31,13 @@ export default {
`); `);
component.threshold = 3; component.threshold = 3;
assert.equal( divs[3].foo, 1 ); assert.equal(divs[3].foo, 1);
raf.tick( 300 ); raf.tick(300);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<div>1</div> <div>1</div>
<div>2</div> <div>2</div>
<div>3</div> <div>3</div>
`); `);
component.destroy();
} }
}; };

@ -1,46 +1,44 @@
export default { export default {
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
component.visible = true; component.visible = true;
let div = target.querySelector( 'div' ); let div = target.querySelector('div');
assert.equal( div.foo, 0 ); assert.equal(div.foo, 0);
raf.tick( 200 ); raf.tick(200);
assert.equal( div.foo, 0.5 ); assert.equal(div.foo, 0.5);
raf.tick( 400 ); raf.tick(400);
assert.equal( div.foo, 1 ); assert.equal(div.foo, 1);
raf.tick( 500 ); raf.tick(500);
assert.equal( div.foo, 1 ); assert.equal(div.foo, 1);
component.visible = false; component.visible = false;
raf.tick( 600 ); raf.tick(600);
assert.equal( div.foo, 1 ); assert.equal(div.foo, 1);
assert.equal( div.bar, 0.75 ); assert.equal(div.bar, 0.75);
raf.tick( 900 ); raf.tick(900);
assert.equal( div.foo, 1 ); assert.equal(div.foo, 1);
assert.equal( div.bar, 0 ); assert.equal(div.bar, 0);
// test outro before intro complete // test outro before intro complete
raf.tick( 1000 ); raf.tick(1000);
component.visible = true; component.visible = true;
div = target.querySelector( 'div' ); div = target.querySelector('div');
raf.tick( 1200 ); raf.tick(1200);
assert.equal( div.foo, 0.5 ); assert.equal(div.foo, 0.5);
component.visible = false; component.visible = false;
raf.tick( 1300 ); raf.tick(1300);
assert.equal( div.foo, 0.75 ); assert.equal(div.foo, 0.75);
assert.equal( div.bar, 0.75 ); assert.equal(div.bar, 0.75);
raf.tick( 1400 ); raf.tick(1400);
assert.equal( div.foo, 1 ); assert.equal(div.foo, 1);
assert.equal( div.bar, 0.5 ); assert.equal(div.bar, 0.5);
raf.tick( 2000 ); raf.tick(2000);
component.destroy();
} }
}; };

@ -1,17 +1,15 @@
export default { export default {
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
component.visible = true; component.visible = true;
const div = target.querySelector( 'div' ); const div = target.querySelector('div');
assert.equal( window.getComputedStyle( div ).opacity, 0 ); assert.equal(window.getComputedStyle(div).opacity, 0);
raf.tick( 200 ); raf.tick(200);
assert.equal( window.getComputedStyle( div ).opacity, 0.5 ); assert.equal(window.getComputedStyle(div).opacity, 0.5);
raf.tick( 400 ); raf.tick(400);
assert.equal( window.getComputedStyle( div ).opacity, 1 ); assert.equal(window.getComputedStyle(div).opacity, 1);
raf.tick( 500 ); raf.tick(500);
component.destroy();
} }
}; };

@ -1,5 +1,5 @@
export default { export default {
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
component.visible = true; component.visible = true;
const div = target.querySelector('div'); const div = target.querySelector('div');
@ -16,7 +16,5 @@ export default {
raf.tick(600); raf.tick(600);
assert.equal(component.refs.div, undefined); assert.equal(component.refs.div, undefined);
assert.equal(target.querySelector('div'), undefined); assert.equal(target.querySelector('div'), undefined);
component.destroy();
} }
}; };

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

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

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

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

@ -1,21 +1,19 @@
export default { export default {
test ( assert, component, target, window, raf ) { test(assert, component, target, window, raf) {
component.visible = true; component.visible = true;
const div = target.querySelector( 'div' ); const div = target.querySelector('div');
assert.equal( div.foo, 0 ); assert.equal(div.foo, 0);
raf.tick( 50 ); raf.tick(50);
assert.equal( div.foo, 0 ); assert.equal(div.foo, 0);
raf.tick( 100 ); raf.tick(100);
assert.equal( div.foo, 0.5 ); assert.equal(div.foo, 0.5);
raf.tick( 125 ); raf.tick(125);
assert.equal( div.foo, 0.75 ); assert.equal(div.foo, 0.75);
raf.tick( 150 ); raf.tick(150);
assert.equal( div.foo, 1 ); assert.equal(div.foo, 1);
component.destroy();
} }
}; };

@ -15,7 +15,5 @@ export default {
assert.equal(div.foo, 200); assert.equal(div.foo, 200);
raf.tick(101); raf.tick(101);
component.destroy();
}, },
}; };

@ -11,7 +11,5 @@ export default {
assert.equal(div.foo, 200); assert.equal(div.foo, 200);
raf.tick(101); raf.tick(101);
component.destroy();
}, },
}; };

@ -1,12 +1,10 @@
export default { export default {
skip: true, // JSDOM skip: true, // JSDOM
test ( assert, component, target, window ) { test(assert, component, target, window) {
assert.equal( window.pageYOffset, 0 ); assert.equal(window.pageYOffset, 0);
component.scrollY = 100; component.scrollY = 100;
assert.equal( window.pageYOffset, 100 ); assert.equal(window.pageYOffset, 100);
component.destroy();
} }
}; };

@ -5,20 +5,18 @@ export default {
html: `true`, html: `true`,
skip: /^v4/.test( process.version ), // node 4 apparently does some dumb stuff skip: /^v4/.test(process.version), // node 4 apparently does some dumb stuff
'skip-ssr': true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason 'skip-ssr': true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
test ( assert, component, target, window ) { test(assert, component, target, window) {
const event = new window.Event( 'click' ); const event = new window.Event('click');
window.dispatchEvent( event ); window.dispatchEvent(event);
assert.equal( component.foo, false ); assert.equal(component.foo, false);
assert.htmlEqual( target.innerHTML, `false` ); assert.htmlEqual(target.innerHTML, `false`);
window.dispatchEvent( event ); window.dispatchEvent(event);
assert.equal( component.foo, true ); assert.equal(component.foo, true);
assert.htmlEqual( target.innerHTML, `true` ); assert.htmlEqual(target.innerHTML, `true`);
component.destroy();
} }
}; };
Loading…
Cancel
Save