From 2cfbb9d2cd4b45d7112687664d391f781369ee54 Mon Sep 17 00:00:00 2001 From: AkiraFukushima Date: Sun, 30 Dec 2018 14:59:53 +0900 Subject: [PATCH] refs #209 Add store integration test for Preferences/Appearance --- package-lock.json | 16 +++ package.json | 5 +- .../store/Preferences/Appearance.spec.js | 90 ++++++++++++++++ .../unit/store/Preferences/Appearance.spec.js | 39 ------- .../components/Preferences/Appearance.vue | 4 +- src/renderer/store/Preferences/Appearance.js | 100 +++++++++++------- 6 files changed, 172 insertions(+), 82 deletions(-) create mode 100644 spec/integration/store/Preferences/Appearance.spec.js diff --git a/package-lock.json b/package-lock.json index 817683b7..73dc76d8 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ddee8ebd..9f4dfc22 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,9 @@ "^~/(.+)": "/$1", "electron": "/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", diff --git a/spec/integration/store/Preferences/Appearance.spec.js b/spec/integration/store/Preferences/Appearance.spec.js new file mode 100644 index 00000000..9f7f40f4 --- /dev/null +++ b/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() + }) +}) diff --git a/spec/unit/store/Preferences/Appearance.spec.js b/spec/unit/store/Preferences/Appearance.spec.js index edfed799..3c6bafe9 100644 --- a/spec/unit/store/Preferences/Appearance.spec.js +++ b/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 {} diff --git a/src/renderer/components/Preferences/Appearance.vue b/src/renderer/components/Preferences/Appearance.vue index d6304ffe..e78877ef 100644 --- a/src/renderer/components/Preferences/Appearance.vue +++ b/src/renderer/components/Preferences/Appearance.vue @@ -146,8 +146,8 @@ export default { this.$store.dispatch('Preferences/Appearance/loadFonts') }, methods: { - updateFontSize (value) { - this.$store.dispatch('Preferences/Appearance/updateFontSize', value) + async updateFontSize (value) { + await this.$store.dispatch('Preferences/Appearance/updateFontSize', value) } } } diff --git a/src/renderer/store/Preferences/Appearance.js b/src/renderer/store/Preferences/Appearance.js index 6788d4c5..4866d6c1 100644 --- a/src/renderer/store/Preferences/Appearance.js +++ b/src/renderer/store/Preferences/Appearance.js @@ -83,14 +83,18 @@ export default { const config = { appearance: newAppearance } - ipcRenderer.send('update-preferences', config) - ipcRenderer.once('error-update-preferences', (event, err) => { - ipcRenderer.removeAllListeners('response-update-preferences') - }) - ipcRenderer.once('response-update-preferences', (event, conf) => { - ipcRenderer.removeAllListeners('error-update-preferences') - commit('updateAppearance', conf.appearance) - dispatch('App/loadPreferences', null, { root: true }) + return new Promise((resolve, reject) => { + ipcRenderer.send('update-preferences', config) + ipcRenderer.once('error-update-preferences', (event, err) => { + ipcRenderer.removeAllListeners('response-update-preferences') + reject(err) + }) + ipcRenderer.once('response-update-preferences', (event, conf) => { + 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) - ipcRenderer.once('error-update-preferences', (event, err) => { - ipcRenderer.removeAllListeners('response-update-preferences') - }) - ipcRenderer.once('response-update-preferences', (event, conf) => { - ipcRenderer.removeAllListeners('error-update-preferences') - dispatch('App/loadPreferences', null, { root: true }) - commit('updateAppearance', conf.appearance) + return new Promise((resolve, reject) => { + ipcRenderer.send('update-preferences', config) + ipcRenderer.once('error-update-preferences', (event, err) => { + ipcRenderer.removeAllListeners('response-update-preferences') + reject(err) + }) + ipcRenderer.once('response-update-preferences', (event, conf) => { + 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) - ipcRenderer.once('error-update-preferences', (event, err) => { - ipcRenderer.removeAllListeners('response-update-preferences') - }) - ipcRenderer.once('response-update-preferences', (event, conf) => { - ipcRenderer.removeAllListeners('error-update-preferences') - dispatch('App/loadPreferences', null, { root: true }) - commit('updateAppearance', conf.appearance) + return new Promise((resolve, reject) => { + ipcRenderer.send('update-preferences', config) + ipcRenderer.once('error-update-preferences', (event, err) => { + ipcRenderer.removeAllListeners('response-update-preferences') + reject(err) + }) + ipcRenderer.once('response-update-preferences', (event, conf) => { + 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) - ipcRenderer.once('error-update-preferences', (event, err) => { - ipcRenderer.removeAllListeners('response-update-preferences') - }) - ipcRenderer.once('response-update-preferences', (event, conf) => { - ipcRenderer.removeAllListeners('error-update-preferences') - commit('updateAppearance', conf.appearance) - dispatch('App/loadPreferences', null, { root: true }) + return new Promise((resolve, reject) => { + ipcRenderer.send('update-preferences', config) + ipcRenderer.once('error-update-preferences', (event, err) => { + ipcRenderer.removeAllListeners('response-update-preferences') + reject(err) + }) + ipcRenderer.once('response-update-preferences', (event, conf) => { + 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) - ipcRenderer.once('error-update-preferences', (event, err) => { - ipcRenderer.removeAllListeners('response-update-preferences') - }) - ipcRenderer.once('response-update-preferences', (event, conf) => { - ipcRenderer.removeAllListeners('error-update-preferences') - commit('updateAppearance', conf.appearance) - dispatch('App/loadPreferences', null, { root: true }) + return new Promise((resolve, reject) => { + ipcRenderer.send('update-preferences', config) + ipcRenderer.once('error-update-preferences', (event, err) => { + ipcRenderer.removeAllListeners('response-update-preferences') + reject(err) + }) + ipcRenderer.once('response-update-preferences', (event, conf) => { + ipcRenderer.removeAllListeners('error-update-preferences') + commit('updateAppearance', conf.appearance) + dispatch('App/loadPreferences', null, { root: true }) + resolve(conf.appearance) + }) }) } }