Infra/render tests - TextField (#1684)

* WIP - add render tests for TextField

* WIP - keep working on TextField tests

* Add tests for validations

* cleanup tests

* move render test case into the same file of the test

* minor changes in Hint render tests

* Code review fixes

* Add test that check when hint not passed

Author: ethanshar

src/components/hint/__tests__/index.spec.js

@@ -45,22 +45,15 @@ describe('Hint Screen component test', () => {
   });
 
   it('Test Hint modal is not visible when showHint is false', async () => {
-    const element = <HintTestComponent showHint={false}/>;
-
-    const {queryByTestId} = render(element);
-
-    const modal = queryByTestId('Hint.modal');
-
+    const renderTree = render(<HintTestComponent showHint={false}/>);
+    const modal = renderTree.queryByTestId('Hint.modal');
     expect(modal).toBeNull();
   });
 
   it('Test Hint modal is visible when showHint is true', async () => {
-    const element = <HintTestComponent showHint/>;
-
-    const {getByTestId, queryAllByTestId} = render(element);
-    const hint = getByTestId('Hint');
+    const renderTree = render(<HintTestComponent showHint/>);
+    const hint = renderTree.getByTestId('Hint');
     expect(hint).toBeTruthy();
-  
-    expect(queryAllByTestId('Hint.modal')).toBeTruthy();
+    expect(renderTree.queryAllByTestId('Hint.modal')).toBeTruthy();
   });
 });

src/incubator/TextField/__tests__/index.spec.js

@@ -0,0 +1,86 @@
+import React, {useState} from 'react';
+import {fireEvent, render} from '@testing-library/react-native';
+import TextField from '../index';
+
+const defaultProps = {
+  testID: 'field',
+  placeholder: 'Placeholder'
+};
+
+const TestCase = props => {
+  const [value, setValue] = useState(props.value);
+  return <TextField {...defaultProps} {...props} onChangeText={setValue} value={value}/>;
+};
+
+describe('TextField', () => {
+  describe('hint prop', () => {
+    it('should hint text replace placeholder when input is focused', () => {
+      const renderTree = render(<TestCase hint={'Hint'}/>);
+
+      const input = renderTree.getByTestId('field');
+      renderTree.getByPlaceholderText(defaultProps.placeholder);
+
+      fireEvent(input, 'focus');
+      renderTree.getByPlaceholderText('Hint');
+    });
+
+    it('should not show hint when hint prop not passed', () => {
+      const renderTree = render(<TestCase/>);
+
+      const input = renderTree.getByTestId('field');
+      renderTree.getByPlaceholderText(defaultProps.placeholder);
+      
+      fireEvent(input, 'focus');
+      renderTree.getByPlaceholderText(defaultProps.placeholder);
+    });
+  });
+
+  describe('formatter prop', () => {
+    const priceFormatter = Intl.NumberFormat('en-US');
+
+    const props = {
+      value: '10000',
+      formatter: value => priceFormatter.format(Number(value))
+    };
+
+    it('should format value while not focused based on formatter prop', () => {
+      const renderTree = render(<TestCase {...props}/>);
+      renderTree.getByDisplayValue('10,000');
+    });
+
+    it('should not format value while focused', () => {
+      const renderTree = render(<TestCase {...props}/>);
+      const input = renderTree.getByTestId('field');
+      fireEvent(input, 'focus');
+      renderTree.getByDisplayValue('10000');
+    });
+  });
+
+  describe('validation', () => {
+    const props = {
+      testID: 'field',
+      enableErrors: true,
+      validate: 'email',
+      validationMessage: 'email is invalid'
+    };
+
+    it('should display validation error message when validation fail after blur', () => {
+      const renderTree = render(<TestCase {...props} validateOnBlur/>);
+      const input = renderTree.getByTestId('field');
+      fireEvent.changeText(input, 'invalidEmail');
+      fireEvent(input, 'blur');
+      renderTree.getByText(props.validationMessage);
+    });
+
+    it('should remove validation error message after entering a valid input', async () => {
+      const renderTree = render(<TestCase {...props} validateOnStart validateOnChange value={'invalid'}/>);
+      const input = renderTree.getByTestId('field');
+
+      renderTree.getByText(props.validationMessage);
+
+      fireEvent.changeText(input, '[email protected]');
+      const validationMessageElement = renderTree.queryByText(props.validationMessage);
+      expect(validationMessageElement).toBe(null);
+    });
+  });
+});