Merge pull request #33110 from woocommerce/dev/33104-migrate-customer-effort-score-to-ts

Migrate `@woocommerce/customer-effort-score` to TS

packages/js/customer-effort-score/changelog/dev-33104-migrate-customer-effort-score-to-ts

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Migrate @woocommerce/customer-effort-score to TS

packages/js/customer-effort-score/src/customer-effort-score.tsx

@@ -13,6 +13,15 @@ import { CustomerFeedbackModal } from './customer-feedback-modal';
 
 const noop = () => {};
 
+type CustomerEffortScoreProps = {
+	recordScoreCallback: ( score: number, comments: string ) => void;
+	label: string;
+	onNoticeShownCallback?: () => void;
+	onNoticeDismissedCallback?: () => void;
+	onModalShownCallback?: () => void;
+	icon?: React.ReactElement | null;
+};
+
 /**
  * Use `CustomerEffortScore` to gather a customer effort score.
  *
@@ -27,14 +36,14 @@ const noop = () => {};
  * @param {Function} props.onModalShownCallback      Function to call when the modal is shown.
  * @param {Object}   props.icon                      Icon (React component) to be shown on the notice.
  */
-function CustomerEffortScore( {
+const CustomerEffortScore: React.VFC< CustomerEffortScoreProps > = ( {
 	recordScoreCallback,
 	label,
 	onNoticeShownCallback = noop,
 	onNoticeDismissedCallback = noop,
 	onModalShownCallback = noop,
 	icon,
-} ) {
+} ) => {
 	const [ shouldCreateNotice, setShouldCreateNotice ] = useState( true );
 	const [ visible, setVisible ] = useState( false );
 	const { createNotice } = useDispatch( 'core/notices2' );
@@ -78,7 +87,7 @@ function CustomerEffortScore( {
 			recordScoreCallback={ recordScoreCallback }
 		/>
 	);
-}
+};
 
 CustomerEffortScore.propTypes = {
 	/**

packages/js/customer-effort-score/src/customer-feedback-simple/test/index.tsx

@@ -13,7 +13,12 @@ const mockOnSelectCallback = jest.fn();
 
 describe( 'CustomerFeedbackSimple', () => {
 	it( 'should trigger recordScoreCallback when item is selected', () => {
-		render( <CustomerFeedbackSimple onSelect={ mockOnSelectCallback } /> );
+		render(
+			<CustomerFeedbackSimple
+				onSelect={ mockOnSelectCallback }
+				label=""
+			/>
+		);
 
 		// Select the option.
 		fireEvent.click( screen.getAllByText( '🙂' )[ 0 ] );

packages/js/customer-effort-score/src/test/index.tsx

@@ -27,7 +27,7 @@ jest.mock( '@wordpress/data', () => {
 describe( 'CustomerEffortScore', () => {
 	it( 'should call createNotice with appropriate parameters', async () => {
 		const mockCreateNotice = jest.fn();
-		useDispatch.mockReturnValue( {
+		( useDispatch as jest.Mock ).mockReturnValue( {
 			createNotice: mockCreateNotice,
 		} );
 		const icon = <span>icon</span>;
@@ -56,13 +56,12 @@ describe( 'CustomerEffortScore', () => {
 
 	it( 'should not call createNotice on rerender', async () => {
 		const mockCreateNotice = jest.fn();
-		useDispatch.mockReturnValue( {
+		( useDispatch as jest.Mock ).mockReturnValue( {
 			createNotice: mockCreateNotice,
 		} );
 
 		const { rerender } = render(
 			<CustomerEffortScore
-				createNotice={ mockCreateNotice }
 				recordScoreCallback={ noop }
 				label={ 'label' }
 			/>
@@ -93,7 +92,15 @@ describe( 'CustomerEffortScore', () => {
 
 	it( 'should show dialog if "Give feedback" callback is run', async () => {
 		const mockOnModalShownCallback = jest.fn();
-		const createNotice = ( ...args ) => {
+		const createNotice = (
+			...args: [
+				unknown,
+				unknown,
+				{
+					actions: [ { onClick: () => void } ];
+				}
+			]
+		) => {
 			// We're only interested in the 3rd argument.
 			const { actions } = args[ 2 ];
 
@@ -107,7 +114,7 @@ describe( 'CustomerEffortScore', () => {
 			// Modal shown callback should also be called.
 			expect( mockOnModalShownCallback ).toHaveBeenCalled();
 		};
-		useDispatch.mockReturnValue( {
+		( useDispatch as jest.Mock ).mockReturnValue( {
 			createNotice,
 		} );