Ayo
ce30b114a2
- this adds a new demo web app with vite HMR for development - all examples are covered with e2e tests
37 lines
1.5 KiB
JavaScript
37 lines
1.5 KiB
JavaScript
import { beforeEach, expect, test } from 'vitest'
|
|
import '../../demo/examples/attribute-lifecycle/index.js'
|
|
|
|
beforeEach(() => {
|
|
document.body.innerHTML = ''
|
|
})
|
|
|
|
test('the declared default is used when no attribute is authored', () => {
|
|
document.body.innerHTML = '<attr-demo></attr-demo>'
|
|
const el = document.querySelector('attr-demo')
|
|
expect(el.querySelector('.value').textContent).toBe('"default-label"')
|
|
expect(el.querySelector('.type').textContent).toBe('string')
|
|
})
|
|
|
|
test('empty string stays an empty string (not coerced to boolean)', () => {
|
|
document.body.innerHTML = '<attr-demo></attr-demo>'
|
|
const el = document.querySelector('attr-demo')
|
|
el.querySelector('.set-empty').click()
|
|
expect(el.getAttribute('label')).toBe('')
|
|
expect(el.querySelector('.value').textContent).toBe('""')
|
|
expect(el.querySelector('.type').textContent).toBe('string')
|
|
})
|
|
|
|
test('removeAttribute resets the prop to the declared default', () => {
|
|
document.body.innerHTML = '<attr-demo></attr-demo>'
|
|
const el = document.querySelector('attr-demo')
|
|
el.querySelector('.set-value').click()
|
|
expect(el.querySelector('.value').textContent).toBe('"hello"')
|
|
el.querySelector('.remove').click()
|
|
expect(el.querySelector('.value').textContent).toBe('"default-label"')
|
|
})
|
|
|
|
test('an attribute authored in markup wins over the default', () => {
|
|
document.body.innerHTML = '<attr-demo label="from markup"></attr-demo>'
|
|
const el = document.querySelector('attr-demo')
|
|
expect(el.querySelector('.value').textContent).toBe('"from markup"')
|
|
})
|