From 355383556e9752a0ba748709c51d1ef80653885a Mon Sep 17 00:00:00 2001 From: Philipp Bosch Date: Sat, 29 Aug 2020 20:12:03 +0200 Subject: [PATCH 1/3] Make x-text work on SVG elements --- src/directives/text.js | 6 +++++- test/text.spec.js | 14 ++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/directives/text.js b/src/directives/text.js index 17ab384f9..42bbb1cca 100644 --- a/src/directives/text.js +++ b/src/directives/text.js @@ -4,5 +4,9 @@ export function handleTextDirective(el, output, expression) { output = '' } - el.innerText = output + if (el instanceof HTMLElement) { + el.innerText = output + } else { + el.textContent = output + } } diff --git a/test/text.spec.js b/test/text.spec.js index 13f09db0e..986f25a0f 100644 --- a/test/text.spec.js +++ b/test/text.spec.js @@ -34,3 +34,17 @@ test('x-text on triggered update', async () => { await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') }) }) + +test('x-text on SVG elements', async () => { + document.body.innerHTML = ` +
+ + + +
+ ` + + Alpine.start() + + await wait(() => { expect(document.querySelector('text').textContent).toEqual('bar') }) +}) From f70a71ef4275ead4baa38cfef1bcd4c4c67659fa Mon Sep 17 00:00:00 2001 From: Philipp Bosch Date: Sat, 29 Aug 2020 22:18:36 +0200 Subject: [PATCH 2/3] Always use textContent instead of innerText --- src/directives/text.js | 6 +----- test/text.spec.js | 6 +++--- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/directives/text.js b/src/directives/text.js index 42bbb1cca..d719a77b5 100644 --- a/src/directives/text.js +++ b/src/directives/text.js @@ -4,9 +4,5 @@ export function handleTextDirective(el, output, expression) { output = '' } - if (el instanceof HTMLElement) { - el.innerText = output - } else { - el.textContent = output - } + el.textContent = output } diff --git a/test/text.spec.js b/test/text.spec.js index 986f25a0f..7ae0393cc 100644 --- a/test/text.spec.js +++ b/test/text.spec.js @@ -14,7 +14,7 @@ test('x-text on init', async () => { Alpine.start() - await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') }) }) test('x-text on triggered update', async () => { @@ -28,11 +28,11 @@ test('x-text on triggered update', async () => { Alpine.start() - await wait(() => { expect(document.querySelector('span').innerText).toEqual('') }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('') }) document.querySelector('button').click() - await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') }) }) test('x-text on SVG elements', async () => { From e72737f800b6b1db9660a8006eeee648002c0a50 Mon Sep 17 00:00:00 2001 From: Philipp Bosch Date: Sun, 30 Aug 2020 16:33:27 +0200 Subject: [PATCH 3/3] Change tests: swap innerText for textContent --- test/constructor.spec.js | 34 +++++----- test/custom-magic-properties.spec.js | 2 +- test/data.spec.js | 40 ++++++------ test/debounce.spec.js | 60 +++++++++--------- test/dispatch.spec.js | 4 +- test/for.spec.js | 92 ++++++++++++++-------------- test/if.spec.js | 10 +-- test/lifecycle.spec.js | 14 ++--- test/model.spec.js | 82 ++++++++++++------------- test/mutations.spec.js | 8 +-- test/nesting.spec.js | 6 +- test/next-tick.spec.js | 14 ++--- test/on.spec.js | 56 ++++++++--------- test/readonly.spec.js | 4 +- test/ref.spec.js | 12 ++-- test/spread.spec.js | 6 +- test/strict-mode.spec.js | 2 +- test/text.spec.js | 2 +- test/watch.spec.js | 56 ++++++++--------- 19 files changed, 252 insertions(+), 252 deletions(-) diff --git a/test/constructor.spec.js b/test/constructor.spec.js index 78f2c2853..261b4492e 100644 --- a/test/constructor.spec.js +++ b/test/constructor.spec.js @@ -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 () => { @@ -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 () => { @@ -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 = `
@@ -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') }) }) @@ -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 = `
@@ -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') }) }) @@ -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 = ` @@ -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 () => { @@ -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 }') @@ -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 () => { @@ -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 }') @@ -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 () => { @@ -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 () => { diff --git a/test/custom-magic-properties.spec.js b/test/custom-magic-properties.spec.js index 9edc552b0..8d4a3caf9 100644 --- a/test/custom-magic-properties.spec.js +++ b/test/custom-magic-properties.spec.js @@ -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') }) diff --git a/test/data.spec.js b/test/data.spec.js index 3b1218da8..d6e598323 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -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 () => { @@ -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 () => { @@ -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 () => { @@ -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 () => { @@ -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 () => { @@ -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 () => { diff --git a/test/debounce.spec.js b/test/debounce.spec.js index 0b74a71fa..b626584dd 100644 --- a/test/debounce.spec.js +++ b/test/debounce.spec.js @@ -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 () => { @@ -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 () => { @@ -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 () => { @@ -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 () => { @@ -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 () => { @@ -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') }) diff --git a/test/dispatch.spec.js b/test/dispatch.spec.js index e24a9dc9b..e36374f71 100644 --- a/test/dispatch.spec.js +++ b/test/dispatch.spec.js @@ -16,9 +16,9 @@ test('$dispatch', 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') }) }) diff --git a/test/for.spec.js b/test/for.spec.js index 395bbbc50..c80784da2 100644 --- a/test/for.spec.js +++ b/test/for.spec.js @@ -19,14 +19,14 @@ test('x-for', async () => { Alpine.start() expect(document.querySelectorAll('span').length).toEqual(1) - expect(document.querySelectorAll('span')[0].innerText).toEqual('foo') + expect(document.querySelectorAll('span')[0].textContent).toEqual('foo') document.querySelector('button').click() await wait(() => { expect(document.querySelectorAll('span').length).toEqual(2) }) - expect(document.querySelectorAll('span')[0].innerText).toEqual('foo') - expect(document.querySelectorAll('span')[1].innerText).toEqual('bar') + expect(document.querySelectorAll('span')[0].textContent).toEqual('foo') + expect(document.querySelectorAll('span')[1].textContent).toEqual('bar') }) test('removes all elements when array is empty and previously had one item', async () => { @@ -86,14 +86,14 @@ test('elements inside of loop are reactive', async () => { Alpine.start() expect(document.querySelectorAll('span').length).toEqual(1) - expect(document.querySelector('h1').innerText).toEqual('first') - expect(document.querySelector('h2').innerText).toEqual('bar') + expect(document.querySelector('h1').textContent).toEqual('first') + expect(document.querySelector('h2').textContent).toEqual('bar') document.querySelector('button').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual('first') - expect(document.querySelector('h2').innerText).toEqual('baz') + expect(document.querySelector('h1').textContent).toEqual('first') + expect(document.querySelector('h2').textContent).toEqual('baz') }) }) @@ -112,12 +112,12 @@ test('components inside of loop are reactive', async () => { Alpine.start() expect(document.querySelectorAll('div.child').length).toEqual(1) - 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('bob') + expect(document.querySelector('span').textContent).toEqual('bob') }) }) @@ -138,12 +138,12 @@ test('components inside a plain element of loop are reactive', async () => { Alpine.start() expect(document.querySelectorAll('ul').length).toEqual(1) - 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('bob') + expect(document.querySelector('span').textContent).toEqual('bob') }) }) @@ -209,8 +209,8 @@ test('can use index inside of loop', async () => { Alpine.start() - expect(document.querySelector('h1').innerText).toEqual(0) - expect(document.querySelector('h2').innerText).toEqual(0) + expect(document.querySelector('h1').textContent).toEqual('0') + expect(document.querySelector('h2').textContent).toEqual('0') }) test('can use third iterator param (collection) inside of loop', async () => { @@ -227,8 +227,8 @@ test('can use third iterator param (collection) inside of loop', async () => { Alpine.start() - expect(document.querySelector('h1').innerText).toEqual(["foo"]) - expect(document.querySelector('h2').innerText).toEqual(["foo"]) + expect(document.querySelector('h1').textContent).toEqual('foo') + expect(document.querySelector('h2').textContent).toEqual('foo') }) test('can use x-if in conjunction with x-for', async () => { @@ -278,15 +278,15 @@ test('listeners in loop get fresh iteration data even though they are only regis document.querySelector('span').click() - await wait(() => { expect(document.querySelector('h1').innerText).toEqual('foo') }) + await wait(() => { expect(document.querySelector('h1').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('span').click() - await wait(() => { expect(document.querySelector('h1').innerText).toEqual('bar') }) + await wait(() => { expect(document.querySelector('h1').textContent).toEqual('bar') }) }) test('nested x-for', async () => { @@ -308,16 +308,16 @@ test('nested x-for', async () => { await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(1) }) await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(2) }) - expect(document.querySelectorAll('h2')[0].innerText).toEqual('bob') - expect(document.querySelectorAll('h2')[1].innerText).toEqual('lob') + expect(document.querySelectorAll('h2')[0].textContent).toEqual('bob') + expect(document.querySelectorAll('h2')[1].textContent).toEqual('lob') document.querySelector('button').click() await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(3) }) - expect(document.querySelectorAll('h2')[0].innerText).toEqual('bob') - expect(document.querySelectorAll('h2')[1].innerText).toEqual('lob') - expect(document.querySelectorAll('h2')[2].innerText).toEqual('law') + expect(document.querySelectorAll('h2')[0].textContent).toEqual('bob') + expect(document.querySelectorAll('h2')[1].textContent).toEqual('lob') + expect(document.querySelectorAll('h2')[2].textContent).toEqual('law') }) test('x-for updates the right elements when new item are inserted at the beginning of the list', async () => { @@ -343,9 +343,9 @@ test('x-for updates the right elements when new item are inserted at the beginni await wait(() => { expect(document.querySelectorAll('span').length).toEqual(3) }) - expect(document.querySelectorAll('span')[0].innerText).toEqual('zero') - expect(document.querySelectorAll('span')[1].innerText).toEqual('one') - expect(document.querySelectorAll('span')[2].innerText).toEqual('two') + expect(document.querySelectorAll('span')[0].textContent).toEqual('zero') + expect(document.querySelectorAll('span')[1].textContent).toEqual('one') + expect(document.querySelectorAll('span')[2].textContent).toEqual('two') // Make sure states are preserved expect(document.querySelectorAll('span')[0].getAttribute('order')).toEqual(null) @@ -371,10 +371,10 @@ test('nested x-for access outer loop variable', async () => { await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(2) }) await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(4) }) - expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob') - expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob') - expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab') - expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab') + expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob') + expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob') + expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab') + expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab') }) test('nested x-for event listeners', async () => { @@ -402,20 +402,20 @@ test('nested x-for event listeners', async () => { await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(2) }) await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(4) }) - expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 0') - expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0') - expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 0') - expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0') + expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 0') + expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0') + expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 0') + expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0') expect(document._alerts.length).toEqual(0) document.querySelectorAll('h2')[0].click() await wait(() => { - expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 1') - expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0') - expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 0') - expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0') + expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 1') + expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0') + expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 0') + expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0') expect(document._alerts.length).toEqual(1) expect(document._alerts[0]).toEqual('foo: bob = 1') @@ -424,10 +424,10 @@ test('nested x-for event listeners', async () => { document.querySelectorAll('h2')[2].click() await wait(() => { - expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 1') - expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0') - expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 1') - expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0') + expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 1') + expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0') + expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 1') + expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0') expect(document._alerts.length).toEqual(2) expect(document._alerts[0]).toEqual('foo: bob = 1') @@ -437,10 +437,10 @@ test('nested x-for event listeners', async () => { document.querySelectorAll('h2')[0].click() await wait(() => { - expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 2') - expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0') - expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 1') - expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0') + expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 2') + expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0') + expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 1') + expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0') expect(document._alerts.length).toEqual(3) expect(document._alerts[0]).toEqual('foo: bob = 1') diff --git a/test/if.spec.js b/test/if.spec.js index 08b561a00..9f07a7f99 100644 --- a/test/if.spec.js +++ b/test/if.spec.js @@ -41,7 +41,7 @@ test('elements inside x-if are still reactive', async () => { Alpine.start() expect(document.querySelector('h2')).toBeFalsy() - expect(document.querySelector('span').innerText).toEqual('bar') + expect(document.querySelector('span').textContent).toEqual('bar') document.querySelector('h1').click() @@ -52,7 +52,7 @@ test('elements inside x-if are still reactive', async () => { document.querySelector('h2').click() await wait(() => { - expect(document.querySelector('span').innerText).toEqual('baz') + expect(document.querySelector('span').textContent).toEqual('baz') }) }) @@ -74,7 +74,7 @@ test('x-if works inside a loop', async () => { Alpine.start() expect(document.querySelectorAll('span').length).toEqual(1) - expect(document.querySelector('span').innerText).toEqual('baz') + expect(document.querySelector('span').textContent).toEqual('baz') }) test('event listeners are attached once', async () => { @@ -89,11 +89,11 @@ test('event listeners are attached once', async () => { Alpine.start() - expect(document.querySelector('span').innerText).toEqual(0) + expect(document.querySelector('span').textContent).toEqual('0') document.querySelector('button').click() await wait(() => { - expect(document.querySelector('span').innerText).toEqual(1) + expect(document.querySelector('span').textContent).toEqual('1') }) }) diff --git a/test/lifecycle.spec.js b/test/lifecycle.spec.js index d9e5830a0..8b7a6d576 100644 --- a/test/lifecycle.spec.js +++ b/test/lifecycle.spec.js @@ -26,8 +26,8 @@ test('x-init from data function with callback return for "x-mounted" functionali var valueA var valueB window.setValueA = (el) => { valueA = el.innerHTML } - window.setValueB = (el) => { valueB = el.innerText } - window.data = function() { + window.setValueB = (el) => { valueB = el.textContent } + window.data = function () { return { foo: 'bar', init() { @@ -63,11 +63,11 @@ test('callbacks registered within x-init can affect reactive data changes', asyn Alpine.start() - expect(document.querySelector('span').innerText).toEqual('baz') + expect(document.querySelector('span').textContent).toEqual('baz') document.querySelector('button').click() - await wait(() => { expect(document.querySelector('span').innerText).toEqual('bob') }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('bob') }) }) test('callbacks registered within x-init callback can affect reactive data changes', async () => { @@ -81,11 +81,11 @@ test('callbacks registered within x-init callback can affect reactive data chang Alpine.start() - expect(document.querySelector('span').innerText).toEqual('baz') + expect(document.querySelector('span').textContent).toEqual('baz') document.querySelector('button').click() - await wait(() => { expect(document.querySelector('span').innerText).toEqual('bob') }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('bob') }) }) test('x-init is capable of dispatching an event', async () => { @@ -100,6 +100,6 @@ test('x-init is capable of dispatching an event', async () => { Alpine.start() await wait(() => { - expect(document.querySelector('span').innerText).toEqual('baz') + expect(document.querySelector('span').textContent).toEqual('baz') }) }) diff --git a/test/model.spec.js b/test/model.spec.js index fc8063033..cfb8a66cc 100644 --- a/test/model.spec.js +++ b/test/model.spec.js @@ -109,7 +109,7 @@ test('x-model trims value if trim modifier is present', 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('x-model updates value when updated via changed event when lazy modifier is present', async () => { @@ -248,7 +248,7 @@ test('x-model binds select dropdown', async () => { expect(document.querySelectorAll('option')[0].selected).toEqual(false) expect(document.querySelectorAll('option')[1].selected).toEqual(true) expect(document.querySelectorAll('option')[2].selected).toEqual(false) - expect(document.querySelector('span').innerText).toEqual('bar') + expect(document.querySelector('span').textContent).toEqual('bar') fireEvent.change(document.querySelector('select'), { target: { value: 'baz' } }); @@ -256,7 +256,7 @@ test('x-model binds select dropdown', async () => { expect(document.querySelectorAll('option')[0].selected).toEqual(false) expect(document.querySelectorAll('option')[1].selected).toEqual(false) expect(document.querySelectorAll('option')[2].selected).toEqual(true) - expect(document.querySelector('span').innerText).toEqual('baz') + expect(document.querySelector('span').textContent).toEqual('baz') }) }) @@ -278,7 +278,7 @@ test('x-model binds multiple select dropdown', async () => { expect(document.querySelectorAll('option')[0].selected).toEqual(false) expect(document.querySelectorAll('option')[1].selected).toEqual(true) expect(document.querySelectorAll('option')[2].selected).toEqual(false) - expect(document.querySelector('span').innerText).toEqual(['bar']) + expect(document.querySelector('span').textContent).toEqual('bar') document.querySelectorAll('option')[2].selected = true fireEvent.change(document.querySelector('select')); @@ -287,7 +287,7 @@ test('x-model binds multiple select dropdown', async () => { expect(document.querySelectorAll('option')[0].selected).toEqual(false) expect(document.querySelectorAll('option')[1].selected).toEqual(true) expect(document.querySelectorAll('option')[2].selected).toEqual(true) - expect(document.querySelector('span').innerText).toEqual(['bar', 'baz']) + expect(document.querySelector('span').textContent).toEqual('bar,baz') }) }) @@ -302,13 +302,13 @@ test('x-model binds nested keys', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('foo') - expect(document.querySelector('span').innerText).toEqual('foo') + expect(document.querySelector('span').textContent).toEqual('foo') fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } }) await wait(() => { expect(document.querySelector('input').value).toEqual('bar') - expect(document.querySelector('span').innerText).toEqual('bar') + expect(document.querySelector('span').textContent).toEqual('bar') }) }) @@ -323,13 +323,13 @@ test('x-model undefined nested model key defaults to empty string', async () => Alpine.start() expect(document.querySelector('input').value).toEqual('') - expect(document.querySelector('span').innerText).toEqual('') + expect(document.querySelector('span').textContent).toEqual('') fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } }) await wait(() => { expect(document.querySelector('input').value).toEqual('bar') - expect(document.querySelector('span').innerText).toEqual('bar') + expect(document.querySelector('span').textContent).toEqual('bar') }) }) @@ -344,12 +344,12 @@ test('x-model can listen for custom input event dispatches', 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') + expect(document.querySelector('span').textContent).toEqual('baz') }) }) @@ -365,13 +365,13 @@ test('x-model bind color input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('#ff0000') - expect(document.querySelector('span').innerText).toEqual('#ff0000') + expect(document.querySelector('span').textContent).toEqual('#ff0000') fireEvent.input(document.querySelector('input'), { target: { value: '#00ff00' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('#00ff00') - expect(document.querySelector('span').innerText).toEqual('#00ff00') + expect(document.querySelector('span').textContent).toEqual('#00ff00') }) }) @@ -388,13 +388,13 @@ test('x-model bind button input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('foo') - expect(document.querySelector('span').innerText).toEqual('foo') + expect(document.querySelector('span').textContent).toEqual('foo') fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('bar') - expect(document.querySelector('span').innerText).toEqual('bar') + expect(document.querySelector('span').textContent).toEqual('bar') }) }) @@ -410,13 +410,13 @@ test('x-model bind date input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('2020-07-10') - expect(document.querySelector('span').innerText).toEqual('2020-07-10') + expect(document.querySelector('span').textContent).toEqual('2020-07-10') fireEvent.input(document.querySelector('input'), { target: { value: '2021-01-01' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('2021-01-01') - expect(document.querySelector('span').innerText).toEqual('2021-01-01') + expect(document.querySelector('span').textContent).toEqual('2021-01-01') }) }) @@ -432,13 +432,13 @@ test('x-model bind datetime-local input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('2020-01-01T20:00') - expect(document.querySelector('span').innerText).toEqual('2020-01-01T20:00') + expect(document.querySelector('span').textContent).toEqual('2020-01-01T20:00') fireEvent.input(document.querySelector('input'), { target: { value: '2021-02-02T20:00' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('2021-02-02T20:00') - expect(document.querySelector('span').innerText).toEqual('2021-02-02T20:00') + expect(document.querySelector('span').textContent).toEqual('2021-02-02T20:00') }) }) @@ -458,13 +458,13 @@ test('x-model bind month input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('2020-04') - expect(document.querySelector('span').innerText).toEqual('2020-04') + expect(document.querySelector('span').textContent).toEqual('2020-04') fireEvent.input(document.querySelector('input'), { target: { value: '2021-05' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('2021-05') - expect(document.querySelector('span').innerText).toEqual('2021-05') + expect(document.querySelector('span').textContent).toEqual('2021-05') }) }) @@ -481,13 +481,13 @@ test('x-model bind number input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('11') - expect(document.querySelector('span').innerText).toEqual('11') + expect(document.querySelector('span').textContent).toEqual('11') fireEvent.input(document.querySelector('input'), { target: { value: '2021' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('2021') - expect(document.querySelector('span').innerText).toEqual('2021') + expect(document.querySelector('span').textContent).toEqual('2021') }) }) @@ -503,13 +503,13 @@ test('x-model bind password input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('SecretKey') - expect(document.querySelector('span').innerText).toEqual('SecretKey') + expect(document.querySelector('span').textContent).toEqual('SecretKey') fireEvent.input(document.querySelector('input'), { target: { value: 'NewSecretKey' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('NewSecretKey') - expect(document.querySelector('span').innerText).toEqual('NewSecretKey') + expect(document.querySelector('span').textContent).toEqual('NewSecretKey') }) }) @@ -525,13 +525,13 @@ test('x-model bind range input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('10') - expect(document.querySelector('span').innerText).toEqual('10') + expect(document.querySelector('span').textContent).toEqual('10') fireEvent.input(document.querySelector('input'), { target: { value: '20' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('20') - expect(document.querySelector('span').innerText).toEqual('20') + expect(document.querySelector('span').textContent).toEqual('20') }) }) @@ -547,14 +547,14 @@ test('x-model bind search input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('') - expect(document.querySelector('span').innerText).toEqual('') + expect(document.querySelector('span').textContent).toEqual('') const newValue = 'Frontend Frameworks'; fireEvent.input(document.querySelector('input'), { target: { value: newValue } }); await wait(() => { expect(document.querySelector('input').value).toEqual(newValue) - expect(document.querySelector('span').innerText).toEqual(newValue) + expect(document.querySelector('span').textContent).toEqual(newValue) }) }) @@ -570,14 +570,14 @@ test('x-model bind tel input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('+12345678901') - expect(document.querySelector('span').innerText).toEqual('+12345678901') + expect(document.querySelector('span').textContent).toEqual('+12345678901') const newValue = '+1239874560'; fireEvent.input(document.querySelector('input'), { target: { value: newValue } }); await wait(() => { expect(document.querySelector('input').value).toEqual(newValue) - expect(document.querySelector('span').innerText).toEqual(newValue) + expect(document.querySelector('span').textContent).toEqual(newValue) }) }) @@ -593,14 +593,14 @@ test('x-model bind tel input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('+12345678901') - expect(document.querySelector('span').innerText).toEqual('+12345678901') + expect(document.querySelector('span').textContent).toEqual('+12345678901') const newValue = '+1239874560'; fireEvent.input(document.querySelector('input'), { target: { value: newValue } }); await wait(() => { expect(document.querySelector('input').value).toEqual(newValue) - expect(document.querySelector('span').innerText).toEqual(newValue) + expect(document.querySelector('span').textContent).toEqual(newValue) }) }) @@ -616,14 +616,14 @@ test('x-model bind time input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('22:00') - expect(document.querySelector('span').innerText).toEqual('22:00') + expect(document.querySelector('span').textContent).toEqual('22:00') const newValue = '23:00'; fireEvent.input(document.querySelector('input'), { target: { value: newValue } }); await wait(() => { expect(document.querySelector('input').value).toEqual(newValue) - expect(document.querySelector('span').innerText).toEqual(newValue) + expect(document.querySelector('span').textContent).toEqual(newValue) }) }) @@ -639,14 +639,14 @@ test('x-model bind time input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('22:00') - expect(document.querySelector('span').innerText).toEqual('22:00') + expect(document.querySelector('span').textContent).toEqual('22:00') const newValue = '23:00'; fireEvent.input(document.querySelector('input'), { target: { value: newValue } }); await wait(() => { expect(document.querySelector('input').value).toEqual(newValue) - expect(document.querySelector('span').innerText).toEqual(newValue) + expect(document.querySelector('span').textContent).toEqual(newValue) }) }) @@ -662,14 +662,14 @@ test('x-model bind week input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('2020-W20') - expect(document.querySelector('span').innerText).toEqual('2020-W20') + expect(document.querySelector('span').textContent).toEqual('2020-W20') const newValue = '2020-W30'; fireEvent.input(document.querySelector('input'), { target: { value: newValue } }); await wait(() => { expect(document.querySelector('input').value).toEqual(newValue) - expect(document.querySelector('span').innerText).toEqual(newValue) + expect(document.querySelector('span').textContent).toEqual(newValue) }) }) @@ -685,14 +685,14 @@ test('x-model bind url input', async () => { Alpine.start() expect(document.querySelector('input').value).toEqual('https://example.com') - expect(document.querySelector('span').innerText).toEqual('https://example.com') + expect(document.querySelector('span').textContent).toEqual('https://example.com') const newValue = 'https://alpine.io'; fireEvent.input(document.querySelector('input'), { target: { value: newValue } }); await wait(() => { expect(document.querySelector('input').value).toEqual(newValue) - expect(document.querySelector('span').innerText).toEqual(newValue) + expect(document.querySelector('span').textContent).toEqual(newValue) }) }) diff --git a/test/mutations.spec.js b/test/mutations.spec.js index 9fabc0efe..f3326b4ed 100644 --- a/test/mutations.spec.js +++ b/test/mutations.spec.js @@ -48,23 +48,23 @@ test('mutationObserver doesn\'t reset data when reparenting nested components', Alpine.start() - expect(document.querySelector('button').innerText).toEqual(1) + expect(document.querySelector('button').textContent).toEqual('1') document.querySelector('button').click() - await wait(() => { expect(document.querySelector('button').innerText).toEqual(2) }) + await wait(() => { expect(document.querySelector('button').textContent).toEqual('2') }) // Move the component and run the observer document.getElementById('b').appendChild(document.querySelector('button')) runObservers.forEach(cb => { cb([ { - target: document.getElementById('b'), + target: document.getElementById('b'), type: 'childList', addedNodes: [ document.querySelector('button') ], } ]) }) - await wait(() => { expect(document.querySelector('button').innerText).toEqual(2) }) + await wait(() => { expect(document.querySelector('button').textContent).toEqual('2') }) }) diff --git a/test/nesting.spec.js b/test/nesting.spec.js index ac05ed021..951841eb9 100644 --- a/test/nesting.spec.js +++ b/test/nesting.spec.js @@ -19,13 +19,13 @@ test('can nest components', async () => { Alpine.start() - expect(document.querySelector('span').innerText).toEqual('bar') + expect(document.querySelector('span').textContent).toEqual('bar') document.querySelector('button').click() await timeout(20) - await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') }) }) test('can access parent properties after nested components', async () => { @@ -41,5 +41,5 @@ test('can access parent properties after nested components', async () => { Alpine.start() - expect(document.querySelector('span').innerText).toEqual('bar') + expect(document.querySelector('span').textContent).toEqual('bar') }) diff --git a/test/next-tick.spec.js b/test/next-tick.spec.js index 5e888053d..ba069963e 100644 --- a/test/next-tick.spec.js +++ b/test/next-tick.spec.js @@ -10,17 +10,17 @@ test('$nextTick', 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('bob')) + await wait(() => expect(document.querySelector('span').textContent).toEqual('bob')) }) test('$nextTick waits for x-for to finish rendering', async () => { @@ -38,11 +38,11 @@ test('$nextTick waits for x-for to finish rendering', async () => { Alpine.start() - expect(document.querySelector('p').innerText).toEqual(2) + expect(document.querySelector('p').textContent).toEqual('2') document.querySelector('button').click() - await wait(() => { expect(document.querySelector('p').innerText).toEqual(3) }) + await wait(() => { expect(document.querySelector('p').textContent).toEqual('3') }) }) test('$nextTick works with transition', async () => { @@ -63,12 +63,12 @@ test('$nextTick works with transition', async () => { Alpine.start() await wait(() => { - expect(document.querySelector('h2').innerText).toEqual('none') + expect(document.querySelector('h2').textContent).toEqual('none') }) document.querySelector('button').click() await wait(() => { - expect(document.querySelector('h2').innerText).toEqual('') + expect(document.querySelector('h2').textContent).toEqual('') }) }) diff --git a/test/on.spec.js b/test/on.spec.js index 6a17c5799..d1774acd0 100644 --- a/test/on.spec.js +++ b/test/on.spec.js @@ -99,18 +99,18 @@ test('.self modifier', 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('bar') + expect(document.querySelector('span').textContent).toEqual('bar') }) document.querySelector('#selfTarget').click() await wait(() => { - expect(document.querySelector('span').innerText).toEqual('baz') + expect(document.querySelector('span').textContent).toEqual('baz') }) }) @@ -249,23 +249,23 @@ test('keydown modifiers', async () => { Alpine.start() - expect(document.querySelector('span').innerText).toEqual(0) + expect(document.querySelector('span').textContent).toEqual('0') fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' }) - await wait(() => { expect(document.querySelector('span').innerText).toEqual(2) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('2') }) fireEvent.keyDown(document.querySelector('input'), { key: ' ' }) - await wait(() => { expect(document.querySelector('span').innerText).toEqual(4) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('4') }) fireEvent.keyDown(document.querySelector('input'), { key: 'Spacebar' }) - await wait(() => { expect(document.querySelector('span').innerText).toEqual(6) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('6') }) fireEvent.keyDown(document.querySelector('input'), { key: 'Escape' }) - await wait(() => { expect(document.querySelector('span').innerText).toEqual(7) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('7') }) }) test('keydown combo modifiers', async () => { @@ -279,15 +279,15 @@ test('keydown combo modifiers', async () => { Alpine.start() - expect(document.querySelector('span').innerText).toEqual(0) + expect(document.querySelector('span').textContent).toEqual('0') fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' }) - await wait(() => { expect(document.querySelector('span').innerText).toEqual(0) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('0') }) fireEvent.keyDown(document.querySelector('input'), { key: 'Enter', metaKey: true }) - await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') }) }) test('keydown with specified key and stop modifier only stops for specified key', async () => { @@ -303,16 +303,16 @@ test('keydown with specified key and stop modifier only stops for specified key' Alpine.start() - expect(document.querySelector('span').innerText).toEqual(0) + expect(document.querySelector('span').textContent).toEqual('0') fireEvent.keyDown(document.querySelector('input'), { key: 'Escape' }) - await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') }) fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' }) await timeout(25) - expect(document.querySelector('span').innerText).toEqual(1) + expect(document.querySelector('span').textContent).toEqual('1') }) test('click away', async () => { @@ -320,10 +320,10 @@ test('click away', async () => { // make our own implementation using a specific class added to the class. Ugh. Object.defineProperties(window.HTMLElement.prototype, { offsetHeight: { - get: function() { return this.classList.contains('hidden') ? 0 : 1 } + get: function () { return this.classList.contains('hidden') ? 0 : 1 } }, offsetWidth: { - get: function() { return this.classList.contains('hidden') ? 0 : 1 } + get: function () { return this.classList.contains('hidden') ? 0 : 1 } } }); @@ -467,13 +467,13 @@ test('allow method reference to be passed to listeners', async () => { Alpine.start() - expect(document.querySelector('span').innerText).toEqual('bar') + expect(document.querySelector('span').textContent).toEqual('bar') document.querySelector('button').click() await new Promise(resolve => setTimeout(resolve, 1)) - expect(document.querySelector('span').innerText).toEqual('baz') + expect(document.querySelector('span').textContent).toEqual('baz') }) test('event instance is passed to method reference', async () => { @@ -486,13 +486,13 @@ test('event instance is passed to method reference', async () => { Alpine.start() - expect(document.querySelector('span').innerText).toEqual('bar') + expect(document.querySelector('span').textContent).toEqual('bar') document.querySelector('button').click() await new Promise(resolve => setTimeout(resolve, 1)) - expect(document.querySelector('span').innerText).toEqual('baz') + expect(document.querySelector('span').textContent).toEqual('baz') }) test('autocomplete event does not trigger keydown with modifier callback', async () => { @@ -506,21 +506,21 @@ test('autocomplete event does not trigger keydown with modifier callback', async Alpine.start() - expect(document.querySelector('span').innerText).toEqual(0) + expect(document.querySelector('span').textContent).toEqual('0') const autocompleteEvent = new Event('keydown') fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' }) - await wait(() => { expect(document.querySelector('span').innerText).toEqual(0) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('0') }) fireEvent.keyDown(document.querySelector('input'), { key: '?' }) - await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') }) fireEvent(document.querySelector('input'), autocompleteEvent) - await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') }) }) test('.camel modifier correctly binds event listener', async () => { @@ -533,12 +533,12 @@ test('.camel modifier correctly binds event listener', async () => { Alpine.start() - expect(document.querySelector('p').innerText).toEqual('bar') + expect(document.querySelector('p').textContent).toEqual('bar') document.querySelector('button').click(); await wait(() => { - expect(document.querySelector('p').innerText).toEqual('bob'); + expect(document.querySelector('p').textContent).toEqual('bob'); }); }) @@ -552,11 +552,11 @@ test('.camel modifier correctly binds event listener with namespace', async () = Alpine.start() - expect(document.querySelector('p').innerText).toEqual('bar') + expect(document.querySelector('p').textContent).toEqual('bar') document.querySelector('button').click(); await wait(() => { - expect(document.querySelector('p').innerText).toEqual('bob'); + expect(document.querySelector('p').textContent).toEqual('bob'); }); }) diff --git a/test/readonly.spec.js b/test/readonly.spec.js index e955b0317..a777846f7 100644 --- a/test/readonly.spec.js +++ b/test/readonly.spec.js @@ -18,7 +18,7 @@ test('read-only properties do not break the proxy', async () => { Alpine.start() - expect(document.querySelector('span').innerText).toEqual(0) + expect(document.querySelector('span').textContent).toEqual('0') const input = document.querySelector('input') Object.defineProperty(input, 'files', { @@ -27,5 +27,5 @@ test('read-only properties do not break the proxy', async () => { input.dispatchEvent(new Event('change')); - await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') }) }) diff --git a/test/ref.spec.js b/test/ref.spec.js index 96add6775..8df0ad652 100644 --- a/test/ref.spec.js +++ b/test/ref.spec.js @@ -10,22 +10,22 @@ test('can reference elements from event listeners', async () => {
- +
` Alpine.start() - expect(document.querySelector('span').innerText).toEqual(undefined) + expect(document.querySelector('span').textContent).toEqual('') document.querySelector('button').click() - await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('lob') }) }) test('can reference elements from data object methods', async () => { document.body.innerHTML = ` -
+
@@ -34,9 +34,9 @@ test('can reference elements from data object methods', async () => { Alpine.start() - expect(document.querySelector('span').innerText).toEqual(undefined) + expect(document.querySelector('span').textContent).toEqual('') document.querySelector('button').click() - await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('lob') }) }) diff --git a/test/spread.spec.js b/test/spread.spec.js index 6fcbeb75a..ab1686531 100644 --- a/test/spread.spec.js +++ b/test/spread.spec.js @@ -62,9 +62,9 @@ test('x-spread supports x-for', async () => { Alpine.start() - expect(document.querySelectorAll('li')[0].innerText).toEqual('one') - expect(document.querySelectorAll('li')[1].innerText).toEqual('two') - expect(document.querySelectorAll('li')[2].innerText).toEqual('three') + expect(document.querySelectorAll('li')[0].textContent).toEqual('one') + expect(document.querySelectorAll('li')[1].textContent).toEqual('two') + expect(document.querySelectorAll('li')[2].textContent).toEqual('three') }) test('x-spread syntax supports x-transition', async () => { diff --git a/test/strict-mode.spec.js b/test/strict-mode.spec.js index 2956c1154..b0f660402 100644 --- a/test/strict-mode.spec.js +++ b/test/strict-mode.spec.js @@ -26,5 +26,5 @@ test('Proxy does not error in strict mode when reactivity is suspended', async ( Alpine.start() - await wait(() => { expect(document.querySelector('span').innerText).toEqual(1200) }) + await wait(() => { expect(document.querySelector('span').textContent).toEqual('1200') }) }) diff --git a/test/text.spec.js b/test/text.spec.js index 7ae0393cc..cd09c9b9e 100644 --- a/test/text.spec.js +++ b/test/text.spec.js @@ -2,7 +2,7 @@ import Alpine from 'alpinejs' import { wait } from '@testing-library/dom' global.MutationObserver = class { - observe() {} + observe() { } } test('x-text on init', async () => { diff --git a/test/watch.spec.js b/test/watch.spec.js index d8de85f0a..5bf11fe43 100644 --- a/test/watch.spec.js +++ b/test/watch.spec.js @@ -17,14 +17,14 @@ test('$watch', async () => { Alpine.start() - expect(document.querySelector('h1').innerText).toEqual('bar') - expect(document.querySelector('h2').innerText).toEqual('lob') + expect(document.querySelector('h1').textContent).toEqual('bar') + expect(document.querySelector('h2').textContent).toEqual('lob') document.querySelector('button').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual('baz') - expect(document.querySelector('h2').innerText).toEqual('baz') + expect(document.querySelector('h1').textContent).toEqual('baz') + expect(document.querySelector('h2').textContent).toEqual('baz') }) }) @@ -42,14 +42,14 @@ test('$watch nested properties', async () => { Alpine.start() - expect(document.querySelector('h1').innerText).toEqual('baz') - expect(document.querySelector('h2').innerText).toEqual('lob') + expect(document.querySelector('h1').textContent).toEqual('baz') + expect(document.querySelector('h2').textContent).toEqual('lob') document.querySelector('button').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual('law') - expect(document.querySelector('h2').innerText).toEqual('law') + expect(document.querySelector('h1').textContent).toEqual('law') + expect(document.querySelector('h2').textContent).toEqual('law') }) }) @@ -71,56 +71,56 @@ test('$watch arrays', async () => { Alpine.start() - expect(document.querySelector('h1').innerText).toEqual(['one']) - expect(document.querySelector('h2').innerText).toEqual('lob') + expect(document.querySelector('h1').textContent).toEqual('one') + expect(document.querySelector('h2').textContent).toEqual('lob') document.querySelector('#push').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual(['one','two']) - expect(document.querySelector('h2').innerText).toEqual(['one','two']) + expect(document.querySelector('h1').textContent).toEqual('one,two') + expect(document.querySelector('h2').textContent).toEqual('one,two') }) document.querySelector('#pop').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual(['one']) - expect(document.querySelector('h2').innerText).toEqual(['one']) + expect(document.querySelector('h1').textContent).toEqual('one') + expect(document.querySelector('h2').textContent).toEqual('one') }) document.querySelector('#unshift').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual(['zero','one']) - expect(document.querySelector('h2').innerText).toEqual(['zero','one']) + expect(document.querySelector('h1').textContent).toEqual('zero,one') + expect(document.querySelector('h2').textContent).toEqual('zero,one') }) document.querySelector('#shift').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual(['one']) - expect(document.querySelector('h2').innerText).toEqual(['one']) + expect(document.querySelector('h1').textContent).toEqual('one') + expect(document.querySelector('h2').textContent).toEqual('one') }) document.querySelector('#assign').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual([2,1,3]) - expect(document.querySelector('h2').innerText).toEqual([2,1,3]) + expect(document.querySelector('h1').textContent).toEqual('2,1,3') + expect(document.querySelector('h2').textContent).toEqual('2,1,3') }) document.querySelector('#sort').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual([1,2,3]) - expect(document.querySelector('h2').innerText).toEqual([1,2,3]) + expect(document.querySelector('h1').textContent).toEqual('1,2,3') + expect(document.querySelector('h2').textContent).toEqual('1,2,3') }) document.querySelector('#reverse').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual([3,2,1]) - expect(document.querySelector('h2').innerText).toEqual([3,2,1]) + expect(document.querySelector('h1').textContent).toEqual('3,2,1') + expect(document.querySelector('h2').textContent).toEqual('3,2,1') }) }) @@ -136,13 +136,13 @@ test('$watch nested arrays', async () => { Alpine.start() - expect(document.querySelector('h1').innerText).toEqual(['one']) - expect(document.querySelector('h2').innerText).toEqual('lob') + expect(document.querySelector('h1').textContent).toEqual('one') + expect(document.querySelector('h2').textContent).toEqual('lob') document.querySelector('#push').click() await wait(() => { - expect(document.querySelector('h1').innerText).toEqual(['one','two']) - expect(document.querySelector('h2').innerText).toEqual(['one','two']) + expect(document.querySelector('h1').textContent).toEqual('one,two') + expect(document.querySelector('h2').textContent).toEqual('one,two') }) })