126 lines
3.9 KiB
TypeScript
126 lines
3.9 KiB
TypeScript
import { nodeOps, svgNS } from '../src/nodeOps'
|
|
|
|
describe('runtime-dom: node-ops', () => {
|
|
test('the _value property should be cloned', () => {
|
|
const el = nodeOps.createElement('input') as HTMLDivElement & {
|
|
_value: any
|
|
}
|
|
el._value = 1
|
|
const cloned = nodeOps.cloneNode!(el) as HTMLDivElement & { _value: any }
|
|
expect(cloned._value).toBe(1)
|
|
})
|
|
|
|
test("the <select>'s multiple attr should be set in createElement", () => {
|
|
const el = nodeOps.createElement('select', false, undefined, {
|
|
multiple: ''
|
|
}) as HTMLSelectElement
|
|
const option1 = nodeOps.createElement('option') as HTMLOptionElement
|
|
const option2 = nodeOps.createElement('option') as HTMLOptionElement
|
|
option1.selected = true
|
|
option2.selected = true
|
|
nodeOps.insert(option1, el)
|
|
nodeOps.insert(option2, el)
|
|
|
|
expect(el.multiple).toBe(true)
|
|
expect(option1.selected).toBe(true)
|
|
expect(option2.selected).toBe(true)
|
|
})
|
|
|
|
describe('insertStaticContent', () => {
|
|
test('fresh insertion', () => {
|
|
const content = `<div>one</div><div>two</div>three`
|
|
const parent = document.createElement('div')
|
|
const [first, last] = nodeOps.insertStaticContent!(
|
|
content,
|
|
parent,
|
|
null,
|
|
false
|
|
)
|
|
expect(parent.innerHTML).toBe(content)
|
|
expect(first).toBe(parent.firstChild)
|
|
expect(last).toBe(parent.lastChild)
|
|
})
|
|
|
|
test('fresh insertion with anchor', () => {
|
|
const content = `<div>one</div><div>two</div>three`
|
|
const existing = `<div>existing</div>`
|
|
const parent = document.createElement('div')
|
|
parent.innerHTML = existing
|
|
const anchor = parent.firstChild
|
|
const [first, last] = nodeOps.insertStaticContent!(
|
|
content,
|
|
parent,
|
|
anchor,
|
|
false
|
|
)
|
|
expect(parent.innerHTML).toBe(content + existing)
|
|
expect(first).toBe(parent.firstChild)
|
|
expect(last).toBe(parent.childNodes[parent.childNodes.length - 2])
|
|
})
|
|
|
|
test('fresh insertion as svg', () => {
|
|
const content = `<text>hello</text><circle cx="100" cy="100" r="80"></circle>`
|
|
const parent = document.createElementNS(svgNS, 'svg')
|
|
const [first, last] = nodeOps.insertStaticContent!(
|
|
content,
|
|
parent,
|
|
null,
|
|
true
|
|
)
|
|
expect(parent.innerHTML).toBe(content)
|
|
expect(first).toBe(parent.firstChild)
|
|
expect(last).toBe(parent.lastChild)
|
|
expect(first.namespaceURI).toMatch('svg')
|
|
expect(last.namespaceURI).toMatch('svg')
|
|
})
|
|
|
|
test('fresh insertion as svg, with anchor', () => {
|
|
const content = `<text>hello</text><circle cx="100" cy="100" r="80"></circle>`
|
|
const existing = `<path></path>`
|
|
const parent = document.createElementNS(svgNS, 'svg')
|
|
parent.innerHTML = existing
|
|
const anchor = parent.firstChild
|
|
const [first, last] = nodeOps.insertStaticContent!(
|
|
content,
|
|
parent,
|
|
anchor,
|
|
true
|
|
)
|
|
expect(parent.innerHTML).toBe(content + existing)
|
|
expect(first).toBe(parent.firstChild)
|
|
expect(last).toBe(parent.childNodes[parent.childNodes.length - 2])
|
|
expect(first.namespaceURI).toMatch('svg')
|
|
expect(last.namespaceURI).toMatch('svg')
|
|
})
|
|
|
|
test('cached', () => {
|
|
const content = `<div>one</div><div>two</div>three`
|
|
|
|
const cacheParent = document.createElement('div')
|
|
const [cachedFirst, cachedLast] = nodeOps.insertStaticContent!(
|
|
content,
|
|
cacheParent,
|
|
null,
|
|
false
|
|
)
|
|
|
|
const parent = document.createElement('div')
|
|
|
|
const [first, last] = nodeOps.insertStaticContent!(
|
|
``,
|
|
parent,
|
|
null,
|
|
false,
|
|
[cachedFirst, cachedLast]
|
|
)
|
|
|
|
expect(parent.innerHTML).toBe(content)
|
|
expect(first).toBe(parent.firstChild)
|
|
expect(last).toBe(parent.lastChild)
|
|
|
|
expect(first).not.toBe(cachedFirst)
|
|
expect(last).not.toBe(cachedLast)
|
|
})
|
|
})
|
|
})
|