feat(reset): create handle reset

- create handle reset to useForm
- add reset button to form
- write tests for handle reset

[Finishes reset]

Author: Eazybee

.DS_Store

@@ -0,0 +1,2 @@
+exclude_patterns:
+- "**/*.spec.js"

.codeclimate.yml

@@ -1,6 +1,10 @@
 {
   "parser": "babel-eslint",
   "extends": ["airbnb-base", "plugin:react/recommended"],
+  "parserOptions": {
+    "ecmaVersion": 10,
+    "ecmaFeatures": { "jsx": true }
+  },
   "env": {
     "node": true,
     "browser": true,

.eslintrc

@@ -0,0 +1,3 @@
+eslint:
+  enabled: true
+  config_file: .eslintrc

.hound.yml

@@ -14,7 +14,7 @@ const App = () => {
   };
 
   const {
-    values, handleChange, handleSubmit, errors,
+    values, handleChange, handleSubmit, errors, handleReset,
   } = useForm({ callback: login, rules });
 
   const { userName, age } = values;
@@ -46,6 +46,7 @@ const App = () => {
         {ageErr && <p data-testid='age'>{ageErr}</p>}
         <br />
         <button type='submit'>Submit</button>
+        <button type='reset' onClick={handleReset}>Reset</button>
       </form>
       {submittedValues
       && <div className='table' data-testid='table'>

src/components/App.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import App from './App';
+import { validInputs, inValidInputs } from '../../test/fixtures/app';
 
 
 afterEach(cleanup);
@@ -15,10 +16,10 @@ describe('App Component', () => {
 
   it('should render <p data-test=username /> on wrong data input', () => {
     const { getByTestId, getByPlaceholderText } = render(<App/>);
-    fireEvent.change(getByPlaceholderText('Username'), { target: { value: 'abc@de123com' } });
+    fireEvent.change(getByPlaceholderText('Username'), { target: { value: inValidInputs.username } });
 
     expect(getByTestId('username')).toHaveTextContent('The userName field must contain only alphabetic characters.');
-    expect(getByPlaceholderText('Username')).toHaveValue('abc@de123com');
+    expect(getByPlaceholderText('Username')).toHaveValue(inValidInputs.username);
   });
 
   it('should render <p data-test=username /> on empty data input', () => {
@@ -31,10 +32,10 @@ describe('App Component', () => {
 
   it('should render <p data-test=age /> on wrong data input', () => {
     const { getByTestId, getByPlaceholderText } = render(<App/>);
-    fireEvent.change(getByPlaceholderText('Age'), { target: { value: 'abc@de123com' } });
+    fireEvent.change(getByPlaceholderText('Age'), { target: { value: inValidInputs.age } });
 
     expect(getByTestId('age')).toHaveTextContent('The age must be a number.');
-    expect(getByPlaceholderText('Age')).toHaveValue('abc@de123com');
+    expect(getByPlaceholderText('Age')).toHaveValue(inValidInputs.age);
   });
 
   it('should not render <p data-test=age /> on empty data input', () => {
@@ -54,17 +55,17 @@ describe('App Component', () => {
 
   it('should remove error message upon data input correction', () => {
     const { getByTestId, getByPlaceholderText } = render(<App/>);
-    fireEvent.change(getByPlaceholderText('Username'), { target: { value: 'abc@de123com' } });
+    fireEvent.change(getByPlaceholderText('Username'), { target: { value: inValidInputs.username } });
 
     expect(getByTestId('username')).toHaveTextContent('The userName field must contain only alphabetic characters.');
-    expect(getByPlaceholderText('Username')).toHaveValue('abc@de123com');
+    expect(getByPlaceholderText('Username')).toHaveValue(inValidInputs.username);
 
     fireEvent.change(getByPlaceholderText('Username'), { target: { value: ' ' } });
 
     expect(getByTestId('username')).toHaveTextContent('The userName field cannot be empty.');
     expect(getByPlaceholderText('Username')).toHaveValue(' ');
 
-    fireEvent.change(getByPlaceholderText('Username'), { target: { value: 'Eazybee' } });
+    fireEvent.change(getByPlaceholderText('Username'), { target: { value: validInputs.username } });
 
     let element;
 
@@ -76,41 +77,71 @@ describe('App Component', () => {
       expect(error.message.includes('Unable to find an element by: [data-testid="username"]')).toBeTruthy();
     }
 
-    expect(getByPlaceholderText('Username')).toHaveValue('Eazybee');
+    expect(getByPlaceholderText('Username')).toHaveValue(validInputs.username);
   });
 
-  it('should submit and render table on valid data input', () => {
-    const {
-      getByTestId, getByPlaceholderText, getByText,
-    } = render(<App/>);
-
-    fireEvent.change(getByPlaceholderText('Username'), { target: { value: 'EazyBee' } });
-    fireEvent.change(getByPlaceholderText('Age'), { target: { value: '12' } });
-    fireEvent.click(getByText('Submit'));
-
-    expect(getByTestId('table')).toBeTruthy();
-    expect(getByTestId('table')).toContainElement(getByTestId('userName0'));
-    expect(getByTestId('table')).toContainElement(getByTestId('age1'));
+  describe('Submit Button', () => {
+    it('should submit and render table on valid data input', () => {
+      const {
+        getByTestId, getByPlaceholderText, getByText,
+      } = render(<App/>);
+
+      fireEvent.change(getByPlaceholderText('Username'), { target: { value: validInputs.username } });
+      fireEvent.change(getByPlaceholderText('Age'), { target: { value: validInputs.age } });
+      fireEvent.click(getByText('Submit'));
+
+      expect(getByTestId('table')).toBeTruthy();
+      expect(getByTestId('table')).toContainElement(getByTestId('userName0'));
+      expect(getByTestId('table')).toContainElement(getByTestId('age1'));
+    });
+
+    it('should not submit nor render table on invalid data input', () => {
+      const {
+        getByTestId, getByPlaceholderText, getByText,
+      } = render(<App/>);
+
+      fireEvent.change(getByPlaceholderText('Username'), { target: { value: inValidInputs.username } });
+      fireEvent.change(getByPlaceholderText('Age'), { target: { value: validInputs.age } });
+      fireEvent.click(getByText('Submit'));
+
+      let element;
+
+      try {
+        element = getByTestId('table');
+      } catch (error) {
+        expect(element).toBe(undefined);
+        expect(error).toBeTruthy();
+        expect(error.message.includes('Unable to find an element by: [data-testid="table"]')).toBeTruthy();
+        expect(getByTestId('username')).toHaveTextContent('The userName field must contain only alphabetic characters.');
+      }
+    });
   });
 
-  it('should not submit and render table on valid data input', () => {
-    const {
-      getByTestId, getByPlaceholderText, getByText,
-    } = render(<App/>);
-
-    fireEvent.change(getByPlaceholderText('Username'), { target: { value: '1Eazyb' } });
-    fireEvent.change(getByPlaceholderText('Age'), { target: { value: '12' } });
-    fireEvent.click(getByText('Submit'));
-
-    let element;
-
-    try {
-      element = getByTestId('table');
-    } catch (error) {
-      expect(element).toBe(undefined);
-      expect(error).toBeTruthy();
-      expect(error.message.includes('Unable to find an element by: [data-testid="table"]')).toBeTruthy();
-      expect(getByTestId('username')).toHaveTextContent('The userName field must contain only alphabetic characters.');
-    }
+  describe('Reset Button', () => {
+    it('should clear all inputs field', () => {
+      const { getByText, getByPlaceholderText } = render(<App/>);
+      fireEvent.change(getByPlaceholderText('Username'), { target: { value: validInputs.username } });
+      fireEvent.change(getByPlaceholderText('Age'), { target: { value: validInputs.age } });
+      fireEvent.click(getByText('Reset'));
+
+      expect(getByPlaceholderText('Username')).toHaveValue('');
+      expect(getByPlaceholderText('Age')).toHaveValue('');
+    });
+
+    it('should clear all error message', () => {
+      const { getByText, getByTestId, getByPlaceholderText } = render(<App/>);
+      fireEvent.change(getByPlaceholderText('Username'), { target: { value: inValidInputs.username } });
+      fireEvent.click(getByText('Reset'));
+
+      let element;
+
+      try {
+        element = getByTestId('username');
+      } catch (error) {
+        expect(element).toBe(undefined);
+        expect(error).toBeTruthy();
+        expect(error.message.includes('Unable to find an element by: [data-testid="username"]')).toBeTruthy();
+      }
+    });
   });
 });

src/components/App.spec.js

@@ -101,8 +101,13 @@ const useForm = ({ callback, rules }) => {
     return false;
   };
 
+  const handleReset = () => {
+    setValues(prepareInitialState());
+    setErrors({});
+  };
+
   return {
-    values, handleChange, handleSubmit, errors,
+    values, handleChange, handleSubmit, errors, handleReset,
   };
 };
 

src/hooks/useForm.js

@@ -9,7 +9,7 @@ describe('userForm hook', () => {
   it(' should render', () => {
     const { result } = renderHook(() => useForm({ callback, rules }));
     const {
-      values, errors, handleChange, handleSubmit,
+      values, errors, handleChange, handleSubmit, handleReset,
     } = result.current;
 
     expect(values.age).toBe('');
@@ -18,6 +18,7 @@ describe('userForm hook', () => {
     expect(errors.ausername).toBe(undefined);
     expect(typeof handleChange).toBe('function');
     expect(typeof handleSubmit).toBe('function');
+    expect(typeof handleReset).toBe('function');
   });
 
   describe('handleChange function', () => {
@@ -102,4 +103,23 @@ describe('userForm hook', () => {
       expect(errors.username).toBe('The username field is required.');
     });
   });
+
+  describe('handleReset function', () => {
+    it('should clear all inputs field when called', () => {
+      const { result } = renderHook(() => useForm({ callback, rules }));
+
+      const { handleReset } = result.current;
+
+      act(() => {
+        handleReset();
+      });
+
+      const {
+        values: { username }, errors,
+      } = result.current;
+
+      expect(username).toBe('');
+      expect(Object.keys(errors).length).toBe(0);
+    });
+  });
 });

src/hooks/useForm.spec.js

@@ -0,0 +1,9 @@
+export const validInputs = {
+  username: 'Eazybee',
+  age: 12,
+};
+
+export const inValidInputs = {
+  username: 'Eazybee123',
+  age: '12A',
+};