From c60487fdbf38f9964272b09bce526e4b763da824 Mon Sep 17 00:00:00 2001 From: Leo <108552997+lpskdl@users.noreply.github.com> Date: Tue, 19 Jul 2022 14:17:22 +0200 Subject: [PATCH] Plugins: Convert BarGaugePanel to RTL (#52423) * Plugins: Convert bargaugepanel tests to RTL * Chore: Improved test methods used in BarGaugePanel --- .betterer.results | 6 - .../panel/bargauge/BarGaugePanel.test.tsx | 186 ++++++++++-------- .../plugins/panel/bargauge/BarGaugePanel.tsx | 3 +- 3 files changed, 109 insertions(+), 86 deletions(-) diff --git a/.betterer.results b/.betterer.results index 914a3afa637..6b4f429c1f8 100644 --- a/.betterer.results +++ b/.betterer.results @@ -115,9 +115,6 @@ exports[`no enzyme tests`] = { ], "public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.test.tsx:3424320489": [ [0, 19, 13, "RegExp match", "2409514259"] - ], - "public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx:3368730691": [ - [0, 31, 13, "RegExp match", "2409514259"] ] }` }; @@ -8724,9 +8721,6 @@ exports[`better eslint`] = { "public/app/plugins/panel/bargauge/BarGaugeMigrations.test.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx:5381": [ - [0, 0, 0, "Unexpected any. Specify a different type.", "0"] - ], "public/app/plugins/panel/bargauge/BarGaugePanel.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx index e5946a60ee3..5b5b64436b4 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx +++ b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx @@ -1,61 +1,130 @@ -import { mount, ReactWrapper } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import { uniqueId } from 'lodash'; import React from 'react'; -import { - dateMath, - dateTime, - FieldConfigSource, - LoadingState, - PanelData, - PanelProps, - TimeRange, - toDataFrame, - VizOrientation, -} from '@grafana/data'; +import { dateMath, dateTime, EventBus, LoadingState, TimeRange, toDataFrame, VizOrientation } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { BarGaugeDisplayMode } from '@grafana/ui'; -import { BarGaugePanel } from './BarGaugePanel'; -import { PanelOptions } from './models.gen'; +import { BarGaugePanel, BarGaugePanelProps } from './BarGaugePanel'; const valueSelector = selectors.components.Panels.Visualization.BarGauge.valueV2; describe('BarGaugePanel', () => { - describe('when empty result is rendered', () => { - const wrapper = createBarGaugePanelWithData({ - series: [], - timeRange: createTimeRange(), - state: LoadingState.Done, - }); + describe('when there is no data', () => { + it('show a "No Data" message', () => { + const panelData = buildPanelData(); - it('should render with title "No data"', () => { - const displayValue = wrapper.find(`div[data-testid="${valueSelector}"]`).text(); - expect(displayValue).toBe('No data'); + render(); + + expect(screen.getByText(/no data/i)).toBeInTheDocument(); }); }); describe('when there is data', () => { - const wrapper = createBarGaugePanelWithData({ - series: [ - toDataFrame({ - target: 'test', - datapoints: [ - [100, 1000], - [100, 200], + it('shows the panel', () => { + const firstBarPanel = 'firstBarPanel'; + const secondBarPanel = 'secondBarPanel'; + const panelData = buildPanelData({ + data: { + series: [ + toDataFrame({ + target: firstBarPanel, + datapoints: [ + [100, 1000], + [100, 200], + ], + }), ], - }), - ], - timeRange: createTimeRange(), - state: LoadingState.Done, - }); + timeRange: createTimeRange(), + state: LoadingState.Done, + }, + }); - it('should render with title "No data"', () => { - const displayValue = wrapper.find(`div[data-testid="${valueSelector}"]`).text(); - expect(displayValue).toBe('100'); + const { rerender } = render(); + expect(screen.queryByText(/100/)).toBeInTheDocument(); + expect(screen.queryByText(/firstbarpanel/i)).not.toBeInTheDocument(); + expect(screen.getByTestId(valueSelector)).toBeInTheDocument(); + + rerender( + + ); + + expect(screen.queryByText(/firstbarpanel/i)).toBeInTheDocument(); + expect(screen.queryByText(/secondbarpanel/i)).toBeInTheDocument(); + expect(screen.queryByText(/200/)).toBeInTheDocument(); + expect(screen.queryByText(/300/)).toBeInTheDocument(); + expect(screen.getAllByTestId(valueSelector).length).toEqual(2); }); }); }); +function buildPanelData(overrideValues?: Partial): BarGaugePanelProps { + const timeRange = createTimeRange(); + const defaultValues = { + id: Number(uniqueId()), + data: { + series: [], + state: LoadingState.Done, + timeRange, + }, + options: { + displayMode: BarGaugeDisplayMode.Lcd, + reduceOptions: { + calcs: ['mean'], + values: false, + }, + orientation: VizOrientation.Horizontal, + showUnfilled: true, + minVizHeight: 10, + minVizWidth: 0, + }, + transparent: false, + timeRange, + timeZone: 'utc', + title: 'hello', + fieldConfig: { + defaults: {}, + overrides: [], + }, + onFieldConfigChange: jest.fn(), + onOptionsChange: jest.fn(), + onChangeTimeRange: jest.fn(), + replaceVariables: jest.fn(), + renderCounter: 0, + width: 552, + height: 250, + eventBus: {} as EventBus, + }; + + return { + ...defaultValues, + ...overrideValues, + }; +} function createTimeRange(): TimeRange { return { from: dateMath.parse('now-6h') || dateTime(), @@ -63,44 +132,3 @@ function createTimeRange(): TimeRange { raw: { from: 'now-6h', to: 'now' }, }; } - -function createBarGaugePanelWithData(data: PanelData): ReactWrapper> { - const timeRange = createTimeRange(); - - const options: PanelOptions = { - displayMode: BarGaugeDisplayMode.Lcd, - reduceOptions: { - calcs: ['mean'], - values: false, - }, - orientation: VizOrientation.Horizontal, - showUnfilled: true, - minVizHeight: 10, - minVizWidth: 0, - }; - const fieldConfig: FieldConfigSource = { - defaults: {}, - overrides: [], - }; - - return mount( - {}} - onOptionsChange={() => {}} - onChangeTimeRange={() => {}} - replaceVariables={(s) => s} - renderCounter={0} - width={532} - transparent={false} - height={250} - eventBus={{} as any} - /> - ); -} diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx index e044661b5a6..812db7b911a 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx +++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx @@ -18,7 +18,7 @@ import { config } from 'app/core/config'; import { PanelOptions } from './models.gen'; -export class BarGaugePanel extends PureComponent> { +export class BarGaugePanel extends PureComponent { renderComponent = ( valueProps: VizRepeaterRenderValueProps, menuProps: DataLinksContextMenuApi @@ -109,6 +109,7 @@ export class BarGaugePanel extends PureComponent> { ); } } +export type BarGaugePanelProps = PanelProps; export function clearNameForSingleSeries(count: number, field: FieldConfig, display: DisplayValue): DisplayValue { if (count === 1 && !field.displayName) {