Add onClick prop to FormFileUpload

packages/components/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   Add `onClick` prop on `FormFileUpload`.
+
 ### Enhancements
 
 -   `BaseControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#39325](https://github.com/WordPress/gutenberg/pull/39325)).

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,92 @@
 /**
  * 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 ),
+	};
+}
+
+// @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
+const fakePath = expect.objectContaining( {
+	target: expect.objectContaining( {
+		value: 'C:\\fakepath\\hello.png',
+	} ),
+} );
+
 describe( 'FormFileUpload', () => {
 	it( 'should show an Icon Button and a hidden input', () => {
-		const wrapper = shallow(
+		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 file = new File( [ 'hello' ], 'hello.png', {
+			type: 'image/png',
+		} );
+
+		const input = screen.getByTestId( 'form-file-upload-input' );
+
+		await user.upload( input, file );
+
+		await user.upload( input, file );
+
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( fakePath );
+	} );
+
+	it( 'should fire a change event after selecting the same file if the value was reset in between', async () => {
+		const onChange = jest.fn();
+
+		const { user } = render(
 			<FormFileUpload
-				instanceId={ 1 }
-				blocks={ [] }
-				recentlyUsedBlocks={ [] }
-				debouncedSpeak={ noop }
+				onClick={ jest.fn( ( e ) => ( e.target.value = '' ) ) }
+				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 );
+
+		expect( onChange ).toHaveBeenNthCalledWith( 1, fakePath );
+
+		await user.upload( input, file );
+
+		expect( onChange ).toHaveBeenNthCalledWith( 2, fakePath );
 	} );
 } );