default.test() — svelte Function Reference

Source Code

packages/svelte/tests/runtime-legacy/samples/transition-js-await-block-outros/_config.js lines 16–224

	async test({ assert, target, component, raf }) {
		assert.htmlEqual(target.innerHTML, '<p class="pending" foo="0.0">loading...</p>');

		let time = 0;

		raf.tick((time += 50));
		assert.htmlEqual(target.innerHTML, '<p class="pending" foo="0.5">loading...</p>');

		await fulfil(42);

		assert.htmlEqual(
			target.innerHTML,
			`
			<p class="pending" foo="0.5">loading...</p>
			<p class="then" foo="0.0">42</p>
		`
		);

		// see the transition 30% complete
		raf.tick((time += 30));
		assert.htmlEqual(
			target.innerHTML,
			`
			<p class="pending" foo="0.2">loading...</p>
			<p class="then" foo="0.3">42</p>
		`
		);

		// completely transition in the {:then} block
		raf.tick((time += 70));
		assert.htmlEqual(
			target.innerHTML,
			`
			<p class="then" foo="1.0">42</p>
		`
		);

		// update promise #1
		component.promise = new Promise((f) => {
			fulfil = f;
		});
		await Promise.resolve();

		assert.htmlEqual(
			target.innerHTML,
			`
			<p class="then" foo="1.0">42</p>
			<p class="pending" foo="0.0">loading...</p>
		`
		);

		raf.tick((time += 100));

		assert.htmlEqual(
			target.innerHTML,
			`
			<p class="pending" foo="1.0">loading...</p>
		`
		);

		await fulfil(43);
		assert.htmlEqual(
			target.innerHTML,
			`
			<p class="pending" foo="1.0">loading...</p>
			<p class="then" foo="0.0">43</p>
		`
		);

		raf.tick((time += 100));
		assert.htmlEqual(
			target.innerHTML,
			`
			<p class="then" foo="1.0">43</p>
		`
		);

		// update promise #2
		component.promise = new Promise((f) => {
			fulfil = f;
		});