From 2f63d7b1c426f2945f5205ce3cdcbfc267d4d9fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Mon, 21 Feb 2022 08:21:06 +0100
Subject: [PATCH] Chore: Replace enzyme with RTL in BigValue.test.tsx (#45650)

---
 .betterer.results                             |  3 --
 .../src/components/BigValue/BigValue.test.tsx | 20 ++-----
 .../src/components/BigValue/BigValue.tsx      |  2 -
 .../__snapshots__/BigValue.test.tsx.snap      | 54 -------------------
 4 files changed, 5 insertions(+), 74 deletions(-)
 delete mode 100644 packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap

diff --git a/.betterer.results b/.betterer.results
index 3c9d28c1017..43a2c9bd9af 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -8,9 +8,6 @@ exports[`no enzyme tests`] = {
     "packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx:2315765050": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/grafana-ui/src/components/BigValue/BigValue.test.tsx:261212211": [
-      [1, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx:1355456933": [
       [1, 31, 13, "RegExp match", "2409514259"]
     ],
diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx
index 94b995ccc99..16efc2b43c3 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { BigValue, Props, BigValueColorMode, BigValueGraphMode } from './BigValue';
+import { render, screen } from '@testing-library/react';
+import { BigValue, BigValueColorMode, BigValueGraphMode, Props } from './BigValue';
 import { createTheme } from '@grafana/data';
 
 function getProps(propOverrides?: Partial<Props>): Props {
@@ -21,22 +21,12 @@ function getProps(propOverrides?: Partial<Props>): Props {
   return props;
 }
 
-const setup = (propOverrides?: object) => {
-  const props = getProps(propOverrides);
-  const wrapper = shallow(<BigValue {...props} />);
-  const instance = wrapper.instance() as BigValue;
-
-  return {
-    instance,
-    wrapper,
-  };
-};
-
 describe('BigValue', () => {
   describe('Render with basic options', () => {
     it('should render', () => {
-      const { wrapper } = setup();
-      expect(wrapper).toMatchSnapshot();
+      render(<BigValue {...getProps()} />);
+
+      expect(screen.getByText('25')).toBeInTheDocument();
     });
   });
 });
diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.tsx
index ff222b5d60e..864c2547199 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValue.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValue.tsx
@@ -1,8 +1,6 @@
-// Library
 import React, { PureComponent } from 'react';
 import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline, TextDisplayOptions } from '@grafana/data';
 
-// Types
 import { Themeable2 } from '../../types';
 import { buildLayout } from './BigValueLayout';
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
diff --git a/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap b/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap
deleted file mode 100644
index 5acf66fb54e..00000000000
--- a/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BigValue Render with basic options should render 1`] = `
-<div
-  style={
-    Object {
-      "alignItems": "center",
-      "background": "linear-gradient(120deg, rgb(179, 24, 0), rgb(230, 0, 31))",
-      "borderRadius": "3px",
-      "display": "flex",
-      "flexDirection": "row",
-      "height": "300px",
-      "padding": "12px",
-      "position": "relative",
-      "width": "300px",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "column",
-        "flexGrow": 1,
-        "justifyContent": "center",
-      }
-    }
-  >
-    <FormattedDisplayValue
-      style={
-        Object {
-          "color": "rgb(247, 248, 250)",
-          "fontSize": 230,
-          "fontWeight": 500,
-          "lineHeight": 1.2,
-          "position": "relative",
-          "textAlign": "center",
-          "zIndex": 1,
-        }
-      }
-      value={
-        Object {
-          "color": "red",
-          "numeric": 25,
-          "text": "25",
-          "titleToAlignTo": undefined,
-          "valueToAlignTo": "25",
-        }
-      }
-    />
-  </div>
-</div>
-`;