fix(overmind-vue): replace stopTracking with subscribe and add test coverage

Replace the removed track(onUpdate)/stopTracking() API calls with the current track()/subscribe() pattern, matching overmind-react. Fix track() call order so scoped state hooks correctly record path dependencies. Add 22 tests covering all exports with 100% code coverage.

Author: ericsorenson

package-lock.json

@@ -67,6 +67,7 @@
     "@types/vscode": "^1.70.0",
     "@types/ws": "^8.18.1",
     "@vscode/vsce": "3.7.1",
+    "@vue/test-utils": "2.4.6",
     "babel-loader": "10.1.1",
     "babel-plugin-macros": "^3.1.0",
     "commitizen": "^4.3.1",

package.json

@@ -1,4 +1,5 @@
 module.exports = {
+  testEnvironment: 'jsdom',
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.{t,j}s?(x)', '!src/**/*.d.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],

packages/overmind-vue/jest.config.js

@@ -17,6 +17,7 @@
     "build:es": "tsc --outDir es --module ES2022 --target ES2022",
     "clean": "rimraf es lib coverage",
     "typecheck": "tsc --noEmit",
+    "test": "jest --runInBand",
     "test:watch": "jest --watch --updateSnapshot --coverage false",
     "prebuild": "npm run clean",
     "postbuild": "rimraf {lib,es}/**/__tests__"
@@ -36,6 +37,9 @@
     "overmind": "next",
     "tslib": "^2.8.1"
   },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.6"
+  },
   "peerDependencies": {
     "vue": "^3.0.0"
   }

packages/overmind-vue/package.json

@@ -0,0 +1,91 @@
+jest.mock('overmind', () => {
+  const actual = jest.requireActual('overmind')
+  return {
+    ...actual,
+    ENVIRONMENT: 'production',
+  }
+})
+
+import { Overmind } from 'overmind'
+import { defineComponent, h, nextTick } from 'vue'
+import { mount, flushPromises } from '@vue/test-utils'
+
+import { withOvermind, createStateHook } from './'
+
+const config = {
+  state: {
+    foo: 'bar',
+  },
+  actions: {
+    doThis: ({ state }: any) => {
+      state.foo = 'bar2'
+    },
+  },
+}
+
+function mountWithOvermind(app: any, setup: () => () => any) {
+  const Comp = defineComponent({ setup })
+  return mount(withOvermind(app, Comp))
+}
+
+describe('Vue (production mode)', () => {
+  test('should render and re-render state', async () => {
+    const app = new Overmind(config)
+    let renderCount = 0
+
+    const wrapper = mountWithOvermind(app, () => {
+      const state = createStateHook()()
+      return () => {
+        renderCount++
+        return h('div', {}, (state.value as any).foo)
+      }
+    })
+
+    expect(renderCount).toBe(1)
+    expect(wrapper.text()).toBe('bar')
+
+    app.actions.doThis()
+    await flushPromises()
+    await nextTick()
+
+    expect(renderCount).toBe(2)
+    expect(wrapper.text()).toBe('bar2')
+  })
+
+  test('should re-render scoped state', async () => {
+    const app = new Overmind(config)
+
+    const wrapper = mountWithOvermind(app, () => {
+      const state = createStateHook()((s: any) => ({ myFoo: s.foo }))
+      return () => h('div', {}, (state.value as any).myFoo)
+    })
+
+    expect(wrapper.text()).toBe('bar')
+
+    app.actions.doThis()
+    await flushPromises()
+    await nextTick()
+
+    expect(wrapper.text()).toBe('bar2')
+  })
+
+  test('should dispose tree on unmount without devtools events', () => {
+    const app = new Overmind(config)
+    const disposeSpy = jest.spyOn(
+      (app as any).proxyStateTreeInstance,
+      'disposeTree'
+    )
+    const emitSpy = jest.spyOn(app.eventHub, 'emitAsync')
+
+    const wrapper = mountWithOvermind(app, () => {
+      const state = createStateHook()()
+      return () => h('div', {}, (state.value as any).foo)
+    })
+
+    emitSpy.mockClear()
+    wrapper.unmount()
+
+    expect(disposeSpy).toHaveBeenCalledTimes(1)
+    expect(emitSpy).not.toHaveBeenCalled()
+  })
+})