Skip to content

Commit

Permalink
Merge pull request #736 from philippbosch/x-text-on-svg-elements
Browse files Browse the repository at this point in the history 
Make x-text work on SVG elements
  • Loading branch information
@calebporzio
calebporzio authored Sep 9, 2020
2 parents 302b251 + e72737f commit c430b5a
Show file tree
Hide file tree
Showing 20 changed files with 270 additions and 256 deletions.
2 changes: 1 addition & 1 deletion src/directives/text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ export function handleTextDirective(el, output, expression) {
output = ''
}

el.innerText = output
el.textContent = output
}
34 changes: 17 additions & 17 deletions test/constructor.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ test('auto-detect new components at the top level', async () => {

fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})

await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
})

test('auto-detect nested new components at the top level', async () => {
Expand Down Expand Up @@ -67,7 +67,7 @@ test('auto-detect nested new components at the top level', async () => {

fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})

await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
})

test('auto-detect new components and dont lose state of existing ones', async () => {
Expand All @@ -91,7 +91,7 @@ test('auto-detect new components and dont lose state of existing ones', async ()

fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})

await wait(() => { expect(document.querySelector('#A span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('#A span').textContent).toEqual('bar') })

document.querySelector('#B').innerHTML = `
<div x-data="{foo: 'baz'}">
Expand All @@ -109,8 +109,8 @@ test('auto-detect new components and dont lose state of existing ones', async ()
])

await wait(() => {
expect(document.querySelector('#A span').innerText).toEqual('bar')
expect(document.querySelector('#B span').innerText).toEqual('baz')
expect(document.querySelector('#A span').textContent).toEqual('bar')
expect(document.querySelector('#B span').textContent).toEqual('baz')
})
})

Expand All @@ -135,7 +135,7 @@ test('auto-detect new components that are wrapped in non-new component tags', as

fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})

await wait(() => { expect(document.querySelector('#A span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('#A span').textContent).toEqual('bar') })

document.querySelector('#B').innerHTML = `
<section>
Expand All @@ -155,8 +155,8 @@ test('auto-detect new components that are wrapped in non-new component tags', as
])

await wait(() => {
expect(document.querySelector('#A span').innerText).toEqual('bar')
expect(document.querySelector('#B span').innerText).toEqual('baz')
expect(document.querySelector('#A span').textContent).toEqual('bar')
expect(document.querySelector('#B span').textContent).toEqual('baz')
})
})

Expand All @@ -179,7 +179,7 @@ test('auto-initialize new elements added to a component', async () => {

Alpine.start()

expect(document.querySelector('span').innerText).toEqual(0)
expect(document.querySelector('span').textContent).toEqual('0')

document.querySelector('#target').innerHTML = `
<span x-text="count"></span>
Expand All @@ -194,12 +194,12 @@ test('auto-initialize new elements added to a component', async () => {
] }
])

await wait(() => { expect(document.querySelector('#target span').innerText).toEqual(0) })
await wait(() => { expect(document.querySelector('#target span').textContent).toEqual('0') })

document.querySelector('button').click()

await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
await wait(() => { expect(document.querySelector('#target span').innerText).toEqual(1) })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
await wait(() => { expect(document.querySelector('#target span').textContent).toEqual('1') })
})

test('Alpine mutations don\'t trigger (like x-if and x-for) MutationObserver', async () => {
Expand Down Expand Up @@ -263,7 +263,7 @@ test('auto-detect x-data property changes at run-time', async () => {

Alpine.start()

expect(document.querySelector('span').innerText).toEqual(0)
expect(document.querySelector('span').textContent).toEqual('0')

document.querySelector('div').setAttribute('x-data', '{ count: 1 }')

Expand All @@ -276,7 +276,7 @@ test('auto-detect x-data property changes at run-time', async () => {
}
])

await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
})

test('can use $el when changing x-data property at run-time', async () => {
Expand All @@ -295,7 +295,7 @@ test('can use $el when changing x-data property at run-time', async () => {

Alpine.start()

expect(document.querySelector('span').innerText).toEqual('0')
expect(document.querySelector('span').textContent).toEqual('0')

document.querySelector('div').setAttribute('x-data', '{ count: $el.dataset.count }')

Expand All @@ -308,7 +308,7 @@ test('can use $el when changing x-data property at run-time', async () => {
}
])

await wait(() => { expect(document.querySelector('span').innerText).toEqual('1') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
})

test('nested components only get registered once on initialization', async () => {
Expand Down Expand Up @@ -355,7 +355,7 @@ test('can clone an existing component to a new element', async () => {

Alpine.clone(document.querySelector('h1').__x, document.querySelector('h2'))

expect(document.querySelector('span').innerText).toEqual('bar')
expect(document.querySelector('span').textContent).toEqual('bar')
})

test('x-attributes are matched exactly', async () => {
Expand Down
2 changes: 1 addition & 1 deletion test/custom-magic-properties.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,5 @@ test('can register custom magic properties', async () => {

Alpine.start()

expect(document.querySelector('span').innerText).toEqual('baz')
expect(document.querySelector('span').textContent).toEqual('baz')
})
40 changes: 20 additions & 20 deletions test/data.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ test('data manipulated on component object is reactive', async () => {

document.querySelector('div').__x.$data.foo = 'baz'

await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('baz') })
})

test('x-data attribute value is optional', async () => {
Expand All @@ -28,7 +28,7 @@ test('x-data attribute value is optional', async () => {

Alpine.start()

expect(document.querySelector('span').innerText).toEqual('foo')
expect(document.querySelector('span').textContent).toEqual('foo')
})

test('x-data can use attributes from a reusable function', async () => {
Expand All @@ -45,7 +45,7 @@ test('x-data can use attributes from a reusable function', async () => {

Alpine.start()

expect(document.querySelector('span').innerText).toEqual('bar')
expect(document.querySelector('span').textContent).toEqual('bar')
})

test('x-data can use $el', async () => {
Expand All @@ -57,7 +57,7 @@ test('x-data can use $el', async () => {

Alpine.start()

expect(document.querySelector('span').innerText).toEqual('test')
expect(document.querySelector('span').textContent).toEqual('test')
})

test('functions in x-data are reactive', async () => {
Expand All @@ -69,11 +69,11 @@ test('functions in x-data are reactive', async () => {
`
Alpine.start()

expect(document.querySelector('span').innerText).toEqual('bar')
expect(document.querySelector('span').textContent).toEqual('bar')

document.querySelector('button').click()

await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('baz') })
})

