From 544683d69338fdd2997ffbdf65247eb03b1376a4 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 12 Jul 2022 17:34:52 +1000
Subject: [PATCH] Update getByRole to also filter by name

---
 .../src/border-box-control/test/index.js      | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/border-box-control/test/index.js b/packages/components/src/border-box-control/test/index.js
index f2c152f71ea87..2c768e645e079 100644
--- a/packages/components/src/border-box-control/test/index.js
+++ b/packages/components/src/border-box-control/test/index.js
@@ -60,8 +60,11 @@ const queryButton = ( name ) => {
 	return screen.queryByRole( 'button', { name } );
 };
 
+const getWidthInput = () => {
+	return screen.getByRole( 'spinbutton', { name: 'Border width' } );
+};
 const updateLinkedWidthInput = ( value ) => {
-	const widthInput = screen.getByRole( 'spinbutton' );
+	const widthInput = getWidthInput();
 	widthInput.focus();
 	fireEvent.change( widthInput, { target: { value } } );
 };
@@ -79,9 +82,13 @@ describe( 'BorderBoxControl', () => {
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
-			const widthInput = screen.getByRole( 'spinbutton' );
-			const unitSelect = screen.getByRole( 'combobox' );
-			const slider = screen.getByRole( 'slider' );
+			const widthInput = getWidthInput();
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+			const slider = screen.getByRole( 'slider', {
+				name: 'Border width',
+			} );
 			const linkedButton = screen.getByLabelText( 'Unlink sides' );
 
 			expect( label ).toBeInTheDocument();
@@ -108,14 +115,14 @@ describe( 'BorderBoxControl', () => {
 
 		it( 'should show correct width value when flat border value provided', () => {
 			renderBorderBoxControl( { value: defaultBorder } );
-			const widthInput = screen.getByRole( 'spinbutton' );
+			const widthInput = getWidthInput();
 
 			expect( widthInput.value ).toBe( '1' );
 		} );
 
 		it( 'should show correct width value when consistent split borders provided', () => {
 			renderBorderBoxControl( { value: defaultBorders } );
-			const widthInput = screen.getByRole( 'spinbutton' );
+			const widthInput = getWidthInput();
 
 			expect( widthInput.value ).toBe( '1' );
 		} );
@@ -126,7 +133,7 @@ describe( 'BorderBoxControl', () => {
 			// First render of control with mixed values should show split view.
 			clickButton( 'Link sides' );
 
-			const widthInput = screen.getByRole( 'spinbutton' );
+			const widthInput = getWidthInput();
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
 		} );
 
@@ -143,7 +150,7 @@ describe( 'BorderBoxControl', () => {
 
 			// First render of control with mixed values should show split view.
 			clickButton( 'Link sides' );
-			const linkedInput = screen.getByRole( 'spinbutton' );
+			const linkedInput = getWidthInput();
 
 			expect( linkedInput.value ).toBe( '5' );
 		} );