diff --git a/.betterer.results b/.betterer.results index 7f8ff5acfac..7323a695498 100644 --- a/.betterer.results +++ b/.betterer.results @@ -8,9 +8,6 @@ exports[`no enzyme tests`] = { "packages/grafana-ui/src/components/Graph/Graph.test.tsx:1664091255": [ [0, 17, 13, "RegExp match", "2409514259"] ], - "packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx:1865444105": [ - [0, 17, 13, "RegExp match", "2409514259"] - ], "packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx:2719724375": [ [0, 17, 13, "RegExp match", "2409514259"] ], diff --git a/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx b/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx index b3af9200fbb..5c550a6590b 100644 --- a/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx +++ b/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx @@ -1,7 +1,7 @@ -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import React from 'react'; -import { createDimension, ArrayVector, FieldType, DisplayProcessor } from '@grafana/data'; +import { createDimension, createTheme, ArrayVector, FieldType, DisplayProcessor } from '@grafana/data'; import { ActiveDimensions } from '../../VizTooltip'; @@ -12,6 +12,7 @@ let dimensions: GraphDimensions; describe('MultiModeGraphTooltip', () => { const display: DisplayProcessor = (v) => ({ numeric: v, text: String(v), color: 'red' }); + const theme = createTheme(); describe('when shown when hovering over a datapoint', () => { beforeEach(() => { @@ -57,7 +58,7 @@ describe('MultiModeGraphTooltip', () => { xAxis: [0, 1], // column, row yAxis: [0, 1], // column, row }; - const container = mount( + render( { ); // We rendered two series rows - const rows = container.find('SeriesTableRow'); + const rows = screen.getAllByTestId('SeriesTableRow'); + expect(rows.length).toEqual(2); - // We expect A-series(1st row) to be highlighted - expect(rows.get(0).props.isActive).toBeTruthy(); + // We expect A-series(1st row) not to be highlighted + expect(rows[0]).toHaveStyle(`font-weight: ${theme.typography.fontWeightMedium}`); // We expect B-series(2nd row) not to be highlighted - expect(rows.get(1).props.isActive).toBeFalsy(); + expect(rows[1]).not.toHaveStyle(`font-weight: ${theme.typography.fontWeightMedium}`); }); it("doesn't highlight series when not hovering over datapoint", () => { @@ -82,7 +84,7 @@ describe('MultiModeGraphTooltip', () => { yAxis: null, // no active series }; - const container = mount( + render( { ); // We rendered two series rows - const rows = container.find('SeriesTableRow'); + const rows = screen.getAllByTestId('SeriesTableRow'); + expect(rows.length).toEqual(2); // We expect A-series(1st row) not to be highlighted - expect(rows.get(0).props.isActive).toBeFalsy(); + expect(rows[0]).not.toHaveStyle(`font-weight: ${theme.typography.fontWeightMedium}`); // We expect B-series(2nd row) not to be highlighted - expect(rows.get(1).props.isActive).toBeFalsy(); + expect(rows[1]).not.toHaveStyle(`font-weight: ${theme.typography.fontWeightMedium}`); }); }); }); diff --git a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx b/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx index c6b43c34ccc..edbf2e865f2 100644 --- a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx @@ -56,7 +56,7 @@ export const SeriesTableRow: React.FC = ({ color, label, va const styles = useStyles2(getSeriesTableRowStyles); return ( -
+
{color && (