From 7e629aa9fdf9f20cb4c1bf082293710b42625157 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Thu, 4 Aug 2022 16:06:42 +0300
Subject: [PATCH 1/4] Components: Refactor Button tests to
 @testing-library/react

---
 packages/components/src/button/test/index.js | 304 ++++++++++---------
 1 file changed, 168 insertions(+), 136 deletions(-)

diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
index 9d2b9f5383ceab..b0248f48d0388c 100644
--- a/packages/components/src/button/test/index.js
+++ b/packages/components/src/button/test/index.js
@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import TestUtils from 'react-dom/test-utils';
+
 /**
  * WordPress dependencies
  */
@@ -12,172 +13,197 @@ import { plusCircle } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import ButtonWithForwardedRef, { Button } from '../';
-import { VisuallyHidden } from '../../visually-hidden';
+import Button from '../';
+
+jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
+jest.mock( '../../tooltip', () => ( { text, children } ) => (
+	<div data-testid="test-tooltip" title={ text }>
+		{ children }
+	</div>
+) );
+jest.mock( '../../visually-hidden', () => ( {
+	__esModule: true,
+	VisuallyHidden: ( { children } ) => (
+		<div data-testid="test-visually-hidden">{ children }</div>
+	),
+} ) );
 
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render a button element with only one class', () => {
-			const button = shallow( <Button /> ).find( 'button' );
-			expect( button.hasClass( 'components-button' ) ).toBe( true );
-			expect( button.hasClass( 'is-large' ) ).toBe( false );
-			expect( button.hasClass( 'is-primary' ) ).toBe( false );
-			expect( button.hasClass( 'is-pressed' ) ).toBe( false );
-			expect( button.prop( 'disabled' ) ).toBeUndefined();
-			expect( button.prop( 'aria-disabled' ) ).toBeUndefined();
-			expect( button.prop( 'type' ) ).toBe( 'button' );
-			expect( button.type() ).toBe( 'button' );
+			const button = render( <Button /> ).container.firstChild;
+
+			expect( button ).toHaveClass( 'components-button' );
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).not.toHaveClass( 'is-primary' );
+			expect( button ).not.toHaveClass( 'is-pressed' );
+			expect( button ).not.toHaveAttribute( 'disabled' );
+			expect( button ).not.toHaveAttribute( 'aria-disabled' );
+			expect( button ).toHaveAttribute( 'type', 'button' );
+			expect( button.tagName ).toBe( 'BUTTON' );
 		} );
 
 		it( 'should render a button element with is-primary class', () => {
-			const button = shallow( <Button variant="primary" /> ).find(
-				'button'
-			);
-			expect( button.hasClass( 'is-large' ) ).toBe( false );
-			expect( button.hasClass( 'is-primary' ) ).toBe( true );
+			const button = render( <Button variant="primary" /> ).container
+				.firstChild;
+
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).toHaveClass( 'is-primary' );
 		} );
 
 		it( 'should render a button element with is-secondary and is-small class', () => {
-			const button = shallow(
-				<Button variant="secondary" isSmall />
-			).find( 'button' );
-			expect( button.hasClass( 'is-secondary' ) ).toBe( true );
-			expect( button.hasClass( 'is-large' ) ).toBe( false );
-			expect( button.hasClass( 'is-small' ) ).toBe( true );
-			expect( button.hasClass( 'is-primary' ) ).toBe( false );
+			const button = render( <Button variant="secondary" isSmall /> )
+				.container.firstChild;
+
+			expect( button ).toHaveClass( 'is-secondary' );
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).toHaveClass( 'is-small' );
+			expect( button ).not.toHaveClass( 'is-primary' );
 		} );
 
 		it( 'should render a button element with is-tertiary class', () => {
-			const button = shallow( <Button variant="tertiary" /> ).find(
-				'button'
-			);
-			expect( button.hasClass( 'is-large' ) ).toBe( false );
-			expect( button.hasClass( 'is-primary' ) ).toBe( false );
-			expect( button.hasClass( 'is-secondary' ) ).toBe( false );
-			expect( button.hasClass( 'is-tertiary' ) ).toBe( true );
+			const button = render( <Button variant="tertiary" /> ).container
+				.firstChild;
+
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).not.toHaveClass( 'is-primary' );
+			expect( button ).not.toHaveClass( 'is-secondary' );
+			expect( button ).toHaveClass( 'is-tertiary' );
 		} );
 
 		it( 'should render a button element with is-link class', () => {
-			const button = shallow( <Button variant="link" /> ).find(
-				'button'
-			);
-			expect( button.hasClass( 'is-primary' ) ).toBe( false );
-			expect( button.hasClass( 'is-secondary' ) ).toBe( false );
-			expect( button.hasClass( 'is-tertiary' ) ).toBe( false );
-			expect( button.hasClass( 'is-link' ) ).toBe( true );
+			const button = render( <Button variant="link" /> ).container
+				.firstChild;
+
+			expect( button ).not.toHaveClass( 'is-primary' );
+			expect( button ).not.toHaveClass( 'is-secondary' );
+			expect( button ).not.toHaveClass( 'is-tertiary' );
+			expect( button ).toHaveClass( 'is-link' );
 		} );
 
 		it( 'should render a button element with is-pressed without button class', () => {
-			const button = shallow( <Button isPressed /> ).find( 'button' );
-			expect( button.hasClass( 'is-pressed' ) ).toBe( true );
+			const button = render( <Button isPressed /> ).container.firstChild;
+
+			expect( button ).toHaveClass( 'is-pressed' );
 		} );
 
 		it( 'should add a disabled prop to the button', () => {
-			const button = shallow( <Button disabled /> ).find( 'button' );
-			expect( button.prop( 'disabled' ) ).toBe( true );
+			const button = render( <Button disabled /> ).container.firstChild;
+
+			expect( button ).toHaveAttribute( 'disabled' );
 		} );
 
 		it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
