Isolate $watch tests

sjfkai · Mar 19, 2020 · 6ce4278 · 6ce4278
1 parent 99dba89
commit 6ce4278
Showing 1 changed file with 24 additions and 20 deletions.
diff --git a/test/watch.spec.js b/test/watch.spec.js
@@ -5,46 +5,50 @@ global.MutationObserver = class {
     observe() {}
 }
 
-test('$watch direct and nested properties', async () => {
+test('$watch', async () => {
     document.body.innerHTML = `
-        <div x-data="{ foo: 'bar', bob: 'lob', qux: { foo: 'quux', bob: 'corge' } }" x-init="
-            $watch('foo', value => { bob = value });
-            $watch('qux.foo', value => { qux.bob = value });
-        ">
+        <div x-data="{ foo: 'bar', bob: 'lob' }" x-init="$watch('foo', value => { bob = value })">
             <h1 x-text="foo"></h1>
             <h2 x-text="bob"></h2>
 
             <button x-on:click="foo = 'baz'"></button>
-
-            <h3 x-text="qux.foo"></h3>
-            <h4 x-text="qux.bob"></h4>
-
-            <button x-on:click="qux.foo = 'biz'"></button>
         </div>
     `
 
     Alpine.start()
 
     expect(document.querySelector('h1').innerText).toEqual('bar')
     expect(document.querySelector('h2').innerText).toEqual('lob')
-    expect(document.querySelector('h3').innerText).toEqual('quux')
-    expect(document.querySelector('h4').innerText).toEqual('corge')
 
-    document.querySelectorAll('button')[0].click()
+    document.querySelector('button').click()
 
     await wait(() => {
         expect(document.querySelector('h1').innerText).toEqual('baz')
         expect(document.querySelector('h2').innerText).toEqual('baz')
-        expect(document.querySelector('h3').innerText).toEqual('quux')
-        expect(document.querySelector('h4').innerText).toEqual('corge')
     })
+})
+
+test('$watch nested properties', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: { bar: 'baz', bob: 'lob' } }" x-init="
+            $watch('foo.bar', value => { foo.bob = value });
+        ">
+            <h1 x-text="foo.bar"></h1>
+            <h2 x-text="foo.bob"></h2>
+
+            <button x-on:click="foo.bar = 'law'"></button>
+        </div>
+    `
+
+    Alpine.start()
 
-    document.querySelectorAll('button')[1].click()
+    expect(document.querySelector('h1').innerText).toEqual('baz')
+    expect(document.querySelector('h2').innerText).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('h3').innerText).toEqual('biz')
-        expect(document.querySelector('h4').innerText).toEqual('biz')
+        expect(document.querySelector('h1').innerText).toEqual('law')
+        expect(document.querySelector('h2').innerText).toEqual('law')
     })
 })