Migrating to direct-vuex (runtime esm & systemJs is ok), but jest SomeForm actions.spec.ts is failed

Author: Пинчук Виталий А

gulpfile.esm.js

@@ -88,6 +88,8 @@ task('postdeploy.dev:fixImportsInIndex',
 		`${absDest}/**/index.js`,
 	])
 		// my export with singlequoted paths
+		// TODO: create common regexp for resolving modules
+		.pipe(gReplace(/from[\s]?['|"]direct-vuex['|"]/g, `from '${esmImportmapPaths['direct-vuex']}'`))
 		.pipe(gReplace(/^(?!.*(\.js|=))(.*)(";)/gm, '$2.js$3'))
 		.pipe(dest(absDest)));
 

src/VueApp/store/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 export {
 	moduleActionContext,
 	store,

src/VueApp/store/modules.conf.ts

@@ -1,8 +1,8 @@
 // modules.conf filename because of gulp task 'postdeploy.dev:fixImportsNotInIndex'
 // not in index because of replacing assets not in index
 // TODO: make gulp working with store/index.js (simple vuex-modules)
-import { name as storeNameSomeForm, storeConf as storeConfSomeForm } from '@unique/SomeForm/store';
+import { name as storeNameSomeForm, modSomeForm } from '@unique/SomeForm/store';
 
 export const modulesConf = {
-	[storeNameSomeForm]: storeConfSomeForm,
+	[storeNameSomeForm]: modSomeForm,
 };

src/unique.blocks/SomeForm/SomeForm.spec.ts

@@ -1,9 +1,10 @@
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { createDirectStore } from 'direct-vuex';
 
 import { IamSelect } from '@common/IamSelect';
 
-import { storeConf as moduleStoreConf, name as moduleStoreName } from './store';
+import { modSomeForm, name as moduleStoreName } from './store';
 import { SomeForm } from './index';
 // import { resolvedOptions } from '@services/SomeSvc/SomeSvc.spec.case01.ts';
 
@@ -15,11 +16,12 @@ localVue.use(Vuex);
 
 const storeConf = {
 	modules: {
-		[moduleStoreName]: moduleStoreConf,
+		[moduleStoreName]: modSomeForm,
 	},
 };
 
-const store = new Vuex.Store(storeConf);
+// const store = new Vuex.Store(storeConf);
+const { store } = createDirectStore(storeConf);
 
 describe('@Component SomeForm', () => {
 	it('all mock data are rendered', () => {

src/unique.blocks/SomeForm/store/actions.spec.ts

@@ -1,9 +1,9 @@
-import * as actions from './actions';
+import { actions } from './actions';
 import * as confMutations from './mutations.conf';
 
 jest.mock('@services/SomeSvc/SomeSvc.ts');
 
-// @common/IamSelect >>>
+// #region @common/IamSelect
 // Пишем простейшие тесты, чтобы при рефакторинге actions, видеть, что не отвалились
 describe('vuex SomeForm IamSelect actions', () => {
 	it('getPoints after getting data raise appropriate action', async () => {
@@ -37,4 +37,4 @@ describe('vuex SomeForm IamSelect actions', () => {
 		expect(commit).toHaveBeenCalledWith(confMutations.SOME_VALUE_SELECT, someValue);
 	});
 });
-// <<< @common/IamSelect
+// #endregion

src/unique.blocks/SomeForm/store/actions.ts

@@ -1,23 +1,49 @@
+import { ActionContext } from 'vuex';
+import DirectVuex from 'direct-vuex';
+
 import { IOption as ISomeValue } from '@common/IamSelect/IamSelect.option.i';
 import { SomeSvc } from '@services/SomeSvc';
-// import { moduleActionContext } from '~/VueApp/store';
+import { moduleActionContext } from '~/VueApp/store';
+
+/* eslint-disable import/no-cycle */
+import { modSomeForm } from '.';
 
 import * as mutationTypes from './mutations.conf';
+import { IState } from './state.i';
+
+// Not naming imported cause of SystemJs import only default
+// https://github.com/paleo/direct-vuex/issues/14#issuecomment-568543969
+const { createActions } = DirectVuex;
+
+export const modSomeFormActionContext = (ctx: any) => moduleActionContext(ctx, modSomeForm);
+
+export const actions = createActions({
+	getSomeValues(
+		// commit полученных данных выполняется другим (синхронным) action, потому dispatch
+		// { dispatch }: { dispatch: Function },
+		context: ActionContext<IState, IState>,
+		{ label }: ISomeValue,
+	): Promise <Array<ISomeValue> | void> {
+		return SomeSvc
+			.fetchData({ label }) // Все опции запроса в одном параметре-объекте (помимо label)
+			.then((resp) => {
+				// const { dispatch } = context;
+				const { dispatch } = modSomeFormActionContext(context);
+				dispatch.setSomeValues(resp);
+			});
+	},
+
+	setSomeValues(
+		{ commit }: { commit: Function },
+		values: Array<ISomeValue>,
+	): void {
+		commit(mutationTypes.SOME_VALUES_SET, values);
+	},
 
-export const getSomeValues = (
-	// commit полученных данных выполняется другим (синхронным) action, потому dispatch
-	{ dispatch }: { dispatch: Function },
-	{ label }: ISomeValue,
-): Promise <Array<ISomeValue> | void> => SomeSvc
-	.fetchData({ label }) // Все опции запроса в одном параметре-объекте (помимо label)
-	.then((resp) => dispatch('setSomeValues', resp));
-
-export const setSomeValues = (
-	{ commit }: { commit: Function },
-	values: Array<ISomeValue>,
-): void => commit(mutationTypes.SOME_VALUES_SET, values);
-
-export const selectSomeValue = (
-	{ commit }: { commit: Function },
-	value: ISomeValue | null,
-): void => commit(mutationTypes.SOME_VALUE_SELECT, value);
+	selectSomeValue(
+		{ commit }: { commit: Function },
+		value: ISomeValue | null,
+	): void {
+		commit(mutationTypes.SOME_VALUE_SELECT, value);
+	},
+});

src/unique.blocks/SomeForm/store/getters.ts

@@ -0,0 +1,6 @@
+import { IOption as ISomeValue } from '@common/IamSelect/IamSelect.option.i';
+
+import { IState } from './state.i';
+
+export const someValue = (state: IState): ISomeValue | null => state.iamSelect.value;
+export const someValues = (state: IState): Array<ISomeValue> => state.iamSelect.data.options;

src/unique.blocks/SomeForm/store/index.ts

@@ -1,7 +1,10 @@
-import { IOption as ISomeValue } from '@common/IamSelect/IamSelect.option.i';
+import DirectVuex from 'direct-vuex';
 
-import * as actions from './actions';
-import * as mutationTypes from './mutations.conf';
+/* eslint-disable import/no-cycle */
+import { actions } from './actions';
+
+import * as getters from './getters';
+import { mutations } from './mutations';
 import { IState } from './state.i';
 
 const defaultState: IState = {
@@ -13,20 +16,6 @@ const defaultState: IState = {
 	},
 };
 
-const getters = {
-	someValue: (state: IState): ISomeValue | null => state.iamSelect.value,
-	someValues: (state: IState): Array<ISomeValue> => state.iamSelect.data.options,
-};
-
-const mutations = {
-	[mutationTypes.SOME_VALUE_SELECT](state: IState, value: ISomeValue): void {
-		state.iamSelect.value = value;
-	},
-	[mutationTypes.SOME_VALUES_SET](state: IState, values: Array<ISomeValue>): void {
-		state.iamSelect.data.options = values;
-	},
-};
-
 export const name = 'someForm';
 
 export const storeConf = {
@@ -39,3 +28,9 @@ export const storeConf = {
 	// but we declare type with const above
 	// state: defaultState as IState,
 } as const;
+
+// Not naming imported cause of SystemJs import only default
+// https://github.com/paleo/direct-vuex/issues/14#issuecomment-568543969
+const { createModule } = DirectVuex;
+
+export const modSomeForm = createModule(storeConf);

src/unique.blocks/SomeForm/store/mutations.conf.ts

@@ -1,7 +1,7 @@
-// @common/IamSelect >>>
+// #region @common/IamSelect
 // select, чтобы не путать с set, поскольку значение не абы какое,
 // а соответствует одному из имеющихся в store
 export const SOME_VALUE_SELECT = 'SOME_VALUE_SELECT';
 // set подразумевает замещение данных
 export const SOME_VALUES_SET = 'SOME_VALUES_SET';
-// <<< @common/IamSelect
+// #endregion

src/unique.blocks/SomeForm/store/mutations.ts

@@ -0,0 +1,13 @@
+import { IOption as ISomeValue } from '@common/IamSelect/IamSelect.option.i';
+
+import { IState } from './state.i';
+import * as mutationTypes from './mutations.conf';
+
+export const mutations = {
+	[mutationTypes.SOME_VALUE_SELECT](state: IState, value: ISomeValue): void {
+		state.iamSelect.value = value;
+	},
+	[mutationTypes.SOME_VALUES_SET](state: IState, values: Array<ISomeValue>): void {
+		state.iamSelect.data.options = values;
+	},
+};