test(hmr): more tests for setup

diff --git a/packages/pinia/__tests__/hmr.spec.ts b/packages/pinia/__tests__/hmr.spec.ts
index a76f9ef6adaa6709280abcab4773448c432a6aed..260ddd48a108b114190efd7682f7458051c0ec8f 100644 (file)
--- a/packages/pinia/__tests__/hmr.spec.ts
+++ b/packages/pinia/__tests__/hmr.spec.ts
@@ -1,4 +1,4 @@
-import { watch } from 'vue'
+import { computed, reactive, ref, toRefs, watch } from 'vue'
 import {
   createPinia,
   defineStore,
@@ -42,224 +42,451 @@ describe('HMR', () => {
     setActivePinia(createPinia())
   })
 
-  describe('state', () => {
-    it('adds new state properties', () => {
-      const useStore = defineStore('id', baseOptions)
-      const store: any = useStore()
-      store.n++
-
-      // simulate a hmr
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ newOne: 'hey', n: 0 }),
-      })(null, store)
-
-      expect(store.$state).toEqual({ n: 1, newOne: 'hey' })
-      expect(store.n).toBe(1)
-      expect(store.newOne).toBe('hey')
-
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ other: 'new', n: 0 }),
-      })(null, store)
-
-      expect(store.$state).toEqual({ n: 1, other: 'new' })
-      expect(store.n).toBe(1)
-      expect(store).not.toHaveProperty('newOne')
-      expect(store.other).toBe('new')
-    })
+  describe('Setup store', () => {
+    const baseSetup = () => {
+      const state = reactive({
+        n: 0,
+        arr: [],
+        nestedArr: {
+          arr: [],
+        },
+        nested: {
+          a: 'a',
+        },
+      })
 
-    it('patches nested objects', () => {
-      const useStore = defineStore('id', baseOptions)
-      const store: any = useStore()
+      function increment(amount = 1) {
+        state.n += amount
+      }
 
-      // simulate a hmr
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ nested: { a: 'b', b: 'b' } }),
-      })(null, store)
+      const double = computed(() => state.n * 2)
 
-      expect(store.$state).toEqual({ nested: { a: 'a', b: 'b' } })
+      return { ...toRefs(state), increment, double }
+    }
 
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ nested: { b: 'c' } }),
-      })(null, store)
-      // removes the nested a
-      expect(store.$state).toEqual({ nested: { b: 'b' } })
-    })
+    describe('state', () => {
+      it('adds new state properties', () => {
+        const useStore = defineStore('id', baseSetup)
+        const store: any = useStore()
+        store.n++
 
-    it('skips arrays', () => {
-      const useStore = defineStore('id', baseOptions)
-      const store: any = useStore()
+        // simulate a hmr
+        defineStore('id', () => {
+          const state = reactive({
+            newOne: 'hey',
+            n: 0,
+          })
 
-      // simulate a hmr
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ arr: [2] }),
-      })(null, store)
+          function increment(amount = 1) {
+            state.n += amount
+          }
 
-      expect(store.$state).toEqual({ arr: [] })
+          const double = computed(() => state.n * 2)
 
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ arr: [1] }),
-      })(null, store)
-      expect(store.$state).toEqual({ arr: [] })
-    })
+          return { ...toRefs(state), increment, double }
+        })(null, store)
 
-    it('skips nested arrays', () => {
-      const useStore = defineStore('id', baseOptions)
-      const store: any = useStore()
+        expect(store.$state).toEqual({ n: 1, newOne: 'hey' })
+        expect(store.n).toBe(1)
+        expect(store.newOne).toBe('hey')
 
-      // simulate a hmr
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ nestedArr: { arr: [2] } }),
-      })(null, store)
+        defineStore('id', () => {
+          const state = reactive({
+            other: 'new',
+            n: 0,
+          })
 
-      expect(store.$state).toEqual({ nestedArr: { arr: [] } })
+          function increment(amount = 1) {
+            state.n += amount
+          }
 
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ nestedArr: { arr: [1] } }),
-      })(null, store)
-      expect(store.$state).toEqual({ nestedArr: { arr: [] } })
-    })
+          const double = computed(() => state.n * 2)
+
+          return { ...toRefs(state), increment, double }
+        })(null, store)
+
+        expect(store.$state).toEqual({ n: 1, other: 'new' })
+        expect(store.n).toBe(1)
+        expect(store).not.toHaveProperty('newOne')
+        expect(store.other).toBe('new')
+      })
 
