From 17439910a22be35c8f4a9d601ab8a4b524df287a Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Thu, 3 Dec 2020 11:56:59 +0100 Subject: SONAR-11556 Make bubblechart legend actionable --- .../component-measures/drilldown/BubbleChart.tsx | 41 ++- .../drilldown/__tests__/BubbleChart-test.tsx | 75 ++++++ .../__snapshots__/BubbleChart-test.tsx.snap | 275 +++++++++++++++++++++ .../main/js/apps/projects/visualizations/Risk.tsx | 87 ++++--- .../projects/visualizations/SimpleBubbleChart.tsx | 35 ++- .../visualizations/__tests__/Risk-test.tsx | 51 +++- .../__tests__/SimpleBubbleChart-test.tsx | 57 +++-- .../__tests__/__snapshots__/Risk-test.tsx.snap | 60 ++++- .../__snapshots__/SimpleBubbleChart-test.tsx.snap | 2 + .../main/js/components/charts/ColorBoxLegend.css | 10 + .../js/components/charts/ColorRatingsLegend.tsx | 41 ++- .../charts/__tests__/ColorRatingsLegend-test.tsx | 45 ++++ .../__snapshots__/ColorRatingsLegend-test.tsx.snap | 153 ++++++++++++ .../src/main/js/helpers/mocks/projects.ts | 33 +++ 14 files changed, 872 insertions(+), 93 deletions(-) create mode 100644 server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/BubbleChart-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/components/charts/__tests__/ColorRatingsLegend-test.tsx create mode 100644 server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/ColorRatingsLegend-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/helpers/mocks/projects.ts (limited to 'server') diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx index 56caaeda49f..0009e8c28b1 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx @@ -44,7 +44,15 @@ interface Props { updateSelected: (component: string) => void; } -export default class BubbleChart extends React.PureComponent { +interface State { + ratingFilters: { [rating: number]: boolean }; +} + +export default class BubbleChart extends React.PureComponent { + state: State = { + ratingFilters: {} + }; + getMeasureVal = (component: T.ComponentMeasureEnhanced, metric: T.Metric) => { const measure = component.measures.find(measure => measure.metric.key === metric.key); if (!measure) { @@ -86,6 +94,12 @@ export default class BubbleChart extends React.PureComponent { ); } + handleRatingFilterClick = (selection: number) => { + this.setState(({ ratingFilters }) => { + return { ratingFilters: { ...ratingFilters, [selection]: !ratingFilters[selection] } }; + }); + }; + handleBubbleClick = (component: T.ComponentMeasureEnhanced) => this.props.updateSelected(component.refKey || component.key); @@ -99,6 +113,8 @@ export default class BubbleChart extends React.PureComponent { } renderBubbleChart(metrics: { x: T.Metric; y: T.Metric; size: T.Metric; colors?: T.Metric[] }) { + const { ratingFilters } = this.state; + const items = this.props.components .map(component => { const x = this.getMeasureVal(component, metrics.x); @@ -109,14 +125,19 @@ export default class BubbleChart extends React.PureComponent { if ((!x && x !== 0) || (!y && y !== 0) || (!size && size !== 0)) { return undefined; } + + const colorRating = colors && Math.max(...colors.filter(isDefined)); + + // Filter out items that match ratingFilters + if (colorRating !== undefined && ratingFilters[colorRating]) { + return undefined; + } + return { x, y, size, - color: - colors !== undefined - ? RATING_COLORS[Math.max(...colors.filter(isDefined)) - 1] - : undefined, + color: colorRating !== undefined ? RATING_COLORS[colorRating - 1] : undefined, data: component, tooltip: this.getTooltip(component.name, { x, y, size, colors }, metrics) }; @@ -140,6 +161,8 @@ export default class BubbleChart extends React.PureComponent { } renderChartHeader(domain: string, sizeMetric: T.Metric, colorsMetric?: T.Metric[]) { + const { ratingFilters } = this.state; + const title = isProjectOverview(domain) ? translate('component_measures.overview', domain, 'title') : translateWithParameters( @@ -172,7 +195,13 @@ export default class BubbleChart extends React.PureComponent { getLocalizedMetricName(sizeMetric) )} - {colorsMetric && } + {colorsMetric && ( + + )} ); diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/BubbleChart-test.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/BubbleChart-test.tsx new file mode 100644 index 00000000000..85721364654 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/BubbleChart-test.tsx @@ -0,0 +1,75 @@ +/* + * SonarQube + * Copyright (C) 2009-2020 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 { keyBy } from 'lodash'; +import * as React from 'react'; +import { mockComponentMeasure, mockMeasure, mockMetric } from '../../../../helpers/testMocks'; +import { MetricKey } from '../../../../types/metrics'; +import { enhanceComponent } from '../../utils'; +import BubbleChart from '../BubbleChart'; + +const metrics = keyBy( + [ + mockMetric({ key: MetricKey.ncloc, type: 'NUMBER' }), + mockMetric({ key: MetricKey.security_remediation_effort, type: 'NUMBER' }), + mockMetric({ key: MetricKey.vulnerabilities, type: 'NUMBER' }), + mockMetric({ key: MetricKey.security_rating, type: 'RATING' }) + ], + m => m.key +); + +it('should render correctly', () => { + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should handle filtering', () => { + const wrapper = shallowRender(); + + wrapper.instance().handleRatingFilterClick(2); + + expect(wrapper.state().ratingFilters).toEqual({ 2: true }); + expect(wrapper).toMatchSnapshot(); +}); + +function shallowRender(overrides: Partial = {}) { + return shallow( + + ); +} diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap new file mode 100644 index 00000000000..19ba423d5ed --- /dev/null +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap @@ -0,0 +1,275 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should handle filtering 1`] = ` +
+
+ + + component_measures.domain_x_overview.Security + + + + + + + component_measures.legend.color_x.Security_rating + + component_measures.legend.size_x.Vulnerabilities + + + +
+
+ +
+
+ Ncloc +
+
+ Security_remediation_effort +
+
+`; + +exports[`should render correctly 1`] = ` +
+
+ + + component_measures.domain_x_overview.Security + + + + + + + component_measures.legend.color_x.Security_rating + + component_measures.legend.size_x.Vulnerabilities + + + +
+
+ + + index.tsx +
+ + + Ncloc: 236 +
+ + + Security_remediation_effort: 10 +
+ + + Vulnerabilities: 3 +
+ + + Security_rating: B + +
, + "x": 236, + "y": 10, + }, + ] + } + onBubbleClick={[Function]} + padding={ + Array [ + 25, + 60, + 50, + 60, + ] + } + sizeRange={ + Array [ + 5, + 45, + ] + } + /> +
+
+ Ncloc +
+
+ Security_remediation_effort +
+ +`; diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.tsx index 161202d0c6b..e40860b2279 100644 --- a/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.tsx +++ b/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.tsx @@ -23,6 +23,7 @@ import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip'; import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import { formatMeasure } from 'sonar-ui-common/helpers/measures'; +import { isDefined } from 'sonar-ui-common/helpers/types'; import ColorRatingsLegend from '../../../components/charts/ColorRatingsLegend'; import { RATING_COLORS } from '../../../helpers/constants'; import { getProjectUrl } from '../../../helpers/urls'; @@ -45,7 +46,15 @@ interface Props { projects: Project[]; } -export default class Risk extends React.PureComponent { +interface State { + ratingFilters: { [rating: number]: boolean }; +} + +export default class Risk extends React.PureComponent { + state: State = { + ratingFilters: {} + }; + getMetricTooltip(metric: { key: string; type: string }, value?: number) { const name = translate('metric', metric.key, 'name'); const formattedValue = value != null ? formatMeasure(value, metric.type) : '–'; @@ -102,33 +111,51 @@ export default class Risk extends React.PureComponent { ); } - render() { - const items = this.props.projects.map(project => { - const x = project.measures[X_METRIC] != null ? Number(project.measures[X_METRIC]) : undefined; - const y = project.measures[Y_METRIC] != null ? Number(project.measures[Y_METRIC]) : undefined; - const size = - project.measures[SIZE_METRIC] != null ? Number(project.measures[SIZE_METRIC]) : undefined; - const color1 = - project.measures[COLOR_METRIC_1] != null - ? Number(project.measures[COLOR_METRIC_1]) - : undefined; - const color2 = - project.measures[COLOR_METRIC_2] != null - ? Number(project.measures[COLOR_METRIC_2]) - : undefined; - return { - x: x || 0, - y: y || 0, - size: size || 0, - color: - color1 != null && color2 != null - ? RATING_COLORS[Math.max(color1, color2) - 1] - : undefined, - key: project.key, - tooltip: this.getTooltip(project, x, y, size, color1, color2), - link: getProjectUrl(project.key) - }; + handleRatingFilterClick = (selection: number) => { + this.setState(({ ratingFilters }) => { + return { ratingFilters: { ...ratingFilters, [selection]: !ratingFilters[selection] } }; }); + }; + + render() { + const { ratingFilters } = this.state; + + const items = this.props.projects + .map(project => { + const x = + project.measures[X_METRIC] != null ? Number(project.measures[X_METRIC]) : undefined; + const y = + project.measures[Y_METRIC] != null ? Number(project.measures[Y_METRIC]) : undefined; + const size = + project.measures[SIZE_METRIC] != null ? Number(project.measures[SIZE_METRIC]) : undefined; + const color1 = + project.measures[COLOR_METRIC_1] != null + ? Number(project.measures[COLOR_METRIC_1]) + : undefined; + const color2 = + project.measures[COLOR_METRIC_2] != null + ? Number(project.measures[COLOR_METRIC_2]) + : undefined; + + const colorRating = + color1 !== undefined && color2 !== undefined ? Math.max(color1, color2) : undefined; + + // Filter out items that match ratingFilters + if (colorRating !== undefined && ratingFilters[colorRating]) { + return undefined; + } + + return { + x: x || 0, + y: y || 0, + size: size || 0, + color: colorRating !== undefined ? RATING_COLORS[colorRating - 1] : undefined, + key: project.key, + tooltip: this.getTooltip(project, x, y, size, color1, color2), + link: getProjectUrl(project.key) + }; + }) + .filter(isDefined); const formatXTick = (tick: number) => formatMeasure(tick, X_METRIC_TYPE); const formatYTick = (tick: number) => formatMeasure(tick, Y_METRIC_TYPE); @@ -166,7 +193,11 @@ export default class Risk extends React.PureComponent { 'component_measures.legend.size_x', translate('metric', SIZE_METRIC, 'name') )} - + diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.tsx index 55f0ec925dd..cf7fe2f6c14 100644 --- a/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.tsx +++ b/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.tsx @@ -23,6 +23,7 @@ import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip'; import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import { formatMeasure } from 'sonar-ui-common/helpers/measures'; +import { isDefined } from 'sonar-ui-common/helpers/types'; import ColorRatingsLegend from '../../../components/charts/ColorRatingsLegend'; import { RATING_COLORS } from '../../../helpers/constants'; import { getProjectUrl } from '../../../helpers/urls'; @@ -46,7 +47,15 @@ interface Props { yMetric: Metric; } -export default class SimpleBubbleChart extends React.PureComponent { +interface State { + ratingFilters: { [rating: number]: boolean }; +} + +export default class SimpleBubbleChart extends React.PureComponent { + state: State = { + ratingFilters: {} + }; + getMetricTooltip(metric: Metric, value?: number) { const name = translate('metric', metric.key, 'name'); const formattedValue = value != null ? formatMeasure(value, metric.type) : '–'; @@ -96,8 +105,15 @@ export default class SimpleBubbleChart extends React.PureComponent { ); } + handleRatingFilterClick = (selection: number) => { + this.setState(({ ratingFilters }) => { + return { ratingFilters: { ...ratingFilters, [selection]: !ratingFilters[selection] } }; + }); + }; + render() { const { xMetric, yMetric, sizeMetric, colorMetric } = this.props; + const { ratingFilters } = this.state; const items = this.props.projects .filter(project => colorMetric == null || project.measures[colorMetric] !== null) @@ -111,6 +127,12 @@ export default class SimpleBubbleChart extends React.PureComponent { ? Number(project.measures[sizeMetric.key]) : undefined; const color = colorMetric ? Number(project.measures[colorMetric]) : undefined; + + // Filter out items that match ratingFilters + if (color && ratingFilters[color]) { + return undefined; + } + return { x: x || 0, y: y || 0, @@ -120,7 +142,8 @@ export default class SimpleBubbleChart extends React.PureComponent { tooltip: this.getTooltip(project, x, y, size, color), link: getProjectUrl(project.key) }; - }); + }) + .filter(isDefined); const formatXTick = (tick: number) => formatMeasure(tick, xMetric.type); const formatYTick = (tick: number) => formatMeasure(tick, yMetric.type); @@ -159,7 +182,13 @@ export default class SimpleBubbleChart extends React.PureComponent { 'component_measures.legend.size_x', translate('metric', sizeMetric.key, 'name') )} - {colorMetric != null && } + {colorMetric != null && ( + + )} diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx index b212b3be785..76f088fc9c6 100644 --- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx +++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx @@ -19,20 +19,45 @@ */ import { shallow } from 'enzyme'; import * as React from 'react'; -import { ComponentQualifier } from '../../../../types/component'; -import { Project } from '../../types'; +import { mockProject } from '../../../../helpers/mocks/projects'; import Risk from '../Risk'; it('renders', () => { - const project1: Project = { - key: 'foo', - measures: { complexity: '17.2', coverage: '53.5', ncloc: '1734' }, - name: 'Foo', - qualifier: ComponentQualifier.Project, - tags: [], - visibility: 'public' - }; - expect( - shallow() - ).toMatchSnapshot(); + expect(shallowRender()).toMatchSnapshot(); }); + +it('should handle filtering', () => { + const wrapper = shallowRender(); + + wrapper.instance().handleRatingFilterClick(2); + + expect(wrapper.state().ratingFilters).toEqual({ 2: true }); +}); + +function shallowRender(overrides: Partial = {}) { + const project1 = mockProject({ + key: 'foo', + measures: { + complexity: '17.2', + coverage: '53.5', + ncloc: '1734', + sqale_index: '1', + reliability_rating: '3', + security_rating: '2' + }, + name: 'Foo' + }); + const project2 = mockProject({ + key: 'bar', + name: 'Bar', + measures: {} + }); + return shallow( + + ); +} diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx index 00a64d12e9e..831439af07e 100644 --- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx +++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx @@ -19,37 +19,42 @@ */ import { shallow } from 'enzyme'; import * as React from 'react'; +import { mockProject } from '../../../../helpers/mocks/projects'; import { ComponentQualifier } from '../../../../types/component'; -import { Project } from '../../types'; import SimpleBubbleChart from '../SimpleBubbleChart'; it('renders', () => { - const project1: Project = { - key: 'foo', - measures: { complexity: '17.2', coverage: '53.5', ncloc: '1734', security_rating: '2' }, - name: 'Foo', - qualifier: ComponentQualifier.Project, - tags: [], - visibility: 'public' - }; - const app = { - ...project1, + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should handle filtering', () => { + const wrapper = shallowRender(); + + wrapper.instance().handleRatingFilterClick(2); + + expect(wrapper.state().ratingFilters).toEqual({ 2: true }); +}); + +function shallowRender(overrides: Partial = {}) { + const project1 = mockProject({ + measures: { complexity: '17.2', coverage: '53.5', ncloc: '1734', security_rating: '2' } + }); + const app = mockProject({ key: 'app', measures: { complexity: '23.1', coverage: '87.3', ncloc: '32478', security_rating: '1' }, name: 'App', qualifier: ComponentQualifier.Application - }; - expect( - shallow( - - ) - ).toMatchSnapshot(); -}); + }); + return shallow( + + ); +} diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Risk-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Risk-test.tsx.snap index 381818cef6b..e62a6b6a11e 100644 --- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Risk-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Risk-test.tsx.snap @@ -13,7 +13,7 @@ exports[`renders 1`] = ` items={ Array [ Object { - "color": undefined, + "color": "#eabe06", "key": "foo", "link": Object { "pathname": "/dashboard", @@ -33,6 +33,56 @@ exports[`renders 1`] = ` Foo +
+ metric.reliability_rating.name + : + C +
+
+ metric.security_rating.name + : + B +
+
+ metric.coverage.name + : + 53.5% +
+
+ metric.sqale_index.name + : + work_duration.x_minutes.1 +
+
+ metric.ncloc.name + : + 1.7short_number_suffix.k +
+ , + "x": 1, + "y": 53.5, + }, + Object { + "color": undefined, + "key": "bar", + "link": Object { + "pathname": "/dashboard", + "query": Object { + "branch": undefined, + "id": "bar", + }, + }, + "size": 0, + "tooltip":
+
+ + Bar + +
metric.reliability_rating.name : @@ -46,7 +96,7 @@ exports[`renders 1`] = `
metric.coverage.name : - 53.5% + –
metric.sqale_index.name @@ -56,11 +106,11 @@ exports[`renders 1`] = `
metric.ncloc.name : - 1.7short_number_suffix.k + –
, "x": 0, - "y": 53.5, + "y": 0, }, ] } @@ -120,6 +170,8 @@ exports[`renders 1`] = ` component_measures.legend.size_x.metric.ncloc.name
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/SimpleBubbleChart-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/SimpleBubbleChart-test.tsx.snap index 7d0403e0300..bc2daa21d57 100644 --- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/SimpleBubbleChart-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/SimpleBubbleChart-test.tsx.snap @@ -162,6 +162,8 @@ exports[`renders 1`] = ` component_measures.legend.size_x.metric.ncloc.name diff --git a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css index 2d09497e7cc..f36f3994725 100644 --- a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css +++ b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css @@ -43,3 +43,13 @@ .color-box-legend.color-box-full .color-box-legend-rect-inner { opacity: 1; } + +.color-box-legend button { + color: var(--baseFontColor); + border-bottom: none; + display: block; +} + +.color-box-legend button.filtered { + opacity: 0.3; +} diff --git a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx index aefb939580d..9ae0e527128 100644 --- a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx +++ b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx @@ -19,29 +19,44 @@ */ import * as classNames from 'classnames'; import * as React from 'react'; +import { ButtonLink } from 'sonar-ui-common/components/controls/buttons'; +import Tooltip from 'sonar-ui-common/components/controls/Tooltip'; +import { translate } from 'sonar-ui-common/helpers/l10n'; import { formatMeasure } from 'sonar-ui-common/helpers/measures'; import { RATING_COLORS } from '../../helpers/constants'; import './ColorBoxLegend.css'; -interface Props { +export interface ColorRatingsLegendProps { className?: string; + filters: { [rating: number]: boolean }; + onRatingClick: (selection: number) => void; } -export default function ColorRatingsLegend({ className }: Props) { +const RATINGS = [1, 2, 3, 4, 5]; + +export default function ColorRatingsLegend(props: ColorRatingsLegendProps) { + const { className, filters } = props; return (
- {[1, 2, 3, 4, 5].map(rating => ( -
- + {RATINGS.map(rating => ( + + props.onRatingClick(rating)} + type="button"> - - {formatMeasure(rating, 'RATING')} -
+ className="color-box-legend-rect" + style={{ borderColor: RATING_COLORS[rating - 1] }}> + + + {formatMeasure(rating, 'RATING')} + + ))}
); diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/ColorRatingsLegend-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/ColorRatingsLegend-test.tsx new file mode 100644 index 00000000000..5f2a3b83c47 --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/__tests__/ColorRatingsLegend-test.tsx @@ -0,0 +1,45 @@ +/* + * SonarQube + * Copyright (C) 2009-2020 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 { ButtonLink } from 'sonar-ui-common/components/controls/buttons'; +import ColorRatingsLegend, { ColorRatingsLegendProps } from '../ColorRatingsLegend'; + +it('should render correctly', () => { + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should callback when a rating is clicked', () => { + const onRatingClick = jest.fn(); + const wrapper = shallowRender({ onRatingClick }); + + wrapper + .find(ButtonLink) + .at(3) + .simulate('click'); + + expect(onRatingClick).toBeCalledWith(4); +}); + +function shallowRender(overrides: Partial = {}) { + return shallow( + + ); +} diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/ColorRatingsLegend-test.tsx.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/ColorRatingsLegend-test.tsx.snap new file mode 100644 index 00000000000..52a280f871b --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/ColorRatingsLegend-test.tsx.snap @@ -0,0 +1,153 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render correctly 1`] = ` +
+ + + + + + A + + + + + + + + B + + + + + + + + C + + + + + + + + D + + + + + + + + E + + +
+`; diff --git a/server/sonar-web/src/main/js/helpers/mocks/projects.ts b/server/sonar-web/src/main/js/helpers/mocks/projects.ts new file mode 100644 index 00000000000..5c4c13f97a0 --- /dev/null +++ b/server/sonar-web/src/main/js/helpers/mocks/projects.ts @@ -0,0 +1,33 @@ +/* + * SonarQube + * Copyright (C) 2009-2020 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 { Project } from '../../apps/projects/types'; +import { ComponentQualifier } from '../../types/component'; + +export function mockProject(overrides: Partial = {}): Project { + return { + key: 'foo', + name: 'Foo', + measures: {}, + qualifier: ComponentQualifier.Project, + tags: [], + visibility: 'public', + ...overrides + }; +} -- cgit v1.2.3