default.test() — svelte Function Reference

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

Function javascript BuildSystem MessageProcessor

Entity Profile

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

Dependency Diagram

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

Relationship Graph

Source Code

packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js lines 25–85

	test({ assert, component, raf }) {
		let divs = document.querySelectorAll('div');
		divs.forEach((div) => {
			div.getBoundingClientRect = function () {
				const index = [...this.parentNode.children].indexOf(this);
				const top = index * 30;

				return {
					left: 0,
					right: 100,
					top,
					bottom: top + 20
				};
			};
		});

		component.things = [
			{ id: 5, name: 'e' },
			{ id: 2, name: 'b' },
			{ id: 3, name: 'c' },
			{ id: 4, name: 'd' },
			{ id: 1, name: 'a' }
		];

		raf.tick(0);

		divs = document.querySelectorAll('div');
		assert.equal(divs[0].dy, 120);
		assert.equal(divs[4].dy, -120);

		raf.tick(50);
		assert.equal(divs[0].dy, 60);
		assert.equal(divs[4].dy, -60);

		raf.tick(100);
		assert.equal(divs[0].dy, 0);
		assert.equal(divs[4].dy, 0);

		component.things = [
			{ id: 1, name: 'a' },
			{ id: 2, name: 'b' },
			{ id: 3, name: 'c' },
			{ id: 4, name: 'd' },
			{ id: 5, name: 'e' }
		];

		raf.tick(100);

		divs = document.querySelectorAll('div');

		assert.equal(divs[0].dy, 120);
		assert.equal(divs[4].dy, -120);

		raf.tick(150);
		assert.equal(divs[0].dy, 60);
		assert.equal(divs[4].dy, -60);

		raf.tick(200);
		assert.equal(divs[0].dy, 0);
		assert.equal(divs[4].dy, 0);
	}