Add tests for extracted data and reactive functions

test/data.spec.js

@@ -30,3 +30,37 @@ test('x-data attribute value is optional', async () => {
 
     expect(document.querySelector('span').innerText).toEqual('foo')
 })
+
+test('x-data can use attributes from a reusable function', async () => {
+    document.body.innerHTML = `
+        <div x-data="test()">
+            <span x-text="foo"></span>
+        </div>
+    `
+        test = function() {
+            return {
+                foo: 'bar',
+            }
+        }
+
+    Alpine.start()
+
+    expect(document.querySelector('span').innerText).toEqual('bar')
+})
+
+test('functions in x-data are reactive', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: 'bar', getFoo() {return this.foo}}">
+            <span x-text="getFoo()"></span>
+
+            <button x-on:click="foo = 'baz'"></button>
+        </div>
+    `
+    Alpine.start()
+
+    expect(document.querySelector('span').innerText).toEqual('bar')
+
+    document.querySelector('button').click()
+
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
+})