refs #209 Add store integration test for Preferences/Appearance

package-lock.json

@@ -656,6 +656,16 @@
         }
       }
     },
+    "@vue/test-utils": {
+      "version": "1.0.0-beta.28",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.0-beta.28.tgz",
+      "integrity": "sha512-uVbFJG0g/H9hf2pgWUdhvQYItRGzQ44cMFf00wp0YEo85pxuvM9e3mx8QLQfx6R2CogxbK4CvV7qvkLblehXeQ==",
+      "dev": true,
+      "requires": {
+        "dom-event-types": "1.0.0",
+        "lodash": "4.17.11"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.7.11",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz",
@@ -5407,6 +5417,12 @@
         "utila": "0.4.0"
       }
     },
+    "dom-event-types": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dom-event-types/-/dom-event-types-1.0.0.tgz",
+      "integrity": "sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==",
+      "dev": true
+    },
     "dom-serialize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",

package.json

@@ -96,7 +96,9 @@
       "^~/(.+)": "<rootDir>/$1",
       "electron": "<rootDir>/spec/mock/electron.js"
     },
-    "testMatch": [ "**/spec/**/*.spec.js?(x)" ]
+    "testMatch": [
+      "**/spec/**/*.spec.js?(x)"
+    ]
   },
   "dependencies": {
     "@panter/vue-i18next": "^0.13.0",
@@ -143,6 +145,7 @@
   },
   "devDependencies": {
     "@mapbox/stylelint-processor-arbitrary-tags": "^0.2.0",
+    "@vue/test-utils": "^1.0.0-beta.28",
     "ajv": "^6.6.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.1",

spec/integration/store/Preferences/Appearance.spec.js

@@ -0,0 +1,90 @@
+import { createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import Theme from '~/src/constants/theme'
+import DisplayStyle from '~/src/constants/displayStyle'
+import TimeFormat from '~/src/constants/timeFormat'
+import { LightTheme, DarkTheme } from '~/src/renderer/utils/theme'
+import DefaultFonts from '@/utils/fonts'
+import Appearance from '@/store/Preferences/Appearance'
+import { ipcMain } from '~/spec/mock/electron'
+
+const state = {
+  appearance: {
+    theme: Theme.Light.key,
+    fontSize: 14,
+    displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
+    timeFormat: TimeFormat.Absolute.value,
+    customThemeColor: LightTheme,
+    font: DefaultFonts[0]
+  },
+  fonts: []
+}
+
+const Preferences = {
+  namespaced: true,
+  state: state,
+  actions: Appearance.actions,
+  mutations: Appearance.mutations
+}
+
+const App = {
+  namespaced: true,
+  actions: {
+    loadPreferences: jest.fn()
+  }
+}
+
+describe('Preferences/Appearance', () => {
+  let store
+  let localVue
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(Vuex)
+    store = new Vuex.Store({
+      modules: {
+        Preferences,
+        App
+      }
+    })
+    ipcMain.once('update-preferences', (event, config) => {
+      event.sender.send('response-update-preferences', config)
+    })
+  })
+
+  it('updateTheme', async () => {
+    await store.dispatch('Preferences/updateTheme', Theme.Dark.key)
+    expect(store.state.Preferences.appearance.theme).toEqual(Theme.Dark.key)
+    expect(App.actions.loadPreferences).toBeCalled()
+  })
+
+  it('updateFontSize', async () => {
+    await store.dispatch('Preferences/updateFontSize', 15)
+    expect(store.state.Preferences.appearance.fontSize).toEqual(15)
+    expect(App.actions.loadPreferences).toBeCalled()
+  })
+
+  it('updateDisplayNameStyle', async () => {
+    await store.dispatch('Preferences/updateDisplayNameStyle', DisplayStyle.DisplayName.value)
+    expect(store.state.Preferences.appearance.displayNameStyle).toEqual(DisplayStyle.DisplayName.value)
+    expect(App.actions.loadPreferences).toBeCalled()
+  })
+
+  it('updateTimeFormat', async () => {
+    await store.dispatch('Preferences/updateTimeFormat', TimeFormat.Relative.value)
+    expect(store.state.Preferences.appearance.timeFormat).toEqual(TimeFormat.Relative.value)
+    expect(App.actions.loadPreferences).toBeCalled()
+  })
+
+  it('updateCustomThemeColor', async () => {
+    await store.dispatch('Preferences/updateCustomThemeColor', DarkTheme)
+    expect(store.state.Preferences.appearance.customThemeColor).toEqual(DarkTheme)
+    expect(App.actions.loadPreferences).toBeCalled()
+  })
+
+  it('updateFont', async () => {
+    await store.dispatch('Preferences/updateFont', DefaultFonts[1])
+    expect(store.state.Preferences.appearance.font).toEqual(DefaultFonts[1])
+    expect(App.actions.loadPreferences).toBeCalled()
+  })
+})

