Convert packages/grafana-ui/src/components/Graph/Graph.test.tsx to RTL (#55771)

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com>
Co-authored-by: Rubens Rafael <rubensrafael2@live.com>

.betterer.results

@@ -5,9 +5,6 @@
 //
 exports[`no enzyme tests`] = {
   value: `{
-    "packages/grafana-ui/src/components/Graph/Graph.test.tsx:1664091255": [
-      [0, 17, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/QueryField/QueryField.test.tsx:2976628669": [
       [0, 26, 13, "RegExp match", "2409514259"]
     ],

packages/grafana-ui/src/components/Graph/Graph.test.tsx

@@ -1,4 +1,5 @@
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import $ from 'jquery';
 import React from 'react';
 
 import { GraphSeriesXY, FieldType, ArrayVector, dateTime, FieldColorModeId, DisplayProcessor } from '@grafana/data';
@@ -103,10 +104,16 @@ describe('Graph', () => {
             <VizTooltip mode={TooltipDisplayMode.Single} />
           </Graph>
         );
+        render(graphWithTooltip);
 
-        const container = mount(graphWithTooltip);
-        const tooltip = container.find('GraphTooltip');
-        expect(tooltip).toHaveLength(0);
+        const timestamp = screen.queryByLabelText('Timestamp');
+        const tableRow = screen.queryByTestId('SeriesTableRow');
+        const seriesIcon = screen.queryByTestId('series-icon');
+
+        expect(timestamp).toBeFalsy();
+        expect(timestamp?.parentElement).toBeFalsy();
+        expect(tableRow?.parentElement).toBeFalsy();
+        expect(seriesIcon).toBeFalsy();
       });
 
       it('renders tooltip when hovering over a datapoint', () => {
@@ -116,14 +123,8 @@ describe('Graph', () => {
             <VizTooltip mode={TooltipDisplayMode.Single} />
           </Graph>
         );
-        const container = mount(graphWithTooltip);
-
-        // When
-        // Simulating state set by $.flot plothover event when interacting with the canvas with Graph
-        // Unfortunately I haven't found a way to perfom the actual mouse hover interaction in JSDOM, hence I'm simulating the state
-        container.setState({
-          isTooltipVisible: true,
-          // This "is" close by middle point, Flot would have pick the middle point at this position
+        render(graphWithTooltip);
+        const eventArgs = {
           pos: {
             x: 120,
             y: 50,
@@ -133,18 +134,13 @@ describe('Graph', () => {
             dataIndex: 1,
             series: { seriesIndex: 0 },
           },
-        });
+        };
+        $('div.graph-panel__chart').trigger('plothover', [eventArgs.pos, eventArgs.activeItem]);
+        const timestamp = screen.getByLabelText('Timestamp');
+        const tooltip = screen.getByTestId('SeriesTableRow').parentElement;
 
-        // Then
-        const tooltip = container.find('GraphTooltip');
-        const time = tooltip.find("[aria-label='Timestamp']");
-        // Each series should have icon rendered by default GraphTooltip component
-        // We are using this to make sure correct amount of series were rendered
-        const seriesIcons = tooltip.find('SeriesIcon');
-
-        expect(time).toHaveLength(1);
-        expect(tooltip).toHaveLength(1);
-        expect(seriesIcons).toHaveLength(1);
+        expect(timestamp.parentElement?.isEqualNode(tooltip)).toBe(true);
+        expect(screen.getAllByTestId('series-icon')).toHaveLength(1);
       });
     });
 
@@ -156,27 +152,28 @@ describe('Graph', () => {
             <VizTooltip mode={TooltipDisplayMode.Multi} />
           </Graph>
         );
-        const container = mount(graphWithTooltip);
+        render(graphWithTooltip);
 
         // When
-        container.setState({
-          isTooltipVisible: true,
+        const eventArgs = {
           // This "is" more or less between first and middle point. Flot would not have picked any point as active one at this position
           pos: {
             x: 80,
             y: 50,
           },
           activeItem: null,
-        });
-
+        };
         // Then
-        const tooltip = container.find('GraphTooltip');
-        const time = tooltip.find("[aria-label='Timestamp']");
-        const seriesIcons = tooltip.find('SeriesIcon');
+        $('div.graph-panel__chart').trigger('plothover', [eventArgs.pos, eventArgs.activeItem]);
+        const timestamp = screen.getByLabelText('Timestamp');
+
+        const tableRows = screen.getAllByTestId('SeriesTableRow');
+        expect(tableRows).toHaveLength(2);
+        expect(timestamp.parentElement?.isEqualNode(tableRows[0].parentElement)).toBe(true);
+        expect(timestamp.parentElement?.isEqualNode(tableRows[1].parentElement)).toBe(true);
 
-        expect(time).toHaveLength(1);
-        expect(tooltip).toHaveLength(1);
-        expect(seriesIcons).toHaveLength(2);
+        const seriesIcon = screen.getAllByTestId('series-icon');
+        expect(seriesIcon).toHaveLength(2);
       });
     });
   });

packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx

@@ -35,7 +35,7 @@ export const SeriesIcon = React.forwardRef<HTMLDivElement, Props>(
       marginRight: '8px',
     };
 
-    return <div ref={ref} className={className} style={styles} {...restProps} />;
+    return <div data-testid="series-icon" ref={ref} className={className} style={styles} {...restProps} />;
   }
 );