Merge pull request #70 from sharkykh/bugfix/custom-mutations

Fix custom mutation names feature + test

README.md

@@ -175,9 +175,34 @@ export default new Vuex.Store({
 ##### With custom mutation names
 
 ``` js
+// mutation-types.js
+const SOCKET_ONOPEN = '✅ Socket connected!'
+const SOCKET_ONCLOSE = '❌ Socket disconnected!'
+const SOCKET_ONERROR = '❌ Socket Error!!!'
+const SOCKET_ONMESSAGE = 'Websocket message received'
+const SOCKET_RECONNECT = 'Websocket reconnected'
+const SOCKET_RECONNECT_ERROR = 'Websocket is having issues reconnecting..'
+
+export {
+  SOCKET_ONOPEN,
+  SOCKET_ONCLOSE,
+  SOCKET_ONERROR,
+  SOCKET_ONMESSAGE,
+  SOCKET_RECONNECT,
+  SOCKET_RECONNECT_ERROR
+}
+
 // store.js
 import Vue from 'vue'
 import Vuex from 'vuex'
+import {
+  SOCKET_ONOPEN,
+  SOCKET_ONCLOSE,
+  SOCKET_ONERROR,
+  SOCKET_ONMESSAGE,
+  SOCKET_RECONNECT,
+  SOCKET_RECONNECT_ERROR
+} from './mutation-types'
 
 Vue.use(Vuex);
 
@@ -189,46 +214,53 @@ export default new Vuex.Store({
       reconnectError: false,
     }
   },
-  mutations:{
-    SOCKET_ONOPEN (state, event)  {
+  mutations: {
+    [SOCKET_ONOPEN](state, event)  {
       state.socket.isConnected = true
     },
-    SOCKET_ONCLOSE (state, event)  {
+    [SOCKET_ONCLOSE](state, event)  {
       state.socket.isConnected = false
     },
-    SOCKET_ONERROR (state, event)  {
+    [SOCKET_ONERROR](state, event)  {
       console.error(state, event)
     },
     // default handler called for all methods
-    SOCKET_ONMESSAGE (state, message)  {
+    [SOCKET_ONMESSAGE](state, message)  {
       state.socket.message = message
     },
     // mutations for reconnect methods
-    SOCKET_RECONNECT(state, count) {
+    [SOCKET_RECONNECT](state, count) {
       console.info(state, count)
     },
-    SOCKET_RECONNECT_ERROR(state) {
+    [SOCKET_RECONNECT_ERROR](state) {
       state.socket.reconnectError = true;
-    },
+    }
   }
 })
 
 // index.js
 import store from './store'
+import {
+  SOCKET_ONOPEN,
+  SOCKET_ONCLOSE,
+  SOCKET_ONERROR,
+  SOCKET_ONMESSAGE,
+  SOCKET_RECONNECT,
+  SOCKET_RECONNECT_ERROR
+} from './mutation-types'
 
 const mutations = {
-    SOCKET_ONOPEN: '✅ Socket connected!',
-    SOCKET_ONCLOSE: '❌ Socket disconnected!',
-    SOCKET_ONERROR: '❌ Socket Error!!!',
-    SOCKET_ONMESSAGE: 'Websocket message received',
-    SOCKET_RECONNECT: 'Websocket reconnected',
-    SOCKET_RECONNECT_ERROR: 'Websocket is having issues reconnecting..'
-};
+  SOCKET_ONOPEN,
+  SOCKET_ONCLOSE,
+  SOCKET_ONERROR,
+  SOCKET_ONMESSAGE,
+  SOCKET_RECONNECT,
+  SOCKET_RECONNECT_ERROR
+}
 
 Vue.use(VueNativeSock, 'ws://localhost:9090', {
-    store: store,
-    format: 'json',
-    mutations: mutations
+  store: store,
+  mutations: mutations
 })
 ```
 

src/Observer.js

@@ -95,9 +95,8 @@ export default class {
       }
     }
     if (this.mutations) {
-      this.store[this.mutations[method] || method](target, msg)
-    } else {
-      this.store[method](target, msg)
+      target = this.mutations[target] || target
     }
+    this.store[method](target, msg)
   }
 }

test/unit/specs/Observer.spec.js

@@ -63,7 +63,7 @@ describe('Observer.js', () => {
     }, 100)
   })
 
-    // TODO: DRY
+  // TODO: DRY
   it('passes a json action to the provided vuex store', (done) => {
     let expectedMsg = { action: 'setName', value: 'steve' }
     let mockStore = sinon.mock({
@@ -117,7 +117,7 @@ describe('Observer.js', () => {
     }, 100)
   })
 
-    // TODO: DRY
+  // TODO: DRY
   it('passes a namespaced json action to the provided vuex store', (done) => {
     let expectedMsg = { namespace: 'users', action: 'setName', value: 'steve' }
     let mockStore = sinon.mock({
@@ -145,6 +145,36 @@ describe('Observer.js', () => {
     }, 100)
   })
 
+  // TODO: DRY
+  it('passes a custom commit name to the provided vuex store', (done) => {
+    let expectedMsg = 'hello world'
+    let mutations = {
+      SOCKET_ONOPEN: '✅ Socket connected',
+      SOCKET_ONMESSAGE: 'Websocket message received'
+    }
+    let mockStore = sinon.mock({ commit: () => {} })
+    mockStore.expects('commit').withArgs(mutations.SOCKET_ONOPEN)
+    mockStore.expects('commit').withArgs(mutations.SOCKET_ONMESSAGE)
+
+    mockServer = new Server(wsUrl)
+    mockServer.on('connection', ws => {
+      ws.send(expectedMsg)
+    })
+
+    Vue.use(VueNativeSock, wsUrl)
+    let vm = new Vue()
+    observer = new Observer(wsUrl, {
+      store: mockStore.object,
+      mutations,
+      websocket: new WebSocket(wsUrl)
+    })
+
+    setTimeout(() => {
+      mockStore.verify()
+      mockServer.stop(done)
+    }, 100)
+  })
+
   describe('reconnection feature', () => {
     let observer, mockServer, vm, mockStore
     let wsUrl = 'ws://localhost:8080'