Merge branch 'performanceBar-performance-optimization' into 'master'

Remove DOMContentLoaded Eventlistener from Performance Bar index

See merge request gitlab-org/gitlab!51204

app/assets/javascripts/performance_bar/index.js

@@ -11,6 +11,9 @@ import initPerformanceBarLog from './performance_bar_log';
 Vue.use(Translate);
 
 const initPerformanceBar = (el) => {
+  if (!el) {
+    return undefined;
+  }
   const performanceBarData = el.dataset;
 
   return new Vue({
@@ -126,25 +129,7 @@ const initPerformanceBar = (el) => {
   });
 };
 
-let loadedPeekBar = false;
-function loadBar() {
-  const jsPeek = document.querySelector('#js-peek');
-  if (!loadedPeekBar && jsPeek) {
-    loadedPeekBar = true;
-    initPerformanceBar(jsPeek);
-  }
-}
-
-// If js-peek is not loaded when this script is executed, this call will do nothing
-// If this is the case, then it will loadBar on DOMContentLoaded. We would prefer it
-// to be initialized before the DOMContetLoaded event in order to pick up all the
-// requests sent from the page.
-loadBar();
-
-document.addEventListener('DOMContentLoaded', () => {
-  loadBar();
-});
-
+initPerformanceBar(document.querySelector('#js-peek'));
 initPerformanceBarLog();
 
 export default initPerformanceBar;

spec/frontend/performance_bar/index_spec.js

@@ -4,25 +4,23 @@ import '~/performance_bar/components/performance_bar_app.vue';
 import performanceBar from '~/performance_bar';
 import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
 
+jest.mock('~/performance_bar/performance_bar_log');
+
 describe('performance bar wrapper', () => {
   let mock;
   let vm;
 
   beforeEach(() => {
+    setFixtures('<div id="js-peek"></div>');
+    const peekWrapper = document.getElementById('js-peek');
     performance.getEntriesByType = jest.fn().mockReturnValue([]);
 
-    // clear html so that elements from previous tests don't mess with this test
-    document.body.innerHTML = '';
-    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(
@@ -48,6 +46,7 @@ describe('performance bar wrapper', () => {
 
   afterEach(() => {
     vm.$destroy();
+    document.getElementById('js-peek').remove();
     mock.restore();
   });