Component testing checks a reusable interface component through its public API, rendered output, and visible DOM behavior. Web Component Tester (WCT) combines browser automation, Mocha test organization, and Chai assertions so tests run in real browsers and report results in the terminal. section 13.2
A practical component test can verify:
- Initial state, such as a slider's value, corresponding attribute, and thumb position. section 13.2
- Public-API changes, such as assigning a value through JavaScript and checking the resulting DOM. section 13.2
- Boundary behavior, such as clamping values above 100 to 100 and values below 0 to 0. section 13.2
Testing a slider
Place the component in an HTML test fixture, load its module, then organize assertions in a Mocha suite. For example: assert.equal(slider.value, 50); assert.equal(slider.getAttribute('value'), 50); assert.equal(slider.root.querySelector('.thumb').style.left, expectedPosition). Add boundary tests to expose missing min/max behavior. section 13.2
Listing 13.2. WCT test file setup
<html>
<head>
<script src="../../../../node_modules/web-component-tester/browser.js">
</script> #1
<script #2
type="module"
src="../src/slider.js">
</script>
<style>
wcia-slider {
width: 500px; #3
}
</style>
</head>
<body>
<wcia-slider value="50"></wcia-slider> #4
<script>
// tests go here #5
</script>
</body>
</html>
Shows the HTML fixture, component import, styling, and test insertion point used to start WCT tests. section 13.2
