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}

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

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

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

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

packages/svelte/tests/runtime-legacy/samples/component-slot-context-props-let/Inner.svelte

@@ -1,9 +1,8 @@
 <script>
-  export let log;
 	function setKey(key, value) {
-		log.push(`setKey(${key}, ${value})`);
-  }
+		console.log(`setKey(${key}, ${value})`);
+	}
 </script>
 
 <slot key="a" set={setKey} />
-<slot key="b" set={setKey} />
+<slot key="b" set={setKey} />

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

@@ -1,8 +1,7 @@
 <script>
 	import Inner from './Inner.svelte';
-  export let log;
 </script>
 
-<Inner {log} let:key let:set>
+<Inner let:key let:set>
 	<slot {key} set={(value) => set(key, value)} />
-</Inner>
+</Inner>

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

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

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

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

packages/svelte/tests/runtime-legacy/samples/destroy-twice/_config.js

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

packages/svelte/tests/runtime-legacy/samples/empty-component-destroy/Empty.svelte

@@ -1,6 +1,6 @@
 
 <script>
-  import { onDestroy } from 'svelte';
+	import { onDestroy } from 'svelte';
 
 	onDestroy(() => {
 		console.log('destroy');

packages/svelte/tests/runtime-legacy/samples/empty-component-destroy/_config.js

@@ -1,30 +1,14 @@
 import { test } from '../../test';
 
-/**
- * @type {{ (...data: any[]): void; (message?: any, ...optionalParams: any[]): void; (...data: any[]): void; (message?: any, ...optionalParams: any[]): void; }}
- */
-let log;
-
 export default test({
 	html: `
 	  <button>destroy component</button>
 	`,
 
-	before_test() {
-		log = console.log;
-	},
-	after_test() {
-		console.log = log;
-	},
-
-	async test({ assert, target, window }) {
+	async test({ assert, target, window, logs }) {
 		const button = target.querySelector('button');
 		const event = new window.MouseEvent('click');
-		/**
-		 * @type {any[]}
-		 */
-		const messages = [];
-		console.log = (msg) => messages.push(msg);
+
 		// @ts-ignore
 		await button.dispatchEvent(event);
 		assert.htmlEqual(
@@ -33,6 +17,6 @@ export default test({
 			<button>destroy component</button>
 		`
 		);
-		assert.deepEqual(messages, ['destroy']);
+		assert.deepEqual(logs, ['destroy']);
 	}
 });

packages/svelte/tests/runtime-legacy/samples/empty-component-destroy/main.svelte

@@ -3,6 +3,6 @@
 	let active = true;
 </script>
 
-<button on:click='{() => active = false }'>destroy component</button>
+<button on:click={() => active = false }>destroy component</button>
 
 <svelte:component this={active ? Empty : null} />

packages/svelte/tests/runtime-legacy/samples/event-handler-mutation-scope/_config.js

@@ -2,20 +2,20 @@ import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
-	test({ assert, component, target, window }) {
+	test({ assert, logs, target }) {
 		const button = target.querySelector('button');
 		ok(button);
 
 		flushSync(() => {
 			button.click();
 		});
 
-		assert.deepEqual(component.log, ['1 - 1']);
+		assert.deepEqual(logs, ['1 - 1']);
 
 		flushSync(() => {
 			button.click();
 		});
 
-		assert.deepEqual(component.log, ['1 - 1', '2 - 2']);
+		assert.deepEqual(logs, ['1 - 1', '2 - 2']);
 	}
 });

packages/svelte/tests/runtime-legacy/samples/event-handler-mutation-scope/main.svelte

@@ -1,5 +1,4 @@
 <script>
-	export let log = [];
 	let referenced_directly = 0;
 	let not_referenced_directly = 0;
 	let css_based_on_not_referenced = '';
@@ -8,7 +7,7 @@
 		referenced_directly += 1;
 		not_referenced_directly += 1;
 		css_based_on_not_referenced = not_referenced_directly % 2 == 1 ? 'background-color: red' : '';
-		log.push(referenced_directly + ' - ' + not_referenced_directly); //only referenced_directly is increasing
+		console.log(referenced_directly + ' - ' + not_referenced_directly); //only referenced_directly is increasing
 	}
 </script>