Back to Repositories

Testing Reactive Set Operations in sveltejs/svelte

This test suite validates the functionality of Svelte’s reactive Set implementation (SvelteSet), focusing on core Set operations and their integration with Svelte’s reactivity system. The tests ensure proper behavior of methods like values(), has(), delete(), and forEach() while maintaining reactive state management.

Test Coverage Overview

The test suite provides comprehensive coverage of SvelteSet operations with reactive updates.

Key functionality tested includes:

Set manipulation methods (add, delete, clear)
Value checking and iteration (has, values, forEach)
Reactive updates propagation
Edge cases for non-existent values

Integration points focus on Svelte’s effect system and synchronous flushing mechanism.

Implementation Analysis

The testing approach employs Vitest as the testing framework with effect_root and render_effect for reactive context management.

Technical patterns include:

Cleanup handling for effect disposal
Synchronous updates using flushSync
Array-based logging for state verification
Reactive dependency tracking validation

Technical Details

Testing tools and configuration:

Framework: Vitest
Svelte internal utilities: effect_root, render_effect
State management: flushSync
Assertion methods: assert.deepEqual, assert.equal
TypeScript for type safety

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices through systematic validation of reactive behavior.

Notable practices include:

Isolated test cases for specific functionality
Comprehensive state change verification
Proper cleanup of reactive effects
Clear test case organization and naming
Thorough edge case coverage

sveltejs/svelte

packages/svelte/src/reactivity/set.test.ts

            
import { render_effect, effect_root } from '../internal/client/reactivity/effects.js';
import { flushSync } from '../index-client.js';
import { SvelteSet } from './set.js';
import { assert, test } from 'vitest';

test('set.values()', () => {
	const set = new SvelteSet([1, 2, 3, 4, 5]);

	const log: any = [];

	const cleanup = effect_root(() => {
		render_effect(() => {
			log.push(set.size);
		});

		render_effect(() => {
			log.push(set.has(3));
		});

		render_effect(() => {
			log.push(Array.from(set));
		});
	});

	flushSync(() => {
		set.delete(3);
	});

	flushSync(() => {
		set.clear();
	});

	assert.deepEqual(log, [5, true, [1, 2, 3, 4, 5], 4, false, [1, 2, 4, 5], 0, false, []]);

	cleanup();
});

test('set.has(...)', () => {
	const set = new SvelteSet([1, 2, 3]);

	const log: any = [];

	const cleanup = effect_root(() => {
		render_effect(() => {
			log.push('has 1', set.has(1));
		});

		render_effect(() => {
			log.push('has 2', set.has(2));
		});

		render_effect(() => {
			log.push('has 3', set.has(3));
		});
	});

	flushSync(() => {
		set.delete(2);
	});

	flushSync(() => {
		set.add(2);
	});

	assert.deepEqual(log, [
		'has 1',
		true,
		'has 2',
		true,
		'has 3',
		true,
		'has 2',
		false,
		'has 2',
		true
	]);

	cleanup();
});

test('set.delete(...)', () => {
	const set = new SvelteSet([1, 2, 3]);

	assert.equal(set.delete(3), true);
	assert.equal(set.delete(3), false);

	assert.deepEqual(Array.from(set.values()), [1, 2]);
});

test('set.forEach()', () => {
	const set = new SvelteSet([1, 2, 3, 4, 5]);

	const log: any = [];

	const cleanup = effect_root(() => {
		render_effect(() => {
			set.forEach((v) => log.push(v));
		});
	});

	flushSync(() => {
		set.add(6);
	});

	assert.deepEqual(log, [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 6]);

	cleanup();
});

test('not invoking reactivity when value is not in the set after changes', () => {
	const set = new SvelteSet([1, 2]);

	const log: any = [];

	const cleanup = effect_root(() => {
		render_effect(() => {
			log.push('has 1', set.has(1));
		});

		render_effect(() => {
			log.push('has 2', set.has(2));
		});

		render_effect(() => {
			log.push('has 3', set.has(3));
		});
	});

	flushSync(() => {
		set.delete(2);
	});

	flushSync(() => {
		set.add(2);
	});

	assert.deepEqual(log, [
		'has 1',
		true,
		'has 2',
		true,
		'has 3',
		false,
		'has 2',
		false,
		'has 3',
		false,
		'has 2',
		true,
		'has 3',
		false
	]);

	cleanup();
});

test('Set.instanceOf', () => {
	assert.equal(new SvelteSet() instanceof Set, true);
});