diff --git a/src/__tests__/withErrorIfNeeded.js b/src/__tests__/withErrorIfNeeded.js new file mode 100644 index 0000000..3116a77 --- /dev/null +++ b/src/__tests__/withErrorIfNeeded.js @@ -0,0 +1,60 @@ +import React from "react"; +import { compose } from "recompose"; +import { TextInput } from "react-native"; +import { mount } from "enzyme"; + +import { withErrorNew as withErrorIfNeeded } from "../.."; +import withFormikMock from "../testUtils/withFormikMock"; + +console.error = jest.fn(); + +const TOUCHED_INPUT_NAME = "TOUCHED_INPUT_NAME"; +const TOUCHED_INPUT_ERROR = "TOUCHED_INPUT_ERROR"; +const UNTOUCHED_INPUT_NAME = "UNTOUCHED_INPUT_NAME"; +const UNTOUCHED_INPUT_ERROR = "UNTOUCHED_INPUT_ERROR"; + +const formikContext = { + errors: { + [TOUCHED_INPUT_NAME]: TOUCHED_INPUT_ERROR, + [UNTOUCHED_INPUT_NAME]: UNTOUCHED_INPUT_ERROR + }, + touched: { + [TOUCHED_INPUT_NAME]: true + }, + submitCount: 0 +}; +const Input = compose( + withFormikMock(formikContext), + withErrorIfNeeded +)(TextInput); + +const testInputError = (inputName, expectedError) => { + const input = mount(); + expect(input.find(TextInput).props().error).toEqual(expectedError); +}; + +describe("withError", () => { + it("displays error for all inputs if the form is submitted", () => { + formikContext.submitCount = 1; + testInputError(UNTOUCHED_INPUT_NAME, UNTOUCHED_INPUT_ERROR); + testInputError("valid input", undefined); + }); + + it("displays error for touched inputs if the form is not submitted", () => { + formikContext.submitCount = 0; + testInputError(UNTOUCHED_INPUT_NAME, undefined); + testInputError(TOUCHED_INPUT_NAME, TOUCHED_INPUT_ERROR); + }); + + it("keeps other props", () => { + const wrapper = mount(); + expect(wrapper.find(TextInput).props().someProp).toEqual("someValue"); + }); + + it("allows overriding error prop", () => { + const erroredInput = mount( + + ); + expect(erroredInput.find(TextInput).props().error).toEqual("override!!"); + }); +}); diff --git a/src/withErrorIfNeeded.js b/src/withErrorIfNeeded.js new file mode 100644 index 0000000..16db974 --- /dev/null +++ b/src/withErrorIfNeeded.js @@ -0,0 +1,21 @@ +import { compose, mapProps } from "recompose"; +import { connect } from "formik"; +import withError from "./withError"; +import withTouched from "./withTouched"; + +const withErrorIfNeeded = compose( + withError, + withTouched, + connect, + mapProps(({ formik: { submitCount }, error, touched, ...props }) => { + const shouldDisplayError = touched || submitCount > 0; + + return { + touched, + error: shouldDisplayError ? error : undefined, + ...props + }; + }) +); + +export default withErrorIfNeeded;