Merge pull request #2 from r3wt/add-tests

Add tests

.gitignore

@@ -9,6 +9,9 @@ build
 dist
 .rpt2_cache
 
+# tests
+coverage
+
 # misc
 .DS_Store
 .env

build.js

@@ -6,7 +6,7 @@ build({
   entryPoints: [pkg.source],
   format: 'esm',
   outfile: pkg.module,
-  tsconfig: './tsconfig.json',
+  tsconfig: './tsconfig.build.json',
   minify: true,
   bundle: true,
   logLevel: 'info',

example/package.json

@@ -8,7 +8,12 @@
     "react-dom": "file:../node_modules/react-dom",
     "react-scripts": "file:../node_modules/react-scripts",
     "react-syntax-highlighter": "file:../node_modules/react-syntax-highlighter",
-    "use-models": "file:.."
+    "use-models": "file:..",
+    "node-sass": "file:../node_modules/node-sass",
+    "@types/node": "file:../node_modules/@types/node",
+    "@types/react": "file:../node_modules/@types/react",
+    "@types/react-dom": "file:../node_modules/@types/react-dom",
+    "@types/react-syntax-highlighter": "file:../node_modules/@types/react-syntax-highlighter"
   },
   "scripts": {
     "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",

example/src/App.js → example/src/App.tsx

@@ -139,7 +139,7 @@ export default function Form() {
 export default function App() {
   return (
     <div className='gh-example'>
-      <div class='gh-100 title'>
+      <div className='gh-100 title'>
         <div className='left'>
           <h1>Use-models</h1>
           <p>advanced form model hooks for your functional react components</p>
@@ -149,7 +149,7 @@ export default function App() {
           <a href='https://github.com/r3wt/use-models'>[Github]</a>
         </div>
       </div>
-      <div class='gh-50'>
+      <div className='gh-50'>
         <h1>Code:</h1>
         <div className='box-1'>
           <SyntaxHighlighter
@@ -161,9 +161,9 @@ export default function App() {
           </SyntaxHighlighter>
         </div>
       </div>
-      <div class='gh-50'>
+      <div className='gh-50'>
         <h1>Output:</h1>
-        <div class='box-2'>
+        <div className='box-2'>
           <Form />
         </div>
       </div>

example/src/Form.js → example/src/Form.tsx

@@ -2,11 +2,20 @@ import React, { useEffect } from 'react'
 
 import useModels, { model, extendValidators } from 'use-models'
 
-extendValidators('checkUsername', async (value) => {
-  return await new Promise((resolve, reject) => {
+extendValidators('checkUsername', async (_value:string) => {
+  return await new Promise((_resolve, reject) => {
     setTimeout(() => reject(new Error('That username is taken')), 200)
   })
-})
+});
+
+export type FormState = {
+  name: string;
+  username: string;
+  email: string;
+  remember: boolean;
+  newsletter: string;
+  user_type: string;
+}
 
 export default function Form() {
   const {
@@ -20,8 +29,8 @@ export default function Form() {
     watch,
     hydrate,
     set
-  } = useModels({
-    name: model('', (value) => {
+  } = useModels<FormState>({
+    name: model('', (value:string):void|string => {
       if (value.length < 5) {
         return 'Name must be at least 5 characters'
       }
@@ -49,6 +58,7 @@ export default function Form() {
 
   const onError = error((errors, state) => {
     //do something on form submit error
+    console.log(errors,state);
   })
 
   watch('username', (value, previousValue) => {
@@ -66,7 +76,7 @@ export default function Form() {
                 'user-type-option' +
                 (state.user_type === 'user' ? ' selected' : '')
               }
-              onClick={(e) => set('user_type', 'user')}
+              onClick={(_e:React.MouseEvent<HTMLDivElement>) => set('user_type', 'user')}
             >
               Normal User
             </div>
@@ -75,15 +85,15 @@ export default function Form() {
                 'user-type-option' +
                 (state.user_type === 'admin' ? ' selected' : '')
               }
-              onClick={(e) => set('user_type', 'admin')}
+              onClick={(_e:React.MouseEvent<HTMLDivElement>) => set('user_type', 'admin')}
             >
               Admin User
             </div>
           </div>
         </div>
         <div className='form-group'>
-          <label>Name</label>
-          <input {...input('name')} />
+          <label htmlFor='name'>Name</label>
+          <input id='name' {...input('name')} />
           {errors.name && <p className='help-text'>{errors.name}</p>}
         </div>
         <div className='form-group'>

example/src/index.js → example/src/index.tsx

@@ -1,7 +1,7 @@
-import './index.css'
+import './index.scss'
 
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.render(<App />, document.getElementById('root'));

example/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

example/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}