mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
b96a3832d0
commit
332e8477c7
@ -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"]
|
||||
],
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -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} />;
|
||||
}
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user