ESLint: Fix jest-dom/prefer-to-have-attribute rule violations (#44930)

packages/a11y/src/test/add-container.test.js

@@ -11,12 +11,13 @@ describe( 'addContainer', () => {
 			expect( container ).not.toBeNull();
 			expect( container.className ).toBe( 'a11y-speak-region' );
 			expect( container.id ).toBe( 'a11y-speak-polite' );
-			expect( container.getAttribute( 'style' ) ).not.toBeNull();
-			expect( container.getAttribute( 'aria-live' ) ).toBe( 'polite' );
-			expect( container.getAttribute( 'aria-relevant' ) ).toBe(
+			expect( container ).toHaveAttribute( 'style' );
+			expect( container ).toHaveAttribute( 'aria-live', 'polite' );
+			expect( container ).toHaveAttribute(
+				'aria-relevant',
 				'additions text'
 			);
-			expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
+			expect( container ).toHaveAttribute( 'aria-atomic', 'true' );
 		} );
 	} );
 
@@ -27,12 +28,13 @@ describe( 'addContainer', () => {
 			expect( container ).not.toBeNull();
 			expect( container.className ).toBe( 'a11y-speak-region' );
 			expect( container.id ).toBe( 'a11y-speak-assertive' );
-			expect( container.getAttribute( 'style' ) ).not.toBeNull();
-			expect( container.getAttribute( 'aria-live' ) ).toBe( 'assertive' );
-			expect( container.getAttribute( 'aria-relevant' ) ).toBe(
+			expect( container ).toHaveAttribute( 'style' );
+			expect( container ).toHaveAttribute( 'aria-live', 'assertive' );
+			expect( container ).toHaveAttribute(
+				'aria-relevant',
 				'additions text'
 			);
-			expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
+			expect( container ).toHaveAttribute( 'aria-atomic', 'true' );
 		} );
 	} );
 
@@ -43,12 +45,13 @@ describe( 'addContainer', () => {
 			expect( container ).not.toBeNull();
 			expect( container.className ).toBe( 'a11y-speak-region' );
 			expect( container.id ).toBe( 'a11y-speak-polite' );
-			expect( container.getAttribute( 'style' ) ).not.toBeNull();
-			expect( container.getAttribute( 'aria-live' ) ).toBe( 'polite' );
-			expect( container.getAttribute( 'aria-relevant' ) ).toBe(
+			expect( container ).toHaveAttribute( 'style' );
+			expect( container ).toHaveAttribute( 'aria-live', 'polite' );
+			expect( container ).toHaveAttribute(
+				'aria-relevant',
 				'additions text'
 			);
-			expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
+			expect( container ).toHaveAttribute( 'aria-atomic', 'true' );
 		} );
 	} );
 } );

packages/block-directory/src/components/downloadable-block-list-item/test/index.js

