diff options
Diffstat (limited to 'spec/frontend/performance_bar/components/detailed_metric_spec.js')
-rw-r--r-- | spec/frontend/performance_bar/components/detailed_metric_spec.js | 304 |
1 files changed, 256 insertions, 48 deletions
diff --git a/spec/frontend/performance_bar/components/detailed_metric_spec.js b/spec/frontend/performance_bar/components/detailed_metric_spec.js index 6ddd047d549..c35bd772c86 100644 --- a/spec/frontend/performance_bar/components/detailed_metric_spec.js +++ b/spec/frontend/performance_bar/components/detailed_metric_spec.js @@ -1,24 +1,40 @@ import { shallowMount } from '@vue/test-utils'; 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'; describe('detailedMetric', () => { let wrapper; - const createComponent = (props) => { - wrapper = shallowMount(DetailedMetric, { - propsData: { - ...props, - }, - }); + const defaultProps = { + currentRequest: {}, + metric: 'gitaly', + header: 'Gitaly calls', + keys: ['feature', 'request'], + }; + + const createComponent = (props = {}) => { + wrapper = extendedWrapper( + shallowMount(DetailedMetric, { + propsData: { ...defaultProps, ...props }, + }), + ); }; const findAllTraceBlocks = () => wrapper.findAll('pre'); const findTraceBlockAtIndex = (index) => findAllTraceBlocks().at(index); - const findExpandBacktraceBtns = () => wrapper.findAll('[data-testid="backtrace-expand-btn"]'); + 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 findEmptyDetailNotice = () => wrapper.findByTestId('performance-bar-empty-detail-notice'); + const findAllDetailDurations = () => + wrapper.findAllByTestId('performance-item-duration').wrappers.map((w) => w.text()); + const findAllSummaryItems = () => + wrapper.findAllByTestId('performance-bar-summary-item').wrappers.map((w) => w.text()); afterEach(() => { wrapper.destroy(); @@ -26,13 +42,7 @@ describe('detailedMetric', () => { describe('when the current request has no details', () => { beforeEach(() => { - createComponent({ - currentRequest: {}, - metric: 'gitaly', - header: 'Gitaly calls', - details: 'details', - keys: ['feature', 'request'], - }); + createComponent(); }); it('does not render the element', () => { @@ -42,36 +52,171 @@ describe('detailedMetric', () => { describe('when the current request has details', () => { const requestDetails = [ - { duration: '100', feature: 'find_commit', request: 'abcdef', backtrace: ['hello', 'world'] }, { - duration: '23', + duration: 23, feature: 'rebase_in_progress', request: '', backtrace: ['other', 'example'], }, + { duration: 100, feature: 'find_commit', request: 'abcdef', backtrace: ['hello', 'world'] }, ]; - describe('with a default metric name', () => { + describe('with an empty detail', () => { + beforeEach(() => { + createComponent({ + currentRequest: { + details: { + gitaly: { + duration: '0ms', + calls: 0, + details: [], + warnings: [], + }, + }, + }, + }); + }); + + it('displays an empty title', () => { + expect(findDetailsLabel().text()).toBe('0'); + }); + + it('displays an empty modal', () => { + expect(findEmptyDetailNotice().text()).toContain('No gitaly calls for this request'); + }); + + it('does not display sort by switcher', () => { + expect(findSortOrderSwitcher().exists()).toBe(false); + }); + }); + + describe('when the details have a summary field', () => { beforeEach(() => { createComponent({ currentRequest: { details: { gitaly: { duration: '123ms', - calls: '456', + calls: 456, + details: requestDetails, + warnings: ['gitaly calls: 456 over 30'], + summary: { + 'In controllers': 100, + 'In middlewares': 20, + }, + }, + }, + }, + }); + }); + + it('displays a summary section', () => { + expect(findAllSummaryItems()).toEqual([ + 'Total 456', + 'Total duration 123ms', + 'In controllers 100', + 'In middlewares 20', + ]); + }); + }); + + describe('when the details have summaryOptions option', () => { + const gitalyDetails = { + duration: '123ms', + calls: 456, + details: requestDetails, + warnings: ['gitaly calls: 456 over 30'], + }; + + describe('when the details have summaryOptions > hideTotal option', () => { + beforeEach(() => { + createComponent({ + currentRequest: { + details: { + gitaly: { ...gitalyDetails, summaryOptions: { hideTotal: true } }, + }, + }, + }); + }); + + it('displays a summary section', () => { + expect(findAllSummaryItems()).toEqual(['Total duration 123ms']); + }); + }); + + describe('when the details have summaryOptions > hideDuration option', () => { + beforeEach(() => { + createComponent({ + currentRequest: { + details: { + gitaly: { ...gitalyDetails, summaryOptions: { hideDuration: true } }, + }, + }, + }); + }); + + it('displays a summary section', () => { + expect(findAllSummaryItems()).toEqual(['Total 456']); + }); + }); + + describe('when the details have both summary and summaryOptions field', () => { + beforeEach(() => { + createComponent({ + currentRequest: { + details: { + gitaly: { + ...gitalyDetails, + summary: { + 'In controllers': 100, + 'In middlewares': 20, + }, + summaryOptions: { + hideDuration: true, + hideTotal: true, + }, + }, + }, + }, + }); + }); + + it('displays a summary section', () => { + expect(findAllSummaryItems()).toEqual(['In controllers 100', 'In middlewares 20']); + }); + }); + }); + + describe("when the details don't have a start field", () => { + beforeEach(() => { + createComponent({ + currentRequest: { + details: { + gitaly: { + duration: '123ms', + calls: 456, details: requestDetails, warnings: ['gitaly calls: 456 over 30'], }, }, }, - metric: 'gitaly', - header: 'Gitaly calls', - keys: ['feature', 'request'], }); }); - it('displays details', () => { - expect(wrapper.text().replace(/\s+/g, ' ')).toContain('123ms / 456'); + it('displays details header', () => { + expect(findDetailsLabel().text()).toBe('123ms / 456'); + }); + + it('displays a basic summary section', () => { + expect(findAllSummaryItems()).toEqual(['Total 456', 'Total duration 123ms']); + }); + + it('sorts the details by descending duration order', () => { + expect(findAllDetailDurations()).toEqual(['100ms', '23ms']); + }); + + it('does not display sort by switcher', () => { + expect(findSortOrderSwitcher().exists()).toBe(false); }); it('adds a modal with a table of the details', () => { @@ -119,17 +264,75 @@ describe('detailedMetric', () => { findExpandedBacktraceBtnAtIndex(0).vm.$emit('click'); await nextTick(); expect(findAllTraceBlocks()).toHaveLength(1); - expect(findTraceBlockAtIndex(0).text()).toContain(requestDetails[0].backtrace[0]); + expect(findTraceBlockAtIndex(0).text()).toContain(requestDetails[1].backtrace[0]); secondExpandButton.vm.$emit('click'); await nextTick(); expect(findAllTraceBlocks()).toHaveLength(2); - expect(findTraceBlockAtIndex(1).text()).toContain(requestDetails[1].backtrace[0]); + expect(findTraceBlockAtIndex(1).text()).toContain(requestDetails[0].backtrace[0]); secondExpandButton.vm.$emit('click'); await nextTick(); expect(findAllTraceBlocks()).toHaveLength(1); - expect(findTraceBlockAtIndex(0).text()).toContain(requestDetails[0].backtrace[0]); + expect(findTraceBlockAtIndex(0).text()).toContain(requestDetails[1].backtrace[0]); + }); + }); + + describe('when the details have a start field', () => { + const requestDetailsWithStart = [ + { + start: '2021-03-18 11:41:49.846356 +0700', + duration: 23, + feature: 'rebase_in_progress', + request: '', + }, + { + start: '2021-03-18 11:42:11.645711 +0700', + duration: 75, + feature: 'find_commit', + request: 'abcdef', + }, + { + start: '2021-03-18 11:42:10.645711 +0700', + duration: 100, + feature: 'find_commit', + request: 'abcdef', + }, + ]; + + beforeEach(() => { + createComponent({ + currentRequest: { + details: { + gitaly: { + duration: '123ms', + calls: 456, + details: requestDetailsWithStart, + warnings: ['gitaly calls: 456 over 30'], + }, + }, + }, + metric: 'gitaly', + header: 'Gitaly calls', + keys: ['feature', 'request'], + }); + }); + + it('sorts the details by descending duration order', () => { + expect(findAllDetailDurations()).toEqual(['100ms', '75ms', '23ms']); + }); + + it('displays sort by switcher', () => { + expect(findSortOrderSwitcher().exists()).toBe(true); + }); + + it('allows switch sorting orders', async () => { + findSortOrderSwitcher().vm.$emit('input', sortOrders.CHRONOLOGICAL); + await nextTick(); + expect(findAllDetailDurations()).toEqual(['23ms', '100ms', '75ms']); + findSortOrderSwitcher().vm.$emit('input', sortOrders.DURATION); + await nextTick(); + expect(findAllDetailDurations()).toEqual(['100ms', '75ms', '23ms']); }); }); @@ -145,10 +348,7 @@ describe('detailedMetric', () => { }, }, }, - metric: 'gitaly', title: 'custom', - header: 'Gitaly calls', - keys: ['feature', 'request'], }); }); @@ -156,31 +356,39 @@ describe('detailedMetric', () => { expect(wrapper.text()).toContain('custom'); }); }); - }); - describe('when the details has no duration', () => { - beforeEach(() => { - createComponent({ - currentRequest: { - details: { - bullet: { - calls: '456', - details: [{ notification: 'notification', backtrace: 'backtrace' }], + describe('when the details has no duration', () => { + beforeEach(() => { + createComponent({ + currentRequest: { + details: { + bullet: { + calls: '456', + details: [{ notification: 'notification', backtrace: 'backtrace' }], + }, }, }, - }, - metric: 'bullet', - header: 'Bullet notifications', - keys: ['notification'], + metric: 'bullet', + header: 'Bullet notifications', + keys: ['notification'], + }); }); - }); - it('renders only the number of calls', async () => { - expect(trimText(wrapper.text())).toEqual('456 notification bullet'); + it('displays calls in the label', () => { + expect(findDetailsLabel().text()).toBe('456'); + }); + + it('displays a basic summary section', () => { + expect(findAllSummaryItems()).toEqual(['Total 456']); + }); + + it('renders only the number of calls', async () => { + expect(trimText(wrapper.text())).toContain('notification bullet'); - findExpandedBacktraceBtnAtIndex(0).vm.$emit('click'); - await nextTick(); - expect(trimText(wrapper.text())).toEqual('456 notification backtrace bullet'); + findExpandedBacktraceBtnAtIndex(0).vm.$emit('click'); + await nextTick(); + expect(trimText(wrapper.text())).toContain('notification backtrace bullet'); + }); }); }); }); |