Lazy-load performance bar UI48673-lazy-load-performance-bar-in-frontend

We need to eagerly load the performance bar wrapper component
(`performance_bar/index.js`) when the page is loaded and the container element
is present, to ensure that we register the interceptor early enough in the
page's lifecycle.

However, we don't need to load the UI at that point. Not doing so means that we
can let Webpack extract the UI (`performance_bar/components/*`) into its own
chunk, so users who don't see the performance bar don't have to load too much
unnecessary JavaScript.

2 files changed, 84 insertions, 60 deletions

diff --git a/spec/javascripts/performance_bar/components/performance_bar_app_spec.js b/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
index 9ab9ab1c9f4..7926db44429 100644
--- a/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
+++ b/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
@@ -1,39 +1,15 @@
 import Vue from 'vue';
-import axios from '~/lib/utils/axios_utils';
 import performanceBarApp from '~/performance_bar/components/performance_bar_app.vue';
-import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
 import PerformanceBarStore from '~/performance_bar/stores/performance_bar_store';
 
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import MockAdapter from 'axios-mock-adapter';
 
-describe('performance bar', () => {
-  let mock;
+describe('performance bar app', () => {
   let vm;
 
   beforeEach(() => {
     const store = new PerformanceBarStore();
 
-    mock = new MockAdapter(axios);
-
-    mock.onGet('/-/peek/results').reply(
-      200,
-      {
-        data: {
-          gc: {
-            invokes: 0,
-            invoke_time: '0.00',
-            use_size: 0,
-            total_size: 0,
-            total_object: 0,
-            gc_time: '0.00',
-          },
-          host: { hostname: 'web-01' },
-        },
-      },
-      {},
-    );
-
     vm = mountComponent(Vue.extend(performanceBarApp), {
       store,
       env: 'development',
@@ -45,44 +21,9 @@ describe('performance bar', () => {
 
   afterEach(() => {
     vm.$destroy();
-    mock.restore();
   });
 
   it('sets the class to match the environment', () => {
     expect(vm.$el.getAttribute('class')).toContain('development');
   });
-
-  describe('loadRequestDetails', () => {
-    beforeEach(() => {
-      spyOn(vm.store, 'addRequest').and.callThrough();
-    });
-
-    it('does nothing if the request cannot be tracked', () => {
-      spyOn(vm.store, 'canTrackRequest').and.callFake(() => false);
-
-      vm.loadRequestDetails('123', 'https://gitlab.com/');
-
-      expect(vm.store.addRequest).not.toHaveBeenCalled();
-    });
-
-    it('adds the request immediately', () => {
-      vm.loadRequestDetails('123', 'https://gitlab.com/');
-
-      expect(vm.store.addRequest).toHaveBeenCalledWith(
-        '123',
-        'https://gitlab.com/',
-      );
-    });
-
-    it('makes an HTTP request for the request details', () => {
-      spyOn(PerformanceBarService, 'fetchRequestDetails').and.callThrough();
-
-      vm.loadRequestDetails('456', 'https://gitlab.com/');
-
-      expect(PerformanceBarService.fetchRequestDetails).toHaveBeenCalledWith(
-        '/-/peek/results',
-        '456',
-      );
-    });
-  });
 });
diff --git a/spec/javascripts/performance_bar/index_spec.js b/spec/javascripts/performance_bar/index_spec.js
new file mode 100644
index 00000000000..1784bd64adb
--- /dev/null
+++ b/spec/javascripts/performance_bar/index_spec.js
@@ -0,0 +1,83 @@
+import axios from '~/lib/utils/axios_utils';
+import performanceBar from '~/performance_bar';
+import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
+
+import MockAdapter from 'axios-mock-adapter';
+
+describe('performance bar wrapper', () => {
+  let mock;
+  let vm;
+
+  beforeEach(() => {
+    const peekWrapper = document.createElement('div');
+
+    peekWrapper.setAttribute('id', 'js-peek');
+    peekWrapper.setAttribute('data-env', 'development');
+    peekWrapper.setAttribute('data-request-id', '123');
+    peekWrapper.setAttribute('data-peek-url', '/-/peek/results');
+    peekWrapper.setAttribute('data-profile-url', '?lineprofiler=true');
+
+    document.body.appendChild(peekWrapper);
+
+    mock = new MockAdapter(axios);
+
+    mock.onGet('/-/peek/results').reply(
+      200,
+      {
+        data: {
+          gc: {
+            invokes: 0,
+            invoke_time: '0.00',
+            use_size: 0,
+            total_size: 0,
+            total_object: 0,
+            gc_time: '0.00',
+          },
+          host: { hostname: 'web-01' },
+        },
+      },
+      {},
+    );
+
+    vm = performanceBar({ container: '#js-peek' });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    mock.restore();
+  });
+
+  describe('loadRequestDetails', () => {
+    beforeEach(() => {
+      spyOn(vm.store, 'addRequest').and.callThrough();
+    });
+
+    it('does nothing if the request cannot be tracked', () => {
+      spyOn(vm.store, 'canTrackRequest').and.callFake(() => false);
+
+      vm.loadRequestDetails('123', 'https://gitlab.com/');
+
+      expect(vm.store.addRequest).not.toHaveBeenCalled();
+    });
+
+    it('adds the request immediately', () => {
+      vm.loadRequestDetails('123', 'https://gitlab.com/');
+
+      expect(vm.store.addRequest).toHaveBeenCalledWith(
+        '123',
+        'https://gitlab.com/',
+      );
+    });
+
+    it('makes an HTTP request for the request details', () => {
+      spyOn(PerformanceBarService, 'fetchRequestDetails').and.callThrough();
+
+      vm.loadRequestDetails('456', 'https://gitlab.com/');
+
+      expect(PerformanceBarService.fetchRequestDetails).toHaveBeenCalledWith(
+        '/-/peek/results',
+        '456',
+      );
+    });
+  });
+});