test: add reactivity tests

jest.config.js

@@ -15,7 +15,7 @@ module.exports = {
 
   moduleNameMapper: {
     '~(.*)$': '<rootDir>/src$1',
-    'test-utils(.*)$': '<rootDir>/test/utils$1'
+    '^test-utils(.*)$': '<rootDir>/test/utils$1'
   },
 
   transform: {

package.json

@@ -43,6 +43,7 @@
     "@babel/core": "^7.7.0",
     "@babel/preset-env": "^7.7.1",
     "@nuxtjs/eslint-config": "^1.1.2",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "codecov": "^3.6.1",

src/plugin.js

@@ -15,6 +15,7 @@ export function injectStator (Vue, options) {
 export function lazyInject (Vue, key, setter) {
   Vue.use(() => {
     const propertyName = `$${key}`
+
     if (Vue.prototype.hasOwnProperty(propertyName)) {
       return
     }

test/unit/reactivity.test.js

@@ -0,0 +1,131 @@
+/**
+ * @jest-environment jsdom
+ */
+import { mount, createLocalVue } from '@vue/test-utils'
+import { waitTick } from 'test-utils'
+import * as helpers from '~/helpers'
+import * as store from '~/store'
+import plugin from '~/plugin'
+
+describe('reactivity', () => {
+  test('subscribe', async () => {
+    const config = {
+      state: {
+        test: false
+      }
+    }
+
+    const stator = store.createStore(config)
+
+    const spy = jest.fn()
+    stator.subscribe('test', spy)
+    stator.$state.test = true
+
+    await waitTick()
+
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
+  test('mapState direct', () => {
+    const localVue = createLocalVue()
+    localVue.use(plugin, {
+      state: {
+        test: false
+      }
+    })
+
+    const Component = {
+      template: '<p>{{ test }}</p>',
+      computed: helpers.mapState('test')
+    }
+
+    const wrapper = mount(Component, { localVue })
+    expect(wrapper.vm.test).toBe(false)
+
+    wrapper.vm.test = true
+
+    expect(wrapper.vm.test).toBe(true)
+    expect(wrapper.vm.$state.test).toBe(true)
+  })
+
+  test('mapState alias', () => {
+    const localVue = createLocalVue()
+    localVue.use(plugin, {
+      state: {
+        test: false
+      }
+    })
+
+    const Component = {
+      template: '<p>{{ alias }}</p>',
+      computed: helpers.mapState({ alias: 'test' })
+    }
+
+    const wrapper = mount(Component, { localVue })
+    expect(wrapper.vm.alias).toBe(false)
+
+    wrapper.vm.alias = true
+
+    expect(wrapper.vm.alias).toBe(true)
+    expect(wrapper.vm.$state.test).toBe(true)
+  })
+
+  test('mapState module direct', () => {
+    const localVue = createLocalVue()
+    localVue.use(plugin, {
+      modules: {
+        my: {
+          state: {
+            test: false
+          }
+        }
+      }
+    })
+
+    const Component = {
+      template: '<p>{{ [\'my/test\'] }}</p>',
+      computed: helpers.mapState(['my/test'])
+    }
+
+    const wrapper = mount(Component, { localVue })
+    expect(wrapper.vm['my/test']).toBe(false)
+
+    wrapper.vm['my/test'] = true
+
+    expect(wrapper.vm['my/test']).toBe(true)
+    expect(wrapper.vm.$state.my.test).toBe(true)
+  })
+
+  test('mapState module alias', () => {
+    const localVue = createLocalVue()
+    localVue.use(plugin, {
+      modules: {
+        my: {
+          state: {
+            test: false
+          }
+        }
+      }
+    })
+
+    const Component = {
+      template: '<p>{{ alias }}</p>',
+      computed: {
+        ...helpers.mapState({ alias: 'my/test' })
+      },
+      methods: {
+        change () {
+          this.alias = true
+        }
+      }
+    }
+
+    const wrapper = mount(Component, { localVue })
+    expect(wrapper.vm.alias).toBe(false)
+
+    wrapper.vm.change()
+
+    expect(wrapper.vm.alias).toBe(true)
+    expect(wrapper.vm.$state.my.test).toBe(true)
+  })
+})

test/utils/index.js

@@ -1,12 +1,15 @@
 import klaw from 'klaw'
 import farmir from 'rimraf'
+import Vue from 'vue'
 
 export { default as getPort } from 'get-port'
 
 export * from './constants'
 export * from './nuxt'
 export * from './browser'
 
+export const waitTick = () => new Promise(resolve => Vue.nextTick(resolve))
+
 export function listPaths (dir, pathsBefore = [], options = {}) {
   const items = []
   return new Promise((resolve) => {