react: full hooks coverage

.eslintrc

@@ -32,7 +32,7 @@
         "camelcase": [
             "error",
             {
-                "properties": "always"
+                "properties": "never"
             }
         ],
         "comma-dangle": [

package.json

@@ -25,8 +25,7 @@
     "build:react": "rollup -c config/rollup.react.config.js",
     "build:classes": "rollup -c config/rollup.classes.config.js",
     "build:websocket": "rollup -c config/rollup.websocket.config.js",
-    "build:test": "env TEST_BUILD=1 npm run build && npm run build:handlers && npm run build:classes && npm run build:websocket && npm run build:react",
-    "test": "npm run build:test && jest --coverage",
+    "test": "jest",
     "coverage": "cat ./coverage/lcov.info | coveralls",
     "clean": "rimraf {dist,react,handlers,websocket,classes}"
   },
@@ -39,6 +38,15 @@
   ],
   "author": "Julien Elbaz",
   "license": "MIT",
+  "jest": {
+    "collectCoverage": true,
+    "collectCoverageFrom": [ "src/**/*.js"],
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/test/",
+      "/src/websocket/browser.js"
+    ]
+  },
   "devDependencies": {
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",

src/react/hooks/tools.js

@@ -1,7 +1,18 @@
 export const defaultRootKey = '__requests__'
 export const defaultSerialize = (method, url) => `${method}@${url}`
 export const identity = _ => _
+
 export const normalizedOperations = {
+    read(mappings, store) {
+        const storeFragment = {}
+        Object.entries(mappings).forEach(([ entity, ids ]) => {
+            storeFragment[entity] = {}
+            ids.forEach(key => {
+                storeFragment[entity][key] = store[entity] && store[entity][key] || null
+            })
+        })
+        return storeFragment
+    },
     write(normalizedData, store) {
         Object.entries(normalizedData).forEach(([ entity, entityData ]) => {
             if(!store[entity]) {
@@ -10,11 +21,7 @@ export const normalizedOperations = {
 
             Object.entries(entityData).forEach(([ key, value ]) => {
                 if(store[entity][key]) {
-                    if(Array.isArray(store[entity][key]) && Array.isArray(value)) {
-                        value.forEach(item => {
-                            store[entity][key].push(item)
-                        })
-                    } else if(typeof store[entity][key] === 'object' && typeof value === 'object') {
+                    if(typeof store[entity][key] === 'object' && typeof value === 'object') {
                         Object.entries(value).forEach(([k, v]) => {
                             store[entity][key][k] = v
                         })
@@ -26,16 +33,5 @@ export const normalizedOperations = {
                 }
             })
         })
-    },
-    read(mappings, store) {
-        const storeFragment = {}
-        Object.entries(mappings).forEach(([ entity, ids ]) => {
-            if(!storeFragment[entity])
-                storeFragment[entity] = {}
-            ids.forEach(key => {
-                storeFragment[entity][key] = store[entity][key]
-            })
-        })
-        return storeFragment
     }
 }

src/react/hooks/useNormalizedRequest.js

@@ -89,13 +89,18 @@ export function useNormalizedRequest(url, {
 
     useEffect(function() {
         checkAndRefetch()
-    }, [ storeKey ])
+    }, [ storeKey, skip() ])
 
     if(ssrContext) {
         checkAndRefetch(true)
     }
 
-    return skip() ? {} : {
+    return skip() ? {
+        data: null,
+        error: null,
+        loading: false,
+        refetch
+    } : {
         loading,
         data,
         error,

src/react/hooks/useRequest.js

@@ -78,13 +78,18 @@ export function useRequest(url, {
 
     useEffect(function() {
         checkAndRefetch()
-    }, [ storeKey ])
+    }, [ storeKey, skip() ])
 
     if(ssrContext) {
         checkAndRefetch(true)
     }
 
-    return skip() ? {} : {
+    return skip() ? {
+        data: null,
+        error: null,
+        loading: false,
+        refetch
+    } : {
         loading,
         data,
         error,

src/react/hooks/useResource.js

@@ -5,15 +5,15 @@ import { HyperactivContext } from '../context/index'
 function formatData(data, entity, id) {
     return (
         data ?
-            id ?
+            id !== null ?
                 data[entity] && data[entity][id] :
                 data[entity] && Object.values(data[entity]) :
             data
     )
 }
 
 export function useResource(entity, url, {
-    id,
+    id = null,
     store,
     normalize,
     client,
@@ -60,7 +60,7 @@ export function useResource(entity, url, {
         formatData(data, entity, id)
     , [data, entity, id])
 
-    const refetch = normalizedRefetch.then(data =>
+    const refetch = () => normalizedRefetch().then(data =>
         formatData(data, entity, id)
     )
 

src/react/index.js

@@ -6,5 +6,5 @@ export * from './hooks/index'
 export * from './context/index'
 
 export const store = function(obj, options = {}) {
-    return hyperactiv.observe(obj, Object.assign({ deep: true, batch: false }, options))
+    return hyperactiv.observe(obj, Object.assign({ deep: true, batch: true }, options))
 }

test/classes.test.js

@@ -1,4 +1,4 @@
-const classes = require('../classes/classes.js')
+const classes = require('../src/classes')
 const { Observable } = classes
 
 test('onChange should catch mutation', done => {

test/handlers.test.js

@@ -1,5 +1,5 @@
-const hyperactiv = require('../dist/hyperactiv.js')
-const handlers = require('../handlers/handlers.js')
+const hyperactiv = require('../src/index').default
+const handlers = require('../src/handlers').default
 const { observe } = hyperactiv
 const { all, write, debug } = handlers
 

test/index.test.js

@@ -1,4 +1,4 @@
-const hyperactiv = require('../dist/hyperactiv.js')
+const hyperactiv = require('../src/index').default
 const { computed, observe, dispose } = hyperactiv
 
 const delay = time => new Promise(resolve => setTimeout(resolve, time))

test/react/__snapshots__/context.test.js.snap

@@ -5,12 +5,15 @@ exports[`React context test suite SSR Provider and preloadData should resolve pr
   hello world
    
   bonjour le monde
+   
+  1
 </div>
 `;
 
 exports[`React context test suite preloadData should resolve promises based on its depth option 1`] = `
 <div>
   hello world
    
+   
 </div>
 `;

test/react/components.test.js

@@ -12,8 +12,10 @@ import {
     watch,
     store as createStore,
     HyperactivProvider
-} from '../../react/react.js'
+} from '../../src/react'
+import { ignoreActErrors } from './utils'
 
+ignoreActErrors()
 afterEach(cleanup)
 
 describe('React components test suite', () => {
@@ -61,95 +63,97 @@ describe('React components test suite', () => {
         })
     }
 
-    /* watch() */
+    describe('watch()', () => {
 
-    test('watch() should observe a class component', () => {
-        const store = createStore({
-            firstName: 'Igor',
-            lastName: 'Gonzola'
-        })
-        const ClassComponent = watch(class extends React.Component {
-            render() {
-                return commonJsx(store)
-            }
-        })
-
-        return testStoreUpdate(ClassComponent, store)
-    })
+        it('should observe a class component', () => {
+            const store = createStore({
+                firstName: 'Igor',
+                lastName: 'Gonzola'
+            })
+            const ClassComponent = watch(class extends React.Component {
+                render() {
+                    return commonJsx(store)
+                }
+            })
 
-    test('watch() should observe a functional component', () => {
-        const store = createStore({
-            firstName: 'Igor',
-            lastName: 'Gonzola'
+            return testStoreUpdate(ClassComponent, store)
         })
-        const FunctionalComponent = watch(() =>
-            commonJsx(store)
-        )
 
-        return testStoreUpdate(FunctionalComponent, store)
-    })
+        it('should observe a functional component', () => {
+            const store = createStore({
+                firstName: 'Igor',
+                lastName: 'Gonzola'
+            })
+            const FunctionalComponent = watch(() =>
+                commonJsx(store)
+            )
 
-    test('watch() wrapping a functional component should inject the `store` prop', () => {
-        const store = createStore({
-            hello: 'World'
+            return testStoreUpdate(FunctionalComponent, store)
         })
-        const Wrapper = watch(props => <div data-testid="hello-div">{props.store && props.store.hello}</div>)
-        const { getByTestId } = render(
-            <Wrapper />
-        )
-        expect(getByTestId('hello-div')).toContainHTML('')
-        const { getByText } = render(
-            <HyperactivProvider store={store}>
+
+        test('wrapping a functional component should inject the `store` prop', () => {
+            const store = createStore({
+                hello: 'World'
+            })
+            const Wrapper = watch(props => <div data-testid="hello-div">{props.store && props.store.hello}</div>)
+            const { getByTestId } = render(
                 <Wrapper />
-            </HyperactivProvider>
-        )
-        expect(getByText('World')).toBeTruthy()
-    })
+            )
+            expect(getByTestId('hello-div')).toContainHTML('')
+            const { getByText } = render(
+                <HyperactivProvider store={store}>
+                    <Wrapper />
+                </HyperactivProvider>
+            )
+            expect(getByText('World')).toBeTruthy()
+        })
 
-    test('watch() wrapping a functional component should not inject the `store` prop if a prop with this name already exists', () => {
-        const store = createStore({
-            hello: 'World'
+        test('wrapping a functional component should not inject the `store` prop if a prop with this name already exists', () => {
+            const store = createStore({
+                hello: 'World'
+            })
+            const Wrapper = watch(props => <div data-testid="hello-div">{props.store && props.store.hello}</div>)
+            const { getByTestId } = render(
+                <HyperactivProvider store={store}>
+                    <Wrapper store={{ hello: 'bonjour' }}/>
+                </HyperactivProvider>
+            )
+            expect(getByTestId('hello-div')).toHaveTextContent('bonjour')
         })
-        const Wrapper = watch(props => <div data-testid="hello-div">{props.store && props.store.hello}</div>)
-        const { getByTestId } = render(
-            <HyperactivProvider store={store}>
-                <Wrapper store={{ hello: 'bonjour' }}/>
-            </HyperactivProvider>
-        )
-        expect(getByTestId('hello-div')).toHaveTextContent('bonjour')
-    })
 
-    test('watch() wrapping a class component should gracefully unmount if the child component has a componentWillUnmount method', () => {
-        let unmounted = false
-        const Wrapper = watch(class extends React.Component {
-            componentWillUnmount() {
-                unmounted = true
-            }
-            render() {
-                return <div>Hello</div>
-            }
+        test('wrapping a class component should gracefully unmount if the child component has a componentWillUnmount method', () => {
+            let unmounted = false
+            const Wrapper = watch(class extends React.Component {
+                componentWillUnmount() {
+                    unmounted = true
+                }
+                render() {
+                    return <div>Hello</div>
+                }
+            })
+            const { getByText, unmount } = render(<Wrapper />)
+            expect(unmounted).toBe(false)
+            expect(getByText('Hello')).toBeTruthy()
+            unmount()
+            expect(unmounted).toBe(true)
         })
-        const { getByText, unmount } = render(<Wrapper />)
-        expect(unmounted).toBe(false)
-        expect(getByText('Hello')).toBeTruthy()
-        unmount()
-        expect(unmounted).toBe(true)
     })
 
-    /* <Watch /> */
+    describe('<Watch />', () => {
+        it('should observe its render function', () => {
+            const store = createStore({
+                firstName: 'Igor',
+                lastName: 'Gonzola'
+            })
+            const ComponentWithWatch = () =>
+                <Watch render={() => commonJsx(store)} />
 
-    test('<Watch /> should observe its render function', () => {
-        const store = createStore({
-            firstName: 'Igor',
-            lastName: 'Gonzola'
+            return testStoreUpdate(ComponentWithWatch, store)
+        })
+        it('should not render anything if no render prop is passed', () => {
+            const { container } = render(<Watch />)
+            expect(container).toContainHTML('')
         })
-        const ComponentWithWatch = () =>
-            <Watch render={() => commonJsx(store)} />
-
-        return testStoreUpdate(ComponentWithWatch, store)
-    })
-    test('<Watch /> should not render anything if no render prop is passed', () => {
-        const { container } = render(<Watch />)
-        expect(container).toContainHTML('')
     })
+
 })