A test suite is a named group of related automated tests. In Mocha, suites organize individual tests and can use setup and teardown hooks to keep each test isolated. section 13.2
A component test suite can check several related behaviors:
- Read the component’s initial value and rendered thumb position. section 13.2
- Set a value with JavaScript and verify the property, attribute, and rendering. section 13.2
- Set values outside the allowed range and expose missing minimum and maximum behavior through failing tests. section 13.2
Listing 13.5. Slider component test suite
suite('slider value getting/setting', function() {
const sliderWidth = 500;
const thumbCenterOffset = 5/2 + 3; // width/2 + left border
const slider = document.body.querySelector('wcia-slider');
test('slider get initial value', #1
function () {
assert.equal(slider.value, 50);
assert.equal(slider.getAttribute('value'), 50);
assert.equal(slider.root.querySelector('.thumb').style.left,
sliderWidth * 50/100 - thumbCenterOffset + 'px');
});
test('set slider value with JS', #2
function () {
slider.value = 20;
assert.equal(slider.value, 20);
assert.equal(slider.getAttribute('value'), 20);
assert.equal(slider.root.querySelector('.thumb').style.left,
sliderWidth * 20/100 - thumbCenterOffset + 'px');
});
test('set slider value with attributes', #3
function () {
slider.setAttribute('value', 30);
assert.equal(slider.value, 30);
assert.equal(slider.getAttribute('value'), 30);
assert.equal(slider.root.querySelector('.thumb').style.left,
sliderWidth * 30/100 - thumbCenterOffset + 'px');
});
});
Shows a complete slider suite with grouped tests for initial state, JavaScript setters, attributes, rendering, and boundary values. section 13.2
