refactor(vuex): change default-state object to a factory function (#183)

closes #182
vuesion · Jul 25, 2018 · 66d31fb · 66d31fb
1 parent da9422f
commit 66d31fb
Show file tree

Hide file tree

Showing 21 changed files with 73 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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<IAppState, IAppState>;
@@ -10,10 +9,6 @@ describe('AppActions', () => {
     testContext = {
       dispatch: jest.fn() as Dispatch,
       commit:   jest.fn() as Commit,
-      state:    {} as IAppState,
-      getters:  {
-        ...AppGetters,
-      },
     }  as ActionContext<IAppState, IAppState>;
   });
 

diff --git 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
@@ -13,7 +13,7 @@ export const AppModule: Module<IAppState, IAppState> = {
     ...AppGetters,
   },
   state:      {
-    ...AppDefaultState,
+    ...AppDefaultState(),
   },
   mutations:  {
     ...AppMutations,

diff --git 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
@@ -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
@@ -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<ICounterState, ICounterState>;
@@ -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<ICounterState, ICounterState>;
 
     mockAxios = new MockAdapter(HttpService);

diff --git 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
@@ -13,7 +13,7 @@ export const CounterModule: Module<ICounterState, ICounterState> = {
     ...CounterGetters,
   },
   state:      {
-    ...CounterDefaultState,
+    ...CounterDefaultState(),
   },
   mutations:  {
     ...CounterMutations,

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<I{{ properCase moduleName }}State, I{{ properCase moduleName }}State>;
@@ -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<I{{ properCase moduleName }}State, I{{ properCase moduleName }}State>;
 
     mockAxios = new MockAdapter(HttpService);

diff --git 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
@@ -13,7 +13,7 @@ export const {{ properCase moduleName }}Module: Module<I{{ properCase moduleName
     ...{{ properCase moduleName }}Getters,
   },
   state:      {
-    ...{{ properCase moduleName }}DefaultState,
+    ...{{ properCase moduleName }}DefaultState(),
   },
   mutations:  {
     ...{{ properCase moduleName }}Mutations,

diff --git a/tools/generators/module/mutations.spec.ts.hbs b/tools/generators/module/mutations.spec.ts.hbs
@@ -1,12 +1,11 @@
 import { {{ properCase moduleName }}Mutations }                   from './mutations';
 import { {{ properCase moduleName }}DefaultState, I{{ properCase moduleName }}State } from './state';
-import { cloneDeep }                          from 'lodash';
 
 describe('{{ properCase moduleName }}Mutations', () => {
   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
@@ -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,
+  };
 };
-Original file line number
+Diff line change
@@ Expand Up @@
     ...
       counter: {
-        ...CounterDefaultState,
+        ...CounterDefaultState(),
       },
     ```
@@ Expand Down @@