Commit f976453a authored by Frédéric Caplette's avatar Frédéric Caplette Committed by Andrew Fontaine

Sort code coverage graph by dates

The API returns the dates in descending order
because it's the same endpoint than the
CSV generator which requires them to
be in tha order. So in the FE, we
now compare dates with a basic `sort`
to feed the graph the order in asc
order.
parent 405fd65a
......@@ -63,17 +63,19 @@ export default {
selectedDailyCoverageName() {
return this.selectedDailyCoverage?.group_name;
},
formattedData() {
if (this.selectedDailyCoverage?.data) {
return this.selectedDailyCoverage.data.map(value => [
dateFormat(value.date, 'mmm dd'),
value.coverage,
]);
}
sortedData() {
// If the fetching failed, we return an empty array which
// allow the graph to render while empty
return [];
if (!this.selectedDailyCoverage?.data) {
return [];
}
return [...this.selectedDailyCoverage.data].sort(
(a, b) => new Date(a.date) - new Date(b.date),
);
},
formattedData() {
return this.sortedData.map(value => [dateFormat(value.date, 'mmm dd'), value.coverage]);
},
chartData() {
return [
......
---
title: Sort code coverage graph in ascending order
merge_request: 34750
author:
type: fixed
......@@ -5,7 +5,7 @@ import { GlAreaChart } from '@gitlab/ui/dist/charts';
import axios from '~/lib/utils/axios_utils';
import CodeCoverage from '~/pages/projects/graphs/components/code_coverage.vue';
import codeCoverageMockData from './mock_data';
import { codeCoverageMockData, sortedDataByDates } from './mock_data';
import waitForPromises from 'helpers/wait_for_promises';
import httpStatusCodes from '~/lib/utils/http_status';
......@@ -52,6 +52,10 @@ describe('Code Coverage', () => {
expect(findAreaChart().exists()).toBe(true);
});
it('sorts the dates in ascending order', () => {
expect(wrapper.vm.sortedData).toEqual(sortedDataByDates);
});
it('matches the snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
......
export default [
export const codeCoverageMockData = [
{
group_name: 'rspec',
data: [
{ date: '2020-04-30', coverage: 40.0 },
{ date: '2020-05-01', coverage: 80.0 },
{ date: '2020-05-02', coverage: 99.0 },
{ date: '2020-05-10', coverage: 80.0 },
{ date: '2020-05-15', coverage: 70.0 },
{ date: '2020-05-20', coverage: 69.0 },
{ date: '2020-05-15', coverage: 70.0 },
{ date: '2020-05-10', coverage: 80.0 },
{ date: '2020-05-02', coverage: 99.0 },
{ date: '2020-05-01', coverage: 80.0 },
{ date: '2020-04-30', coverage: 40.0 },
],
},
{
group_name: 'cypress',
data: [
{ date: '2022-07-30', coverage: 1.0 },
{ date: '2022-08-01', coverage: 2.4 },
{ date: '2022-08-02', coverage: 5.0 },
{ date: '2022-08-10', coverage: 15.0 },
{ date: '2022-08-15', coverage: 30.0 },
{ date: '2022-08-20', coverage: 40.0 },
{ date: '2022-08-15', coverage: 30.0 },
{ date: '2022-08-10', coverage: 15.0 },
{ date: '2022-08-02', coverage: 5.0 },
{ date: '2022-08-01', coverage: 2.4 },
{ date: '2022-07-30', coverage: 1.0 },
],
},
{
group_name: 'karma',
data: [
{ date: '2020-05-01', coverage: 94.0 },
{ date: '2020-05-02', coverage: 94.0 },
{ date: '2020-05-03', coverage: 94.0 },
{ date: '2020-05-04', coverage: 94.0 },
{ date: '2020-05-05', coverage: 92.0 },
{ date: '2020-05-06', coverage: 91.0 },
{ date: '2020-05-07', coverage: 78.0 },
{ date: '2020-05-08', coverage: 94.0 },
{ date: '2020-05-09', coverage: 94.0 },
{ date: '2020-05-10', coverage: 94.0 },
{ date: '2020-05-11', coverage: 94.0 },
{ date: '2020-05-12', coverage: 94.0 },
{ date: '2020-05-13', coverage: 92.0 },
{ date: '2020-05-14', coverage: 91.0 },
{ date: '2020-05-15', coverage: 78.0 },
{ date: '2020-05-16', coverage: 94.0 },
{ date: '2020-05-17', coverage: 94.0 },
{ date: '2020-05-18', coverage: 93.0 },
{ date: '2020-05-19', coverage: 92.0 },
{ date: '2020-05-20', coverage: 91.0 },
{ date: '2020-05-21', coverage: 90.0 },
{ date: '2020-05-22', coverage: 91.0 },
{ date: '2020-05-23', coverage: 92.0 },
{ date: '2020-05-24', coverage: 75.0 },
{ date: '2020-05-25', coverage: 74.0 },
{ date: '2020-05-26', coverage: 74.0 },
{ date: '2020-05-27', coverage: 74.0 },
{ date: '2020-05-28', coverage: 80.0 },
{ date: '2020-05-29', coverage: 85.0 },
{ date: '2020-05-30', coverage: 92.0 },
{ date: '2020-05-31', coverage: 91.0 },
{ date: '2020-05-30', coverage: 94.0 },
{ date: '2020-05-29', coverage: 94.0 },
{ date: '2020-05-28', coverage: 92.0 },
{ date: '2020-05-27', coverage: 91.0 },
{ date: '2020-05-26', coverage: 78.0 },
{ date: '2020-05-25', coverage: 94.0 },
{ date: '2020-05-24', coverage: 94.0 },
{ date: '2020-05-23', coverage: 94.0 },
{ date: '2020-05-22', coverage: 94.0 },
{ date: '2020-05-21', coverage: 94.0 },
{ date: '2020-05-20', coverage: 92.0 },
{ date: '2020-05-19', coverage: 91.0 },
{ date: '2020-05-18', coverage: 78.0 },
{ date: '2020-05-17', coverage: 94.0 },
{ date: '2020-05-16', coverage: 94.0 },
{ date: '2020-05-15', coverage: 93.0 },
{ date: '2020-05-14', coverage: 92.0 },
{ date: '2020-05-13', coverage: 91.0 },
{ date: '2020-05-12', coverage: 90.0 },
{ date: '2020-05-11', coverage: 91.0 },
{ date: '2020-05-10', coverage: 92.0 },
{ date: '2020-05-09', coverage: 75.0 },
{ date: '2020-05-08', coverage: 74.0 },
{ date: '2020-05-07', coverage: 74.0 },
{ date: '2020-05-06', coverage: 74.0 },
{ date: '2020-05-05', coverage: 80.0 },
{ date: '2020-05-04', coverage: 85.0 },
{ date: '2020-05-03', coverage: 92.0 },
{ date: '2020-05-02', coverage: 94.0 },
{ date: '2020-05-01', coverage: 94.0 },
],
},
];
export const sortedDataByDates = [
{ date: '2020-04-30', coverage: 40.0 },
{ date: '2020-05-01', coverage: 80.0 },
{ date: '2020-05-02', coverage: 99.0 },
{ date: '2020-05-10', coverage: 80.0 },
{ date: '2020-05-15', coverage: 70.0 },
{ date: '2020-05-20', coverage: 69.0 },
];
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