Commit e100124a authored by Tim Zallmann's avatar Tim Zallmann

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

Remove DOMContentLoaded Eventlistener from Performance Bar index

See merge request gitlab-org/gitlab!51204
parents cf21460b 625c4e42
...@@ -11,6 +11,9 @@ import initPerformanceBarLog from './performance_bar_log'; ...@@ -11,6 +11,9 @@ import initPerformanceBarLog from './performance_bar_log';
Vue.use(Translate); Vue.use(Translate);
const initPerformanceBar = (el) => { const initPerformanceBar = (el) => {
if (!el) {
return undefined;
}
const performanceBarData = el.dataset; const performanceBarData = el.dataset;
return new Vue({ return new Vue({
...@@ -126,25 +129,7 @@ const initPerformanceBar = (el) => { ...@@ -126,25 +129,7 @@ const initPerformanceBar = (el) => {
}); });
}; };
let loadedPeekBar = false; initPerformanceBar(document.querySelector('#js-peek'));
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();
});
initPerformanceBarLog(); initPerformanceBarLog();
export default initPerformanceBar; export default initPerformanceBar;
...@@ -4,25 +4,23 @@ import '~/performance_bar/components/performance_bar_app.vue'; ...@@ -4,25 +4,23 @@ import '~/performance_bar/components/performance_bar_app.vue';
import performanceBar from '~/performance_bar'; import performanceBar from '~/performance_bar';
import PerformanceBarService from '~/performance_bar/services/performance_bar_service'; import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
jest.mock('~/performance_bar/performance_bar_log');
describe('performance bar wrapper', () => { describe('performance bar wrapper', () => {
let mock; let mock;
let vm; let vm;
beforeEach(() => { beforeEach(() => {
setFixtures('<div id="js-peek"></div>');
const peekWrapper = document.getElementById('js-peek');
performance.getEntriesByType = jest.fn().mockReturnValue([]); 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('id', 'js-peek');
peekWrapper.setAttribute('data-env', 'development'); peekWrapper.setAttribute('data-env', 'development');
peekWrapper.setAttribute('data-request-id', '123'); peekWrapper.setAttribute('data-request-id', '123');
peekWrapper.setAttribute('data-peek-url', '/-/peek/results'); peekWrapper.setAttribute('data-peek-url', '/-/peek/results');
peekWrapper.setAttribute('data-profile-url', '?lineprofiler=true'); peekWrapper.setAttribute('data-profile-url', '?lineprofiler=true');
document.body.appendChild(peekWrapper);
mock = new MockAdapter(axios); mock = new MockAdapter(axios);
mock.onGet('/-/peek/results').reply( mock.onGet('/-/peek/results').reply(
...@@ -48,6 +46,7 @@ describe('performance bar wrapper', () => { ...@@ -48,6 +46,7 @@ describe('performance bar wrapper', () => {
afterEach(() => { afterEach(() => {
vm.$destroy(); vm.$destroy();
document.getElementById('js-peek').remove();
mock.restore(); mock.restore();
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment