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>
This commit is contained in:
GitStart 2022-09-27 13:26:53 +00:00 committed by GitHub
parent b96a3832d0
commit 332e8477c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 38 deletions

View File

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

View File

@ -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');
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);
});
});
});

View File

@ -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} />;
}
);