spec/unit/store/Preferences/Appearance.spec.js

@@ -87,46 +87,7 @@ describe('Preferences/Appearance', () => {
       })
     })
   })
-  describe('updateTheme', () => {
-    it('error', async () => {
-      ipcMain.once('update-preferences', (event, _) => {
-        event.sender.send('error-update-preferences', new UpdateThemeError())
-      })
-      const dispatchMock = jest.fn()
-      const commitMock = jest.fn()
-      await Appearance.actions.updateTheme({ dispatch: dispatchMock, commit: commitMock, state: state }, Theme.Dark.key)
-        .catch((err) => {
-          expect(err instanceof UpdateThemeError).toEqual(true)
-        })
-    })
-    it('success', async () => {
-      ipcMain.once('update-preferences', (event, config) => {
-        event.sender.send('response-update-preferences', config)
-      })
-      const dispatchMock = jest.fn()
-      const commitMock = jest.fn()
-      const appearance = await Appearance.actions.updateTheme({ dispatch: dispatchMock, commit: commitMock, state: state }, Theme.Dark.key)
-      expect(appearance).toEqual({
-        theme: Theme.Dark.key,
-        fontSize: 14,
-        displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-        timeFormat: TimeFormat.Absolute.value,
-        customThemeColor: LightTheme,
-        font: DefaultFonts[0]
-      })
-      expect(commitMock).toHaveBeenCalledWith('updateAppearance', {
-        theme: Theme.Dark.key,
-        fontSize: 14,
-        displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-        timeFormat: TimeFormat.Absolute.value,
-        customThemeColor: LightTheme,
-        font: DefaultFonts[0]
-      })
-      expect(dispatchMock).toHaveBeenCalledWith('App/loadPreferences', null, { root: true })
-    })
-  })
 })
 
 class LoadAppearanceError extends Error {}
 class ListFontsError extends Error {}
-class UpdateThemeError extends Error {}

src/renderer/components/Preferences/Appearance.vue

@@ -146,8 +146,8 @@ export default {
     this.$store.dispatch('Preferences/Appearance/loadFonts')
   },
   methods: {
-    updateFontSize (value) {
+    async updateFontSize (value) {
-      this.$store.dispatch('Preferences/Appearance/updateFontSize', value)
+      await this.$store.dispatch('Preferences/Appearance/updateFontSize', value)
     }
   }
 }

src/renderer/store/Preferences/Appearance.js

