From 332e8477c72d3e09b40a92fb9272165db5cf04a8 Mon Sep 17 00:00:00 2001 From: GitStart <1501599+gitstart@users.noreply.github.com> Date: Tue, 27 Sep 2022 13:26:53 +0000 Subject: [PATCH] Convert packages/grafana-ui/src/components/Graph/Graph.test.tsx to RTL (#55771) Co-authored-by: gitstart Co-authored-by: gitstart Co-authored-by: Nitesh Singh Co-authored-by: Thiago Nascimbeni 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 --- .betterer.results | 3 - .../src/components/Graph/Graph.test.tsx | 65 +++++++++---------- .../src/components/VizLegend/SeriesIcon.tsx | 2 +- 3 files changed, 32 insertions(+), 38 deletions(-) diff --git a/.betterer.results b/.betterer.results index afc543061ff..a2c020658d5 100644 --- a/.betterer.results +++ b/.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"] ], diff --git a/packages/grafana-ui/src/components/Graph/Graph.test.tsx b/packages/grafana-ui/src/components/Graph/Graph.test.tsx index 628538d33f7..4da05ef73dd 100644 --- a/packages/grafana-ui/src/components/Graph/Graph.test.tsx +++ b/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', () => { ); + 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', () => { ); - 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', () => { ); - 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'); - expect(time).toHaveLength(1); - expect(tooltip).toHaveLength(1); - expect(seriesIcons).toHaveLength(2); + 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); + + const seriesIcon = screen.getAllByTestId('series-icon'); + expect(seriesIcon).toHaveLength(2); }); }); }); diff --git a/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx b/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx index ec91ac063ff..08ccef9091e 100644 --- a/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx +++ b/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx @@ -35,7 +35,7 @@ export const SeriesIcon = React.forwardRef( marginRight: '8px', }; - return
; + return
; } );