Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

the form stays in validating state in a wizard when field is unregistred #1018

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

the form stays in validating state in a wizard when field is unregistred #1018

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions src/Field.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import "@testing-library/jest-dom/extend-expect";
import { ErrorBoundary, Toggle, wrapWith } from "./testUtils";
import Form from "./ReactFinalForm";
import Field from "./Field";
import { useFormState } from ".";

const onSubmitMock = (values) => {};

Expand Down Expand Up @@ -1161,6 +1162,159 @@ describe("Field", () => {
expect(getByTestId("validating")).toHaveTextContent("Not Validating");
});

it("should have validating state false after a field has been unregistred during mixed async validation", async () => {
const Test = () => {
const [hasField, setHasField] = React.useState(true);
const state = useFormState({ subscription: { validating: true } });

return (
<div>
{!hasField && (
<Field
name="lastname"
component="input"
validate={(value) => (value ? undefined : "Required")}
data-testid="lastname"
/>
)}
{hasField && (
<Field
name="name"
component="input"
validate={async (value) => {
await timeout(5);
return value === "erikras" ? "Username taken" : undefined;
}}
data-testid="name"
/>
)}
<div data-testid="validating">
{state.validating === true ? "Spinner" : "Not Validating"}
</div>
<button data-testid="hide" onClick={() => setHasField(false)}>
Hide field
</button>
</div>
);
};

const { getByTestId, queryByTestId } = render(
<Form onSubmit={onSubmitMock}>
{({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<Test />
</form>
)}
</Form>,
);

expect(getByTestId("validating")).toHaveTextContent("Spinner");
await sleep(6);
expect(getByTestId("name").value).toBe("");

// validating state is ok as long as a Field with async validation is visible
expect(getByTestId("validating")).toHaveTextContent("Not Validating");
fireEvent.change(getByTestId("name"), { target: { value: "erik" } });

expect(getByTestId("validating")).toHaveTextContent("Spinner");
await sleep(6);

expect(getByTestId("validating")).toHaveTextContent("Not Validating");

// validating state is KO if Field is unregistered while validating
fireEvent.change(getByTestId("name"), { target: { value: "erikr" } });

expect(getByTestId("validating")).toHaveTextContent("Spinner");
fireEvent.click(getByTestId("hide"));
expect(queryByTestId("name")).not.toBeInTheDocument();

// when an other field with sync validation is present, it should not have side effect on the async validation
expect(queryByTestId("lastname")).toBeInTheDocument();
expect(getByTestId("validating")).toHaveTextContent("Spinner");

await sleep(6);

expect(getByTestId("validating")).toHaveTextContent("Not Validating");
});

it("should have validating state false after a field has been unregistred during full async validation", async () => {
const Test = () => {
const [hasField, setHasField] = React.useState(true);
const state = useFormState({ subscription: { validating: true } });

return (
<div>
{!hasField && (
<Field
name="lastname"
component="input"
validate={async (value) => {
await timeout(5);
return value ? undefined : "Required";
}}
data-testid="lastname"
/>
)}
{hasField && (
<Field
name="name"
component="input"
validate={async (value) => {
await timeout(5);
return value === "erikras" ? "Username taken" : undefined;
}}
data-testid="name"
/>
)}
<div data-testid="validating">
{state.validating === true ? "Spinner" : "Not Validating"}
</div>
<button data-testid="hide" onClick={() => setHasField(false)}>
Hide field
</button>
</div>
);
};

const { getByTestId, queryByTestId } = render(
<Form onSubmit={onSubmitMock}>
{({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<Test />
</form>
)}
</Form>,
);

expect(getByTestId("validating")).toHaveTextContent("Spinner");
await sleep(6);
expect(getByTestId("name").value).toBe("");

// validating state is ok as long as a Field with async validation is visible
expect(getByTestId("validating")).toHaveTextContent("Not Validating");
fireEvent.change(getByTestId("name"), { target: { value: "erik" } });

expect(getByTestId("validating")).toHaveTextContent("Spinner");
await sleep(6);

expect(getByTestId("validating")).toHaveTextContent("Not Validating");

// validating state is KO if Field is unregistered while validating
fireEvent.change(getByTestId("name"), { target: { value: "erikr" } });

expect(getByTestId("validating")).toHaveTextContent("Spinner");
fireEvent.click(getByTestId("hide"));
expect(queryByTestId("name")).not.toBeInTheDocument();

// when an other field with sync validation is present, it should not have side effect on the async validation
expect(queryByTestId("lastname")).toBeInTheDocument();
expect(getByTestId("validating")).toHaveTextContent("Spinner");

await sleep(6);

expect(getByTestId("validating")).toHaveTextContent("Not Validating");
});

it("not call record-level validation on Field mount", () => {
const validate = jest.fn();
const { getByText } = render(
Expand Down