- move tests to puppeteer because jsdom does not support contenteditable

- remove unnecessary test
- adjust one test to actually test a regression and skip it because it fails

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -872,12 +872,12 @@ export default class ElementWrapper extends Wrapper {
 					? x`@set_dynamic_element_data(${this.node.tag_expr.manipulate(block)})`
 					: x`@set_attributes`;
 
-		block.chunks.hydrate.unshift(
+		block.chunks.hydrate.push(
 			b`${fn}(${this.var}, ${this.element_data_name});`
 		);
 
 		if (this.has_dynamic_attribute) {
-			block.chunks.update.unshift(b`
+			block.chunks.update.push(b`
 				${fn}(${this.var}, ${this.element_data_name} = @get_spread_update(${levels}, [
 					${updates}
 				]));

test/runtime-puppeteer/samples/component-event-handler-contenteditable-false/_config.js

@@ -1,3 +1,4 @@
+// A puppeteer test because JSDOM doesn't support contenteditable
 export default {
 	html: '<div contenteditable="false"></div>',
 

test/runtime-puppeteer/samples/component-event-handler-contenteditable-spread/_config.js

@@ -0,0 +1,24 @@
+// A puppeteer test because JSDOM doesn't support contenteditable
+export default {
+	html: '<div contenteditable="true"></div>',
+	ssrHtml: '<div contenteditable=""></div>',
+
+	async test({ assert, target, window }) {
+		// this tests that by going from contenteditable=true to false, the
+		// content is correctly updated before that. This relies on the order
+		// of the updates: first updating the content, then setting contenteditable
+		// to false, which means that `set_data_maybe_contenteditable` is used and not `set_data`.
+		// If the order is reversed, https://github.com/sveltejs/svelte/issues/5018
+		// would be happening. The caveat is that if we go from contenteditable=false to true
+		// then we will have the same issue. To fix this reliably we probably need to
+		// overhaul the way we handle text updates in general.
+		// If due to some refactoring this test fails, it's probably fine to ignore it since
+		// this is a very specific edge case and the behavior is unstable anyway.
+		const div = target.querySelector('div');
+		const text =  window.document.createTextNode('a');
+		div.insertBefore(text, null);
+		const event = new window.InputEvent('input');
+		await div.dispatchEvent(event);
+		assert.equal(div.textContent, 'a');
+	}
+};

test/runtime-puppeteer/samples/component-event-handler-contenteditable-spread/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	let text = "";
+	const updater = (event) => {
+		text = event.target.textContent;
+	};
+	$: spread = {
+		contenteditable: text !== "a",
+	};
+</script>
+
+<div {...spread} on:input={updater}>{text}</div>

test/runtime-puppeteer/samples/component-event-handler-contenteditable/_config.js

@@ -0,0 +1,33 @@
+// A puppeteer test because JSDOM doesn't support contenteditable
+export default {
+	html: '<div contenteditable=""></div>',
+
+	// Failing test for https://github.com/sveltejs/svelte/issues/5018, fix pending
+	// It's hard to fix this because in order to do that, we would need to change the
+	// way the value is compared completely. Right now it compares the value of the
+	// first text node, but it should compare the value of the whole content
+	skip: true,
+
+	async test({ assert, target, window }) {
+		const div = target.querySelector('div');
+
+		let text = window.document.createTextNode('a');
+		div.insertBefore(text, null);
+		let event = new window.InputEvent('input');
+		await div.dispatchEvent(event);
+		assert.equal(div.textContent, 'a');
+		
+		// When a user types a newline, the browser inserts a <div> element
+		const inner_div = window.document.createElement('div');
+		div.insertBefore(inner_div, null);
+		event = new window.InputEvent('input');
+		await div.dispatchEvent(event);
+		assert.equal(div.textContent, 'a');
+		
+		text = window.document.createTextNode('b');
+		inner_div.insertBefore(text, null);
+		event = new window.InputEvent('input');
+		await div.dispatchEvent(event);
+		assert.equal(div.textContent, 'ab');
+	}
+};

test/runtime/samples/component-event-handler-contenteditable/_config.js

@@ -1,12 +0,0 @@
-export default {
-	html: '<div contenteditable=""></div>',
-
-	async test({ assert, target, window }) {
-		const div = target.querySelector('div');
-		const text =  window.document.createTextNode('a');
-		div.insertBefore(text, null);
-		const event = new window.InputEvent('input');
-		await div.dispatchEvent(event);
-		assert.equal(div.textContent, 'a');
-	}
-};

test/runtime/samples/component-event-handler-contenteditable2/_config.js

@@ -1,12 +0,0 @@
-export default {
-	html: '<div contenteditable="true"></div>',
-
-	async test({ assert, target, window }) {
-		const div = target.querySelector('div');
-		const text =  window.document.createTextNode('a');
-		div.insertBefore(text, null);
-		const event = new window.InputEvent('input');
-		await div.dispatchEvent(event);
-		assert.equal(div.textContent, 'a');
-	}
-};

test/runtime/samples/component-event-handler-contenteditable2/main.svelte

@@ -1,6 +0,0 @@
-<script>
-	let text = '';
-	const updater = (event) => {text = event.target.textContent}
-</script>
-
-<div contenteditable="true" on:input={updater}>{text}</div>

test/runtime/samples/component-event-handler-contenteditable3/_config.js

@@ -1,13 +0,0 @@
-export default {
-	html: '<div contenteditable="true"></div>',
-	ssrHtml: '<div contenteditable=""></div>',
-
-	async test({ assert, target, window }) {
-		const div = target.querySelector('div');
-		const text =  window.document.createTextNode('a');
-		div.insertBefore(text, null);
-		const event = new window.InputEvent('input');
-		await div.dispatchEvent(event);
-		assert.equal(div.textContent, 'a');
-	}
-};

test/runtime/samples/component-event-handler-contenteditable3/main.svelte

@@ -1,9 +0,0 @@
-<script>
-	let text = '';
-	const updater = (event) => {text = event.target.textContent}
-	$: spread = {
-		contenteditable: text !== undefined,
-	}
-</script>
-
-<div {...spread} on:input={updater}>{text}</div>