Back to Repositories

Testing Select Element Behavior in PreactJS

This test suite validates the functionality of select elements in Preact, focusing on value setting, option selection, and multiple selection handling. The tests ensure proper rendering and state management of select components within the Preact framework.

Test Coverage Overview

The test suite provides comprehensive coverage of select element functionality in Preact applications.

Value setting through direct select value property
Option selection via ‘selected’ attribute
Multiple selection handling in select elements
Value synchronization between select and option elements

Implementation Analysis

The testing approach utilizes Jest’s describe/it pattern with Preact’s render function for component testing. The implementation leverages a scratch DOM element for mounting components and assertions.

Tests follow a consistent pattern of component definition, rendering, and value verification, making use of Preact’s createElement and render utilities.

Technical Details

Testing Framework: Jest
Component Library: Preact
Utilities: setupScratch, teardown helpers
DOM Manipulation: Direct DOM API for assertions
Component Rendering: Preact’s render function

Best Practices Demonstrated

The test suite exemplifies several testing best practices in React-like environments.

Proper test isolation through beforeEach/afterEach hooks
Consistent component mounting and cleanup
Clear test case organization and naming
Specific, focused assertions
Effective use of helper utilities for setup/teardown

preactjs/preact

test/browser/select.test.js

            
import { createElement, render } from 'preact';
import { setupScratch, teardown } from '../_util/helpers';

/** @jsx createElement */

describe('Select', () => {
	let scratch;

	beforeEach(() => {
		scratch = setupScratch();
	});

	afterEach(() => {
		teardown(scratch);
	});

	it('should set <select> value', () => {
		function App() {
			return (
				<select value="B">
					<option value="A">A</option>
					<option value="B">B</option>
					<option value="C">C</option>
				</select>
			);
		}

		render(<App />, scratch);
		expect(scratch.firstChild.value).to.equal('B');
	});

	it('should set value with selected', () => {
		function App() {
			return (
				<select>
					<option value="A">A</option>
					<option selected value="B">
						B
					</option>
					<option value="C">C</option>
				</select>
			);
		}

		render(<App />, scratch);
		expect(scratch.firstChild.value).to.equal('B');
	});

	it('should work with multiple selected', () => {
		function App() {
			return (
				<select multiple>
					<option value="A">A</option>
					<option selected value="B">
						B
					</option>
					<option selected value="C">
						C
					</option>
				</select>
			);
		}

		render(<App />, scratch);
		Array.prototype.slice.call(scratch.firstChild.childNodes).forEach(node => {
			if (node.value === 'B' || node.value === 'C') {
				expect(node.selected).to.equal(true);
			}
		});
		expect(scratch.firstChild.value).to.equal('B');
	});
});