Move store initialization out of job_app component

**Why?**
This was causing things to be very difficult to test
at the component level

app/assets/javascripts/jobs/components/job_app.vue

@@ -8,7 +8,6 @@ import { polyfillSticky } from '~/lib/utils/sticky';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
 import Callout from '~/vue_shared/components/callout.vue';
 import Icon from '~/vue_shared/components/icon.vue';
-import createStore from '../store';
 import EmptyState from './empty_state.vue';
 import EnvironmentsBlock from './environments_block.vue';
 import ErasedBlock from './erased_block.vue';
@@ -22,7 +21,6 @@ import { isNewJobLogActive } from '../store/utils';
 
 export default {
   name: 'JobPageApp',
-  store: createStore(),
   components: {
     CiHeader,
     Callout,
@@ -60,27 +58,15 @@ export default {
       required: false,
       default: null,
     },
-    endpoint: {
-      type: String,
-      required: true,
-    },
     terminalPath: {
       type: String,
       required: false,
       default: null,
     },
-    pagePath: {
-      type: String,
-      required: true,
-    },
     projectPath: {
       type: String,
       required: true,
     },
-    logState: {
-      type: String,
-      required: true,
-    },
     subscriptionsMoreMinutesUrl: {
       type: String,
       required: false,
@@ -161,15 +147,6 @@ export default {
   created() {
     this.throttled = _.throttle(this.toggleScrollButtons, 100);
 
-    this.setJobEndpoint(this.endpoint);
-    this.setTraceOptions({
-      logState: this.logState,
-      pagePath: this.pagePath,
-    });
-
-    this.fetchJob();
-    this.fetchTrace();
-
     window.addEventListener('resize', this.onResize);
     window.addEventListener('scroll', this.updateScroll);
   },
@@ -184,14 +161,10 @@ export default {
   },
   methods: {
     ...mapActions([
-      'setJobEndpoint',
-      'setTraceOptions',
-      'fetchJob',
       'fetchJobsForStage',
       'hideSidebar',
       'showSidebar',
       'toggleSidebar',
-      'fetchTrace',
       'scrollBottom',
       'scrollTop',
       'stopPollingTrace',
@@ -227,7 +200,7 @@ export default {
   <div>
     <gl-loading-icon
       v-if="isLoading"
-      :size="2"
+      size="lg"
       class="js-job-loading qa-loading-animation prepend-top-20"
     />
 

app/assets/javascripts/jobs/index.js

 import Vue from 'vue';
 import JobApp from './components/job_app.vue';
+import createStore from './store';
 
 export default () => {
   const element = document.getElementById('js-job-vue-app');
 
+  const store = createStore();
+
+  // Let's start initializing the store (i.e. fetching data) right away
+  store.dispatch('init', element.dataset);
+
   return new Vue({
     el: element,
+    store,
     components: {
       JobApp,
     },

app/assets/javascripts/jobs/store/actions.js

@@ -14,6 +14,16 @@ import {
   scrollUp,
 } from '~/lib/utils/scroll_utils';
 
+export const init = ({ dispatch }, { endpoint, logState, pagePath }) => {
+  dispatch('setJobEndpoint', endpoint);
+  dispatch('setTraceOptions', {
+    logState,
+    pagePath,
+  });
+
+  return Promise.all([dispatch('fetchJob'), dispatch('fetchTrace')]);
+};
+
 export const setJobEndpoint = ({ commit }, endpoint) => commit(types.SET_JOB_ENDPOINT, endpoint);
 export const setTraceOptions = ({ commit }, options) => commit(types.SET_TRACE_OPTIONS, options);
 

spec/javascripts/jobs/components/job_app_spec.js

@@ -4,7 +4,7 @@ import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper
 import { waitForMutation } from 'spec/helpers/vue_test_utils_helper';
 import axios from '~/lib/utils/axios_utils';
 import jobApp from '~/jobs/components/job_app.vue';
-import createStore, { initStore } from '~/jobs/store';
+import createStore from '~/jobs/store';
 import * as types from '~/jobs/store/mutation_types';
 import job from '../mock_data';
 
@@ -15,7 +15,7 @@ describe('Job App ', () => {
   let vm;
   let mock;
 
-  const settings = {
+  const initSettings = {
     endpoint: `${gl.TEST_HOST}jobs/123.json`,
     pagePath: `${gl.TEST_HOST}jobs/123`,
     logState:
@@ -34,10 +34,10 @@ describe('Job App ', () => {
 
   const waitForJobReceived = () => waitForMutation(store, types.RECEIVE_JOB_SUCCESS);
   const setupAndMount = ({ jobData = {}, traceData = {} } = {}) => {
-    mock.onGet(settings.endpoint).replyOnce(200, { ...job, ...jobData });
-    mock.onGet(`${settings.pagePath}/trace.json`).reply(200, traceData);
+    mock.onGet(initSettings.endpoint).replyOnce(200, { ...job, ...jobData });
+    mock.onGet(`${initSettings.pagePath}/trace.json`).reply(200, traceData);
 
-    initStore(store, settings);
+    store.dispatch('init', initSettings);
 
     vm = mountComponentWithStore(Component, { props, store });