✅ Inputs tested

src/inputs/S3FileInput.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { S3FileInput } from './S3FileInput';
+import { Form } from 'react-final-form';
+import { TestContext } from 'react-admin';
+
+describe('<S3FileInput />', () => {
+  test('should render the image uploader', async () => {
+    const { findByText } = render(
+      <TestContext>
+        <Form onSubmit={() => {}}>
+          {() => <S3FileInput label="Upload files" source="files" />}
+        </Form>
+      </TestContext>
+    );
+
+    expect(await findByText(/upload files/i)).toBeInTheDocument();
+  });
+});

src/inputs/S3FileInput.tsx

@@ -8,6 +8,7 @@ import { makeStyles } from '@material-ui/core';
 interface S3InputProps {
   source: string;
   dropzoneOptions?: any;
+  label?: string;
   level?: 'public' | 'protected' | 'private' | undefined;
 }
 

src/inputs/S3ImageInput.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { S3ImageInput } from './S3ImageInput';
+import { Form } from 'react-final-form';
+import { TestContext } from 'react-admin';
+
+describe('<S3ImageInput />', () => {
+  test('should render the image uploader', async () => {
+    const { findByText } = render(
+      <TestContext>
+        <Form onSubmit={() => {}}>
+          {() => <S3ImageInput label="Upload images" source="image" />}
+        </Form>
+      </TestContext>
+    );
+
+    expect(await findByText(/upload images/i)).toBeInTheDocument();
+  });
+});

src/inputs/S3ImageInput.tsx

@@ -6,6 +6,7 @@ import { S3ImageField } from '../fields';
 interface S3InputProps {
   source: string;
   dropzoneOptions?: any;
+  label?: string;
   level?: 'public' | 'protected' | 'private' | undefined;
 }
 

src/inputs/S3Input.spec.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { S3Input } from './S3Input';
+import { Form } from 'react-final-form';
+import { TestContext } from 'react-admin';
+
+/** mock storage so we can 'put' without actually putting. */
+let mockStoragePut: any;
+jest.mock('aws-amplify', () => {
+  mockStoragePut = jest.fn((key: string, options: Record<string, any>) =>
+    key === 'error'
+      ? Promise.reject()
+      : Promise.resolve({ key: `http://${key}`, ...options })
+  );
+  return {
+    Storage: {
+      put: mockStoragePut,
+    },
+  };
+});
+
+/** mock uuidv4 so we have predictable results */
+jest.mock('uuidv4', () => ({
+  uuid: () => 'xxxx',
+}));
+
+/** Mock permissions so we can check identityId is passed */
+jest.mock('react-admin', () => ({
+  ...require.requireActual('react-admin'),
+  usePermissions: () => ({ permissions: { claims: { identityId: 'id' } } }),
+}));
+
+/** TestComponent is required because S3Input uses React.cloneElement */
+const file = (key: string = 'chucknorris.png') =>
+  new File(['(⌐□_□)'], key, { type: 'image/png' });
+const TestComponent: React.FC<any> = props => {
+  const fileObj = file(props.error);
+  return (
+    <>
+      <button
+        onClick={() =>
+          props.options.onDrop(props.multiple ? [fileObj, fileObj] : [fileObj])
+        }
+      >
+        drop
+      </button>
+      props: {JSON.stringify(props)}
+    </>
+  );
+};
+
+describe('<S3Input />', () => {
+  test('should put to storage and attach uuid, plus id and level', async () => {
+    const { getByText, findByText } = render(
+      <TestContext>
+        <Form onSubmit={() => {}}>
+          {({ values }) => (
+            <>
+              <S3Input source="input" level="protected">
+                <TestComponent />
+              </S3Input>
+              {JSON.stringify(values['input'])}
+            </>
+          )}
+        </Form>
+      </TestContext>
+    );
+
+    fireEvent.click(getByText(/drop/i));
+    expect(await findByText(/chucknorris-xxxx.png/i)).toBeInTheDocument();
+    expect(await findByText(/protected/i)).toBeInTheDocument();
+    expect(await findByText(/id/i)).toBeInTheDocument();
+  });
+
+  test('should handle multiple files', async () => {
+    const { getByText, findAllByText } = render(
+      <TestContext>
+        <Form onSubmit={() => {}}>
+          {({ values }) => (
+            <>
+              <S3Input source="input" multiple>
+                <TestComponent />
+              </S3Input>
+              form values:{' '}
+              {values['input'] &&
+                values['input'].map((input: any, i: number) => (
+                  <div key={i}>{JSON.stringify(input)}</div>
+                ))}
+            </>
+          )}
+        </Form>
+      </TestContext>
+    );
+
+    fireEvent.click(getByText(/drop/i));
+    expect(await findAllByText(/chucknorris-xxxx.png/i)).toHaveLength(2);
+  });
+
+  test('should handle errors files', async () => {
+    const { getByText, findByText } = render(
+      <TestContext>
+        <Form onSubmit={() => {}}>
+          {formProps => (
+            <>
+              <S3Input source="input" multiple>
+                <TestComponent error="error" />
+              </S3Input>
+              form values: {JSON.stringify(formProps.values)}
+            </>
+          )}
+        </Form>
+      </TestContext>
+    );
+
+    fireEvent.click(getByText(/drop/i));
+    expect(await findByText(/error/i)).toBeInTheDocument();
+    // expect(await findByText(/^form values: $/i)).toBeInTheDocument();
+  });
+});

src/inputs/S3Input.tsx

@@ -54,7 +54,6 @@ export const S3Input: React.FC<S3InputProps> = ({
         })
       );
 
-      console.log(results);
       if (props.multiple) {
         input.onChange(results);
       } else {
@@ -63,7 +62,6 @@ export const S3Input: React.FC<S3InputProps> = ({
     } catch (error) {
       input.onChange(undefined);
       notify('There was an error uploading your files.');
-      console.log(error);
     }
   };