-    it('keeps state reactive', () => {
-      const useStore = defineStore('id', baseOptions)
-      const store: any = useStore()
+      it('keeps state reactive', () => {
+        const useStore = defineStore('id', baseSetup)
+        const store: any = useStore()
 
-      const directSpy = jest.fn()
-      const $stateSpy = jest.fn()
+        const directSpy = jest.fn()
+        const $stateSpy = jest.fn()
 
-      watch(() => store.n, directSpy, { flush: 'sync' })
-      watch(() => store.$state.n, $stateSpy, { flush: 'sync' })
+        watch(() => store.n, directSpy, { flush: 'sync' })
+        watch(() => store.$state.n, $stateSpy, { flush: 'sync' })
 
-      // simulate a hmr
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ newOne: 'hey', n: 0 }),
-      })(null, store)
+        // simulate a hmr
+        defineStore('id', () => {
+          const state = reactive({
+            newOne: 'hey',
+            n: 0,
+          })
 
-      expect(directSpy).toHaveBeenCalledTimes(0)
-      expect($stateSpy).toHaveBeenCalledTimes(0)
+          function increment(amount = 1) {
+            state.n += amount
+          }
 
-      store.n++
-      expect(directSpy).toHaveBeenCalledTimes(1)
-      expect($stateSpy).toHaveBeenCalledTimes(1)
-      store.$state.n++
-      expect(directSpy).toHaveBeenCalledTimes(2)
-      expect($stateSpy).toHaveBeenCalledTimes(2)
+          const double = computed(() => state.n * 2)
 
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ other: 'new', n: 0 }),
-      })(null, store)
+          return { ...toRefs(state), increment, double }
+        })(null, store)
 
-      store.n++
-      expect(directSpy).toHaveBeenCalledTimes(3)
-      expect($stateSpy).toHaveBeenCalledTimes(3)
+        expect(directSpy).toHaveBeenCalledTimes(0)
+        expect($stateSpy).toHaveBeenCalledTimes(0)
 
-      store.$state.n++
-      expect(directSpy).toHaveBeenCalledTimes(4)
-      expect($stateSpy).toHaveBeenCalledTimes(4)
+        store.n++
+        expect(directSpy).toHaveBeenCalledTimes(1)
+        expect($stateSpy).toHaveBeenCalledTimes(1)
+        store.$state.n++
+        expect(directSpy).toHaveBeenCalledTimes(2)
+        expect($stateSpy).toHaveBeenCalledTimes(2)
+
+        defineStore('id', () => {
+          const state = reactive({
+            other: 'new',
+            n: 0,
+          })
+
+          function increment(amount = 1) {
+            state.n += amount
+          }
+
+          const double = computed(() => state.n * 2)
+
+          return { ...toRefs(state), increment, double }
+        })(null, store)
+
+        store.n++
+        expect(directSpy).toHaveBeenCalledTimes(3)
+        expect($stateSpy).toHaveBeenCalledTimes(3)
+
+        store.$state.n++
+        expect(directSpy).toHaveBeenCalledTimes(4)
+        expect($stateSpy).toHaveBeenCalledTimes(4)
+      })
+
+      it.todo('handles nested objects updates')
     })
 
-    it.todo('handles nested objects updates')
-  })
+    describe('actions', () => {
+      it('adds new actions', () => {
+        const useStore = defineStore('id', baseSetup)
+        const store: any = useStore()
+
+        // simulate a hmr
+        defineStore('id', () => {
+          const data = baseSetup()
+          function decrement() {
+            data.n.value--
+          }
+          return { ...data, decrement }
+        })(null, store)
+
+        store.increment()
+        expect(store.n).toBe(1)
+        expect(store.$state.n).toBe(1)
+        store.decrement()
+        expect(store.n).toBe(0)
+        expect(store.$state.n).toBe(0)
+
+        defineStore('id', baseSetup)(null, store)
+
+        store.increment()
+        expect(store.n).toBe(1)
+        expect(store.$state.n).toBe(1)
+        expect(store).not.toHaveProperty('decrement')
+      })
+    })
 
