Merge branch 'ide-refactor-store-extend-into-plugins' into 'master'

Refactor EE IDE store extend into plugins

See merge request gitlab-org/gitlab-ee!11481

ee/app/assets/javascripts/ide/stores/extend.js

-import * as mutationTypes from '~/ide/stores/mutation_types';
-import terminalModule from './modules/terminal';
+import terminal from './plugins/terminal';
 
-function getPathsFromData(el) {
-  return {
-    webTerminalSvgPath: el.dataset.eeWebTerminalSvgPath,
-    webTerminalHelpPath: el.dataset.eeWebTerminalHelpPath,
-    webTerminalConfigHelpPath: el.dataset.eeWebTerminalConfigHelpPath,
-    webTerminalRunnersHelpPath: el.dataset.eeWebTerminalRunnersHelpPath,
-  };
-}
+const plugins = [terminal];
 
 export default (store, el) => {
-  store.registerModule('terminal', terminalModule());
-
-  store.dispatch('terminal/setPaths', getPathsFromData(el));
-
-  store.subscribe(({ type }) => {
-    if (type === mutationTypes.SET_BRANCH_WORKING_REFERENCE) {
-      store.dispatch('terminal/init');
-    }
-  });
+  // plugins is actually an array of plugin factories, so we have to create first then call
+  plugins.forEach(plugin => plugin(el)(store));
 
   return store;
 };

ee/app/assets/javascripts/ide/stores/plugins/terminal.js

+import * as mutationTypes from '~/ide/stores/mutation_types';
+import terminalModule from '../modules/terminal';
+
+function getPathsFromData(el) {
+  return {
+    webTerminalSvgPath: el.dataset.eeWebTerminalSvgPath,
+    webTerminalHelpPath: el.dataset.eeWebTerminalHelpPath,
+    webTerminalConfigHelpPath: el.dataset.eeWebTerminalConfigHelpPath,
+    webTerminalRunnersHelpPath: el.dataset.eeWebTerminalRunnersHelpPath,
+  };
+}
+
+export default function createTerminalPlugin(el) {
+  return store => {
+    store.registerModule('terminal', terminalModule());
+
+    store.dispatch('terminal/setPaths', getPathsFromData(el));
+
+    store.subscribe(({ type }) => {
+      if (type === mutationTypes.SET_BRANCH_WORKING_REFERENCE) {
+        store.dispatch('terminal/init');
+      }
+    });
+  };
+}

ee/spec/frontend/ide/stores/extend_spec.js

+import extendStore from 'ee/ide/stores/extend';
+import terminalPlugin from 'ee/ide/stores/plugins/terminal';
+
+jest.mock('ee/ide/stores/plugins/terminal', () => {
+  const plugin = jest.fn();
+  return jest.fn(() => plugin);
+});
+
+describe('ee/ide/stores/extend', () => {
+  let store;
+  let el;
+
+  beforeEach(() => {
+    store = {};
+    el = {};
+
+    extendStore(store, el);
+  });
+
+  it('creates terminal plugin', () => {
+    expect(terminalPlugin).toHaveBeenCalledWith(el);
+  });
+
+  it('calls terminal plugin', () => {
+    expect(terminalPlugin()).toHaveBeenCalledWith(store);
+  });
+});

ee/spec/javascripts/ide/stores/extend_spec.js → ee/spec/frontend/ide/stores/plugins/terminal_spec.js

 import { createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { SET_BRANCH_WORKING_REFERENCE } from '~/ide/stores/mutation_types';
-import { TEST_HOST } from 'spec/test_constants';
+import { TEST_HOST } from 'helpers/test_constants';
 import terminalModule from 'ee/ide/stores/modules/terminal';
-import extendStore from 'ee/ide/stores/extend';
+import createTerminalPlugin from 'ee/ide/stores/plugins/terminal';
 
 const TEST_DATASET = {
   eeWebTerminalSvgPath: `${TEST_HOST}/web/terminal/svg`,
@@ -27,10 +27,12 @@ describe('ee/ide/stores/extend', () => {
       },
     });
 
-    spyOn(store, 'registerModule');
-    spyOn(store, 'dispatch');
+    jest.spyOn(store, 'registerModule').mockImplementation();
+    jest.spyOn(store, 'dispatch').mockImplementation();
 
-    store = extendStore(store, el);
+    const plugin = createTerminalPlugin(el);
+
+    plugin(store);
   });
 
   it('registers terminal module', () => {
@@ -47,7 +49,7 @@ describe('ee/ide/stores/extend', () => {
   });
 
   it(`dispatches terminal/init on ${SET_BRANCH_WORKING_REFERENCE}`, () => {
-    store.dispatch.calls.reset();
+    store.dispatch.mockReset();
 
     store.commit(SET_BRANCH_WORKING_REFERENCE);