|
@@ -115,3 +115,54 @@ test('init functions "this" context is reactive',
|
|
|
get('span').should(haveText('baz'))
|
|
|
}
|
|
|
)
|
|
|
+
|
|
|
+test('init functions have access to the parent scope',
|
|
|
+ html`
|
|
|
+ <script>
|
|
|
+ document.addEventListener('alpine:init', () => {
|
|
|
+ Alpine.data('parent', () => ({
|
|
|
+ foo: 'bar',
|
|
|
+ }))
|
|
|
+
|
|
|
+ Alpine.data('child', () => ({
|
|
|
+ init() {
|
|
|
+ this.$el.textContent = this.foo
|
|
|
+ },
|
|
|
+ }))
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <div x-data="parent">
|
|
|
+ <p x-data="child"></p>
|
|
|
+ </div>
|
|
|
+ `,
|
|
|
+ ({ get }) => {
|
|
|
+ get('p').should(haveText('bar'))
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+test('destroy functions inside custom datas are called automatically',
|
|
|
+ html`
|
|
|
+ <script>
|
|
|
+ document.addEventListener('alpine:init', () => {
|
|
|
+ Alpine.data('test', () => ({
|
|
|
+ destroy() {
|
|
|
+ document.querySelector('span').textContent = 'foo'
|
|
|
+ },
|
|
|
+ test() {
|
|
|
+ Alpine.closestRoot(this.$el).remove()
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <div x-data="test">
|
|
|
+ <button x-on:click="test()"></button>
|
|
|
+ </div>
|
|
|
+ <span><span>
|
|
|
+ `,
|
|
|
+ ({ get }) => {
|
|
|
+ get('button').click()
|
|
|
+ get('span').should(haveText('foo'))
|
|
|
+ }
|
|
|
+)
|