Convert `MultiModeGraphTooltip` test to RTL (#52595)

* Convert MultiModeGraphTooltip test to RTL

* don't export these styles

* use theme instead of hardcoded style values

.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"]
     ],

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(
         <MultiModeGraphTooltip
           dimensions={dimensions}
           activeDimensions={activeDimensions}
@@ -67,12 +68,13 @@ describe('MultiModeGraphTooltip', () => {
       );
 
       // 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(
         <MultiModeGraphTooltip
           dimensions={dimensions}
           activeDimensions={activeDimensions}
@@ -92,12 +94,13 @@ describe('MultiModeGraphTooltip', () => {
       );
 
       // 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}`);
     });
   });
 });

packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx

@@ -56,7 +56,7 @@ export const SeriesTableRow: React.FC<SeriesTableRowProps> = ({ color, label, va
   const styles = useStyles2(getSeriesTableRowStyles);
 
   return (
-    <div className={cx(styles.seriesTableRow, isActive && styles.activeSeries)}>
+    <div data-testid="SeriesTableRow" className={cx(styles.seriesTableRow, isActive && styles.activeSeries)}>
       {color && (
         <div className={styles.seriesTableCell}>
           <SeriesIcon color={color} className={styles.icon} />