Plugins: Convert BarGaugePanel to RTL (#52423)

* Plugins: Convert bargaugepanel tests to RTL

* Chore: Improved test methods used in BarGaugePanel

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

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(<BarGaugePanel {...panelData} />);
+
+      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(<BarGaugePanel {...panelData} />);
+      expect(screen.queryByText(/100/)).toBeInTheDocument();
+      expect(screen.queryByText(/firstbarpanel/i)).not.toBeInTheDocument();
+      expect(screen.getByTestId(valueSelector)).toBeInTheDocument();
+
+      rerender(
+        <BarGaugePanel
+          {...buildPanelData({
+            data: {
+              series: [
+                toDataFrame({
+                  target: firstBarPanel,
+                  datapoints: [
+                    [200, 1000],
+                    [200, 300],
+                  ],
+                }),
+                toDataFrame({
+                  target: secondBarPanel,
+                  datapoints: [
+                    [300, 3000],
+                    [300, 300],
+                  ],
+                }),
+              ],
+              timeRange: createTimeRange(),
+              state: LoadingState.Done,
+            },
+          })}
+        />
+      );
+
+      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>): 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<PanelProps<PanelOptions>> {
-  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<BarGaugePanel>(
-    <BarGaugePanel
-      id={1}
-      data={data}
-      timeRange={timeRange}
-      timeZone={'utc'}
-      options={options}
-      title="hello"
-      fieldConfig={fieldConfig}
-      onFieldConfigChange={() => {}}
-      onOptionsChange={() => {}}
-      onChangeTimeRange={() => {}}
-      replaceVariables={(s) => s}
-      renderCounter={0}
-      width={532}
-      transparent={false}
-      height={250}
-      eventBus={{} as any}
-    />
-  );
-}

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<PanelProps<PanelOptions>> {
+export class BarGaugePanel extends PureComponent<BarGaugePanelProps> {
   renderComponent = (
     valueProps: VizRepeaterRenderValueProps<FieldDisplay, DisplayValueAlignmentFactors>,
     menuProps: DataLinksContextMenuApi
@@ -109,6 +109,7 @@ export class BarGaugePanel extends PureComponent<PanelProps<PanelOptions>> {
     );
   }
 }
+export type BarGaugePanelProps = PanelProps<PanelOptions>;
 
 export function clearNameForSingleSeries(count: number, field: FieldConfig<any>, display: DisplayValue): DisplayValue {
   if (count === 1 && !field.displayName) {