Merge pull request #172 from CreateThrive/feature/react-hook-form

Feature: react-hook-form

Author: TOPOFGR

.eslintrc

@@ -39,8 +39,7 @@
     "Request": true,
     "fetch": true,
     "reducerTester": true,
-    "mountWithProviders": true,
-    "shallowWithProviders": true
+    "renderWithProviders": true
   },
   "parser": "babel-eslint",
   "settings": {

README.md

@@ -90,12 +90,14 @@ React Firebase Admin is our in-house admin dashboard boilerplate, used in many o
 - [Format.js](https://formatjs.io/) (★ 11.7k) libraries for internationalization (see [docs](https://formatjs.io/docs/basic-internationalization-principles)).
 - [date-fns](https://date-fns.org/) (★ 22.3k) date utility library (see [docs](https://date-fns.org/docs/Getting-Started)).
 - [cross-env](https://github.com/kentcdodds/cross-env) (★ 4.9k) run scripts that set and use environment variables across platforms (see [docs](https://www.npmjs.com/package/cross-env)).
+- [React Hook Form](https://github.com/react-hook-form/react-hook-form) (★ 14.6k) Performant, flexible and extensible forms with easy to use validation.
+- [yup](https://github.com/jquense/yup) (★ 11k) schema builder for value parsing and validation.
 - [Inquirer](https://github.com/SBoudrias/Inquirer.js/) (★ 12.2k) A collection of common interactive command line user interfaces (see [docs](https://github.com/SBoudrias/Inquirer.js/#documentation)).
 
 ### Unit Testing
 
 - [Jest](https://jestjs.io/) (★ 29.9k) as testing framework (see [docs](https://jestjs.io/docs/en/getting-started)).
-- [Enzyme](https://airbnb.io/enzyme/) (★ 18.5k) to test react components in Jest.
+- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) (★ 12.7k) to test react components in Jest.
 - [Redux-mock-store](https://github.com/dmitry-zaets/redux-mock-store) (★ 2.1k) to test redux actions, reducers and store state in Jest.
 
 ### Linting

functions/tsconfig.json

@@ -7,7 +7,8 @@
     "sourceMap": true,
     "strict": true,
     "target": "es2017",
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "skipLibCheck": true
   },
   "compileOnSave": true,
   "include": ["src"]

package-lock.json

@@ -3,15 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^0.1.0",
     "bulma": "^0.9.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.15.0",
     "firebase": "^7.18",
+    "mutationobserver-shim": "^0.3.7",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-datepicker": "^3.0.0",
     "react-dom": "^16.13.1",
     "react-firebaseui": "^4.1.0",
+    "react-hook-form": "^6.7.0",
     "react-intl": "^5.6.5",
     "react-redux": "^7.2.1",
     "react-redux-toastr": "^7.6.4",
@@ -22,7 +25,8 @@
     "redux": "^4.0.5",
     "redux-act": "^1.8.0",
     "redux-persist": "^6.0.0",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "yup": "^0.29.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -52,14 +56,13 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.0.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "cross-env": "^7.0.2",
     "deep-freeze": "^0.0.1",
     "dotenv": "^8.2.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.3",
-    "enzyme-to-json": "^3.4.4",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
@@ -84,9 +87,6 @@
     }
   },
   "jest": {
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "collectCoverageFrom": [
       "src/**/*.{js,jsx}"
     ],

package.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
 
 import ConfirmationModal from '.';
 
@@ -13,7 +13,7 @@ describe('<ConfirmationModal /> rendering', () => {
   });
 
   it('should render without crashing', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -25,11 +25,11 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(component.asFragment()).toMatchSnapshot();
   });
 
   it('should set the active modifier if the isActive prop is passed down', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -41,11 +41,13 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(component.exists('div.modal.is-active')).toBeTruthy();
+    expect(
+      component.container.querySelector('div.modal.is-active')
+    ).toBeTruthy();
   });
 
   it('should not set the active modifier if the isActive prop is not passed down', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         confirmButtonMessage="test message"
         onConfirmation={onConfirm}
@@ -56,11 +58,11 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(component.exists('div.modal.is-active')).toBeFalsy();
+    expect(component.container.querySelector('div.modal.is-active')).toBeNull();
   });
 
   it('should call onConfirm when the confirmation button is clicked', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="confirm test message"
@@ -72,13 +74,12 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    component.find('button[children="confirm test message"]').simulate('click');
-
+    fireEvent.click(component.getByText('confirm test message'));
     expect(onConfirm).toHaveBeenCalled();
   });
 
   it('should call onCancel when the cancel button is clicked', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -90,13 +91,13 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    component.find('button[children="cancel test message"]').simulate('click');
+    fireEvent.click(component.getByText('cancel test message'));
 
     expect(onCancel).toHaveBeenCalled();
   });
 
   it('should set the title of the modal', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -108,11 +109,11 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(component.exists('p[children="test title"]')).toBeTruthy();
+    expect(component.getByText('test title')).toBeTruthy();
   });
 
   it('should set the body of the modal', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -124,11 +125,11 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(component.exists('section[children="test body"]')).toBeTruthy();
+    expect(component.getByText('test body')).toBeTruthy();
   });
 
   it('should set the confirm button message', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="confirm test message"
@@ -140,13 +141,11 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(
-      component.exists('button[children="confirm test message"]')
-    ).toBeTruthy();
+    expect(component.getByText('confirm test message')).toBeTruthy();
   });
 
   it('should set the cancel button message', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -158,8 +157,6 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(
-      component.exists('button[children="cancel test message"]')
-    ).toBeTruthy();
+    expect(component.getByText('cancel test message')).toBeTruthy();
   });
 });