@@ -62,7 +62,7 @@ describe( 'DownloadableBlockListItem', () => {
 		const button = screen.getByRole( 'option' );
 		// Keeping it false to avoid focus loss and disable it using aria-disabled.
 		expect( button.disabled ).toBe( false );
-		expect( button.getAttribute( 'aria-disabled' ) ).toBe( 'true' );
+		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 
 	it( 'should try to install the block plugin', async () => {

packages/block-editor/src/components/link-control/test/index.js

@@ -392,7 +392,7 @@ describe( 'Searching for a link', () => {
 			fauxEntitySuggestions.length
 		);
 
-		expect( searchInput.getAttribute( 'aria-expanded' ) ).toBe( 'true' );
+		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
 
 		// Sanity check that a search suggestion shows up corresponding to the data.
 		expect( searchResultElements[ 0 ] ).toHaveTextContent(

packages/components/src/disabled/test/index.tsx

@@ -25,7 +25,7 @@ describe( 'Disabled', () => {
 		);
 
 		// @ts-ignore
-		expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( true );
+		expect( container.firstChild ).toHaveAttribute( 'inert' );
 	} );
 
 	it( 'should cleanly un-disable via reconciliation', () => {
@@ -41,12 +41,12 @@ describe( 'Disabled', () => {
 		const { container, rerender } = render( <MaybeDisable /> );
 
 		// @ts-ignore
-		expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( true );
+		expect( container.firstChild ).toHaveAttribute( 'inert' );
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
 		// @ts-ignore
-		expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( false );
+		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
 	} );
 
 	it( 'will disable or enable descendant fields based on the isDisabled prop value', () => {
@@ -59,12 +59,12 @@ describe( 'Disabled', () => {
 		const { rerender, container } = render( <MaybeDisable /> );
 
 		// @ts-ignore
-		expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( true );
+		expect( container.firstChild ).toHaveAttribute( 'inert' );
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
 		// @ts-ignore
-		expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( false );
+		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
 	} );
 
 	it( 'should preserve input values when toggling the isDisabled prop', async () => {

packages/components/src/dropdown/test/index.js

@@ -28,9 +28,10 @@ describe( 'Dropdown', () => {
 	it( 'should toggle the dropdown properly', () => {
 		const expectButtonExpanded = ( container, expanded ) => {
 			expect( container.querySelectorAll( 'button' ) ).toHaveLength( 1 );
-			expect(
-				getButtonElement( container ).getAttribute( 'aria-expanded' )
-			).toBe( expanded.toString() );
+			expect( getButtonElement( container ) ).toHaveAttribute(
+				'aria-expanded',
+				expanded.toString()
+			);
 		};
 
 		const {

packages/components/src/input-control/test/index.js

@@ -40,7 +40,7 @@ describe( 'InputControl', () => {
 
 			const input = getInput();
 
-			expect( input.getAttribute( 'type' ) ).toBe( 'number' );
+			expect( input ).toHaveAttribute( 'type', 'number' );
 		} );
 
 		it( 'should render label', () => {

packages/components/src/panel/test/body.js

@@ -67,7 +67,7 @@ describe( 'PanelBody', () => {
 			let panelContent = getPanelBodyContent( container );
 
 			expect( panelContent ).toBeTruthy();
-			expect( panelContent.getAttribute( 'hidden' ) ).toBe( '' );
+			expect( panelContent ).toHaveAttribute( 'hidden', '' );
 
 			rerender(
 				<PanelBody opened={ false }>
@@ -77,7 +77,7 @@ describe( 'PanelBody', () => {
 			panelContent = getPanelBodyContent( container );
 
 			expect( panelContent ).toBeTruthy();
-			expect( panelContent.getAttribute( 'hidden' ) ).toBeNull();
+			expect( panelContent ).not.toHaveAttribute( 'hidden' );
 		} );
 	} );
 

packages/components/src/sandbox/test/index.js

@@ -49,7 +49,8 @@ describe( 'Sandbox', () => {
 		let sandboxedIframe =
 			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
 
-		expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
+		expect( sandboxedIframe ).toHaveAttribute(
+			'src',
 			'https://super.embed'
 		);
 
@@ -60,7 +61,8 @@ describe( 'Sandbox', () => {
 		sandboxedIframe =
 			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
 
-		expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
+		expect( sandboxedIframe ).toHaveAttribute(
+			'src',
 			'https://another.super.embed'
 		);
 	} );

packages/components/src/toolbar-group/test/index.js

@@ -36,10 +36,8 @@ describe( 'ToolbarGroup', () => {
 			render( <ToolbarGroup controls={ controls } /> );
 
 			const toolbarButton = screen.getByLabelText( 'WordPress' );
-			expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
-				'false'
-			);
-			expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' );
+			expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'false' );
+			expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
 		} );
 
 		it( 'should render a list of controls with buttons and active control', () => {
@@ -56,10 +54,8 @@ describe( 'ToolbarGroup', () => {
 			render( <ToolbarGroup controls={ controls } /> );
 
 			const toolbarButton = screen.getByLabelText( 'WordPress' );
-			expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
-				'true'
-			);
-			expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' );
+			expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'true' );
+			expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
 		} );
 
 		it( 'should render a nested list of controls with separator between', () => {

packages/components/src/ui/shortcut/test/index.js

@@ -28,7 +28,8 @@ describe( 'Shortcut', () => {
 		};
 		render( <Shortcut shortcut={ shortcutObject } /> );
 		const shortcut = screen.getByText( shortcutObject.display );
-		expect( shortcut.getAttribute( 'aria-label' ) ).toBe(
+		expect( shortcut ).toHaveAttribute(
+			'aria-label',
 			shortcutObject.ariaLabel
 		);
 	} );

packages/compose/src/hooks/use-disabled/test/index.js

@@ -39,9 +39,9 @@ describe( 'useDisabled', () => {
 		const link = screen.getByRole( 'link' );
 		const p = container.querySelector( 'p' );
 
-		expect( input.hasAttribute( 'inert' ) ).toBe( true );
-		expect( link.hasAttribute( 'inert' ) ).toBe( true );
-		expect( p.hasAttribute( 'inert' ) ).toBe( true );
+		expect( input ).toHaveAttribute( 'inert', 'true' );
+		expect( link ).toHaveAttribute( 'inert', 'true' );
+		expect( p ).toHaveAttribute( 'inert', 'true' );
 	} );
 
 	it( 'will disable an element rendered in an update to the component', async () => {
@@ -54,7 +54,7 @@ describe( 'useDisabled', () => {
 
 		const button = screen.getByText( 'Button' );
 		await waitFor( () => {
-			expect( button.hasAttribute( 'inert' ) ).toBe( true );
+			expect( button ).toHaveAttribute( 'inert', 'true' );
 		} );
 	} );
 } );