@zeix/ui-element
Version:
UIElement - a HTML-first library for reactive Web Components
142 lines (112 loc) • 4.07 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Basic Counter Component Tests</title>
</head>
<body>
<!-- Test fixtures -->
<basic-counter id="test1" count="42">
<button type="button">💐 <span>42</span></button>
</basic-counter>
<basic-counter id="test2">
<button type="button">💐 <span></span></button>
</basic-counter>
<basic-counter id="test3" count="-5">
<button type="button">💐 <span>-5</span></button>
</basic-counter>
<script type="module">
import { runTests } from '@web/test-runner-mocha'
import { assert } from '@esm-bundle/chai'
import '../../../docs/assets/main.js' // Built components bundle
const wait = ms => new Promise(resolve => setTimeout(resolve, ms))
const animationFrame = () => new Promise(requestAnimationFrame)
const microtask = () => new Promise(queueMicrotask)
const tick = async () => {
await animationFrame() // Wait for effects to execute
await microtask() // Wait for DOM to reflect changes
}
runTests(() => {
describe('Basic Counter Component', () => {
it('should initialize with count from attribute', async () => {
const el = document.getElementById('test1')
const countSpan = el.querySelector('span')
assert.equal(el.count, 42)
assert.equal(countSpan.textContent, '42')
})
it('should initialize with default count when no attribute', async () => {
const el = document.getElementById('test2')
const countSpan = el.querySelector('span')
assert.equal(el.count, 0)
assert.equal(countSpan.textContent, '0')
})
it('should handle negative initial values', async () => {
const el = document.getElementById('test3')
const countSpan = el.querySelector('span')
assert.equal(el.count, -5)
assert.equal(countSpan.textContent, '-5')
})
it('should increment count when increment button clicked', async () => {
const el = document.getElementById('test1')
const incrementBtn = el.querySelector('button')
const countSpan = el.querySelector('span')
const initialCount = el.count
incrementBtn.click()
assert.equal(el.count, initialCount + 1)
assert.equal(
countSpan.textContent,
String(initialCount + 1),
)
})
it('should handle multiple rapid button clicks', async () => {
const el = document.getElementById('test2')
const incrementBtn = el.querySelector('button')
const countSpan = el.querySelector('span')
// Click multiple times rapidly
incrementBtn.click()
incrementBtn.click()
incrementBtn.click()
assert.equal(el.count, 3)
assert.equal(countSpan.textContent, '3')
})
it('should not allow programmatic count updates', async () => {
const el = document.getElementById('test2')
const countSpan = el.querySelector('span')
const originalCount = el.count
// Should throw TypeError when trying to set count
assert.throws(() => {
el.count = 100
}, TypeError)
// Count should remain unchanged after failed assignment
assert.equal(el.count, originalCount)
assert.equal(
countSpan.textContent,
String(originalCount),
)
// Should throw for different value types
assert.throws(() => {
el.count = 'invalid'
}, TypeError)
assert.throws(() => {
el.count = null
}, TypeError)
assert.throws(() => {
el.count = undefined
}, TypeError)
// Verify count is still the original value
assert.equal(el.count, originalCount)
})
it('should maintain count across increment cycles', async () => {
const el = document.getElementById('test2')
const incrementBtn = el.querySelector('button')
const initialCount = el.count
incrementBtn.click()
assert.equal(el.count, initialCount + 1)
incrementBtn.click()
assert.equal(el.count, initialCount + 2)
})
})
})
</script>
</body>
</html>