From 7c53c61bda8ad0060b743fc97b99d8fba631e3ee Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Fri, 11 Oct 2019 13:54:10 +0200 Subject: [PATCH] SONAR-11601 Colorblind-friendly coverage indicators in the project's homepage --- server/sonar-web/src/main/js/app/theme.js | 2 +- .../js/apps/overview/__tests__/utils-test.ts | 5 ++ .../main/js/components/ui/CoverageRating.tsx | 28 ++++++++--- .../ui/__tests__/CoverageRating-test.tsx | 46 +++++++++++++++++++ .../CoverageRating-test.tsx.snap | 22 +++++++++ 5 files changed, 96 insertions(+), 7 deletions(-) create mode 100644 server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx create mode 100644 server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/CoverageRating-test.tsx.snap diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js index 1f689e95614..5b1eecf9684 100644 --- a/server/sonar-web/src/main/js/app/theme.js +++ b/server/sonar-web/src/main/js/app/theme.js @@ -77,7 +77,7 @@ module.exports = { conciseIssueRed: '#d18582', conciseIssueRedSelected: '#a4030f', - // codeviewer + // coverage lineCoverageRed: '#a4030f', lineCoverageGreen: '#b4dd78', diff --git a/server/sonar-web/src/main/js/apps/overview/__tests__/utils-test.ts b/server/sonar-web/src/main/js/apps/overview/__tests__/utils-test.ts index 5e47552c751..63cec397dd4 100644 --- a/server/sonar-web/src/main/js/apps/overview/__tests__/utils-test.ts +++ b/server/sonar-web/src/main/js/apps/overview/__tests__/utils-test.ts @@ -24,6 +24,9 @@ import { } from '../../../helpers/testMocks'; import { getThreshold } from '../utils'; +// eslint-disable-next-line no-console +console.error = jest.fn(); + describe('getThreshold', () => { it('return undefined if condition is not found', () => { expect(getThreshold([], '')).toBeUndefined(); @@ -39,6 +42,8 @@ describe('getThreshold', () => { '' ) ).toBeUndefined(); + // eslint-disable-next-line no-console + expect(console.error).toBeCalled(); }); it('should return the threshold for the right metric', () => { diff --git a/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx b/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx index 5d8e88ba4a8..239cccd92bd 100644 --- a/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx +++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx @@ -18,34 +18,50 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { lazyLoad } from 'sonar-ui-common/components/lazyLoad'; +import { lazyLoadComponent } from 'sonar-ui-common/components/lazyLoadComponent'; import { colors } from '../../app/theme'; -const DonutChart = lazyLoad(() => import('sonar-ui-common/components/charts/DonutChart')); +const DonutChart = lazyLoadComponent( + () => import('sonar-ui-common/components/charts/DonutChart'), + 'DonutChart' +); const SIZE_TO_WIDTH_MAPPING = { small: 16, normal: 24, big: 40, huge: 60 }; const SIZE_TO_THICKNESS_MAPPING = { small: 2, normal: 3, big: 3, huge: 4 }; -interface Props { +export interface CoverageRatingProps { muted?: boolean; size?: 'small' | 'normal' | 'big' | 'huge'; value: number | string | null | undefined; } -export default function CoverageRating({ muted = false, size = 'normal', value }: Props) { +export default function CoverageRating({ + muted = false, + size = 'normal', + value +}: CoverageRatingProps) { let data = [{ value: 100, fill: '#ccc ' }]; if (value != null) { const numberValue = Number(value); data = [ { value: numberValue, fill: muted ? colors.gray71 : colors.green }, - { value: 100 - numberValue, fill: muted ? colors.barBackgroundColor : colors.red } + { value: 100 - numberValue, fill: muted ? colors.barBackgroundColor : colors.lineCoverageRed } ]; } const width = SIZE_TO_WIDTH_MAPPING[size]; const thickness = SIZE_TO_THICKNESS_MAPPING[size]; + const padAngle = 0.1; // Same for all sizes, because it scales automatically - return ; + return ( + + ); } diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx new file mode 100644 index 00000000000..d0bd3bad17b --- /dev/null +++ b/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx @@ -0,0 +1,46 @@ +/* + * SonarQube + * Copyright (C) 2009-2019 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import { shallow } from 'enzyme'; +import * as React from 'react'; +import CoverageRating, { CoverageRatingProps } from '../CoverageRating'; + +it('should render correctly', () => { + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should render with muted style', () => { + expect( + shallowRender({ muted: true }) + .find('DonutChart') + .prop('data') + ).toEqual([{ fill: '#b4b4b4', value: 25 }, { fill: '#f3f3f3', value: 75 }]); +}); + +it('should render with small size', () => { + expect( + shallowRender({ size: 'small' }) + .find('DonutChart') + .props() + ).toMatchObject({ height: 16, padAngle: 0.1, thickness: 2, width: 16 }); +}); + +function shallowRender(props: Partial = {}) { + return shallow(); +} diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/CoverageRating-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/CoverageRating-test.tsx.snap new file mode 100644 index 00000000000..e99f960c29e --- /dev/null +++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/CoverageRating-test.tsx.snap @@ -0,0 +1,22 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render correctly 1`] = ` + +`; -- 2.39.5