update and add tests

src/lib/factories.tsx

@@ -9,6 +9,7 @@ import {
   ShorthandRenderer,
 } from '../../types/utils'
 import { mergeStyles } from './mergeThemes'
+import { isForwardRefComponent } from './forwardRefFactory/componentUtils'
 
 type HTMLTag = 'iframe' | 'img' | 'input'
 type ShorthandProp = 'children' | 'src' | 'type'
@@ -81,12 +82,17 @@ export function createShorthand(
  * @returns {function} A shorthand factory function waiting for `val` and `defaultProps`.
  */
 export function createShorthandFactory(Component: React.ReactType, mappedProp?: string) {
-  // TODO: Add assert
-  // if (typeof Component !== 'function' && typeof Component !== 'string') {
-  //   throw new Error('createShorthandFactory() Component must be a string or function.')
-  // }
+  if (
+    typeof Component === 'function' ||
+    typeof Component === 'string' ||
+    isForwardRefComponent(Component)
+  ) {
+    return (val, options) => createShorthand(Component, mappedProp, val, options)
+  }
 
-  return (val, options) => createShorthand(Component, mappedProp, val, options)
+  throw new Error(
+    'createShorthandFactory() Component must be a string, a function or to be wrapped with forwardRef().',
+  )
 }
 
 // ============================================================
@@ -99,10 +105,6 @@ function createShorthandFromValue(
   value?: ShorthandValue,
   options: CreateShorthandOptions = CREATE_SHORTHAND_DEFAULT_OPTIONS,
 ) {
-  // TODO: Add assert
-  // if (typeof Component !== 'function' && typeof Component !== 'string') {
-  //   throw new Error('createShorthand() Component must be a string or function.')
-  // }
   // short circuit noop values
   const valIsNoop = _.isNil(value) || typeof value === 'boolean'
   if (valIsNoop && !options.render) return null

test/specs/lib/factories-test.tsx

@@ -164,6 +164,12 @@ describe('factories', () => {
       expect(goodUsage).not.toThrowError()
     })
 
+    test('does not throw if passed a Component is wrapped with forwardRef()', () => {
+      const goodUsage = () => createShorthandFactory(React.forwardRef(() => <div />), '')
+
+      expect(goodUsage).not.toThrowError()
+    })
+
     test('throw if passed Component that is not a string nor function', () => {
       consoleUtil.disableOnce()
       const badComponents: any = [undefined, null, true, false, [], {}, 123]
@@ -181,29 +187,6 @@ describe('factories', () => {
       expect(typeof createShorthand).toBe('function')
     })
 
-    test('does not throw if passed a function Component', () => {
-      const goodUsage = () => createShorthand(() => <div />, '')
-
-      expect(goodUsage).not.toThrowError()
-    })
-
-    test('does not throw if passed a string Component', () => {
-      const goodUsage = () => createShorthand('div', '')
-
-      expect(goodUsage).not.toThrowError()
-    })
-
-    test('throw if passed Component that is not a string nor function', () => {
-      consoleUtil.disableOnce()
-      const badComponents: any[] = [undefined, null, true, false, [], {}, 123]
-
-      _.each(badComponents, badComponent => {
-        const badUsage = () => createShorthand(badComponent, '')
-
-        expect(badUsage).toThrowError()
-      })
-    })
-
     describe('render callback', () => {
       test('returns the same React element as if shorthand value would be passed directly', () => {
         const createShorthandElement = valueOrRenderCallback =>

test/specs/lib/forwardRefFactory/componentUtils-test.ts

@@ -0,0 +1,30 @@
+import { isForwardRefComponent, supportsRef } from 'src/lib/forwardRefFactory/componentUtils'
+import { DOMClass, DOMFunction, ForwardedRef } from '../../components/Ref/fixtures'
+
+describe('componentUtils', () => {
+  test('isForwardRefComponent', () => {
+    it('returns "false" when passed component do not support ref forwarding', () => {
+       [DOMClass, DOMFunction, 'div'].map(Component => {
+        expect(isForwardRefComponent(Component)).toBe(false)
+      })
+    })
+
+    it('returns "true" when passed component supports ref forwarding', () => {
+      expect(isForwardRefComponent(ForwardedRef)).toBe(false)
+    })
+  })
+
+  describe('supportsRef', () => {
+    it('returns "false" when passed component do not support "ref" prop', () => {
+       [DOMClass, DOMFunction, 'div'].map(Component => {
+        expect(supportsRef(Component)).toBe(false)
+      })
+    })
+
+    it('returns "true" when passed component supports "ref" prop', () => {
+       ['div', ForwardedRef].map(Component => {
+        expect(supportsRef(Component)).toBe(true)
+      })
+    })
+  })
+})