diff options
Diffstat (limited to 'spec/frontend/performance_bar')
4 files changed, 52 insertions, 44 deletions
diff --git a/spec/frontend/performance_bar/components/detailed_metric_spec.js b/spec/frontend/performance_bar/components/detailed_metric_spec.js index c35bd772c86..2ae36740dfb 100644 --- a/spec/frontend/performance_bar/components/detailed_metric_spec.js +++ b/spec/frontend/performance_bar/components/detailed_metric_spec.js @@ -1,10 +1,11 @@ import { shallowMount } from '@vue/test-utils'; +import { GlDropdownItem } from '@gitlab/ui'; import { nextTick } from 'vue'; import { trimText } from 'helpers/text_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import DetailedMetric from '~/performance_bar/components/detailed_metric.vue'; import RequestWarning from '~/performance_bar/components/request_warning.vue'; -import { sortOrders } from '~/performance_bar/constants'; +import { sortOrders, sortOrderOptions } from '~/performance_bar/constants'; describe('detailedMetric', () => { let wrapper; @@ -29,7 +30,13 @@ describe('detailedMetric', () => { const findExpandBacktraceBtns = () => wrapper.findAllByTestId('backtrace-expand-btn'); const findExpandedBacktraceBtnAtIndex = (index) => findExpandBacktraceBtns().at(index); const findDetailsLabel = () => wrapper.findByTestId('performance-bar-details-label'); - const findSortOrderSwitcher = () => wrapper.findByTestId('performance-bar-sort-order'); + const findSortOrderDropdown = () => wrapper.findByTestId('performance-bar-sort-order'); + const clickSortOrderDropdownItem = (sortOrder) => + findSortOrderDropdown() + .findAllComponents(GlDropdownItem) + .filter((item) => item.text() === sortOrderOptions[sortOrder]) + .at(0) + .vm.$emit('click'); const findEmptyDetailNotice = () => wrapper.findByTestId('performance-bar-empty-detail-notice'); const findAllDetailDurations = () => wrapper.findAllByTestId('performance-item-duration').wrappers.map((w) => w.text()); @@ -86,7 +93,7 @@ describe('detailedMetric', () => { }); it('does not display sort by switcher', () => { - expect(findSortOrderSwitcher().exists()).toBe(false); + expect(findSortOrderDropdown().exists()).toBe(false); }); }); @@ -216,7 +223,7 @@ describe('detailedMetric', () => { }); it('does not display sort by switcher', () => { - expect(findSortOrderSwitcher().exists()).toBe(false); + expect(findSortOrderDropdown().exists()).toBe(false); }); it('adds a modal with a table of the details', () => { @@ -323,14 +330,15 @@ describe('detailedMetric', () => { }); it('displays sort by switcher', () => { - expect(findSortOrderSwitcher().exists()).toBe(true); + expect(findSortOrderDropdown().exists()).toBe(true); }); - it('allows switch sorting orders', async () => { - findSortOrderSwitcher().vm.$emit('input', sortOrders.CHRONOLOGICAL); + it('changes sortOrder on select', async () => { + clickSortOrderDropdownItem(sortOrders.CHRONOLOGICAL); await nextTick(); expect(findAllDetailDurations()).toEqual(['23ms', '100ms', '75ms']); - findSortOrderSwitcher().vm.$emit('input', sortOrders.DURATION); + + clickSortOrderDropdownItem(sortOrders.DURATION); await nextTick(); expect(findAllDetailDurations()).toEqual(['100ms', '75ms', '23ms']); }); diff --git a/spec/frontend/performance_bar/components/performance_bar_app_spec.js b/spec/frontend/performance_bar/components/performance_bar_app_spec.js index 67a4259a8e3..2c9ab4bf78d 100644 --- a/spec/frontend/performance_bar/components/performance_bar_app_spec.js +++ b/spec/frontend/performance_bar/components/performance_bar_app_spec.js @@ -18,4 +18,15 @@ describe('performance bar app', () => { it('sets the class to match the environment', () => { expect(wrapper.element.getAttribute('class')).toContain('development'); }); + + describe('changeCurrentRequest', () => { + it('emits a change-request event', () => { + expect(wrapper.emitted('change-request')).toBeUndefined(); + + wrapper.vm.changeCurrentRequest('123'); + + expect(wrapper.emitted('change-request')).toBeDefined(); + expect(wrapper.emitted('change-request')[0]).toEqual(['123']); + }); + }); }); diff --git a/spec/frontend/performance_bar/components/request_selector_spec.js b/spec/frontend/performance_bar/components/request_selector_spec.js deleted file mode 100644 index 9cc8c5e73f4..00000000000 --- a/spec/frontend/performance_bar/components/request_selector_spec.js +++ /dev/null @@ -1,31 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import RequestSelector from '~/performance_bar/components/request_selector.vue'; - -describe('request selector', () => { - const requests = [ - { - id: 'warningReq', - url: 'https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/1/discussions.json', - truncatedUrl: 'discussions.json', - hasWarnings: true, - }, - ]; - - const wrapper = shallowMount(RequestSelector, { - propsData: { - requests, - currentRequest: requests[0], - }, - }); - - it('has a warning icon if any requests have warnings', () => { - expect(wrapper.find('span > gl-emoji').element.dataset.name).toEqual('warning'); - }); - - it('adds a warning glyph to requests with warnings', () => { - const requestValue = wrapper.find('[value="warningReq"]').text(); - - expect(requestValue).toContain('discussions.json'); - expect(requestValue).toContain('(!)'); - }); -}); diff --git a/spec/frontend/performance_bar/index_spec.js b/spec/frontend/performance_bar/index_spec.js index 819b2bcbacf..91cb46002be 100644 --- a/spec/frontend/performance_bar/index_spec.js +++ b/spec/frontend/performance_bar/index_spec.js @@ -51,7 +51,7 @@ describe('performance bar wrapper', () => { mock.restore(); }); - describe('loadRequestDetails', () => { + describe('addRequest', () => { beforeEach(() => { jest.spyOn(vm.store, 'addRequest'); }); @@ -59,26 +59,46 @@ describe('performance bar wrapper', () => { it('does nothing if the request cannot be tracked', () => { jest.spyOn(vm.store, 'canTrackRequest').mockImplementation(() => false); - vm.loadRequestDetails('123', 'https://gitlab.com/'); + vm.addRequest('123', 'https://gitlab.com/'); expect(vm.store.addRequest).not.toHaveBeenCalled(); }); it('adds the request immediately', () => { - vm.loadRequestDetails('123', 'https://gitlab.com/'); + vm.addRequest('123', 'https://gitlab.com/'); expect(vm.store.addRequest).toHaveBeenCalledWith('123', 'https://gitlab.com/'); }); + }); - it('makes an HTTP request for the request details', () => { + describe('loadRequestDetails', () => { + beforeEach(() => { jest.spyOn(PerformanceBarService, 'fetchRequestDetails'); + }); - vm.loadRequestDetails('456', 'https://gitlab.com/'); + it('makes an HTTP request for the request details', () => { + vm.addRequest('456', 'https://gitlab.com/'); + vm.loadRequestDetails('456'); expect(PerformanceBarService.fetchRequestDetails).toHaveBeenCalledWith( '/-/peek/results', '456', ); }); + + it('does not make a request if request was not added', () => { + vm.loadRequestDetails('456'); + + expect(PerformanceBarService.fetchRequestDetails).not.toHaveBeenCalled(); + }); + + it('makes an HTTP request only once for the same request', async () => { + vm.addRequest('456', 'https://gitlab.com/'); + await vm.loadRequestDetails('456'); + + vm.loadRequestDetails('456'); + + expect(PerformanceBarService.fetchRequestDetails).toHaveBeenCalledTimes(1); + }); }); }); |