@zeix/ui-element
Version:
UIElement - a HTML-first library for reactive Web Components
127 lines (97 loc) • 3.83 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Counter Component Tests</title>
</head>
<body>
<!-- Test fixtures -->
<basic-counter id="test1" count="42">
<button type="button">Clicks: <span></span></button>
</basic-counter>
<basic-counter id="test2">
<button type="button">Clicks: <span></span></button>
</basic-counter>
<basic-counter id="test3" count="-5">
<button type="button">Clicks: <span></span></button>
</basic-counter>
<basic-counter id="test4">
<button type="button">Clicks: <span>11</span></button>
</basic-counter>
<script type="module">
import { runTests } from '@web/test-runner-mocha'
import { assert } from '@esm-bundle/chai'
import './main.js' // Built components bundle
const animationFrame = () => new Promise(requestAnimationFrame)
runTests(() => {
describe('My Counter Component', () => {
it('should initialize with count attribute', async () => {
const el = document.getElementById('test1')
const countSpan = el.querySelector('span')
await animationFrame() // Wait for scheduled effect execution
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')
await animationFrame() // Wait for scheduled effect execution
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')
await animationFrame() // Wait for scheduled effect execution
assert.equal(el.count, -5)
assert.equal(countSpan.textContent, '-5')
})
it('should handle initial value from DOM (RESET)', async () => {
const el = document.getElementById('test4')
const countSpan = el.querySelector('span')
await animationFrame() // Wait for scheduled effect execution
assert.equal(el.count, 11)
assert.equal(countSpan.textContent, '11')
})
it('should increment count when button clicked', async () => {
const el = document.getElementById('test1')
const incrementBtn = el.querySelector('button')
const countSpan = el.querySelector('span')
const initialCount = el.count
incrementBtn.click()
await animationFrame() // Wait for event handling and effect execution
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')
el.count = 0
await animationFrame() // Wait for scheduled effect execution
// Click multiple times rapidly
incrementBtn.click()
incrementBtn.click()
incrementBtn.click()
await animationFrame() // Wait for all event handling and effect execution
assert.equal(el.count, 3)
assert.equal(countSpan.textContent, '3')
})
it('should handle programmatic count updates', async () => {
const el = document.getElementById('test2')
const countSpan = el.querySelector('span')
el.count = 100
await animationFrame() // Wait for scheduled effect execution
assert.equal(countSpan.textContent, '100')
el.count = 101
await animationFrame() // Wait for scheduled effect execution
assert.equal(countSpan.textContent, '101')
})
})
})
</script>
</body>
</html>