@@ -83,14 +83,18 @@ export default {
       const config = {
         appearance: newAppearance
       }
-      ipcRenderer.send('update-preferences', config)
+      return new Promise((resolve, reject) => {
-      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.send('update-preferences', config)
-        ipcRenderer.removeAllListeners('response-update-preferences')
+        ipcRenderer.once('error-update-preferences', (event, err) => {
-      })
+          ipcRenderer.removeAllListeners('response-update-preferences')
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
+          reject(err)
-        ipcRenderer.removeAllListeners('error-update-preferences')
+        })
-        commit('updateAppearance', conf.appearance)
+        ipcRenderer.once('response-update-preferences', (event, conf) => {
-        dispatch('App/loadPreferences', null, { root: true })
+          ipcRenderer.removeAllListeners('error-update-preferences')
+          commit('updateAppearance', conf.appearance)
+          dispatch('App/loadPreferences', null, { root: true })
+          resolve(conf.appearance)
+        })
       })
     },
     updateDisplayNameStyle ({ dispatch, commit, state }, value) {
@@ -100,14 +104,18 @@ export default {
       const config = {
         appearance: newAppearance
       }
-      ipcRenderer.send('update-preferences', config)
+      return new Promise((resolve, reject) => {
-      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.send('update-preferences', config)
-        ipcRenderer.removeAllListeners('response-update-preferences')
+        ipcRenderer.once('error-update-preferences', (event, err) => {
-      })
+          ipcRenderer.removeAllListeners('response-update-preferences')
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
+          reject(err)
-        ipcRenderer.removeAllListeners('error-update-preferences')
+        })
-        dispatch('App/loadPreferences', null, { root: true })
+        ipcRenderer.once('response-update-preferences', (event, conf) => {
-        commit('updateAppearance', conf.appearance)
+          ipcRenderer.removeAllListeners('error-update-preferences')
+          dispatch('App/loadPreferences', null, { root: true })
+          commit('updateAppearance', conf.appearance)
+          resolve(conf.appearance)
+        })
       })
     },
     updateTimeFormat ({ dispatch, commit, state }, value) {
@@ -117,14 +125,18 @@ export default {
       const config = {
         appearance: newAppearance
       }
-      ipcRenderer.send('update-preferences', config)
+      return new Promise((resolve, reject) => {
-      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.send('update-preferences', config)
-        ipcRenderer.removeAllListeners('response-update-preferences')
+        ipcRenderer.once('error-update-preferences', (event, err) => {
-      })
+          ipcRenderer.removeAllListeners('response-update-preferences')
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
+          reject(err)
-        ipcRenderer.removeAllListeners('error-update-preferences')
+        })
-        dispatch('App/loadPreferences', null, { root: true })
+        ipcRenderer.once('response-update-preferences', (event, conf) => {
-        commit('updateAppearance', conf.appearance)
+          ipcRenderer.removeAllListeners('error-update-preferences')
+          dispatch('App/loadPreferences', null, { root: true })
+          commit('updateAppearance', conf.appearance)
+          resolve(conf.appearance)
+        })
       })
     },
     updateCustomThemeColor ({ dispatch, state, commit }, value) {
@@ -135,14 +147,18 @@ export default {
       const config = {
         appearance: newAppearance
       }
-      ipcRenderer.send('update-preferences', config)
+      return new Promise((resolve, reject) => {
-      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.send('update-preferences', config)
-        ipcRenderer.removeAllListeners('response-update-preferences')
+        ipcRenderer.once('error-update-preferences', (event, err) => {
-      })
+          ipcRenderer.removeAllListeners('response-update-preferences')
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
+          reject(err)
-        ipcRenderer.removeAllListeners('error-update-preferences')
+        })
-        commit('updateAppearance', conf.appearance)
+        ipcRenderer.once('response-update-preferences', (event, conf) => {
-        dispatch('App/loadPreferences', null, { root: true })
+          ipcRenderer.removeAllListeners('error-update-preferences')
+          commit('updateAppearance', conf.appearance)
+          dispatch('App/loadPreferences', null, { root: true })
+          resolve(conf.appearance)
+        })
       })
     },
     updateFont ({ dispatch, state, commit }, value) {
@@ -152,14 +168,18 @@ export default {
       const config = {
         appearance: newAppearance
       }
-      ipcRenderer.send('update-preferences', config)
+      return new Promise((resolve, reject) => {
-      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.send('update-preferences', config)
-        ipcRenderer.removeAllListeners('response-update-preferences')
+        ipcRenderer.once('error-update-preferences', (event, err) => {
-      })
+          ipcRenderer.removeAllListeners('response-update-preferences')
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
+          reject(err)
-        ipcRenderer.removeAllListeners('error-update-preferences')
+        })
-        commit('updateAppearance', conf.appearance)
+        ipcRenderer.once('response-update-preferences', (event, conf) => {
-        dispatch('App/loadPreferences', null, { root: true })
+          ipcRenderer.removeAllListeners('error-update-preferences')
+          commit('updateAppearance', conf.appearance)
+          dispatch('App/loadPreferences', null, { root: true })
+          resolve(conf.appearance)
+        })
       })
     }
   }