-  describe('actions', () => {
-    it('adds new actions', () => {
-      const useStore = defineStore('id', baseOptions)
-      const store: any = useStore()
-
-      // simulate a hmr
-      defineStore('id', {
-        ...baseOptions,
-        actions: {
-          ...baseOptions.actions,
-          decrement() {
-            this.n--
-          },
-        },
-      })(null, store)
+    describe('getters', () => {
+      it('adds new getters properties', () => {
+        const useStore = defineStore('id', baseSetup)
+        const store: any = useStore()
+        expect(store.double).toBe(0)
+
+        // simulate a hmr
+        defineStore('id', () => {
+          const data = baseSetup()
+          const triple = computed(() => data.n.value * 3)
+          return { ...data, triple }
+        })(null, store)
+
+        store.n = 3
+        expect(store.double).toBe(6)
+        expect(store.triple).toBe(9)
+
+        defineStore('id', baseSetup)(null, store)
 
-      store.increment()
-      expect(store.n).toBe(1)
-      expect(store.$state.n).toBe(1)
-      store.decrement()
-      expect(store.n).toBe(0)
-      expect(store.$state.n).toBe(0)
+        store.n = 4
+        expect(store.double).toBe(8)
+        expect(store).not.toHaveProperty('triple')
+      })
 
-      defineStore('id', baseOptions)(null, store)
+      it('keeps getters reactive', () => {
+        const useStore = defineStore('id', baseSetup)
+        const store: any = useStore()
 
-      store.increment()
-      expect(store.n).toBe(1)
-      expect(store.$state.n).toBe(1)
-      expect(store).not.toHaveProperty('decrement')
+        const spy = jest.fn()
+
+        watch(
+          () => {
+            return store.double
+          },
+          spy,
+          { flush: 'sync' }
+        )
+
+        // simulate a hmr
+        defineStore('id', () => {
+          const data = baseSetup()
+          data.n.value = 2
+          // @ts-expect-error: not defined
+          data.newThing = ref(true)
+          return data
+        })(null, store)
+
+        // n isn't changed
+        expect(spy).toHaveBeenCalledTimes(0)
+
+        store.n++
+        // expect(store.double).toBe(6)
+        expect(spy).toHaveBeenCalledTimes(1)
+
+        defineStore('id', baseSetup)(null, store)
+
+        store.n++
+        // expect(store.double).toBe(8)
+        expect(spy).toHaveBeenCalledTimes(2)
+      })
     })
   })
 
-  describe('getters', () => {
-    it('adds new getters properties', () => {
-      const useStore = defineStore('id', baseOptions)
-      const store: any = useStore()
-      expect(store.double).toBe(0)
-
-      // simulate a hmr
-      defineStore('id', {
-        ...baseOptions,
-        getters: {
-          ...baseOptions.getters,
-          triple: (state) => state.n * 3,
-        },
-      })(null, store)
+  describe('Options store', () => {
+    describe('state', () => {
+      it('adds new state properties', () => {
+        const useStore = defineStore('id', baseOptions)
+        const store: any = useStore()
+        store.n++
+
+        // simulate a hmr
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ newOne: 'hey', n: 0 }),
+        })(null, store)
+
+        expect(store.$state).toEqual({ n: 1, newOne: 'hey' })
+        expect(store.n).toBe(1)
+        expect(store.newOne).toBe('hey')
+
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ other: 'new', n: 0 }),
+        })(null, store)
+
+        expect(store.$state).toEqual({ n: 1, other: 'new' })
+        expect(store.n).toBe(1)
+        expect(store).not.toHaveProperty('newOne')
+        expect(store.other).toBe('new')
+      })
+
+      it('patches nested objects', () => {
+        const useStore = defineStore('id', baseOptions)
+        const store: any = useStore()
+
+        // simulate a hmr
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ nested: { a: 'b', b: 'b' } }),
+        })(null, store)
+
+        expect(store.$state).toEqual({ nested: { a: 'a', b: 'b' } })
+
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ nested: { b: 'c' } }),
+        })(null, store)
+        // removes the nested a
+        expect(store.$state).toEqual({ nested: { b: 'b' } })
+      })
+
+      it('skips arrays', () => {
+        const useStore = defineStore('id', baseOptions)
+        const store: any = useStore()
+
+        // simulate a hmr
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ arr: [2] }),
+        })(null, store)
+
+        expect(store.$state).toEqual({ arr: [] })
+
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ arr: [1] }),
+        })(null, store)
+        expect(store.$state).toEqual({ arr: [] })
+      })
+
+      it('skips nested arrays', () => {
+        const useStore = defineStore('id', baseOptions)
+        const store: any = useStore()
+
+        // simulate a hmr
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ nestedArr: { arr: [2] } }),
+        })(null, store)
+
+        expect(store.$state).toEqual({ nestedArr: { arr: [] } })
+
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ nestedArr: { arr: [1] } }),
+        })(null, store)
+        expect(store.$state).toEqual({ nestedArr: { arr: [] } })
+      })
+
+      it('keeps state reactive', () => {
+        const useStore = defineStore('id', baseOptions)
+        const store: any = useStore()
+
+        const directSpy = jest.fn()
+        const $stateSpy = jest.fn()
+
+        watch(() => store.n, directSpy, { flush: 'sync' })
+        watch(() => store.$state.n, $stateSpy, { flush: 'sync' })
+
+        // simulate a hmr
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ newOne: 'hey', n: 0 }),
+        })(null, store)
+
+        expect(directSpy).toHaveBeenCalledTimes(0)
+        expect($stateSpy).toHaveBeenCalledTimes(0)
+
+        store.n++
+        expect(directSpy).toHaveBeenCalledTimes(1)
+        expect($stateSpy).toHaveBeenCalledTimes(1)
+        store.$state.n++
+        expect(directSpy).toHaveBeenCalledTimes(2)
+        expect($stateSpy).toHaveBeenCalledTimes(2)
+
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ other: 'new', n: 0 }),
+        })(null, store)
+
+        store.n++
+        expect(directSpy).toHaveBeenCalledTimes(3)
+        expect($stateSpy).toHaveBeenCalledTimes(3)
+
+        store.$state.n++
+        expect(directSpy).toHaveBeenCalledTimes(4)
+        expect($stateSpy).toHaveBeenCalledTimes(4)
+      })
+
+      it.todo('handles nested objects updates')
+    })
 
