SONAR-11601 Colorblind-friendly coverage indicators in the project's homepage

5 files changed, 96 insertions, 7 deletions

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 <DonutChart data={data} height={width} thickness={thickness} width={width} />;
+  return (
+    <DonutChart
+      data={data}
+      height={width}
+      padAngle={padAngle}
+      thickness={thickness}
+      width={width}
+    />
+  );
 }
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<CoverageRatingProps> = {}) {
+  return shallow(<CoverageRating value={25} {...props} />);
+}
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`] = `
+<DonutChart
+  data={
+    Array [
+      Object {
+        "fill": "#00aa00",
+        "value": 25,
+      },
+      Object {
+        "fill": "#a4030f",
+        "value": 75,
+      },
+    ]
+  }
+  height={24}
+  padAngle={0.1}
+  thickness={3}
+  width={24}
+/>
+`;