update some event handler tests

test/runtime/samples/action-custom-event-handler-in-each-destructured/main.html

@@ -21,7 +21,7 @@
 </script>
 
 {#each items as [item0, item1]}
-	<button on:tap='{() => first = item0, second = item1}'>
+	<button use:tap='{() => first = item0, second = item1}'>
 		{item0}: {item1}
 	</button>
 {/each}

test/runtime/samples/action-custom-event-handler-in-each/main.html

@@ -0,0 +1,28 @@
+<script>
+	export let items = ['foo', 'bar', 'baz'];
+	export let fromDom = '';
+	export let fromState = '';
+	export let x = 0;
+	export let y = 0;
+
+	function tap(node, callback) {
+		function clickHandler(event) {
+			callback();
+		}
+
+		node.addEventListener('click', clickHandler, false);
+
+		return {
+			destroy() {
+				node.addEventListener('click', clickHandler, false);
+			}
+		};
+	}
+</script>
+
+{#each items as item}
+	<button use:tap='{() => fromDom = this.textContent, fromState = item}'>{item}</button>
+{/each}
+
+<p>fromDom: {fromDom}</p>
+<p>fromState: {fromState}</p>

test/runtime/samples/action-custom-event-handler-node-context/_config.js

@@ -0,0 +1,15 @@
+export default {
+	'skip-ssr': true,
+
+	html: '<button>10</button>',
+
+	async test(assert, component, target, window) {
+		const event = new window.MouseEvent('click');
+
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(event);
+
+		assert.equal(target.innerHTML, '<button>11</button>');
+	}
+};

test/runtime/samples/action-custom-event-handler-node-context/main.html

@@ -0,0 +1,19 @@
+<script>
+	export let z = 10;
+
+	function tap(node, callback) {
+		const clickHandler = event => {
+			callback(event);
+		};
+
+		node.addEventListener('click', clickHandler, false);
+
+		return {
+			destroy() {
+				node.addEventListener('click', clickHandler, false);
+			}
+		};
+	}
+</script>
+
+<button use:tap='{() => z += 1}'>{z}</button>

test/runtime/samples/action-custom-event-handler-this/main.html

@@ -16,4 +16,4 @@
 	}
 </script>
 
-<input on:enter='{() => event.target.blur()}'>
+<input use:enter='{() => event.target.blur()}'>

test/runtime/samples/action-custom-event-handler-with-context/_config.js

@@ -0,0 +1,16 @@
+export default {
+	html: '<button>???</button>',
+
+	async test(assert, component, target, window) {
+		const event = new window.MouseEvent('click', {
+			clientX: 42,
+			clientY: 42
+		});
+
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(event);
+
+		assert.equal(target.innerHTML, '<button>42</button>');
+	}
+};

test/runtime/samples/action-custom-event-handler-with-context/main.html

@@ -17,4 +17,4 @@
 	}
 </script>
 
-<button on:tap='{event => z = event.answer}'>{z}</button>
+<button use:tap='{event => z = event.answer}'>{z}</button>

test/runtime/samples/action-custom-event-handler/_config.js

@@ -0,0 +1,16 @@
+export default {
+	html: '<button>0, 0</button>',
+
+	test(assert, component, target, window) {
+		const event = new window.MouseEvent('click', {
+			clientX: 42,
+			clientY: 42
+		});
+
+		const button = target.querySelector('button');
+
+		button.dispatchEvent(event);
+
+		assert.equal(target.innerHTML, '<button>42, 42</button>');
+	}
+};

test/runtime/samples/action-custom-event-handler/main.html

@@ -0,0 +1,23 @@
+<script>
+	export let x = 0;
+	export let y = 0;
+
+	function tap(node, callback) {
+		function clickHandler(event) {
+			callback({
+				x: event.clientX,
+				y: event.clientY
+			});
+		}
+
+		node.addEventListener('click', clickHandler, false);
+
+		return {
+			destroy() {
+				node.addEventListener('click', clickHandler, false);
+			}
+		};
+	}
+</script>
+
+<button use:tap='{event => x = event.x, y = event.y}'>{x}, {y}</button>

test/runtime/samples/event-handler-console-log/main.html

@@ -1 +1,5 @@
+<script>
+	export let foo;
+</script>
+
 <button on:click='{() => console.log(foo)}'>click me</button>

test/runtime/samples/event-handler-custom-context/_config.js

@@ -1,16 +0,0 @@
-export default {
-	html: '<button>???</button>',
-
-	test ( assert, component, target, window ) {
-		const event = new window.MouseEvent( 'click', {
-			clientX: 42,
-			clientY: 42
-		});
-
-		const button = target.querySelector( 'button' );
-
-		button.dispatchEvent( event );
-
-		assert.equal( target.innerHTML, '<button>42</button>' );
-	}
-};

test/runtime/samples/event-handler-custom-each/main.html

