monkey-patch console.log and console.warn for all tests (#11265)

* monkey-patch console.log and console.warn for all tests

* update legacy tests

* various

* tests passing

* tidy up

* tidy up

* tidier output

Author: Rich-Harris

packages/svelte/tests/hydration/samples/ignore-mismatched-href/_config.js

@@ -11,5 +11,9 @@ export default test({
 
 	test(assert, target) {
 		assert.equal(target.querySelector('a')?.getAttribute('href'), '/bar');
-	}
+	},
+
+	errors: [
+		'Detected a href attribute value change during hydration. This will not be repaired during hydration, the href value that came from the server will be used. Related element:'
+	]
 });

packages/svelte/tests/hydration/test.ts

@@ -32,6 +32,7 @@ interface HydrationTest extends BaseTest {
 	) => void | Promise<void>;
 	before_test?: () => void;
 	after_test?: () => void;
+	errors?: any[];
 }
 
 function read(path: string): string | void {
@@ -65,6 +66,7 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 		const snapshot = config.snapshot ? config.snapshot(target) : {};
 
 		const error = console.error;
+		const errors: any[] = [];
 		let got_hydration_error = false;
 		console.error = (message: any) => {
 			if (typeof message === 'string' && message.startsWith('ERR_SVELTE_HYDRATION_MISMATCH')) {
@@ -73,7 +75,7 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 					error(message);
 				}
 			} else {
-				error(message);
+				errors.push(message);
 			}
 		};
 
@@ -85,12 +87,19 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 		});
 
 		console.error = error;
+
 		if (config.expect_hydration_error) {
 			assert.ok(got_hydration_error, 'Expected hydration error');
 		} else {
 			assert.ok(!got_hydration_error, 'Unexpected hydration error');
 		}
 
+		if (config.errors) {
+			assert.deepEqual(errors, config.errors);
+		} else if (errors.length) {
+			throw new Error(`Unexpected errors: ${errors.join('\n')}`);
+		}
+
 		const expected = read(`${cwd}/_expected.html`) ?? rendered.html;
 		assert_html_equal(target.innerHTML, expected);
 

packages/svelte/tests/runtime-browser/test.ts

@@ -14,7 +14,6 @@ let browser: import('@playwright/test').Browser;
 
 beforeAll(async () => {
 	browser = await chromium.launch();
-	console.log('[runtime-browser] Launched browser');
 }, 20000);
 
 afterAll(async () => {

packages/svelte/tests/runtime-legacy/samples/binding-this-multiple/_config.js

@@ -2,24 +2,24 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	test({ assert, component, target }) {
+	test({ assert, target, logs }) {
 		const [b1, b2, b3] = target.querySelectorAll('button');
 		const first_h1 = target.querySelector('h1');
 
-		assert.deepEqual(component.log, [undefined, first_h1]);
+		assert.deepEqual(logs, [undefined, first_h1]);
 
 		flushSync(() => {
 			b3.click();
 		});
 
 		const third_h1 = target.querySelector('h1');
 
-		assert.deepEqual(component.log, [undefined, first_h1, third_h1]);
+		assert.deepEqual(logs, [undefined, first_h1, third_h1]);
 
 		flushSync(() => {
 			b1.click();
 		});
 
-		assert.deepEqual(component.log, [undefined, first_h1, third_h1, target.querySelector('h1')]);
+		assert.deepEqual(logs, [undefined, first_h1, third_h1, target.querySelector('h1')]);
 	}
 });

packages/svelte/tests/runtime-legacy/samples/binding-this-multiple/main.svelte

@@ -1,9 +1,8 @@
 <script>
 	let activeTab = 0;
 	let activeHeading;
-	export let log = [];
 
-	$: log.push(activeHeading);
+	$: console.log(activeHeading);
 </script>
 
 <div class="tabs">

packages/svelte/tests/runtime-legacy/samples/component-nested-deep/_config.js

@@ -4,5 +4,7 @@ import { unmount } from 'svelte';
 export default test({
 	test({ component }) {
 		unmount(component.l1);
-	}
+	},
+
+	warnings: ['Tried to unmount a component that was not mounted.']
 });

packages/svelte/tests/runtime-legacy/samples/component-slot-context-props-each-nested/Nested.svelte

@@ -1,14 +1,14 @@
 <script>
 	let keys = ['a', 'b'];
 	let items = ['c', 'd'];
-  export let log;
+
 	function setKey(key, value, item) {
-		log.push(`setKey(${key}, ${value}, ${item})`);
-  }
+		console.log(`setKey(${key}, ${value}, ${item})`);
+	}
 </script>
 
 {#each items as item (item)}
 	{#each keys as key (key)}
 		<slot {key} {item} set={(value) => setKey(key, value, item)} />
 	{/each}
-{/each}
+{/each}

packages/svelte/tests/runtime-legacy/samples/component-slot-context-props-each-nested/_config.js

@@ -7,25 +7,26 @@ export default test({
 		<button type="button">Set a-d</button>
 		<button type="button">Set b-d</button>
 	`,
-	async test({ assert, target, window, component }) {
+
+	async test({ assert, target, window, logs }) {
 		const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
 		const click = new window.MouseEvent('click', { bubbles: true });
 
 		await btn1.dispatchEvent(click);
-		assert.deepEqual(component.log, ['setKey(a, value-a-c, c)']);
+		assert.deepEqual(logs, ['setKey(a, value-a-c, c)']);
 
 		await btn2.dispatchEvent(click);
-		assert.deepEqual(component.log, ['setKey(a, value-a-c, c)', 'setKey(b, value-b-c, c)']);
+		assert.deepEqual(logs, ['setKey(a, value-a-c, c)', 'setKey(b, value-b-c, c)']);
 
 		await btn3.dispatchEvent(click);
-		assert.deepEqual(component.log, [
+		assert.deepEqual(logs, [
 			'setKey(a, value-a-c, c)',
 			'setKey(b, value-b-c, c)',
 			'setKey(a, value-a-d, d)'
 		]);
 
 		await btn4.dispatchEvent(click);
-		assert.deepEqual(component.log, [
+		assert.deepEqual(logs, [
 			'setKey(a, value-a-c, c)',
 			'setKey(b, value-b-c, c)',
 			'setKey(a, value-a-d, d)',

packages/svelte/tests/runtime-legacy/samples/component-slot-context-props-each-nested/main.svelte

@@ -1,8 +1,7 @@
 <script>
 	import Nested from './Nested.svelte';
-	export let log = [];
 </script>
 
-<Nested {log} let:set let:key let:item>
+<Nested let:set let:key let:item>
 	<button type="button" on:click={() => set(`value-${key}-${item}`)}>Set {key}-{item}</button>
-</Nested>
+</Nested>

packages/svelte/tests/runtime-legacy/samples/component-slot-context-props-each/Nested.svelte

@@ -1,11 +1,11 @@
 <script>
 	let keys = ['a', 'b'];
-  export let log;
+
 	function setKey(key, value) {
-		log.push(`setKey(${key}, ${value})`);
-  }
+		console.log(`setKey(${key}, ${value})`);
+	}
 </script>
 
 {#each keys as key (key)}
 	<slot {key} set={(value) => setKey(key, value)} />
-{/each}
+{/each}