From 93113607bd5cbd10b5277c1fc161122d9aa8b2de Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Thu, 16 Dec 2021 21:18:25 +0900
Subject: [PATCH] feat: add onSubmitRemove prop test

---
 .../src/input/FileInput.spec.tsx              | 216 +++++++++++++++++-
 1 file changed, 214 insertions(+), 2 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/FileInput.spec.tsx b/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
index ca2c9314f2b..d6df7888f59 100644
--- a/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import {
+    render,
+    fireEvent,
+    waitForElementToBeRemoved,
+    waitFor,
+} from '@testing-library/react';
 import { Form } from 'react-final-form';
-
 import { FileField, ImageField } from '../field';
 import { FileInput } from './FileInput';
 
@@ -247,6 +251,214 @@ describe('<FileInput />', () => {
         });
     });
 
+    describe('should stop to remove file field onSubmitReview return false', () => {
+        it('normal function', async () => {
+            const onSubmit = jest.fn();
+
+            const { getByLabelText, getByTitle } = render(
+                <Form
+                    initialValues={{
+                        image: {
+                            src: 'test.png',
+                            title: 'cats',
+                        },
+                    }}
+                    onSubmit={onSubmit}
+                    render={({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            <FileInput
+                                {...defaultProps}
+                                onSubmitRemove={file => false}
+                            >
+                                <FileField source="src" title="title" />
+                            </FileInput>
+                            <button type="submit" aria-label="Save" />
+                        </form>
+                    )}
+                />
+            );
+
+            const fileDom = getByTitle('cats');
+            expect(fileDom).not.toBeNull();
+            fireEvent.click(getByLabelText('ra.action.delete'));
+            await waitFor(() => {
+                expect(fileDom).not.toBeNull();
+            });
+            fireEvent.click(getByLabelText('Save'));
+
+            expect(onSubmit.mock.calls[0][0]).toEqual({
+                image: {
+                    src: 'test.png',
+                    title: 'cats',
+                },
+            });
+        });
+        it('promise function', async () => {
+            const onSubmit = jest.fn();
+
+            const { getByLabelText, getByTitle } = render(
+                <Form
+                    initialValues={{
+                        image: {
+                            src: 'test.png',
+                            title: 'cats',
+                        },
+                    }}
+                    onSubmit={onSubmit}
+                    render={({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            <FileInput
+                                {...defaultProps}
+                                onSubmitRemove={async file => false}
+                            >
+                                <FileField source="src" title="title" />
+                            </FileInput>
+                            <button type="submit" aria-label="Save" />
+                        </form>
+                    )}
+                />
+            );
+            const fileDom = getByTitle('cats');
+            expect(fileDom).not.toBeNull();
+            fireEvent.click(getByLabelText('ra.action.delete'));
+            await waitFor(() => {
+                expect(fileDom).not.toBeNull();
+            });
+            fireEvent.click(getByLabelText('Save'));
+            expect(onSubmit.mock.calls[0][0]).toEqual({
+                image: {
+                    src: 'test.png',
+                    title: 'cats',
+                },
+            });
+        });
+        it('error occurs', async done => {
+            const dummy = jest.fn();
+            const onSubmit = jest.fn();
+            // NOTE: We couldn't handle UnhandledPromiseRejection and make
+            // ErrorBoundary method of https://github.com/testing-library/react-testing-library/issues/828#issuecomment-729860950 work,
+            // so make mimic to read final states when process force exit by errors instead of throw new Error.
+            const errorMockFn = jest.fn(() => {
+                fireEvent.click(getByLabelText('Save'));
+                expect(onSubmit.mock.calls[0][0]).toEqual({
+                    image: {
+                        src: 'test.png',
+                        title: 'cats',
+                    },
+                });
+                // NOTE: mimic throw Error.The done method finish process await waitFor called.
+                done();
+                return true;
+            });
+            const { getByLabelText, getByTitle } = render(
+                <Form
+                    initialValues={{
+                        image: {
+                            src: 'test.png',
+                            title: 'cats',
+                        },
+                    }}
+                    onSubmit={onSubmit}
+                    render={({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            <FileInput
+                                {...defaultProps}
+                                onSubmitRemove={errorMockFn}
+                            >
+                                <FileField source="src" title="title" />
+                            </FileInput>
+                            <button type="submit" aria-label="Save" />
+                        </form>
+                    )}
+                />
+            );
+
+            const fileDom = getByTitle('cats');
+            expect(fileDom).not.toBeNull();
+            fireEvent.click(getByLabelText('ra.action.delete'));
+            await waitFor(() => {
+                // NOTE: This is dummy method never called, but test will be done for jest's done method.
+                // This is mimiced as throw error and process abandoned.
+                expect(dummy).toBeCalled();
+            });
+        });
+    });
+
+    describe('should continue to remove file field onSubmitReview return true', () => {
+        it('normal function', async () => {
+            const onSubmit = jest.fn();
+
+            const { getByLabelText, getByTitle } = render(
+                <Form
+                    initialValues={{
+                        image: {
+                            src: 'test.png',
+                            title: 'cats',
+                        },
+                    }}
+                    onSubmit={onSubmit}
+                    render={({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            <FileInput
+                                {...defaultProps}
+                                onSubmitRemove={file => true}
+                            >
+                                <FileField source="src" title="title" />
+                            </FileInput>
+                            <button type="submit" aria-label="Save" />
+                        </form>
+                    )}
+                />
+            );
+
+            const fileDom = getByTitle('cats');
+            expect(fileDom).not.toBeNull();
+            fireEvent.click(getByLabelText('ra.action.delete'));
+            await waitForElementToBeRemoved(fileDom);
+            fireEvent.click(getByLabelText('Save'));
+
+            expect(onSubmit.mock.calls[0][0]).toEqual({
+                image: null,
+            });
+        });
+        it('promise function', async () => {
+            const onSubmit = jest.fn();
+
+            const { getByLabelText, getByTitle } = render(
+                <Form
+                    initialValues={{
+                        image: {
+                            src: 'test.png',
+                            title: 'cats',
+                        },
+                    }}
+                    onSubmit={onSubmit}
+                    render={({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            <FileInput
+                                {...defaultProps}
+                                onSubmitRemove={async file => true}
+                            >
+                                <FileField source="src" title="title" />
+                            </FileInput>
+                            <button type="submit" aria-label="Save" />
+                        </form>
+                    )}
+                />
+            );
+
+            const fileDom = getByTitle('cats');
+            expect(fileDom).not.toBeNull();
+            fireEvent.click(getByLabelText('ra.action.delete'));
+            await waitForElementToBeRemoved(fileDom);
+            fireEvent.click(getByLabelText('Save'));
+
+            expect(onSubmit.mock.calls[0][0]).toEqual({
+                image: null,
+            });
+        });
+    });
+
     it('should display correct custom label', () => {
         const test = (expectedLabel, expectedLabelText = expectedLabel) => {
             const { getByText } = render(