IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 09:33:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

Convert MultiModeGraphTooltip test to RTL (#52595)

Browse Source 
* Convert MultiModeGraphTooltip test to RTL

* don't export these styles

* use theme instead of hardcoded style values
This commit is contained in:
Ashley Harrison 2022-07-21 15:54:18 +01:00 committed by GitHub
parent b5d57c45e3
commit f25c609105
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

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

25
packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx
View File

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

2
packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx
View File

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