From 66d31fb7193d2234d1a2755e4a6f71b935b1f8d8 Mon Sep 17 00:00:00 2001 From: Johannes Werner Date: Sat, 14 Jul 2018 17:51:26 +0200 Subject: [PATCH] refactor(vuex): change default-state object to a factory function (#183) closes #182 --- docs/guide/clean-up.md | 2 +- docs/guide/styles.md | 4 ++++ src/app/app/actions.spec.ts | 5 ----- src/app/app/getters.spec.ts | 13 +++++++++---- src/app/app/module.ts | 2 +- src/app/app/mutations.spec.ts | 3 +-- src/app/app/state.ts | 14 ++++++++------ src/app/counter/actions.spec.ts | 12 ++++-------- src/app/counter/getters.spec.ts | 15 ++++++++++----- src/app/counter/module.ts | 2 +- src/app/counter/mutations.spec.ts | 3 +-- src/app/counter/state.ts | 10 ++++++---- src/app/shared/styles/_variables.scss | 1 - src/app/state.ts | 4 ++-- tools/generators/ast.ts | 2 +- tools/generators/connected/connected.spec.ts.hbs | 8 ++++++-- tools/generators/module/actions.spec.ts.hbs | 6 +----- tools/generators/module/getters.spec.ts.hbs | 13 +++++++++---- tools/generators/module/module.ts.hbs | 2 +- tools/generators/module/mutations.spec.ts.hbs | 3 +-- tools/generators/module/state.ts.hbs | 10 ++++++---- 21 files changed, 73 insertions(+), 61 deletions(-) diff --git a/docs/guide/clean-up.md b/docs/guide/clean-up.md index f5b6af6b..9572c4c2 100644 --- a/docs/guide/clean-up.md +++ b/docs/guide/clean-up.md @@ -46,7 +46,7 @@ import { CounterDefaultState, ICounterState } from './counter/state'; ... counter: { - ...CounterDefaultState, + ...CounterDefaultState(), }, ``` diff --git a/docs/guide/styles.md b/docs/guide/styles.md index ceb10c4d..eec8ed4f 100644 --- a/docs/guide/styles.md +++ b/docs/guide/styles.md @@ -74,6 +74,9 @@ $font-family-headings: 'Oxygen', Helvetica, sans-serif; $font-family: 'Lato', Helvetica, sans-serif; $space-unit: 0.8rem; +/* Animations */ +$fade-animation-transition: opacity $transition-duration * 4 ease-in-out; + /* Grid */ $screen-phone: 320px; $screen-phone-max: $screen-phone - 1; @@ -90,6 +93,7 @@ $screen-tablet-portrait-gutter: $space-unit * 2; $screen-tablet-landscape-gutter: $space-unit * 2; $screen-small-desktop-gutter: $space-unit * 4; $screen-large-desktop-gutter: $space-unit * 4; + ``` All the components are dependents of these variables, so everything will look different if you change these values. diff --git a/src/app/app/actions.spec.ts b/src/app/app/actions.spec.ts index 1d1cf3f9..e2c9fa8c 100644 --- a/src/app/app/actions.spec.ts +++ b/src/app/app/actions.spec.ts @@ -1,7 +1,6 @@ import { ActionContext, Commit, Dispatch } from 'vuex'; import { IAppState } from './state'; import { AppActions } from './actions'; -import { AppGetters } from './getters'; describe('AppActions', () => { let testContext: ActionContext; @@ -10,10 +9,6 @@ describe('AppActions', () => { testContext = { dispatch: jest.fn() as Dispatch, commit: jest.fn() as Commit, - state: {} as IAppState, - getters: { - ...AppGetters, - }, } as ActionContext; }); diff --git a/src/app/app/getters.spec.ts b/src/app/app/getters.spec.ts index a0de4d9a..05fdbe1e 100644 --- a/src/app/app/getters.spec.ts +++ b/src/app/app/getters.spec.ts @@ -1,14 +1,19 @@ -import { AppGetters } from './getters'; -import { AppDefaultState } from './state'; +import { AppGetters } from './getters'; +import { AppDefaultState, IAppState } from './state'; describe('AppGetters', () => { + let testState: IAppState; + + beforeEach(() => { + testState = AppDefaultState(); + }); test('it should get the locale', () => { - expect(AppGetters.getLocale(AppDefaultState)).toBe(null); + expect(AppGetters.getLocale(testState)).toBe(null); }); test('it should get the cookie consent version', () => { - expect(AppGetters.cookieConsentVersion(AppDefaultState)).toBe(''); + expect(AppGetters.cookieConsentVersion(testState)).toBe(''); }); }); diff --git a/src/app/app/module.ts b/src/app/app/module.ts index 0b2c9d62..7c76b144 100644 --- a/src/app/app/module.ts +++ b/src/app/app/module.ts @@ -13,7 +13,7 @@ export const AppModule: Module = { ...AppGetters, }, state: { - ...AppDefaultState, + ...AppDefaultState(), }, mutations: { ...AppMutations, diff --git a/src/app/app/mutations.spec.ts b/src/app/app/mutations.spec.ts index dd2d916e..386be3a3 100644 --- a/src/app/app/mutations.spec.ts +++ b/src/app/app/mutations.spec.ts @@ -1,12 +1,11 @@ import { AppMutations } from './mutations'; import { AppDefaultState, IAppState } from './state'; -import { cloneDeep } from 'lodash'; describe('AppMutations', () => { let testState: IAppState; beforeEach(() => { - testState = cloneDeep(AppDefaultState); + testState = AppDefaultState(); }); test('it should change the locale', () => { diff --git a/src/app/app/state.ts b/src/app/app/state.ts index 3bf667c0..7984a281 100644 --- a/src/app/app/state.ts +++ b/src/app/app/state.ts @@ -8,10 +8,12 @@ export interface IAppState { cookieConsentVersion: string; } -export const AppDefaultState: IAppState = { - locale: null, - config: null, - defaultMessages: {}, - redirectTo: null, - cookieConsentVersion: '', +export const AppDefaultState = (): IAppState => { + return { + locale: null, + config: null, + defaultMessages: {}, + redirectTo: null, + cookieConsentVersion: '', + }; }; diff --git a/src/app/counter/actions.spec.ts b/src/app/counter/actions.spec.ts index 674fb0e5..e7d11c99 100644 --- a/src/app/counter/actions.spec.ts +++ b/src/app/counter/actions.spec.ts @@ -1,9 +1,8 @@ -import MockAdapter from 'axios-mock-adapter'; -import { HttpService } from '../shared/services/HttpService'; import { ActionContext, Commit, Dispatch } from 'vuex'; -import { CounterActions } from './actions'; +import MockAdapter from 'axios-mock-adapter'; import { CounterDefaultState, ICounterState } from './state'; -import { CounterGetters } from './getters'; +import { CounterActions } from './actions'; +import { HttpService } from '../shared/services/HttpService'; describe('CounterActions', () => { let testContext: ActionContext; @@ -13,10 +12,7 @@ describe('CounterActions', () => { testContext = { dispatch: jest.fn() as Dispatch, commit: jest.fn() as Commit, - state: CounterDefaultState, - getters: { - ...CounterGetters, - }, + state: CounterDefaultState(), } as ActionContext; mockAxios = new MockAdapter(HttpService); diff --git a/src/app/counter/getters.spec.ts b/src/app/counter/getters.spec.ts index a44aa0fd..aabbf5fc 100644 --- a/src/app/counter/getters.spec.ts +++ b/src/app/counter/getters.spec.ts @@ -1,18 +1,23 @@ -import { CounterGetters } from './getters'; -import { CounterDefaultState } from './state'; +import { CounterGetters } from './getters'; +import { CounterDefaultState, ICounterState } from './state'; describe('CounterGetters', () => { + let testState: ICounterState; + + beforeEach(() => { + testState = CounterDefaultState(); + }); test('it should get the count', () => { - expect(CounterGetters.count(CounterDefaultState)).toBe(0); + expect(CounterGetters.count(testState)).toBe(0); }); test('it should get increment pending', () => { - expect(CounterGetters.incrementPending(CounterDefaultState)).toBe(false); + expect(CounterGetters.incrementPending(testState)).toBe(false); }); test('it should get decrement pending', () => { - expect(CounterGetters.decrementPending(CounterDefaultState)).toBe(false); + expect(CounterGetters.decrementPending(testState)).toBe(false); }); }); diff --git a/src/app/counter/module.ts b/src/app/counter/module.ts index 055f2b0a..ea87f513 100644 --- a/src/app/counter/module.ts +++ b/src/app/counter/module.ts @@ -13,7 +13,7 @@ export const CounterModule: Module = { ...CounterGetters, }, state: { - ...CounterDefaultState, + ...CounterDefaultState(), }, mutations: { ...CounterMutations, diff --git a/src/app/counter/mutations.spec.ts b/src/app/counter/mutations.spec.ts index e7976e32..b566e744 100644 --- a/src/app/counter/mutations.spec.ts +++ b/src/app/counter/mutations.spec.ts @@ -1,12 +1,11 @@ import { CounterMutations } from './mutations'; import { CounterDefaultState, ICounterState } from './state'; -import { cloneDeep } from 'lodash'; describe('CounterMutations', () => { let testState: ICounterState; beforeEach(() => { - testState = cloneDeep(CounterDefaultState); + testState = CounterDefaultState(); }); test('it should set the count', () => { diff --git a/src/app/counter/state.ts b/src/app/counter/state.ts index aa681b97..54b11ba3 100644 --- a/src/app/counter/state.ts +++ b/src/app/counter/state.ts @@ -4,8 +4,10 @@ export interface ICounterState { count: number; } -export const CounterDefaultState: ICounterState = { - incrementPending: false, - decrementPending: false, - count: 0, +export const CounterDefaultState = (): ICounterState => { + return { + incrementPending: false, + decrementPending: false, + count: 0, + }; }; diff --git a/src/app/shared/styles/_variables.scss b/src/app/shared/styles/_variables.scss index a1f67f1b..9b0ae27c 100644 --- a/src/app/shared/styles/_variables.scss +++ b/src/app/shared/styles/_variables.scss @@ -352,7 +352,6 @@ $badge-warn-color: $button-warn-color; $badge-warn-bg: $button-warn-bg; /* Carousel */ - $carousel-min-height: 500px; $carousel-copyright-color: $text-color; $carousel-copyright-bottom: $space-unit * 2; diff --git a/src/app/state.ts b/src/app/state.ts index e6a81981..553c128f 100644 --- a/src/app/state.ts +++ b/src/app/state.ts @@ -10,9 +10,9 @@ export interface IState { export const DefaultState: IState = { app: { - ...AppDefaultState, + ...AppDefaultState(), }, counter: { - ...CounterDefaultState, + ...CounterDefaultState(), }, }; diff --git a/tools/generators/ast.ts b/tools/generators/ast.ts index d2d81d89..25fb779f 100644 --- a/tools/generators/ast.ts +++ b/tools/generators/ast.ts @@ -100,7 +100,7 @@ export const addModuleToState = (pathToAppActions: string, moduleName: string): file = insertAt( file, findAstNodes(sourceFile, ts.SyntaxKind.ObjectLiteralExpression, true).pop().end + 1, - `\n ${lowerFirst(moduleName)}: {\n ...${upperFirst(moduleName)}DefaultState,\n },`, + `\n ${lowerFirst(moduleName)}: {\n ...${upperFirst(moduleName)}DefaultState(),\n },`, ); const interfaces: ts.Node[] = findAstNodes(sourceFile, ts.SyntaxKind.InterfaceDeclaration, true); diff --git a/tools/generators/connected/connected.spec.ts.hbs b/tools/generators/connected/connected.spec.ts.hbs index f40fab64..f313ff84 100644 --- a/tools/generators/connected/connected.spec.ts.hbs +++ b/tools/generators/connected/connected.spec.ts.hbs @@ -15,7 +15,9 @@ describe('{{ properCase componentName }}.vue', () => { {{ camelCase moduleName }}: { namespaced: true, getters: { - getCount: () => 0, + count: () => 0, + incrementPending: () => false, + decrementPending: () => false, }, actions: { increment: jest.fn(), @@ -43,7 +45,9 @@ describe('{{ properCase componentName }}.vue', () => { {{ camelCase moduleName }}: { namespaced: true, getters: { - getCount: () => 0, + count: () => 0, + incrementPending: () => false, + decrementPending: () => false, }, actions, }, diff --git a/tools/generators/module/actions.spec.ts.hbs b/tools/generators/module/actions.spec.ts.hbs index 8007f1dc..39342da5 100644 --- a/tools/generators/module/actions.spec.ts.hbs +++ b/tools/generators/module/actions.spec.ts.hbs @@ -3,7 +3,6 @@ import { HttpService } from '../shared/services/HttpServi import { ActionContext, Commit, Dispatch } from 'vuex'; import { {{ properCase moduleName }}Actions } from './actions'; import { {{ properCase moduleName }}DefaultState, I{{ properCase moduleName }}State } from './state'; -import { {{ properCase moduleName }}Getters } from './getters'; describe('{{ properCase moduleName }}Actions', () => { let testContext: ActionContext; @@ -13,10 +12,7 @@ describe('{{ properCase moduleName }}Actions', () => { testContext = { dispatch: jest.fn() as Dispatch, commit: jest.fn() as Commit, - state: {{ properCase moduleName }}DefaultState, - getters: { - ...{{ properCase moduleName }}Getters, - }, + state: {{ properCase moduleName }}DefaultState(), } as ActionContext; mockAxios = new MockAdapter(HttpService); diff --git a/tools/generators/module/getters.spec.ts.hbs b/tools/generators/module/getters.spec.ts.hbs index a4044544..b363a9d8 100644 --- a/tools/generators/module/getters.spec.ts.hbs +++ b/tools/generators/module/getters.spec.ts.hbs @@ -1,18 +1,23 @@ import { {{ properCase moduleName }}Getters } from './getters'; -import { {{ properCase moduleName }}DefaultState } from './state'; +import { {{ properCase moduleName }}DefaultState, I{{ properCase moduleName }}State } from './state'; describe('{{ properCase moduleName }}Getters', () => { + let testState: I{{ properCase moduleName }}State; + + beforeEach(() => { + testState = {{ properCase moduleName }}DefaultState(); + }); test('it should get the count', () => { - expect({{ properCase moduleName }}Getters.count({{ properCase moduleName }}DefaultState)).toBe(0); + expect({{ properCase moduleName }}Getters.count(testState)).toBe(0); }); test('it should get increment pending', () => { - expect({{ properCase moduleName }}Getters.incrementPending({{ properCase moduleName }}DefaultState)).toBe(false); + expect({{ properCase moduleName }}Getters.incrementPending(testState)).toBe(false); }); test('it should get decrement pending', () => { - expect({{ properCase moduleName }}Getters.decrementPending({{ properCase moduleName }}DefaultState)).toBe(false); + expect({{ properCase moduleName }}Getters.decrementPending(testState)).toBe(false); }); }); diff --git a/tools/generators/module/module.ts.hbs b/tools/generators/module/module.ts.hbs index 4b5de89f..9dc5d18a 100644 --- a/tools/generators/module/module.ts.hbs +++ b/tools/generators/module/module.ts.hbs @@ -13,7 +13,7 @@ export const {{ properCase moduleName }}Module: Module { let testState: I{{ properCase moduleName }}State; beforeEach(() => { - testState = cloneDeep({{ properCase moduleName }}DefaultState); + testState = {{ properCase moduleName }}DefaultState(); }); test('it should set the count', () => { diff --git a/tools/generators/module/state.ts.hbs b/tools/generators/module/state.ts.hbs index 5e6fa8b1..6e734747 100644 --- a/tools/generators/module/state.ts.hbs +++ b/tools/generators/module/state.ts.hbs @@ -4,8 +4,10 @@ export interface I{{ properCase moduleName }}State { count: number; } -export const {{ properCase moduleName }}DefaultState: I{{ properCase moduleName }}State = { - incrementPending: false, - decrementPending: false, - count: 0, +export const {{ properCase moduleName }}DefaultState = (): I{{ properCase moduleName }}State => { + return { + incrementPending: false, + decrementPending: false, + count: 0, + }; };