From 58da6e8c267b63e17cde977c20d2423b064cf90d Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Fri, 30 Nov 2018 12:26:45 +0100
Subject: [PATCH] react-panel: Add test for Input with validation on blur

---
 .../app/core/components/Form/Input.test.tsx   | 53 +++++++++++++++++++
 public/app/core/components/Form/Input.tsx     |  3 +-
 .../Form/__snapshots__/Input.test.tsx.snap    | 11 ++++
 3 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 public/app/core/components/Form/Input.test.tsx
 create mode 100644 public/app/core/components/Form/__snapshots__/Input.test.tsx.snap

diff --git a/public/app/core/components/Form/Input.test.tsx b/public/app/core/components/Form/Input.test.tsx
new file mode 100644
index 00000000000..9e903208e80
--- /dev/null
+++ b/public/app/core/components/Form/Input.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import { Input, EventsWithValidation } from './Input';
+import { ValidationEvents } from 'app/types';
+
+const TEST_ERROR_MESSAGE = 'Value must be empty or less than 3 chars';
+const testBlurValidation: ValidationEvents = {
+  [EventsWithValidation.onBlur]: [
+    {
+      rule: (value: string) => {
+        if (!value || value.length < 3) {
+          return true;
+        }
+        return false;
+      },
+      errorMessage: TEST_ERROR_MESSAGE,
+    },
+  ],
+};
+
+describe('Input', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<Input />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  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 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);
+  });
+});
diff --git a/public/app/core/components/Form/Input.tsx b/public/app/core/components/Form/Input.tsx
index e815336edbe..6ba58b45e91 100644
--- a/public/app/core/components/Form/Input.tsx
+++ b/public/app/core/components/Form/Input.tsx
@@ -45,7 +45,7 @@ export class Input extends PureComponent<Props> {
 
   validatorAsync = (validationRules: ValidationRule[]) => {
     return evt => {
-      const errors = validate(evt.currentTarget.value, validationRules);
+      const errors = validate(evt.target.value, validationRules);
       this.setState(prevState => {
         return {
           ...prevState,
@@ -60,6 +60,7 @@ export class Input extends PureComponent<Props> {
     Object.keys(EventsWithValidation).forEach((eventName: EventsWithValidation) => {
       if (hasValidationEvent(eventName, validationEvents) || restProps[eventName]) {
         inputElementProps[eventName] = async evt => {
+          evt.persist(); // Needed for async. https://reactjs.org/docs/events.html#event-pooling
           if (hasValidationEvent(eventName, validationEvents)) {
             await this.validatorAsync(validationEvents[eventName]).apply(this, [evt]);
           }
diff --git a/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap b/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap
new file mode 100644
index 00000000000..249d6b0be8d
--- /dev/null
+++ b/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input renders correctly 1`] = `
+<div
+  className="our-custom-wrapper-class"
+>
+  <input
+    className="gf-form-input"
+  />
+</div>
+`;