tests: runtime: add coverage for dynamic events with modifiers

test/runtime/samples/event-handler-dynamic-modifier-once/_config.js

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

test/runtime/samples/event-handler-dynamic-modifier-once/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	let f;
+	export let count = 0;
+	f = () => count += 1;
+</script>
+
+<button on:click|once="{f}">{count}</button>

test/runtime/samples/event-handler-dynamic-modifier-prevent-default/_config.js

@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click', {
+			cancelable: true
+		});
+
+		await button.dispatchEvent(event);
+
+		assert.ok(component.default_was_prevented);
+	}
+};

test/runtime/samples/event-handler-dynamic-modifier-prevent-default/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let default_was_prevented;
+	let f;
+
+	function handle_click(event) {
+		default_was_prevented = event.defaultPrevented;
+	}
+	f = handle_click;
+</script>
+
+<button on:click|preventDefault={f}>click me</button>

test/runtime/samples/event-handler-dynamic-modifier-self/_config.js

@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<div>
+			<button>click me</button>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+
+		assert.ok(!component.inner_clicked);
+	},
+};

test/runtime/samples/event-handler-dynamic-modifier-self/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	export let inner_clicked;
+	let f;
+
+	function handle_click(event) {
+		inner_clicked = true;
+	}
+	f = handle_click;
+</script>
+
+<div on:click|self={f}>
+	<button>click me</button>
+</div>

test/runtime/samples/event-handler-dynamic-modifier-stop-propagation/_config.js

@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<div>
+			<button>click me</button>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click', {
+			bubbles: true
+		});
+
+		await button.dispatchEvent(event);
+
+		assert.ok(component.inner_clicked);
+		assert.ok(!component.outer_clicked);
+	}
+};

test/runtime/samples/event-handler-dynamic-modifier-stop-propagation/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	export let inner_clicked;
+	export let outer_clicked;
+	let f1;
+	let f2;
+
+	function handle_inner_click(event) {
+		inner_clicked = true;
+	}
+
+	function handle_outer_click(event) {
+		outer_clicked = true;
+	}
+	f1 = handle_inner_click;
+	f2 = handle_outer_click;
+</script>
+
+<div on:click={f2}>
+	<button on:click|stopPropagation={f1}>click me</button>
+</div>

test/runtime/samples/event-handler-dynamic-multiple/_config.js

@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.clickHandlerOne, 1);
+		assert.equal(component.clickHandlerTwo, 1);
+	}
+};

test/runtime/samples/event-handler-dynamic-multiple/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let clickHandlerOne = 0;
+	export let clickHandlerTwo = 0;
+	let f1;
+	let f2;
+
+	f1 = () => clickHandlerOne++;
+	f2 = () => clickHandlerTwo++;
+</script>
+
+<button on:click='{f1}' on:click='{f2}'>click me</button>