Block Editor: Improve MediaReplaceFlow tests (#45424)

* Block Editor: Use screen queries in MediaReplaceFlow tests

* Block Editor: Explicitly render in each test

* Block Editor: Use user-event instead of fireEvent

* Block Editor: Remove boilerplate variables

* Block Editor: Improve query specificity

Author: tyxla

packages/block-editor/src/components/media-replace-flow/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -31,80 +32,97 @@ function TestWrapper() {
 	);
 }
 
-function setUpMediaReplaceFlow() {
-	const { container } = render( <TestWrapper /> );
-	return container;
-}
-
 describe( 'General media replace flow', () => {
 	it( 'renders successfully', () => {
-		const container = setUpMediaReplaceFlow();
-
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-
-		expect( mediaReplaceButton ).not.toBeNull();
+		render( <TestWrapper /> );
+
+		expect(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
+		).toBeVisible();
 	} );
 
-	it( 'renders replace menu', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'renders replace menu', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const uploadMenu = container.querySelector(
-			'.block-editor-media-replace-flow__media-upload-menu'
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
 		);
 
-		expect( uploadMenu ).not.toBeNull();
+		const uploadMenu = screen.getByRole( 'menu' );
+
+		expect( uploadMenu ).toBeInTheDocument();
+		expect( uploadMenu ).not.toBeVisible();
 	} );
 
-	it( 'displays media URL', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'displays media URL', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const mediaURL = container.querySelector( '.components-external-link' );
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
+		);
 
-		expect( mediaURL.href ).toEqual( 'https://example.media/' );
+		expect(
+			screen.getByRole( 'link', {
+				name: 'example.media (opens in a new tab)',
+			} )
+		).toHaveAttribute( 'href', 'https://example.media' );
 	} );
 
-	it( 'edits media URL', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'edits media URL', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const editMediaURL = container.querySelector(
-			'.block-editor-link-control__search-item-action'
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
 		);
 
-		editMediaURL.click();
-
-		const mediaURLInput = container.querySelector(
-			'.block-editor-url-input__input'
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Edit',
+			} )
 		);
 
-		fireEvent.change( mediaURLInput, {
-			target: { value: 'https://new.example.media' },
+		const mediaURLInput = screen.getByRole( 'combobox', {
+			name: 'URL',
+			expanded: false,
 		} );
 
-		const saveMediaURLButton = container.querySelector(
-			'.block-editor-link-control__search-submit'
-		);
-
-		saveMediaURLButton.click();
+		await user.clear( mediaURLInput );
+		await user.type( mediaURLInput, 'https://new.example.media' );
 
-		const mediaURL = container.querySelector( '.components-external-link' );
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Submit',
+			} )
+		);
 
-		expect( mediaURL.href ).toEqual( 'https://new.example.media/' );
+		expect(
+			screen.getByRole( 'link', {
+				name: 'new.example.media (opens in a new tab)',
+			} )
+		).toHaveAttribute( 'href', 'https://new.example.media' );
 	} );
 } );