-      store.n = 3
-      expect(store.double).toBe(6)
-      expect(store.triple).toBe(9)
+    describe('actions', () => {
+      it('adds new actions', () => {
+        const useStore = defineStore('id', baseOptions)
+        const store: any = useStore()
+
+        // simulate a hmr
+        defineStore('id', {
+          ...baseOptions,
+          actions: {
+            ...baseOptions.actions,
+            decrement() {
+              this.n--
+            },
+          },
+        })(null, store)
+
+        store.increment()
+        expect(store.n).toBe(1)
+        expect(store.$state.n).toBe(1)
+        store.decrement()
+        expect(store.n).toBe(0)
+        expect(store.$state.n).toBe(0)
+
+        defineStore('id', baseOptions)(null, store)
+
+        store.increment()
+        expect(store.n).toBe(1)
+        expect(store.$state.n).toBe(1)
+        expect(store).not.toHaveProperty('decrement')
+      })
+    })
 
-      defineStore('id', baseOptions)(null, store)
+    describe('getters', () => {
+      it('adds new getters properties', () => {
+        const useStore = defineStore('id', baseOptions)
+        const store: any = useStore()
+        expect(store.double).toBe(0)
+
+        // simulate a hmr
+        defineStore('id', {
+          ...baseOptions,
+          getters: {
+            ...baseOptions.getters,
+            triple: (state) => state.n * 3,
+          },
+        })(null, store)
 
-      store.n = 4
-      expect(store.double).toBe(8)
-      expect(store).not.toHaveProperty('triple')
-    })
+        store.n = 3
+        expect(store.double).toBe(6)
+        expect(store.triple).toBe(9)
 
-    it('keeps getters reactive', () => {
-      const useStore = defineStore('id', baseOptions)
-      const store: any = useStore()
+        defineStore('id', baseOptions)(null, store)
 
-      const spy = jest.fn()
+        store.n = 4
+        expect(store.double).toBe(8)
+        expect(store).not.toHaveProperty('triple')
+      })
 
-      watch(
-        () => {
-          return store.double
-        },
-        spy,
-        { flush: 'sync' }
-      )
+      it('keeps getters reactive', () => {
+        const useStore = defineStore('id', baseOptions)
+        const store: any = useStore()
+
+        const spy = jest.fn()
+
+        watch(
+          () => {
+            return store.double
+          },
+          spy,
+          { flush: 'sync' }
+        )
 
-      // simulate a hmr
-      defineStore('id', {
-        ...baseOptions,
-        state: () => ({ n: 2, newThing: true }),
-      })(null, store)
+        // simulate a hmr
+        defineStore('id', {
+          ...baseOptions,
+          state: () => ({ n: 2, newThing: true }),
+        })(null, store)
 
-      // n isn't changed
-      expect(spy).toHaveBeenCalledTimes(0)
+        // n isn't changed
+        expect(spy).toHaveBeenCalledTimes(0)
 
-      store.n++
-      // expect(store.double).toBe(6)
-      expect(spy).toHaveBeenCalledTimes(1)
+        store.n++
+        // expect(store.double).toBe(6)
+        expect(spy).toHaveBeenCalledTimes(1)
 
-      defineStore('id', baseOptions)(null, store)
+        defineStore('id', baseOptions)(null, store)
 
-      store.n++
-      // expect(store.double).toBe(8)
-      expect(spy).toHaveBeenCalledTimes(2)
+        store.n++
+        // expect(store.double).toBe(8)
+        expect(spy).toHaveBeenCalledTimes(2)
+      })
     })
   })
 })