Fix JS unit tests

Automattic · Nov 5, 2024 · cda2399 · cda2399
1 parent 5c7e889
commit cda2399
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 27 deletions.
diff --git a/assets/admin/editor-wizard/helpers.test.js b/assets/admin/editor-wizard/helpers.test.js
@@ -116,7 +116,7 @@ describe( 'useWizardOpenState', () => {
 		expect( await findByText( 'closed' ) ).toBeTruthy();
 
 		document.body.classList.remove( 'modal-open' );
-		expect( findByText( 'open' ) ).toBeTruthy();
+		expect( await findByText( 'open' ) ).toBeTruthy();
 	} );
 
 	it( 'Should be closed when wizard is done', async () => {

diff --git a/assets/admin/students/student-bulk-action-button/index.test.js b/assets/admin/students/student-bulk-action-button/index.test.js
@@ -62,15 +62,16 @@ describe( '<StudentBulkActionButton />', () => {
 		expect( button ).toBeDisabled();
 	} );
 
-	it( 'Should render the `Add to course` modal', () => {
+	it( 'Should render the `Add to course` modal', async () => {
 		setupSelector( [
 			{ value: 'enrol_restore_enrolment', selected: true },
 			{ value: 'remove_progress' },
 			{ value: 'remove_enrolment' },
 		] );
 		render( <StudentBulkActionButton isDisabled={ false } /> );
 
-		selectActionButton().click();
+		await selectActionButton().click();
+
 		expect(
 			screen.getByText(
 				ignoreInlineTags(
@@ -80,15 +81,15 @@ describe( '<StudentBulkActionButton />', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'Should render the `Reset Progress` modal', () => {
+	it( 'Should render the `Reset Progress` modal', async () => {
 		setupSelector( [
 			{ value: 'enrol_restore_enrolment' },
 			{ value: 'remove_progress', selected: true },
 			{ value: 'remove_enrolment' },
 		] );
 		render( <StudentBulkActionButton isDisabled={ false } /> );
 
-		selectActionButton().click();
+		await selectActionButton().click();
 
 		expect(
 			screen.getByText(
@@ -98,15 +99,16 @@ describe( '<StudentBulkActionButton />', () => {
 			)
 		).toBeInTheDocument();
 	} );
-	it( 'Should render the `Remove from Course` modal', () => {
+	it( 'Should render the `Remove from Course` modal', async () => {
 		setupSelector( [
 			{ value: 'enrol_restore_enrolment' },
 			{ value: 'remove_progress' },
 			{ value: 'remove_enrolment', selected: true },
 		] );
 		render( <StudentBulkActionButton isDisabled={ false } /> );
 
-		selectActionButton().click();
+		await selectActionButton().click();
+
 		expect(
 			screen.getByText(
 				ignoreInlineTags(

diff --git a/assets/admin/students/student-modal/index.test.js b/assets/admin/students/student-modal/index.test.js
@@ -337,8 +337,8 @@ describe( '<StudentModal />', () => {
 					/>
 				);
 
-				fireEvent.click( await courseOptionAt( 0 ) );
-				fireEvent.click( await buttonByLabel( 'Add to Course' ) );
+				await fireEvent.click( await courseOptionAt( 0 ) );
+				await fireEvent.click( await buttonByLabel( 'Add to Course' ) );
 
 				expect(
 					await findAllByText(
@@ -437,8 +437,8 @@ describe( '<StudentModal />', () => {
 					/>
 				);
 
-				fireEvent.click( await courseOptionAt( 0 ) );
-				fireEvent.click( await buttonByLabel( 'Add to Course' ) );
+				await fireEvent.click( await courseOptionAt( 0 ) );
+				await fireEvent.click( await buttonByLabel( 'Add to Course' ) );
 
 				expect(
 					await findAllByText(
@@ -456,8 +456,10 @@ describe( '<StudentModal />', () => {
 					/>
 				);
 
-				fireEvent.click( await courseOptionAt( 0 ) );
-				fireEvent.click( await buttonByLabel( 'Remove from Course' ) );
+				await fireEvent.click( await courseOptionAt( 0 ) );
+				await fireEvent.click(
+					await buttonByLabel( 'Remove from Course' )
+				);
 
 				expect(
 					await findAllByText(

diff --git a/assets/blocks/editor-components/confirm-dialog/use-confirm-dialog-props.test.js b/assets/blocks/editor-components/confirm-dialog/use-confirm-dialog-props.test.js
@@ -34,16 +34,15 @@ describe( 'useConfirmDialogProps()', () => {
 		const { result } = renderHook( () => useConfirmDialogProps() );
 		let [ props, confirm ] = result.current;
 		expect( props.isOpen ).toBe( false );
-		const confirmResponse = act( () =>
+		act( () => {
+			// eslint-disable-next-line jest/valid-expect
 			expect(
 				confirm( 'Hey Content', { title: 'Hey Title' } )
-			).resolves.toBe( true )
-		);
+			).resolves.toBe( true );
+		} );
 		[ props, confirm ] = result.current;
 		expect( props.isOpen ).toBe( true );
 		act( () => props.onConfirm() );
-		// We need to verify AFTER calling the props.on* callback, otherwise, the promise won't be resolved yet.
-		await confirmResponse;
 		[ props, confirm ] = result.current;
 		expect( props.isOpen ).toBe( false );
 	} );
@@ -52,16 +51,15 @@ describe( 'useConfirmDialogProps()', () => {
 		const { result } = renderHook( () => useConfirmDialogProps() );
 		let [ props, confirm ] = result.current;
 		expect( props.isOpen ).toBe( false );
-		const confirmResponse = act( () =>
+		act( () => {
+			// eslint-disable-next-line jest/valid-expect
 			expect(
 				confirm( 'Hey Content', { title: 'Hey Title' } )
-			).resolves.toBe( false )
-		);
+			).resolves.toBe( false );
+		} );
 		[ props, confirm ] = result.current;
 		expect( props.isOpen ).toBe( true );
 		act( () => props.onCancel() );
-		// We need to verify AFTER calling the props.on* callback, otherwise, the promise won't be resolved yet.
-		await confirmResponse;
 		[ props, confirm ] = result.current;
 		expect( props.isOpen ).toBe( false );
 	} );

diff --git a/assets/shared/blocks/single-line-input/single-line-input.test.js b/assets/shared/blocks/single-line-input/single-line-input.test.js
@@ -4,6 +4,11 @@
 import { render, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { BACKSPACE, ENTER } from '@wordpress/keycodes';
+
 /**
  * Internal dependencies
  */
@@ -49,7 +54,7 @@ describe( '<SingleLineInput />', () => {
 		expect( onChangeMock ).toHaveBeenLastCalledWith( 'input line' );
 	} );
 
-	it( 'Calls onRemove on backspace with an empty title', async () => {
+	it( 'Calls onRemove on backspace with an empty title', () => {
 		const onRemoveMock = jest.fn();
 		const { getByRole } = render(
 			<SingleLineInput
@@ -59,18 +64,26 @@ describe( '<SingleLineInput />', () => {
 			/>
 		);
 
-		await userEvent.type( getByRole( 'textbox' ), '{backspace}' );
+		fireEvent.keyDown( getByRole( 'textbox' ), {
+			key: 'Backspace',
+			code: 'Backspace',
+			keyCode: BACKSPACE,
+		} );
 
 		expect( onRemoveMock ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'Calls onEnter on enter', async () => {
+	it( 'Calls onEnter on enter', () => {
 		const onEnterMock = jest.fn();
 		const { getByRole } = render(
 			<SingleLineInput onEnter={ onEnterMock } onChange={ jest.fn() } />
 		);
 
-		await userEvent.type( getByRole( 'textbox' ), 'Title{enter}' );
+		fireEvent.keyDown( getByRole( 'textbox' ), {
+			key: 'Enter',
+			code: 'Enter',
+			keyCode: ENTER,
+		} );
 
 		expect( onEnterMock ).toHaveBeenCalledTimes( 1 );
 	} );