default.test() — svelte Function Reference

Architecture documentation for the default.test() function in _config.js from the svelte codebase.

Function javascript BuildSystem QualityControl

Entity Profile

BuildSystem→ QualityControl→ default.test() — svelte Function Reference

Dependency Diagram

graph TD
  77d7b587_5e8d_1480_4420_48181eb22a7a["default.test()"]
  ce525b5a_0b46_1a65_3dcc_e2e24baf28bf["_config.js"]
  77d7b587_5e8d_1480_4420_48181eb22a7a -->|defined in| ce525b5a_0b46_1a65_3dcc_e2e24baf28bf
  style 77d7b587_5e8d_1480_4420_48181eb22a7a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/tests/runtime-runes/samples/mount-props-updates/_config.js lines 5–46

	test({ assert, target }) {
		assert.htmlEqual(
			target.innerHTML,
			// The buz fallback does not propagate back up
			`
			<button>reset</button> foo baz
			<div><button>update</button> foo bar baz buz</div>
			<div><button>update</button> foo bar baz buz</div>
			`
		);

		const [btn1, btn2, btn3] = target.querySelectorAll('button');

		btn2.click();
		btn3.click();
		flushSync();
		assert.htmlEqual(
			target.innerHTML,
			// bar is not set in the parent because it's a readonly property
			// baz is not set in the parent because while it's a bindable property,
			// it wasn't set initially so it's treated as a readonly property
			`
			<button>reset</button> foo 3
			<div><button>update</button> 1 2 3 4</div>
			<div><button>update</button> 1 2 3 4</div>
			`
		);

		btn1.click();
		flushSync();
		assert.htmlEqual(
			target.innerHTML,
			// Because foo is a readonly property, component.svelte diverges locally from it,
			// and the passed in property keeps the initial value of foo. This is why it stays
			// at 1, because foo is not updated to a different value.
			`
				<button>reset</button> foo bar baz buz
			<div><button>update</button> 1 bar baz buz</div>
			<div><button>update</button> 1 bar baz buz</div>
				`
		);
	}