Refactored merge_requests/show path in dispatcher.js

4 files changed, 35 insertions, 33 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index aceaffdfcb9..f8082c74943 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -1,15 +1,9 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
-import MergeRequest from './merge_request';
 import Flash from './flash';
 import GfmAutoComplete from './gfm_auto_complete';
-import ZenMode from './zen_mode';
-import initNotes from './init_notes';
-import initIssuableSidebar from './init_issuable_sidebar';
 import { convertPermissionToBoolean } from './lib/utils/common_utils';
 import GlFieldErrors from './gl_field_errors';
 import Shortcuts from './shortcuts';
-import ShortcutsIssuable from './shortcuts_issuable';
-import Diff from './diff';
 import SearchAutocomplete from './search_autocomplete';
 
 var Dispatcher;
@@ -262,17 +256,10 @@ var Dispatcher;
             .catch(fail);
           break;
         case 'projects:merge_requests:show':
-          new Diff();
-          new ZenMode();
-
-          initIssuableSidebar();
-          initNotes();
-
-          const mrShowNode = document.querySelector('.merge-request');
-          window.mergeRequest = new MergeRequest({
-            action: mrShowNode.dataset.mrAction,
-          });
-          shortcut_handler = new ShortcutsIssuable(true);
+          import('./pages/projects/merge_requests/show')
+            .then(callDefault)
+            .catch(fail);
+          shortcut_handler = true;
           break;
         case 'dashboard:activity':
           import('./pages/dashboard/activity')
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index d0f9e6af0f8..d200044b79f 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -1,5 +1,4 @@
-/* global autosize */
-
+import autosize from 'autosize';
 import GfmAutoComplete from './gfm_auto_complete';
 import dropzoneInput from './dropzone_input';
 import textUtils from './lib/utils/text_markdown';
diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
new file mode 100644
index 00000000000..c3463c266e3
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
@@ -0,0 +1,24 @@
+import MergeRequest from '~/merge_request';
+import ZenMode from '~/zen_mode';
+import initNotes from '~/init_notes';
+import initIssuableSidebar from '~/init_issuable_sidebar';
+import ShortcutsIssuable from '~/shortcuts_issuable';
+import Diff from '~/diff';
+import { handleLocationHash } from '~/lib/utils/common_utils';
+
+export default () => {
+  new Diff(); // eslint-disable-line no-new
+  new ZenMode(); // eslint-disable-line no-new
+
+  initIssuableSidebar(); // eslint-disable-line no-new
+  initNotes(); // eslint-disable-line no-new
+
+  const mrShowNode = document.querySelector('.merge-request');
+
+  window.mergeRequest = new MergeRequest({
+    action: mrShowNode.dataset.mrAction,
+  });
+
+  new ShortcutsIssuable(true); // eslint-disable-line no-new
+  handleLocationHash();
+};
diff --git a/spec/javascripts/gl_form_spec.js b/spec/javascripts/gl_form_spec.js
index 5a8009e57fd..9c1fc0fda9e 100644
--- a/spec/javascripts/gl_form_spec.js
+++ b/spec/javascripts/gl_form_spec.js
@@ -1,10 +1,8 @@
-import Autosize from 'autosize';
+import autosize from 'autosize';
 import GLForm from '~/gl_form';
 import '~/lib/utils/text_utility';
 import '~/lib/utils/common_utils';
 
-window.autosize = Autosize;
-
 describe('GLForm', () => {
   describe('when instantiated', function () {
     beforeEach((done) => {
@@ -13,14 +11,12 @@ describe('GLForm', () => {
       spyOn($.prototype, 'off').and.returnValue(this.textarea);
       spyOn($.prototype, 'on').and.returnValue(this.textarea);
       spyOn($.prototype, 'css');
-      spyOn(window, 'autosize');
 
-      this.glForm = new GLForm(this.form);
+      this.glForm = new GLForm(this.form, false);
       setTimeout(() => {
         $.prototype.off.calls.reset();
         $.prototype.on.calls.reset();
         $.prototype.css.calls.reset();
-        window.autosize.calls.reset();
         done();
       });
     });
@@ -43,10 +39,6 @@ describe('GLForm', () => {
         expect($.prototype.on).toHaveBeenCalledWith('mouseup.autosize', jasmine.any(Function));
       });
 
-      it('should autosize the textarea', () => {
-        expect(window.autosize).toHaveBeenCalledWith(jasmine.any(Object));
-      });
-
       it('should set the resize css property to vertical', () => {
         expect($.prototype.css).toHaveBeenCalledWith('resize', 'vertical');
       });
@@ -74,7 +66,7 @@ describe('GLForm', () => {
           spyOn($.prototype, 'data');
           spyOn($.prototype, 'outerHeight').and.returnValue(200);
           spyOn(window, 'outerHeight').and.returnValue(400);
-          spyOn(window.autosize, 'destroy');
+          spyOn(autosize, 'destroy');
 
           this.glForm.destroyAutosize();
         });
@@ -88,7 +80,7 @@ describe('GLForm', () => {
         });
 
         it('should call autosize destroy', () => {
-          expect(window.autosize.destroy).toHaveBeenCalledWith(this.textarea);
+          expect(autosize.destroy).toHaveBeenCalledWith(this.textarea);
         });
 
         it('should set the data-height attribute', () => {
@@ -107,9 +99,9 @@ describe('GLForm', () => {
       it('should return undefined if the data-height equals the outerHeight', () => {
         spyOn($.prototype, 'outerHeight').and.returnValue(200);
         spyOn($.prototype, 'data').and.returnValue(200);
-        spyOn(window.autosize, 'destroy');
+        spyOn(autosize, 'destroy');
         expect(this.glForm.destroyAutosize()).toBeUndefined();
-        expect(window.autosize.destroy).not.toHaveBeenCalled();
+        expect(autosize.destroy).not.toHaveBeenCalled();
       });
     });
   });