@@ -1,28 +0,0 @@
-<script>
-	export let items = [ 'foo', 'bar', 'baz' ];
-	export let fromDom = '';
-	export let fromState = '';
-	export let x = 0;
-	export let y = 0;
-
-	function tap(node, callback) {
-		function clickHandler ( event ) {
-			callback();
-		}
-
-		node.addEventListener( 'click', clickHandler, false );
-
-		return {
-			destroy () {
-				node.addEventListener( 'click', clickHandler, false );
-			}
-		};
-	}
-</script>
-
-{#each items as item}
-	<button on:tap='{() => fromDom = this.textContent, fromState = item}'>{item}</button>
-{/each}
-
-<p>fromDom: {fromDom}</p>
-<p>fromState: {fromState}</p>

test/runtime/samples/event-handler-custom-node-context/_config.js

@@ -1,15 +0,0 @@
-export default {
-	'skip-ssr': true,
-
-	html: '<button>10</button>',
-
-	test ( assert, component, target, window ) {
-		const event = new window.MouseEvent( 'click' );
-
-		const button = target.querySelector( 'button' );
-
-		button.dispatchEvent( event );
-
-		assert.equal( target.innerHTML, '<button>11</button>' );
-	}
-};

test/runtime/samples/event-handler-custom-node-context/main.html

@@ -1,19 +0,0 @@
-<script>
-	export let z = 10;
-
-	function tap(node, callback) {
-		const clickHandler = event => {
-			callback(event);
-		};
-
-		node.addEventListener( 'click', clickHandler, false );
-
-		return {
-			destroy () {
-				node.addEventListener( 'click', clickHandler, false );
-			}
-		};
-	}
-</script>
-
-<button on:tap='{() => z += 1}'>{z}</button>

test/runtime/samples/event-handler-custom/_config.js

@@ -1,15 +0,0 @@
-export default {
-	html: '<button>0, 0</button>',
-	test ( assert, component, target, window ) {
-		const event = new window.MouseEvent( 'click', {
-			clientX: 42,
-			clientY: 42
-		});
-
-		const button = target.querySelector( 'button' );
-
-		button.dispatchEvent( event );
-
-		assert.equal( target.innerHTML, '<button>42, 42</button>' );
-	}
-};

test/runtime/samples/event-handler-custom/main.html

@@ -1,23 +0,0 @@
-<script>
-	export let x = 0;
-	export let y = 0;
-
-	function tap(node, callback) {
-		function clickHandler ( event ) {
-			callback({
-				x: event.clientX,
-				y: event.clientY
-			});
-		}
-
-		node.addEventListener( 'click', clickHandler, false );
-
-		return {
-			destroy () {
-				node.addEventListener( 'click', clickHandler, false );
-			}
-		};
-	}
-</script>
-
-<button on:tap='{event => x = event.x, y = event.y}'>{x}, {y}</button>

test/runtime/samples/event-handler-each-deconflicted/_config.js

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

test/runtime/samples/event-handler-each-this/_config.js

@@ -16,7 +16,7 @@ export default {
 		const clicked = [];
 
 		component.$on('clicked', event => {
-			clicked.push(event.node);
+			clicked.push(event.detail.node);
 		});
 
 		buttons[1].dispatchEvent(event);

test/runtime/samples/event-handler-each-this/main.html

@@ -1,9 +1,11 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
 
+	export let items;
+
 	const dispatch = createEventDispatcher();
 </script>
 
 {#each items as item}
-	<button on:click='{() => dispatch("clicked", { node: this })}'>{item}</button>
+	<button on:click='{e => dispatch("clicked", { node: e.target })}'>{item}</button>
 {/each}

test/runtime/samples/event-handler-each/_config.js

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

test/runtime/samples/event-handler-removal/_config.js

@@ -1,19 +1,20 @@
 // TODO gah, JSDOM appears to behave differently to real browsers here... probably need to raise an issue
 
 export default {
-	html: '<input><!---->',
+	html: '<input>',
+
 	test(assert, component) {
-		component.refs.input.focus();
+		component.input.focus();
 
 		// this should NOT trigger blur event
 		component.visible = false;
 		assert.ok(!component.blurred);
 
 		component.visible = true;
-		component.refs.input.focus();
+		component.input.focus();
 
 		// this SHOULD trigger blur event
-		component.refs.input.blur();
+		component.input.blur();
 		assert.ok(component.blurred);
 	}
 };

test/runtime/samples/event-handler-sanitize/_config.js

@@ -3,17 +3,17 @@ export default {
 		<div>toggle</div>
 	`,
 
-	test ( assert, component, target, window ) {
+	async test(assert, component, target, window) {
 		const div = target.querySelector('div');
 		const event = new window.MouseEvent('some-event');
 
-		div.dispatchEvent( event );
+		await div.dispatchEvent(event);
 		assert.htmlEqual(target.innerHTML, `
 			<div>toggle</div>
 			<p>hello!</p>
 		`);
 
-		div.dispatchEvent( event );
+		await div.dispatchEvent(event);
 		assert.htmlEqual(target.innerHTML, `
 			<div>toggle</div>
 		`);

test/runtime/samples/globals-not-overwritten-by-bindings/main.html

@@ -1,6 +1,6 @@
 {#each Object.keys(todos) as key}
 	<div class='todo {todos[key].done ? "done": ""}'>
-		<input type='checkbox' bind:checked='todos[key].done'>
+		<input type='checkbox' bind:checked={todos[key].done}>
-		<input type='text' bind:value='todos[key].description'>
+		<input type='text' bind:value={todos[key].description}>
 	</div>
 {/each}