Merge pull request #58 from LaunchPadLab/sync-submit

Wrap onSubmit in a promise

docs.md

@@ -18,7 +18,7 @@ A wrapper around the `reduxForm` HOC exported from
 [redux-form](https://www.npmjs.com/package/redux-form) that gives it some extra functionality:
 
 1.  Makes extra options available for configuring the form
-2.  Wraps every rejected `onSubmit` in a `SubmissionError`. If the thrown error has an `errors` property, its value will be passed to `SubmissionError`. The original error will be accessible via the `SubmissionError`s `meta.error` property. This enables developers to access useful information regarding the origin of the failure, e.g., HTTP status.
+2.  Wraps every `onSubmit` result in a promise. Additionally, wraps rejected `onSubmit` results in a `SubmissionError`. If the thrown error has an `errors` property, its value will be passed to `SubmissionError`. The original error will be accessible via the `SubmissionError`s `meta.error` property. This enables developers to access useful information regarding the origin of the failure, e.g., HTTP status.
 3.  Provides a default `onSubmit` function that resolves successfully and logs a warning.
 4.  Ignores any `onChange` events that occur on a pristine and untouched form, patching a bug in `redux-form v8`.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-form",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "Extensions for the reduxForm HOC",
   "main": "lib/index.js",
   "scripts": {

src/lpForm.js

@@ -14,7 +14,7 @@ import {
   enableSubmitOnChange,
   mergeOptionsWithProps,
   renameFormProp,
-  wrapSubmissionErrors,
+  wrapSubmissionPromise,
   omitCustomProps,
   ignorePristineOnChange,
 } from './middleware'
@@ -24,7 +24,7 @@ import {
  * {@link https://www.npmjs.com/package/redux-form|redux-form} that gives it some extra functionality:
  *
  * 1. Makes extra options available for configuring the form
- * 2. Wraps every rejected `onSubmit` in a `SubmissionError`. If the thrown error has an `errors` property, its value will be passed to `SubmissionError`. The original error will be accessible via the `SubmissionError`s `meta.error` property. This enables developers to access useful information regarding the origin of the failure, e.g., HTTP status.
+ * 2. Wraps every `onSubmit` result in a promise. Additionally, wraps rejected `onSubmit` results in a `SubmissionError`. If the thrown error has an `errors` property, its value will be passed to `SubmissionError`. The original error will be accessible via the `SubmissionError`s `meta.error` property. This enables developers to access useful information regarding the origin of the failure, e.g., HTTP status.
  * 3. Provides a default `onSubmit` function that resolves successfully and logs a warning.
  * 4. Ignores any `onChange` events that occur on a pristine and untouched form, patching a bug in `redux-form v8`.
  *
@@ -78,7 +78,7 @@ function lpForm (options={}) {
       debounceOnSubmit,
       filterSubmitValues,
       addBeforeSubmitHook,
-      wrapSubmissionErrors,
+      wrapSubmissionPromise,
       enableSubmitOnChange,
       ignorePristineOnChange,
       addDefaultValidate,

src/middleware/index.js

@@ -8,5 +8,5 @@ export filterSubmitValues from './filterSubmitValues'
 export renameFormProp from './renameFormProp'
 export mergeOptionsWithProps from './mergeOptionsWithProps'
 export omitCustomProps from './omitCustomProps'
-export wrapSubmissionErrors from './wrapSubmissionErrors'
+export wrapSubmissionPromise from './wrapSubmissionPromise'
 export ignorePristineOnChange from './ignorePristineOnChange'

src/middleware/wrapSubmissionErrors.js → src/middleware/wrapSubmissionPromise.js

@@ -3,14 +3,15 @@ import { SubmissionError } from 'redux-form'
 import isPromise from 'is-promise'
 import { getOr } from 'lodash/fp'
 
-// Wrap submission results in a redux-form SubmissionError
-const wrapSubmissionErrors = withPropsOnChange(
+// Wrap submission results in a redux-form SubmissionError. 
+// Also ensures that the return value of onSubmit is a promise.
+const wrapSubmissionPromise = withPropsOnChange(
   ['onSubmit'],
   ({ onSubmit }) => {
     return {
       onSubmit: (...args) => {
         const result = onSubmit(...args)
-        if (!isPromise(result)) return result
+        if (!isPromise(result)) return Promise.resolve(result)
         return result.catch(err => {
           const messages = getOr({}, 'errors', err)
           const submissionError = new SubmissionError(messages)
@@ -24,4 +25,4 @@ const wrapSubmissionErrors = withPropsOnChange(
   }
 )
 
-export default wrapSubmissionErrors
+export default wrapSubmissionPromise

test/lpForm.test.js

@@ -5,6 +5,7 @@ import { configure, mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import debounce from 'lodash/debounce'
 import { SubmissionError } from 'redux-form'
+import isPromise from 'is-promise'
 import { lpForm } from '../src'
 
 jest.mock('lodash/debounce', () => jest.fn(fn => fn))
@@ -52,6 +53,20 @@ test('lpForm: filters submitted values', () => {
   expect(onSubmit).toHaveBeenCalledWith({ address: { street: 'Shady Lane' }})
 })
 
+test('lpForm: wraps synchronous onSubmits in a promise', () => {
+  const syncResult = 'a synchronous result'
+  const onSubmit = () => syncResult
+  const Wrapped = () => <div> Hi </div>
+  const Form = lpForm({ onSubmit })(Wrapped)
+  const wrapper = mountWithProvider(<Form />)
+  const formConfig = wrapper.find(Wrapped).props()
+  const result = formConfig.onSubmit(INITIAL_VALUES)
+  expect(isPromise(result)).toBe(true)
+  return result.then(resolvedResult => {
+    expect(resolvedResult).toEqual(syncResult)
+  })
+})
+
 test('lpForm: wraps rejected promises in a SubmissionError', () => {
   expect.assertions(2)
   const ERRORS = [ 'my', 'errors' ]