From bae9a60089c7714c8edc8c7f2e5e1e4b90b1a3b9 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 26 May 2022 17:10:35 +0100
Subject: [PATCH] Chore: Convert legacy `Input` test to RTL (#49713)

---
 .betterer.results                             |  3 --
 .../Forms/Legacy/Input/Input.test.tsx         | 43 ++++++++-----------
 .../Input/__snapshots__/Input.test.tsx.snap   | 15 -------
 3 files changed, 17 insertions(+), 44 deletions(-)
 delete mode 100644 packages/grafana-ui/src/components/Forms/Legacy/Input/__snapshots__/Input.test.tsx.snap

diff --git a/.betterer.results b/.betterer.results
index 540d774f60e..d47c50cd923 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -5,9 +5,6 @@
 //
 exports[`no enzyme tests`] = {
   value: `{
-    "packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx:3129955645": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/Graph/Graph.test.tsx:1664091255": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ],
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx
index 18f5487b4e0..8ed2731ba21 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx
@@ -1,12 +1,13 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import renderer from 'react-test-renderer';
 
 import { ValidationEvents } from '../../../../types';
 import { EventsWithValidation } from '../../../../utils';
 
 import { Input } from './Input';
 
+const PLACEHOLDER_TEXT = 'Placeholder Text';
 const TEST_ERROR_MESSAGE = 'Value must be empty or less than 3 chars';
 const testBlurValidation: ValidationEvents = {
   [EventsWithValidation.onBlur]: [
@@ -21,33 +22,23 @@ const testBlurValidation: ValidationEvents = {
 
 describe('Input', () => {
   it('renders correctly', () => {
-    const tree = renderer.create(<Input />).toJSON();
-    expect(tree).toMatchSnapshot();
+    expect(() => render(<Input />)).not.toThrow();
   });
 
-  it('should validate with error onBlur', () => {
-    const wrapper = shallow(<Input validationEvents={testBlurValidation} />);
-    const evt = {
-      persist: jest.fn,
-      target: {
-        value: 'I can not be more than 2 chars',
-      },
-    };
-
-    wrapper.find('input').simulate('blur', evt);
-    expect(wrapper.state('error')).toBe(TEST_ERROR_MESSAGE);
+  it('should validate with error onBlur', async () => {
+    render(<Input validationEvents={testBlurValidation} placeholder={PLACEHOLDER_TEXT} />);
+    const inputEl = screen.getByPlaceholderText(PLACEHOLDER_TEXT);
+    await userEvent.type(inputEl, 'abcde');
+    inputEl.blur();
+    await screen.findByText(TEST_ERROR_MESSAGE);
   });
 
-  it('should validate without error onBlur', () => {
-    const wrapper = shallow(<Input validationEvents={testBlurValidation} />);
-    const evt = {
-      persist: jest.fn,
-      target: {
-        value: 'Hi',
-      },
-    };
-
-    wrapper.find('input').simulate('blur', evt);
-    expect(wrapper.state('error')).toBe(null);
+  it('should validate without error onBlur', async () => {
+    render(<Input validationEvents={testBlurValidation} placeholder={PLACEHOLDER_TEXT} />);
+    const inputEl = screen.getByPlaceholderText(PLACEHOLDER_TEXT);
+    await userEvent.type(inputEl, 'Hi');
+    inputEl.blur();
+    const errorMessage = screen.queryByText(TEST_ERROR_MESSAGE);
+    expect(errorMessage).not.toBeInTheDocument();
   });
 });
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/__snapshots__/Input.test.tsx.snap b/packages/grafana-ui/src/components/Forms/Legacy/Input/__snapshots__/Input.test.tsx.snap
deleted file mode 100644
index 453e9cb59cf..00000000000
--- a/packages/grafana-ui/src/components/Forms/Legacy/Input/__snapshots__/Input.test.tsx.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Input renders correctly 1`] = `
-<div
-  style={
-    Object {
-      "flexGrow": 1,
-    }
-  }
->
-  <input
-    className="gf-form-input"
-  />
-</div>
-`;