@zeix/ui-element
Version:
UIElement - a HTML-first library for reactive Web Components
62 lines (57 loc) • 1.48 kB
HTML
<html>
<head>
<title>setProperty Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<update-property value="Value from Attribute">
<input type="text" value="Value from Server" />
</update-property>
<script type="module">
import { runTests } from '@web/test-runner-mocha'
import { assert } from '@esm-bundle/chai'
import {
component,
asString,
setProperty,
RESET,
} from '../../index.dev.js'
const animationFrame = async () =>
new Promise(requestAnimationFrame)
component(
'update-property',
{
value: asString(),
},
(_, { first }) => first('input', setProperty('value', 'value')),
)
runTests(() => {
describe('setProperty', function () {
it('should prove setProperty() working correctly', function () {
const component =
document.querySelector('update-property')
const input = component.querySelector('input')
assert.equal(
input.value,
'Value from Attribute',
'Should display value from attribute',
)
component.value = 'New Value'
assert.equal(
input.value,
'New Value',
'Should update value from text signal',
)
component.value = RESET
assert.equal(
input.value,
'Value from Server',
'Should revert value to server-rendered version',
)
})
})
})
</script>
</body>
</html>