test('Proxies are not nested and duplicated when manipulating an array', async () => {
Expand All @@ -89,33 +89,33 @@ test('Proxies are not nested and duplicated when manipulating an array', async (

// Before this fix: https://github.com/alpinejs/alpine/pull/141
// This test would create exponentially slower performance and eventually stall out.
await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
document.querySelector('button').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
document.querySelector('h1').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
document.querySelector('button').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
document.querySelector('h1').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
document.querySelector('button').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
document.querySelector('h1').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
document.querySelector('button').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
document.querySelector('h1').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
document.querySelector('button').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
document.querySelector('h1').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
document.querySelector('button').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
document.querySelector('h1').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
document.querySelector('button').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
})

test('component refresh one time per update whatever the number of mutations in the update', async () => {
Expand Down
60 changes: 30 additions & 30 deletions test/debounce.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@ test('x-on with debounce modifier', async () => {

await timeout(10)

fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
expect(document.querySelector('span').innerText).toEqual(0)
fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
expect(document.querySelector('span').textContent).toEqual('0')

await timeout(10)

fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
expect(document.querySelector('span').innerText).toEqual(0)
fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
expect(document.querySelector('span').textContent).toEqual('0')

await timeout(249)

expect(document.querySelector('span').innerText).toEqual(0)
expect(document.querySelector('span').textContent).toEqual('0')

await timeout(20)

expect(document.querySelector('span').innerText).toEqual(1)
expect(document.querySelector('span').textContent).toEqual('1')
})

test('x-on with debounce modifier and specified wait', async () => {
Expand All @@ -51,21 +51,21 @@ test('x-on with debounce modifier and specified wait', async () => {

await timeout(10)

fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
expect(document.querySelector('span').innerText).toEqual(0)
fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
expect(document.querySelector('span').textContent).toEqual('0')

await timeout(10)

fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
expect(document.querySelector('span').innerText).toEqual(0)
fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
expect(document.querySelector('span').textContent).toEqual('0')

await timeout(99)

expect(document.querySelector('span').innerText).toEqual(0)
expect(document.querySelector('span').textContent).toEqual('0')

await timeout(20)

expect(document.querySelector('span').innerText).toEqual(1)
expect(document.querySelector('span').textContent).toEqual('1')
})

test('x-model with debounce modifier', async () => {
Expand All @@ -78,25 +78,25 @@ test('x-model with debounce modifier', async () => {

Alpine.start()

fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
fireEvent.input(document.querySelector('input'), { target: { value: 'foo' } })

await timeout(10)

fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
expect(document.querySelector('span').innerText).toEqual('')
fireEvent.input(document.querySelector('input'), { target: { value: 'foo' } })
expect(document.querySelector('span').textContent).toEqual('')

await timeout(10)

fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
expect(document.querySelector('span').innerText).toEqual('')
fireEvent.input(document.querySelector('input'), { target: { value: 'foo' } })
expect(document.querySelector('span').textContent).toEqual('')

await timeout(249)

expect(document.querySelector('span').innerText).toEqual('')
expect(document.querySelector('span').textContent).toEqual('')

await timeout(20)

expect(document.querySelector('span').innerText).toEqual('foo')
expect(document.querySelector('span').textContent).toEqual('foo')
})

test('x-on with debounce modifier (with "ms" suffix)', async () => {
Expand All @@ -109,25 +109,25 @@ test('x-on with debounce modifier (with "ms" suffix)', async () => {

Alpine.start()

fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
fireEvent.input(document.querySelector('input'), { target: { value: 1 } })

await timeout(10)

fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
expect(document.querySelector('span').innerText).toEqual(0)
fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
expect(document.querySelector('span').textContent).toEqual('0')

await timeout(10)

fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
expect(document.querySelector('span').innerText).toEqual(0)
fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
expect(document.querySelector('span').textContent).toEqual('0')

await timeout(99)

expect(document.querySelector('span').innerText).toEqual(0)
expect(document.querySelector('span').textContent).toEqual('0')

await timeout(20)

expect(document.querySelector('span').innerText).toEqual(1)
expect(document.querySelector('span').textContent).toEqual('1')
})

test('keydown with key modifier and debounce with 10ms wait', async () => {
Expand All @@ -144,14 +144,14 @@ test('keydown with key modifier and debounce with 10ms wait', async () => {

await timeout(10)

expect(document.querySelector('span').innerText).toEqual(0)
expect(document.querySelector('span').textContent).toEqual('0')

fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
fireEvent.keyDown(document.querySelector('input'), { key: 'a' })

await timeout(20)

expect(document.querySelector('span').innerText).toEqual(1)
expect(document.querySelector('span').textContent).toEqual('1')
})

test('keydown with debounce modifier and no specified wait', async () => {
Expand All @@ -164,12 +164,12 @@ test('keydown with debounce modifier and no specified wait', async () => {

Alpine.start()

expect(document.querySelector('span').innerText).toEqual(0)
expect(document.querySelector('span').textContent).toEqual('0')

fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
fireEvent.keyDown(document.querySelector('input'), { key: 'a' })

await timeout(270)

expect(document.querySelector('span').innerText).toEqual(1)
expect(document.querySelector('span').textContent).toEqual('1')
})
Loading

0 comments on commit c430b5a

Please sign in to comment.