IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 01:53:33 -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": [ "packages/grafana-ui/src/components/Graph/Graph.test.tsx:1664091255": [
[0, 17, 13, "RegExp match", "2409514259"] [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": [ "packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx:2719724375": [
[0, 17, 13, "RegExp match", "2409514259"] [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 React from 'react';
import { createDimension, ArrayVector, FieldType, DisplayProcessor } from '@grafana/data'; import { createDimension, createTheme, ArrayVector, FieldType, DisplayProcessor } from '@grafana/data';
import { ActiveDimensions } from '../../VizTooltip'; import { ActiveDimensions } from '../../VizTooltip';
@ -12,6 +12,7 @@ let dimensions: GraphDimensions;
describe('MultiModeGraphTooltip', () => { describe('MultiModeGraphTooltip', () => {
const display: DisplayProcessor = (v) => ({ numeric: v, text: String(v), color: 'red' }); const display: DisplayProcessor = (v) => ({ numeric: v, text: String(v), color: 'red' });
const theme = createTheme();
describe('when shown when hovering over a datapoint', () => { describe('when shown when hovering over a datapoint', () => {
beforeEach(() => { beforeEach(() => {
@ -57,7 +58,7 @@ describe('MultiModeGraphTooltip', () => {
xAxis: [0, 1], // column, row xAxis: [0, 1], // column, row
yAxis: [0, 1], // column, row yAxis: [0, 1], // column, row
}; };
const container = mount( render(
<MultiModeGraphTooltip <MultiModeGraphTooltip
dimensions={dimensions} dimensions={dimensions}
activeDimensions={activeDimensions} activeDimensions={activeDimensions}
@ -67,12 +68,13 @@ describe('MultiModeGraphTooltip', () => {
); );
// We rendered two series rows // 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 // We expect A-series(1st row) not to be highlighted
expect(rows.get(0).props.isActive).toBeTruthy(); expect(rows[0]).toHaveStyle(`font-weight: ${theme.typography.fontWeightMedium}`);
// We expect B-series(2nd row) not to be highlighted // 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", () => { it("doesn't highlight series when not hovering over datapoint", () => {
@ -82,7 +84,7 @@ describe('MultiModeGraphTooltip', () => {
yAxis: null, // no active series yAxis: null, // no active series
}; };
const container = mount( render(
<MultiModeGraphTooltip <MultiModeGraphTooltip
dimensions={dimensions} dimensions={dimensions}
activeDimensions={activeDimensions} activeDimensions={activeDimensions}
@ -92,12 +94,13 @@ describe('MultiModeGraphTooltip', () => {
); );
// We rendered two series rows // 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 // 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 // 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); const styles = useStyles2(getSeriesTableRowStyles);
return ( return (
<div className={cx(styles.seriesTableRow, isActive && styles.activeSeries)}> <div data-testid="SeriesTableRow" className={cx(styles.seriesTableRow, isActive && styles.activeSeries)}>
{color && ( {color && (
<div className={styles.seriesTableCell}> <div className={styles.seriesTableCell}>
<SeriesIcon color={color} className={styles.icon} /> <SeriesIcon color={color} className={styles.icon} />