tests: object watchers

examples/index.html

@@ -75,7 +75,7 @@
             })
 
             Spruce.watch('user', () => {
-                console.log('User changed.')
+                Spruce.store('persisted').example = 'Woop!'
             })
 
             Spruce.watch('application.name', () => {

src/index.js

@@ -1,4 +1,4 @@
-import { getMethods, checkForAlpine, isObject, isArray } from './utils'
+import { getMethods, checkForAlpine, isObject, isArray, isNullOrUndefined } from './utils'
 import { createObservable } from './observable'
 
 const Spruce = {
@@ -170,7 +170,7 @@ const Spruce = {
         const target = nameParts.reduce((target, part) => {
             const sub = target[part]
 
-            if (isObject(sub) || isArray(sub)) {
+            if (! isNullOrUndefined(sub) && (isObject(sub) || isArray(sub))) {
                 return sub
             }
 

tests/cypress/fixtures/watchers/init.html

@@ -17,6 +17,12 @@
             <span data-todo-label x-text="$store.todoLabel.test"></span>
         </div>
 
+        <div x-data>
+            <button data-change-name @click.prevent="$store.user.name = 'Bob'">
+                Change user name
+            </button>
+        </div>
+
         <script src="/dist/spruce.umd.js"></script>
 
         <script>
@@ -36,6 +42,10 @@
                 bar: 'boo'
             }, true)
 
+            Spruce.store('user', {
+                name: 'Ryan'
+            })
+
             Spruce.watch('todo.todos', () => {
                 Spruce.store('todoLabel').test = 'Yay!'
             })
@@ -43,6 +53,10 @@
             Spruce.watch('persisted.foo', () => {
                 Spruce.store('persisted').bar = 'bop'
             })
+
+            Spruce.watch('user', () => {
+                Spruce.store('todoLabel').test = 'Changed!'
+            })
         </script>
     </body>
 </html>

tests/cypress/integration/watchers.spec.js

@@ -19,5 +19,9 @@ describe('watchers', () => {
 
         cy.get('[data-todo-item]').should('have.length', 1)
         cy.get('[data-todo-label]').should('have.text', 'Yay!')
+
+        cy.get('[data-change-name]').click()
+
+        cy.get('[data-todo-label]').should('have.text', 'Changed!')
     })
 })