From 8e1a8deee39fae94f43ef0c974e56abf23e5b4b3 Mon Sep 17 00:00:00 2001 From: Sean McGivern Date: Fri, 13 Jul 2018 10:57:20 +0100 Subject: Lazy-load performance bar UI 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. --- .../components/performance_bar_app_spec.js | 61 +--------------- spec/javascripts/performance_bar/index_spec.js | 83 ++++++++++++++++++++++ 2 files changed, 84 insertions(+), 60 deletions(-) create mode 100644 spec/javascripts/performance_bar/index_spec.js (limited to 'spec/javascripts') 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', + ); + }); + }); +}); -- cgit v1.2.1