Add onClick prop to FormFileUpload

packages/components/CHANGELOG.md

@@ -17,6 +17,7 @@
 
 ### Enhancements
 
+-   Add `onClick` event on `FormFileUpload` to emit `onChange` event when selecting the same file again.
 -   `ConfirmDialog`: Add support for custom label text on the confirmation and cancelation buttons ([#38994](https://github.com/WordPress/gutenberg/pull/38994))
 -   `InputControl`: Allow `onBlur` for empty values to commit the change when `isPressEnterToChange` is true, and move reset behavior to the ESCAPE key. ([#39109](https://github.com/WordPress/gutenberg/pull/39109)).
 -   `TreeGrid`: Add tests for Home/End keyboard navigation. Add `onFocusRow` callback for Home/End keyboard navigation, this was missed in the implementation PR. Modify test for expanding/collapsing a row as row 1 implements this now. Update README with latest changes. ([#39302](https://github.com/WordPress/gutenberg/pull/39302))

packages/components/src/form-file-upload/index.js

@@ -13,6 +13,7 @@ function FormFileUpload( {
 	children,
 	multiple = false,
 	onChange,
+	onClick,
 	render,
 	...props
 } ) {
@@ -38,6 +39,8 @@ function FormFileUpload( {
 				style={ { display: 'none' } }
 				accept={ accept }
 				onChange={ onChange }
+				onClick={ onClick }
+				data-testid="form-file-upload-input"
 			/>
 		</div>
 	);

packages/components/src/form-file-upload/test/index.js

@@ -1,30 +1,87 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-import { noop } from 'lodash';
+import { render as RTLrender, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import FormFileUpload from '../';
 
+/**
+ * Browser dependencies
+ */
+const { File } = window;
+
+function render( jsx ) {
+	return {
+		user: userEvent.setup( {
+			// Avoids timeout errors (https://github.com/testing-library/user-event/issues/565#issuecomment-1064579531).
+			delay: null,
+		} ),
+		...RTLrender( jsx ),
+	};
+}
+
 describe( 'FormFileUpload', () => {
 	it( 'should show an Icon Button and a hidden input', () => {
-		const wrapper = shallow(
-			<FormFileUpload
-				instanceId={ 1 }
-				blocks={ [] }
-				recentlyUsedBlocks={ [] }
-				debouncedSpeak={ noop }
-			>
+		render( <FormFileUpload>My Upload Button</FormFileUpload> );
+
+		const button = screen.getByText( 'My Upload Button' );
+		const input = screen.getByTestId( 'form-file-upload-input' );
+		expect( button ).toBeInTheDocument();
+		expect( input.style.display ).toBe( 'none' );
+	} );
+
+	it( 'should not fire a change event after selecting the same file', async () => {
+		const onChange = jest.fn();
+
+		const { user } = render(
+			<FormFileUpload onChange={ onChange }>
 				My Upload Button
 			</FormFileUpload>
 		);
 
-		const button = wrapper.find( 'ForwardRef(Button)' );
-		const input = wrapper.find( 'input' );
-		expect( button.prop( 'children' ) ).toBe( 'My Upload Button' );
-		expect( input.prop( 'style' ).display ).toBe( 'none' );
+		const file = new File( [ 'hello' ], 'hello.png', {
+			type: 'image/png',
+		} );
+
+		const input = screen.getByTestId( 'form-file-upload-input' );
+
+		await user.upload( input, file );
+
+		// await last upload event propagation
+		setTimeout( async () => {
+			await user.upload( input, file );
+
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+		}, 0 );
+	} );
+
+	it( 'should fire a change event after selecting the same file if there is a onClick', async () => {
+		const onChange = jest.fn();
+
+		const { user } = render(
+			<FormFileUpload onClick={ jest.fn() } onChange={ onChange }>
+				My Upload Button
+			</FormFileUpload>
+		);
+
+		const file = new File( [ 'hello' ], 'hello.png', {
+			type: 'image/png',
+		} );
+
+		const input = screen.getByTestId( 'form-file-upload-input' );
+		await user.upload( input, file );
+
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+
+		// await last upload event propagation and onClick event run
+		setTimeout( async () => {
+			await user.upload( input, file );
+
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+		}, 0 );
 	} );
 } );