Commit cd0d2a56 authored by Brandon Labuschagne's avatar Brandon Labuschagne

Merge branch '226987-add-percentage-change-to-performance-mr-widgets' into 'master'

Add percentage change to performance widgets

See merge request gitlab-org/gitlab!68390
parents 38734960 7026db3a
......@@ -3,6 +3,7 @@
* Renders Perfomance issue body text
* [name] :[score] [symbol] [delta] in [link]
*/
import { formattedChangeInPercent } from '~/lib/utils/number_utils';
import ReportLink from '~/reports/components/report_link.vue';
function formatScore(value) {
......@@ -34,10 +35,16 @@ export default {
if (!this.issue.delta) {
return false;
}
if (this.issue.delta >= 0) {
return `+${formatScore(this.issue.delta)}`;
return this.issue.delta >= 0
? `+${formatScore(this.issue.delta)}`
: formatScore(this.issue.delta);
},
issueDeltaPercentage() {
if (!this.issue.delta || !this.issue.score || !Number(this.issue.score)) {
return false;
}
return formatScore(this.issue.delta);
const oldScore = parseFloat(this.issue.score) - this.issue.delta;
return formattedChangeInPercent(oldScore, this.issue.score);
},
},
};
......@@ -52,6 +59,7 @@ export default {
{{ issue.name }}
</template>
<template v-if="issueDelta"> ({{ issueDelta }}) </template>
<template v-if="issueDeltaPercentage"> ({{ issueDeltaPercentage }}) </template>
</div>
<report-link v-if="issue.path" :issue="issue" />
......
......@@ -4,35 +4,62 @@ import component from 'ee/vue_merge_request_widget/components/performance_issue_
describe('performance issue body', () => {
let wrapper;
const performanceIssue = {
delta: 0.1999999999998181,
name: 'Transfer Size (KB)',
path: '/',
score: 4974.8,
};
describe.each`
name | score | delta | expectedScore | expectedDelta | expectedPercentage
${'Transfer Size (KB)'} | ${'4974.8'} | ${0.1999999999998181} | ${'4974.80'} | ${'(+0.19)'} | ${'(+0%)'}
${'Speed Index'} | ${1474} | ${727} | ${'1474'} | ${'(+727)'} | ${'(+97%)'}
${'Checks'} | ${'97.73%'} | ${-2.27} | ${'97.73%'} | ${'(-2.27)'} | ${null}
${'RPS'} | ${22.699900441941768} | ${-1} | ${'22.69'} | ${'(-1)'} | ${'(-4%)'}
${'TTFB P95'} | ${205.02902265} | ${0} | ${'205.02'} | ${null} | ${null}
`(
'with an example $name performance metric',
({ name, score, delta, expectedScore, expectedDelta, expectedPercentage }) => {
beforeEach(() => {
wrapper = shallowMount(component, {
propsData: {
issue: {
path: '/',
name,
score,
delta,
},
},
});
});
beforeEach(() => {
wrapper = shallowMount(component, {
propsData: {
issue: performanceIssue,
},
});
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('renders issue name', () => {
expect(wrapper.text()).toContain(name);
});
it('renders issue name', () => {
expect(wrapper.text()).toContain(performanceIssue.name);
});
it('renders issue score formatted', () => {
expect(wrapper.text()).toContain(expectedScore);
});
it('renders issue score formatted', () => {
expect(wrapper.text()).toContain('4974.80');
});
if (delta) {
it('renders issue delta formatted', () => {
expect(wrapper.text()).toContain(expectedDelta);
});
} else {
it('does not render issue delta formatted', () => {
expect(wrapper.text()).not.toContain('(+');
expect(wrapper.text()).not.toContain('(-');
});
}
it('renders issue delta formatted', () => {
expect(wrapper.text()).toContain('(+0.19)');
});
if (expectedPercentage) {
it('renders issue delta as a percentage', () => {
expect(wrapper.text()).toContain(expectedPercentage);
});
} else {
it('does not render issue delta as a percentage', () => {
expect(wrapper.text()).not.toContain('%)');
});
}
},
);
});
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