Update npm dependencies

.prettierrc.js

@@ -1,4 +1,4 @@
 module.exports = {
 	...require( '@wordpress/prettier-config' ),
-	plugins: [ './scripts/prettier/prettier-plugin-jsdoc' ],
+	plugins: [ './scripts/prettier/prettier-plugin-jsdoc.js' ],
 };

assets/admin/editor-wizard/helpers.js

@@ -16,8 +16,7 @@ import { EXTENSIONS_STORE } from '../../extensions/store';
  * Update blocks content, replacing the placeholders with a content.
  *
  * @param {Object[]} blocks   Blocks to replace with the new content.
- * @param {Object}   replaces Object containing content to be replaced. The keys are the block
- *                            classNames to find. The values are the content to be replaced.
+ * @param {Object}   replaces Object containing content to be replaced. The keys are the block classNames to find. The values are the content to be replaced.
  *
  * @return {Object[]} Blocks with the placeholders filled.
  */
@@ -103,8 +102,7 @@ export const useWizardOpenState = () => {
 /**
  * Hook to set the default post pattern with replaced content.
  *
- * @param {Object} replaces Object containing content to be replaced. The keys are the block
- *                          classNames to find. The values are the content to be replaced.
+ * @param {Object} replaces Object containing content to be replaced. The keys are the block classNames to find. The values are the content to be replaced.
  *
  * @return {Function} Function to set the default pattern.
  */
@@ -168,9 +166,8 @@ export const useLogEvent = () => {
 export const useHideEditorWizardUpsell = () => {
 	const { senseiProExtension } = useSelect(
 		( select ) => ( {
-			senseiProExtension: select(
-				EXTENSIONS_STORE
-			).getSenseiProExtension(),
+			senseiProExtension:
+				select( EXTENSIONS_STORE ).getSenseiProExtension(),
 		} ),
 		[]
 	);

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 () => {

assets/admin/editor-wizard/steps/course-upgrade-step.js

@@ -18,9 +18,8 @@ import CheckIcon from '../../../icons/checked.svg';
 const CourseUpgradeStep = () => {
 	const { senseiProExtension } = useSelect(
 		( select ) => ( {
-			senseiProExtension: select(
-				EXTENSIONS_STORE
-			).getSenseiProExtension(),
+			senseiProExtension:
+				select( EXTENSIONS_STORE ).getSenseiProExtension(),
 		} ),
 		[]
 	);

assets/admin/editor-wizard/steps/patterns-step.js

@@ -19,9 +19,7 @@ const { Fill, Slot } = createSlotFill( 'Patterns Upsell' );
  *
  * @param {Object}   props              Component props.
  * @param {string}   props.title        Step title.
- * @param {Object}   props.replaces     Object containing content to be replaced. The keys are the
- *                                      block classNames to find. The values are the content to be
- *                                      replaced.
+ * @param {Object}   props.replaces     Object containing content to be replaced. The keys are the block classNames to find. The values are the content to be replaced.
  * @param {Function} props.onCompletion On completion callback.
  */
 const PatternsStep = ( { title, replaces, onCompletion } ) => {

assets/admin/exit-survey/form.test.js

@@ -18,50 +18,52 @@ describe( '<ExitSurveyForm />', () => {
 		skip: () => screen.getByRole( 'button', { name: 'Skip Feedback' } ),
 	};
 
-	it( 'Submit is disabled until an item is selected and details filled out (if provided)', () => {
+	it( 'Submit is disabled until an item is selected and details filled out (if provided)', async () => {
 		const { getByLabelText, getByPlaceholderText } = render(
 			<ExitSurveyForm />
 		);
 
 		expect( buttons.submit() ).toBeDisabled();
 
 		// This reason does not require details.
-		userEvent.click( getByLabelText( 'I no longer need the plugin' ) );
+		await userEvent.click(
+			getByLabelText( 'I no longer need the plugin' )
+		);
 		expect( buttons.submit() ).not.toBeDisabled();
 
 		// This reason does expect details.
-		userEvent.click( getByLabelText( 'I found a better plugin' ) );
+		await userEvent.click( getByLabelText( 'I found a better plugin' ) );
 		expect( buttons.submit() ).toBeDisabled();
-		userEvent.type(
+		await userEvent.type(
 			getByPlaceholderText( "What's the name of the plugin?" ),
 			'Test detail'
 		);
 
 		expect( buttons.submit() ).not.toBeDisabled();
 	} );
 
-	it( 'Skip button skips submission', () => {
+	it( 'Skip button skips submission', async () => {
 		const skip = jest.fn();
 		const submit = jest.fn();
 		render( <ExitSurveyForm submit={ submit } skip={ skip } /> );
-		userEvent.click( buttons.skip() );
+		await userEvent.click( buttons.skip() );
 
 		expect( skip ).toHaveBeenCalled();
 		expect( submit ).not.toHaveBeenCalled();
 	} );
 
-	it( 'Submits selected reason and details', () => {
+	it( 'Submits selected reason and details', async () => {
 		const submit = jest.fn();
 		const { getByLabelText, getByPlaceholderText } = render(
 			<ExitSurveyForm submit={ submit } />
 		);
 
-		userEvent.click( getByLabelText( 'I found a better plugin' ) );
-		userEvent.type(
+		await userEvent.click( getByLabelText( 'I found a better plugin' ) );
+		await userEvent.type(
 			getByPlaceholderText( "What's the name of the plugin?" ),
 			'Test detail'
 		);
-		userEvent.click( buttons.submit() );
+		await userEvent.click( buttons.submit() );
 
 		expect( submit ).toHaveBeenCalledWith( {
 			reason: 'found-better-plugin',

assets/admin/students/hooks/use-abort-controller/index.js

@@ -19,9 +19,10 @@ export default function useAbortController() {
 		return () => getAbortController().abort();
 	}, [ getAbortController ] );
 
-	const getSignal = useCallback( () => getAbortController().signal, [
-		getAbortController,
-	] );
+	const getSignal = useCallback(
+		() => getAbortController().signal,
+		[ getAbortController ]
+	);
 
 	return { getSignal };
 }

assets/admin/students/hooks/use-abort-controller/index.test.js

@@ -6,7 +6,7 @@ import useAbortController from '.';
 /**
  * External dependencies
  */
-import { cleanup, renderHook } from '@testing-library/react-hooks';
+import { cleanup, renderHook } from '@testing-library/react';
 
 describe( 'useAbortController', () => {
 	it( 'Should return signal to be used on async operations', () => {

assets/admin/students/student-action-menu/index.test.js

@@ -6,7 +6,6 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { DOWN } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -38,10 +37,7 @@ describe( '<StudentActionMenu />', () => {
 		const button = screen.getByRole( 'button' );
 
 		button.focus();
-		fireEvent.keyDown( button, {
-			keyCode: DOWN,
-			preventDefault: () => {},
-		} );
+		fireEvent.click( button );
 
 		// Click the "Add to Course" menu item.
 		const menuItem = screen.getByText( 'Add to Course' );
@@ -63,10 +59,7 @@ describe( '<StudentActionMenu />', () => {
 		const button = screen.getByRole( 'button' );
 
 		button.focus();
-		fireEvent.keyDown( button, {
-			keyCode: DOWN,
-			preventDefault: () => {},
-		} );
+		fireEvent.click( button );
 
 		// Click the "Remove from Course" menu item.
 		const menuItem = screen.getByText( 'Remove from Course' );
@@ -88,10 +81,7 @@ describe( '<StudentActionMenu />', () => {
 		const button = screen.getByRole( 'button' );
 
 		button.focus();
-		fireEvent.keyDown( button, {
-			keyCode: DOWN,
-			preventDefault: () => {},
-		} );
+		fireEvent.click( button );
 
 		// Click the "Reset Progress" menu item.
 		const menuItem = screen.getByText( 'Reset Progress' );
@@ -115,10 +105,7 @@ describe( '<StudentActionMenu />', () => {
 		const button = screen.getByRole( 'button' );
 
 		button.focus();
-		fireEvent.keyDown( button, {
-			keyCode: DOWN,
-			preventDefault: () => {},
-		} );
+		fireEvent.click( button );
 
 		// Click the "Grading" menu item.
 		const menuItem = screen.getByText( 'Grading' );

assets/admin/students/student-bulk-action-button/index.test.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -45,11 +45,6 @@ beforeAll( () => {
 	spy = jest.spyOn( document, 'getElementById' );
 } );
 describe( '<StudentBulkActionButton />', () => {
-	const selectActionButton = () =>
-		screen.getByRole( 'button', {
-			name: 'Select Action',
-		} );
-
 	beforeAll( () => {
 		useSelect.mockReturnValue( { courses, isFetching: false } );
 	} );
@@ -62,15 +57,22 @@ 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 } /> );
+		const { getByRole } = render(
+			<StudentBulkActionButton isDisabled={ false } />
+		);
+
+		fireEvent.click(
+			getByRole( 'button', {
+				name: 'Select Action',
+			} )
+		);
 
-		selectActionButton().click();
 		expect(
 			screen.getByText(
 				ignoreInlineTags(
@@ -80,15 +82,21 @@ 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 } /> );
+		const { getByRole } = render(
+			<StudentBulkActionButton isDisabled={ false } />
+		);
 
-		selectActionButton().click();
+		fireEvent.click(
+			getByRole( 'button', {
+				name: 'Select Action',
+			} )
+		);
 
 		expect(
 			screen.getByText(
@@ -98,15 +106,23 @@ 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 } /> );
+		const { getByRole } = render(
+			<StudentBulkActionButton isDisabled={ false } />
+		);
+
+		fireEvent.click(
+			getByRole( 'button', {
+				name: 'Select Action',
+			} )
+		);
 
-		selectActionButton().click();
 		expect(
 			screen.getByText(
 				ignoreInlineTags(

assets/admin/students/student-modal/index.test.js

@@ -337,14 +337,14 @@ 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(
 						'Unable to add student. Please try again.'
 					)
-				).toHaveLength( 2 ); // ARIA + notice
+				).toBeTruthy();
 			} );
 
 			it( 'Should display an error message when removing a student from a course', async () => {
@@ -363,7 +363,7 @@ describe( '<StudentModal />', () => {
 					await findAllByText(
 						'Unable to remove student. Please try again.'
 					)
-				).toHaveLength( 2 ); // ARIA + notice
+				).toBeTruthy();
 			} );
 
 			it( 'Should display an error message when resetting progress for a single student', async () => {
@@ -383,7 +383,7 @@ describe( '<StudentModal />', () => {
 					await findAllByText(
 						'Unable to reset progress for this student. Please try again.'
 					)
-				).toHaveLength( 2 ); // ARIA + notice
+				).toBeTruthy();
 			} );
 		} );
 
@@ -437,14 +437,14 @@ 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(
 						'Unable to add students. Please try again.'
 					)
-				).toHaveLength( 2 ); // ARIA + notice
+				).toBeTruthy();
 			} );
 
 			it( 'Should display an error message when removing multiple students from a course', async () => {
@@ -456,14 +456,16 @@ 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(
 						'Unable to remove students. Please try again.'
 					)
-				).toHaveLength( 2 ); // ARIA + notice
+				).toBeTruthy();
 			} );
 
 			it( 'Should display an error message when resetting progress for multiple students', async () => {
@@ -482,7 +484,7 @@ describe( '<StudentModal />', () => {
 					await findAllByText(
 						'Unable to reset progress for these students. Please try again.'
 					)
-				).toHaveLength( 2 ); // ARIA + notice
+				).toBeTruthy();
 			} );
 		} );
 	} );