src/components/ConfirmationModal/ConfirmationModal.test.js

@@ -1,48 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ConfirmationModal /> rendering should render without crashing 1`] = `
-<div
-  className="modal is-active"
->
+<DocumentFragment>
   <div
-    className="modal-background"
-    onClick={[MockFunction]}
-  />
-  <div
-    className="modal-card"
+    class="modal is-active"
   >
-    <header
-      className="modal-card-head"
+    <div
+      class="modal-background"
+    />
+    <div
+      class="modal-card"
     >
-      <p
-        className="modal-card-title"
+      <header
+        class="modal-card-head"
       >
-        test title
-      </p>
-    </header>
-    <section
-      className="modal-card-body"
-    >
-      test body
-    </section>
-    <footer
-      className="modal-card-foot"
-    >
-      <button
-        className="button is-danger undefined"
-        onClick={[MockFunction]}
-        type="button"
+        <p
+          class="modal-card-title"
+        >
+          test title
+        </p>
+      </header>
+      <section
+        class="modal-card-body"
       >
-        test message
-      </button>
-      <button
-        className="button"
-        onClick={[MockFunction]}
-        type="button"
+        test body
+      </section>
+      <footer
+        class="modal-card-foot"
       >
-        test message
-      </button>
-    </footer>
+        <button
+          class="button is-danger undefined"
+          type="button"
+        >
+          test message
+        </button>
+        <button
+          class="button"
+          type="button"
+        >
+          test message
+        </button>
+      </footer>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;

src/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.js.snap

@@ -11,7 +11,7 @@ const ConfirmationModal = ({
   confirmButtonMessage,
   onConfirmation,
   cancelButtonMessage,
-  onCancel
+  onCancel,
 }) => {
   const modifiers = isActive && 'is-active';
   const loadingModifier = isLoading && 'is-loading';
@@ -57,7 +57,7 @@ ConfirmationModal.propTypes = {
   confirmButtonMessage: PropTypes.string.isRequired,
   onConfirmation: PropTypes.func.isRequired,
   cancelButtonMessage: PropTypes.string.isRequired,
-  onCancel: PropTypes.func.isRequired
+  onCancel: PropTypes.func.isRequired,
 };
 
 export default ConfirmationModal;