-			const button = shallow(
+			const button = render(
 				<Button disabled __experimentalIsFocusable />
-			).find( 'button' );
-			expect( button.prop( 'disabled' ) ).toBe( false );
-			expect( button.prop( 'aria-disabled' ) ).toBe( true );
+			).container.firstChild;
+
+			expect( button ).not.toHaveAttribute( 'disabled' );
+			expect( button ).toHaveAttribute( 'aria-disabled' );
 		} );
 
-		it( 'should not poss the prop target into the element', () => {
-			const button = shallow( <Button target="_blank" /> ).find(
-				'button'
-			);
-			expect( button.prop( 'target' ) ).toBeUndefined();
+		it( 'should not pass the prop target into the element', () => {
+			const button = render( <Button target="_blank" /> ).container
+				.firstChild;
+
+			expect( button ).not.toHaveAttribute( 'target' );
 		} );
 
 		it( 'should render with an additional className', () => {
-			const button = shallow( <Button className="gutenberg" /> ).find(
-				'button'
-			);
+			const button = render( <Button className="gutenberg" /> ).container
+				.firstChild;
 
-			expect( button.hasClass( 'gutenberg' ) ).toBe( true );
+			expect( button ).toHaveClass( 'gutenberg' );
 		} );
 
-		it( 'should render and additional WordPress prop of value awesome', () => {
-			const button = shallow( <Button WordPress="awesome" /> ).find(
-				'button'
-			);
+		it( 'should render an additional WordPress prop of value awesome', () => {
+			const button = render( <Button WordPress="awesome" /> ).container
+				.firstChild;
 
-			expect( button.prop( 'WordPress' ) ).toBe( 'awesome' );
+			expect( console ).toHaveErrored();
+			expect( button ).toHaveAttribute( 'wordpress', 'awesome' );
 		} );
 
 		it( 'should render an icon button', () => {
-			const iconButton = shallow( <Button icon={ plusCircle } /> ).find(
-				'button'
-			);
-			expect( iconButton.hasClass( 'has-icon' ) ).toBe( true );
-			expect( iconButton.prop( 'aria-label' ) ).toBeUndefined();
+			const button = render( <Button icon={ plusCircle } /> ).container
+				.firstChild;
+
+			expect( button ).toHaveClass( 'has-icon' );
+			expect( button ).not.toHaveAttribute( 'aria-label' );
 		} );
 
 		it( 'should render a Dashicon component matching the wordpress icon', () => {
-			const iconButton = shallow( <Button icon={ plusCircle } /> ).find(
-				'button'
+			const button = render( <Button icon={ plusCircle } /> ).container
+				.firstChild;
+
+			expect( button ).toContainElement(
+				screen.getByTestId( 'test-icon' )
 			);
-			expect( iconButton.find( 'Icon' ).dive() ).not.toBeNull();
 		} );
 
 		it( 'should render child elements and icon', () => {
-			const iconButton = shallow(
+			const button = render(
 				<Button
 					icon={ plusCircle }
 					children={ <p className="test">Test</p> }
 				/>
-			).find( 'button' );
-			expect( iconButton.find( 'Icon' ).dive() ).not.toBeNull();
-			expect( iconButton.find( '.test' ).shallow().text() ).toBe(
-				'Test'
+			).container.firstChild;
+
+			expect( button ).toContainElement(
+				screen.getByTestId( 'test-icon' )
 			);
+
+			const paragraph = button.childNodes[ 1 ];
+			expect( paragraph ).toHaveClass( 'test' );
+			expect( paragraph ).toHaveTextContent( 'Test' );
 		} );
 
 		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', () => {
-			const iconButton = shallow(
-				<Button icon={ plusCircle } label="WordPress" />
-			).find( 'Tooltip' );
-			expect( iconButton.name() ).toBe( 'Tooltip' );
-			expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' );
-			expect( iconButton.find( 'button' ).prop( 'aria-label' ) ).toBe(
-				'WordPress'
-			);
+			render( <Button icon={ plusCircle } label="WordPress" /> );
+
+			const tooltip = screen.getByTestId( 'test-tooltip' );
+			expect( tooltip ).toBeVisible();
+			expect( tooltip ).toHaveAttribute( 'title', 'WordPress' );
+
+			const button = screen.getByRole( 'button' );
+			expect( tooltip ).toContainElement( button );
+			expect( button ).toHaveAttribute( 'aria-label', 'WordPress' );
 		} );
 
 		it( 'should support explicit aria-label override', () => {
-			const iconButton = shallow( <Button aria-label="Custom" /> ).find(
-				'button'
-			);
-			expect( iconButton.prop( 'aria-label' ) ).toBe( 'Custom' );
+			const button = render( <Button aria-label="Custom" /> ).container
+				.firstChild;
+
+			expect( button ).toHaveAttribute( 'aria-label', 'Custom' );
 		} );
 
 		it( 'should support adding aria-describedby text', () => {
-			const buttonDescription = shallow(
-				<Button describedBy="Description text" />
-			)
-				.find( VisuallyHidden )
-				.shallow()
-				.text();
-			expect( buttonDescription ).toBe( 'Description text' );
+			const button = render( <Button describedBy="Description text" /> )
+				.container.firstChild;
+
+			expect( button ).toHaveAttribute( 'aria-describedby' );
+			expect(
+				screen.getByTestId( 'test-visually-hidden' )
+			).toHaveTextContent( 'Description text' );
 		} );
 
 		it( 'should populate tooltip with label content for buttons without visible labels (no children)', () => {
-			const buttonTooltip = shallow(
+			render(
 				<Button
 					describedBy="Description text"
 					label="Label"
 					icon={ plusCircle }
 				/>
-			).find( 'Tooltip' );
+			);
 
-			expect( buttonTooltip.prop( 'text' ) ).toBe( 'Label' );
+			expect( screen.getByTestId( 'test-tooltip' ) ).toHaveAttribute(
+				'title',
+				'Label'
+			);
 		} );
 
 		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', () => {
-			const buttonTooltip = shallow(
+			render(
 				<Button
 					label="Label"
 					describedBy="Description text"
@@ -186,74 +212,80 @@ describe( 'Button', () => {
 				>
 					Children
 				</Button>
-			).find( 'Tooltip' );
+			);
 
-			expect( buttonTooltip.prop( 'text' ) ).toBe( 'Description text' );
+			expect( screen.getByTestId( 'test-tooltip' ) ).toHaveAttribute(
+				'title',
+				'Description text'
+			);
 		} );
 
 		it( 'should allow tooltip disable', () => {
-			const iconButton = shallow(
+			const button = render(
 				<Button
 					icon={ plusCircle }
 					label="WordPress"
 					showTooltip={ false }
 				/>
-			).find( 'button' );
-			expect( iconButton.name() ).toBe( 'button' );
-			expect( iconButton.prop( 'aria-label' ) ).toBe( 'WordPress' );
+			).container.firstChild;
+
+			expect( button.tagName ).toBe( 'BUTTON' );
+			expect( button ).toHaveAttribute( 'aria-label', 'WordPress' );
 		} );
 
 		it( 'should show the tooltip for empty children', () => {
-			const iconButton = shallow(
+			const tooltip = render(
 				<Button icon={ plusCircle } label="WordPress" children={ [] } />
-			).find( 'Tooltip' );
-			expect( iconButton.name() ).toBe( 'Tooltip' );
-			expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' );
+			).container.firstChild;
+
+			expect( tooltip ).toBe( screen.getByTestId( 'test-tooltip' ) );
+			expect( tooltip ).toHaveAttribute( 'title', 'WordPress' );
 		} );
 
 		it( 'should not show the tooltip when icon and children defined', () => {
-			const iconButton = shallow(
+			const button = render(
 				<Button icon={ plusCircle } label="WordPress">
 					Children
 				</Button>
-			).find( 'button' );
-			expect( iconButton.name() ).toBe( 'button' );
+			).container.firstChild;
+
+			expect( button.tagName ).toBe( 'BUTTON' );
 		} );
 
 		it( 'should force showing the tooltip even if icon and children defined', () => {
-			const iconButton = shallow(
+			const tooltip = render(
 				<Button icon={ plusCircle } label="WordPress" showTooltip>
 					Children
 				</Button>
-			).find( 'Tooltip' );
-			expect( iconButton.name() ).toBe( 'Tooltip' );
+			).container.firstChild;
+
+			expect( tooltip ).toBe( screen.getByTestId( 'test-tooltip' ) );
 		} );
 	} );
 
 	describe( 'with href property', () => {
 		it( 'should render a link instead of a button with href prop', () => {
-			const button = shallow(
-				<Button href="https://wordpress.org/" />
-			).find( 'a' );
+			const link = render( <Button href="https://wordpress.org/" /> )
+				.container.firstChild;
 
-			expect( button.type() ).toBe( 'a' );
-			expect( button.prop( 'href' ) ).toBe( 'https://wordpress.org/' );
+			expect( link.tagName ).toBe( 'A' );
+			expect( link ).toHaveAttribute( 'href', 'https://wordpress.org/' );
 		} );
 
 		it( 'should allow for the passing of the target prop when a link is created', () => {
-			const button = shallow(
+			const link = render(
 				<Button href="https://wordpress.org/" target="_blank" />
-			).find( 'a' );
+			).container.firstChild;
 
-			expect( button.prop( 'target' ) ).toBe( '_blank' );
+			expect( link ).toHaveAttribute( 'target', '_blank' );
 		} );
 
 		it( 'should become a button again when disabled is supplied', () => {
-			const button = shallow(
+			const button = render(
 				<Button href="https://wordpress.org/" disabled />
-			).find( 'button' );
+			).container.firstChild;
 
-			expect( button.type() ).toBe( 'button' );
+			expect( button.tagName ).toBe( 'BUTTON' );
 		} );
 	} );
 
@@ -261,37 +293,37 @@ describe( 'Button', () => {
 		it( 'should enable access to DOM element', () => {
 			const ref = createRef();
 
-			TestUtils.renderIntoDocument(
-				<ButtonWithForwardedRef ref={ ref } />
-			);
+			TestUtils.renderIntoDocument( <Button ref={ ref } /> );
+
 			expect( ref.current.type ).toBe( 'button' );
 		} );
 	} );
 
 	describe( 'deprecated props', () => {
 		it( 'should not break when the legacy isPrimary prop is passed', () => {
-			const button = shallow( <Button isPrimary /> ).find( 'button' );
-			expect( button.hasClass( 'is-primary' ) ).toBe( true );
+			const button = render( <Button isPrimary /> ).container.firstChild;
+			expect( button ).toHaveClass( 'is-primary' );
 		} );
 
 		it( 'should not break when the legacy isSecondary prop is passed', () => {
-			const button = shallow( <Button isSecondary /> ).find( 'button' );
-			expect( button.hasClass( 'is-secondary' ) ).toBe( true );
+			const button = render( <Button isSecondary /> ).container
+				.firstChild;
+			expect( button ).toHaveClass( 'is-secondary' );
 		} );
 
 		it( 'should not break when the legacy isTertiary prop is passed', () => {
-			const button = shallow( <Button isTertiary /> ).find( 'button' );
-			expect( button.hasClass( 'is-tertiary' ) ).toBe( true );
+			const button = render( <Button isTertiary /> ).container.firstChild;
+			expect( button ).toHaveClass( 'is-tertiary' );
 		} );
 
 		it( 'should not break when the legacy isLink prop is passed', () => {
-			const button = shallow( <Button isLink /> ).find( 'button' );
-			expect( button.hasClass( 'is-link' ) ).toBe( true );
+			const button = render( <Button isLink /> ).container.firstChild;
+			expect( button ).toHaveClass( 'is-link' );
 		} );
 
 		it( 'should warn when the isDefault prop is passed', () => {
-			const button = shallow( <Button isDefault /> ).find( 'button' );
-			expect( button.hasClass( 'is-secondary' ) ).toBe( true );
+			const button = render( <Button isDefault /> ).container.firstChild;
+			expect( button ).toHaveClass( 'is-secondary' );
 
 			expect( console ).toHaveWarned();
 		} );

From da7aa9c9196679e458d885b586e70cab4a9276b2 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Wed, 10 Aug 2022 09:51:28 +0300
Subject: [PATCH 2/4] Always use screen.getByRole queries

---
 packages/components/src/button/test/index.js | 90 +++++++++++---------
 1 file changed, 49 insertions(+), 41 deletions(-)

diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
index b0248f48d0388c..71d76afe57906b 100644
--- a/packages/components/src/button/test/index.js
+++ b/packages/components/src/button/test/index.js
@@ -31,7 +31,8 @@ jest.mock( '../../visually-hidden', () => ( {
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render a button element with only one class', () => {
-			const button = render( <Button /> ).container.firstChild;
+			render( <Button /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).toHaveClass( 'components-button' );
 			expect( button ).not.toHaveClass( 'is-large' );
@@ -40,20 +41,19 @@ describe( 'Button', () => {
 			expect( button ).not.toHaveAttribute( 'disabled' );
 			expect( button ).not.toHaveAttribute( 'aria-disabled' );
 			expect( button ).toHaveAttribute( 'type', 'button' );
-			expect( button.tagName ).toBe( 'BUTTON' );
 		} );
 
 		it( 'should render a button element with is-primary class', () => {
-			const button = render( <Button variant="primary" /> ).container
-				.firstChild;
+			render( <Button variant="primary" /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).not.toHaveClass( 'is-large' );
 			expect( button ).toHaveClass( 'is-primary' );
 		} );
 
 		it( 'should render a button element with is-secondary and is-small class', () => {
-			const button = render( <Button variant="secondary" isSmall /> )
-				.container.firstChild;
+			render( <Button variant="secondary" isSmall /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).toHaveClass( 'is-secondary' );
 			expect( button ).not.toHaveClass( 'is-large' );
@@ -62,8 +62,8 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render a button element with is-tertiary class', () => {
-			const button = render( <Button variant="tertiary" /> ).container
-				.firstChild;
+			render( <Button variant="tertiary" /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).not.toHaveClass( 'is-large' );
 			expect( button ).not.toHaveClass( 'is-primary' );
@@ -72,8 +72,8 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render a button element with is-link class', () => {
-			const button = render( <Button variant="link" /> ).container
-				.firstChild;
+			render( <Button variant="link" /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).not.toHaveClass( 'is-primary' );
 			expect( button ).not.toHaveClass( 'is-secondary' );
@@ -82,59 +82,60 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render a button element with is-pressed without button class', () => {
-			const button = render( <Button isPressed /> ).container.firstChild;
+			render( <Button isPressed /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).toHaveClass( 'is-pressed' );
 		} );
 
 		it( 'should add a disabled prop to the button', () => {
-			const button = render( <Button disabled /> ).container.firstChild;
+			render( <Button disabled /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).toHaveAttribute( 'disabled' );
 		} );
 
 		it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
-			const button = render(
-				<Button disabled __experimentalIsFocusable />
-			).container.firstChild;
+			render( <Button disabled __experimentalIsFocusable /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).not.toHaveAttribute( 'disabled' );
 			expect( button ).toHaveAttribute( 'aria-disabled' );
 		} );
 
 		it( 'should not pass the prop target into the element', () => {
-			const button = render( <Button target="_blank" /> ).container
-				.firstChild;
+			render( <Button target="_blank" /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).not.toHaveAttribute( 'target' );
 		} );
 
 		it( 'should render with an additional className', () => {
-			const button = render( <Button className="gutenberg" /> ).container
-				.firstChild;
+			render( <Button className="gutenberg" /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).toHaveClass( 'gutenberg' );
 		} );
 
 		it( 'should render an additional WordPress prop of value awesome', () => {
-			const button = render( <Button WordPress="awesome" /> ).container
-				.firstChild;
+			render( <Button WordPress="awesome" /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( console ).toHaveErrored();
 			expect( button ).toHaveAttribute( 'wordpress', 'awesome' );
 		} );
 
 		it( 'should render an icon button', () => {
-			const button = render( <Button icon={ plusCircle } /> ).container
-				.firstChild;
+			render( <Button icon={ plusCircle } /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).toHaveClass( 'has-icon' );
 			expect( button ).not.toHaveAttribute( 'aria-label' );
 		} );
 
 		it( 'should render a Dashicon component matching the wordpress icon', () => {
-			const button = render( <Button icon={ plusCircle } /> ).container
-				.firstChild;
+			render( <Button icon={ plusCircle } /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).toContainElement(
 				screen.getByTestId( 'test-icon' )
@@ -142,12 +143,13 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render child elements and icon', () => {
-			const button = render(
+			render(
 				<Button
 					icon={ plusCircle }
 					children={ <p className="test">Test</p> }
 				/>
-			).container.firstChild;
+			);
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).toContainElement(
 				screen.getByTestId( 'test-icon' )
@@ -171,15 +173,15 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should support explicit aria-label override', () => {
-			const button = render( <Button aria-label="Custom" /> ).container
-				.firstChild;
+			render( <Button aria-label="Custom" /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).toHaveAttribute( 'aria-label', 'Custom' );
 		} );
 
 		it( 'should support adding aria-describedby text', () => {
-			const button = render( <Button describedBy="Description text" /> )
-				.container.firstChild;
+			render( <Button describedBy="Description text" /> );
+			const button = screen.getByRole( 'button' );
 
 			expect( button ).toHaveAttribute( 'aria-describedby' );
 			expect(
@@ -221,13 +223,14 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should allow tooltip disable', () => {
-			const button = render(
+			render(
 				<Button
 					icon={ plusCircle }
 					label="WordPress"
 					showTooltip={ false }
 				/>
-			).container.firstChild;
+			);
+			const button = screen.getByRole( 'button' );
 
 			expect( button.tagName ).toBe( 'BUTTON' );
 			expect( button ).toHaveAttribute( 'aria-label', 'WordPress' );
@@ -243,11 +246,12 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should not show the tooltip when icon and children defined', () => {
-			const button = render(
+			render(
 				<Button icon={ plusCircle } label="WordPress">
 					Children
 				</Button>
-			).container.firstChild;
+			);
+			const button = screen.getByRole( 'button' );
 
 			expect( button.tagName ).toBe( 'BUTTON' );
 		} );
@@ -301,28 +305,32 @@ describe( 'Button', () => {
 
 	describe( 'deprecated props', () => {
 		it( 'should not break when the legacy isPrimary prop is passed', () => {
-			const button = render( <Button isPrimary /> ).container.firstChild;
+			render( <Button isPrimary /> );
+			const button = screen.getByRole( 'button' );
 			expect( button ).toHaveClass( 'is-primary' );
 		} );
 
 		it( 'should not break when the legacy isSecondary prop is passed', () => {
-			const button = render( <Button isSecondary /> ).container
-				.firstChild;
+			render( <Button isSecondary /> );
+			const button = screen.getByRole( 'button' );
 			expect( button ).toHaveClass( 'is-secondary' );
 		} );
 
 		it( 'should not break when the legacy isTertiary prop is passed', () => {
-			const button = render( <Button isTertiary /> ).container.firstChild;
+			render( <Button isTertiary /> );
+			const button = screen.getByRole( 'button' );
 			expect( button ).toHaveClass( 'is-tertiary' );
 		} );
 
 		it( 'should not break when the legacy isLink prop is passed', () => {
-			const button = render( <Button isLink /> ).container.firstChild;
+			render( <Button isLink /> );
+			const button = screen.getByRole( 'button' );
 			expect( button ).toHaveClass( 'is-link' );
 		} );
 
 		it( 'should warn when the isDefault prop is passed', () => {
-			const button = render( <Button isDefault /> ).container.firstChild;
+			render( <Button isDefault /> );
+			const button = screen.getByRole( 'button' );
 			expect( button ).toHaveClass( 'is-secondary' );
 
 			expect( console ).toHaveWarned();

From e2a3a98f0d1a0c566547565337c3834a83570445 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Wed, 10 Aug 2022 10:53:51 +0300
Subject: [PATCH 3/4] Get rid of mocks and DOM traversing

---
 packages/components/src/button/test/index.js | 179 ++++++++++---------
 1 file changed, 91 insertions(+), 88 deletions(-)

diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
index 71d76afe57906b..35753e860c0c9e 100644
--- a/packages/components/src/button/test/index.js
+++ b/packages/components/src/button/test/index.js
@@ -16,17 +16,6 @@ import { plusCircle } from '@wordpress/icons';
 import Button from '../';
 
 jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
-jest.mock( '../../tooltip', () => ( { text, children } ) => (
-	<div data-testid="test-tooltip" title={ text }>
-		{ children }
-	</div>
-) );
-jest.mock( '../../visually-hidden', () => ( {
-	__esModule: true,
-	VisuallyHidden: ( { children } ) => (
-		<div data-testid="test-visually-hidden">{ children }</div>
-	),
-} ) );
 
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {
@@ -83,16 +72,16 @@ describe( 'Button', () => {
 
 		it( 'should render a button element with is-pressed without button class', () => {
 			render( <Button isPressed /> );
-			const button = screen.getByRole( 'button' );
 
-			expect( button ).toHaveClass( 'is-pressed' );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-pressed' );
 		} );
 
 		it( 'should add a disabled prop to the button', () => {
 			render( <Button disabled /> );
-			const button = screen.getByRole( 'button' );
 
-			expect( button ).toHaveAttribute( 'disabled' );
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'disabled'
+			);
 		} );
 
 		it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
@@ -105,24 +94,26 @@ describe( 'Button', () => {
 
 		it( 'should not pass the prop target into the element', () => {
 			render( <Button target="_blank" /> );
-			const button = screen.getByRole( 'button' );
 
-			expect( button ).not.toHaveAttribute( 'target' );
+			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+				'target'
+			);
 		} );
 
 		it( 'should render with an additional className', () => {
 			render( <Button className="gutenberg" /> );
-			const button = screen.getByRole( 'button' );
 
-			expect( button ).toHaveClass( 'gutenberg' );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'gutenberg' );
 		} );
 
 		it( 'should render an additional WordPress prop of value awesome', () => {
 			render( <Button WordPress="awesome" /> );
-			const button = screen.getByRole( 'button' );
 
 			expect( console ).toHaveErrored();
-			expect( button ).toHaveAttribute( 'wordpress', 'awesome' );
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'wordpress',
+				'awesome'
+			);
 		} );
 
 		it( 'should render an icon button', () => {
@@ -135,9 +126,8 @@ describe( 'Button', () => {
 
 		it( 'should render a Dashicon component matching the wordpress icon', () => {
 			render( <Button icon={ plusCircle } /> );
-			const button = screen.getByRole( 'button' );
 
-			expect( button ).toContainElement(
+			expect( screen.getByRole( 'button' ) ).toContainElement(
 				screen.getByTestId( 'test-icon' )
 			);
 		} );
@@ -149,47 +139,45 @@ describe( 'Button', () => {
 					children={ <p className="test">Test</p> }
 				/>
 			);
-			const button = screen.getByRole( 'button' );
 
-			expect( button ).toContainElement(
+			expect( screen.getByRole( 'button' ) ).toContainElement(
 				screen.getByTestId( 'test-icon' )
 			);
 
-			const paragraph = button.childNodes[ 1 ];
+			const paragraph = screen.getByText( 'Test' );
+			expect( paragraph ).toBeVisible();
 			expect( paragraph ).toHaveClass( 'test' );
-			expect( paragraph ).toHaveTextContent( 'Test' );
 		} );
 
-		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', () => {
+		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => {
 			render( <Button icon={ plusCircle } label="WordPress" /> );
 
-			const tooltip = screen.getByTestId( 'test-tooltip' );
-			expect( tooltip ).toBeVisible();
-			expect( tooltip ).toHaveAttribute( 'title', 'WordPress' );
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			const button = screen.getByRole( 'button' );
-			expect( tooltip ).toContainElement( button );
-			expect( button ).toHaveAttribute( 'aria-label', 'WordPress' );
+			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+
+			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
 
 		it( 'should support explicit aria-label override', () => {
 			render( <Button aria-label="Custom" /> );
-			const button = screen.getByRole( 'button' );
 
-			expect( button ).toHaveAttribute( 'aria-label', 'Custom' );
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'aria-label',
+				'Custom'
+			);
 		} );
 
 		it( 'should support adding aria-describedby text', () => {
 			render( <Button describedBy="Description text" /> );
-			const button = screen.getByRole( 'button' );
-
-			expect( button ).toHaveAttribute( 'aria-describedby' );
 			expect(
-				screen.getByTestId( 'test-visually-hidden' )
-			).toHaveTextContent( 'Description text' );
+				screen.getByRole( 'button', {
+					description: 'Description text',
+				} )
+			).toBeVisible();
 		} );
 
-		it( 'should populate tooltip with label content for buttons without visible labels (no children)', () => {
+		it( 'should populate tooltip with label content for buttons without visible labels (no children)', async () => {
 			render(
 				<Button
 					describedBy="Description text"
@@ -198,10 +186,11 @@ describe( 'Button', () => {
 				/>
 			);
 
-			expect( screen.getByTestId( 'test-tooltip' ) ).toHaveAttribute(
-				'title',
-				'Label'
-			);
+			expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();
+
+			await screen.getByRole( 'button', { name: 'Label' } ).focus();
+
+			expect( screen.getByText( 'Label' ) ).toBeVisible();
 		} );
 
 		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', () => {
@@ -216,13 +205,14 @@ describe( 'Button', () => {
 				</Button>
 			);
 
-			expect( screen.getByTestId( 'test-tooltip' ) ).toHaveAttribute(
-				'title',
-				'Description text'
-			);
+			expect(
+				screen.getByRole( 'button', {
+					description: 'Description text',
+				} )
+			).toBeVisible();
 		} );
 
-		it( 'should allow tooltip disable', () => {
+		it( 'should allow tooltip disable', async () => {
 			render(
 				<Button
 					icon={ plusCircle }
@@ -230,66 +220,81 @@ describe( 'Button', () => {
 					showTooltip={ false }
 				/>
 			);
-			const button = screen.getByRole( 'button' );
+			const button = screen.getByRole( 'button', { name: 'WordPress' } );
 
-			expect( button.tagName ).toBe( 'BUTTON' );
 			expect( button ).toHaveAttribute( 'aria-label', 'WordPress' );
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			await button.focus();
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
 
-		it( 'should show the tooltip for empty children', () => {
-			const tooltip = render(
+		it( 'should show the tooltip for empty children', async () => {
+			render(
 				<Button icon={ plusCircle } label="WordPress" children={ [] } />
-			).container.firstChild;
+			);
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
 
-			expect( tooltip ).toBe( screen.getByTestId( 'test-tooltip' ) );
-			expect( tooltip ).toHaveAttribute( 'title', 'WordPress' );
+			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
 
-		it( 'should not show the tooltip when icon and children defined', () => {
+		it( 'should not show the tooltip when icon and children defined', async () => {
 			render(
 				<Button icon={ plusCircle } label="WordPress">
 					Children
 				</Button>
 			);
-			const button = screen.getByRole( 'button' );
 
-			expect( button.tagName ).toBe( 'BUTTON' );
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
 
-		it( 'should force showing the tooltip even if icon and children defined', () => {
-			const tooltip = render(
+		it( 'should force showing the tooltip even if icon and children defined', async () => {
+			render(
 				<Button icon={ plusCircle } label="WordPress" showTooltip>
 					Children
 				</Button>
-			).container.firstChild;
+			);
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			expect( tooltip ).toBe( screen.getByTestId( 'test-tooltip' ) );
+			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+
+			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
 	} );
 
 	describe( 'with href property', () => {
 		it( 'should render a link instead of a button with href prop', () => {
-			const link = render( <Button href="https://wordpress.org/" /> )
-				.container.firstChild;
+			render( <Button href="https://wordpress.org/" /> );
 
-			expect( link.tagName ).toBe( 'A' );
-			expect( link ).toHaveAttribute( 'href', 'https://wordpress.org/' );
+			expect( screen.getByRole( 'link' ) ).toHaveAttribute(
+				'href',
+				'https://wordpress.org/'
+			);
 		} );
 
 		it( 'should allow for the passing of the target prop when a link is created', () => {
-			const link = render(
-				<Button href="https://wordpress.org/" target="_blank" />
-			).container.firstChild;
+			render( <Button href="https://wordpress.org/" target="_blank" /> );
 
-			expect( link ).toHaveAttribute( 'target', '_blank' );
+			expect( screen.getByRole( 'link' ) ).toHaveAttribute(
+				'target',
+				'_blank'
+			);
 		} );
 
 		it( 'should become a button again when disabled is supplied', () => {
-			const button = render(
-				<Button href="https://wordpress.org/" disabled />
-			).container.firstChild;
+			render( <Button href="https://wordpress.org/" disabled /> );
 
-			expect( button.tagName ).toBe( 'BUTTON' );
+			expect( screen.getByRole( 'button' ) ).toBeVisible();
 		} );
 	} );
 
@@ -306,33 +311,31 @@ describe( 'Button', () => {
 	describe( 'deprecated props', () => {
 		it( 'should not break when the legacy isPrimary prop is passed', () => {
 			render( <Button isPrimary /> );
-			const button = screen.getByRole( 'button' );
-			expect( button ).toHaveClass( 'is-primary' );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-primary' );
 		} );
 
 		it( 'should not break when the legacy isSecondary prop is passed', () => {
 			render( <Button isSecondary /> );
-			const button = screen.getByRole( 'button' );
-			expect( button ).toHaveClass( 'is-secondary' );
+			expect( screen.getByRole( 'button' ) ).toHaveClass(
+				'is-secondary'
+			);
 		} );
 
 		it( 'should not break when the legacy isTertiary prop is passed', () => {
 			render( <Button isTertiary /> );
-			const button = screen.getByRole( 'button' );
-			expect( button ).toHaveClass( 'is-tertiary' );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-tertiary' );
 		} );
 
 		it( 'should not break when the legacy isLink prop is passed', () => {
 			render( <Button isLink /> );
-			const button = screen.getByRole( 'button' );
-			expect( button ).toHaveClass( 'is-link' );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-link' );
 		} );
 
 		it( 'should warn when the isDefault prop is passed', () => {
 			render( <Button isDefault /> );
-			const button = screen.getByRole( 'button' );
-			expect( button ).toHaveClass( 'is-secondary' );
-
+			expect( screen.getByRole( 'button' ) ).toHaveClass(
+				'is-secondary'
+			);
 			expect( console ).toHaveWarned();
 		} );
 	} );

From 45532ea976781a2b1fd4301d0e4122bc1b292995 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Fri, 12 Aug 2022 11:09:38 +0300
Subject: [PATCH 4/4] Refactor ref test

---
 packages/components/src/button/test/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
index 35753e860c0c9e..a7ebaf7314a325 100644
--- a/packages/components/src/button/test/index.js
+++ b/packages/components/src/button/test/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import TestUtils from 'react-dom/test-utils';
 
 /**
  * WordPress dependencies
@@ -302,9 +301,9 @@ describe( 'Button', () => {
 		it( 'should enable access to DOM element', () => {
 			const ref = createRef();
 
-			TestUtils.renderIntoDocument( <Button ref={ ref } /> );
+			render( <Button ref={ ref } /> );
 
-			expect( ref.current.type ).toBe( 'button' );
+			expect( ref.current ).toBe( screen.getByRole( 'button' ) );
 		} );
 	} );