From b500ef33d22ddc64565fd5c5fad6a77b14261ebb Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Fri, 18 Nov 2022 16:21:09 +0200
Subject: [PATCH 1/2] Components: Fix no-node-access in Grid tests

---
 packages/components/src/grid/test/grid.tsx | 62 +++++++++++-----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/packages/components/src/grid/test/grid.tsx b/packages/components/src/grid/test/grid.tsx
index 791dfa4f52216..9cd7bd1936439 100644
--- a/packages/components/src/grid/test/grid.tsx
+++ b/packages/components/src/grid/test/grid.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,14 +12,14 @@ import CONFIG from '../../utils/config-values';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render(
-			<Grid>
+		render(
+			<Grid role="grid">
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 2, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 3 )`,
@@ -27,15 +27,15 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render gap', () => {
-		const { container } = render(
-			<Grid columns={ 3 } gap={ 4 }>
+		render(
+			<Grid columns={ 3 } gap={ 4 } role="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 4 )`,
@@ -43,60 +43,60 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render custom columns', () => {
-		const { container } = render(
-			<Grid columns={ 7 }>
+		render(
+			<Grid columns={ 7 } role="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 7, 1fr )',
 		} );
 	} );
 
 	test( 'should render custom rows', () => {
-		const { container } = render(
-			<Grid rows={ 7 }>
+		render(
+			<Grid rows={ 7 } role="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: 'repeat( 7, 1fr )',
 		} );
 	} );
 
 	test( 'should render align', () => {
-		const { container } = render(
-			<Grid align="flex-start">
+		render(
+			<Grid align="flex-start" role="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
 			alignItems: 'flex-start',
 			display: 'grid',
 		} );
 	} );
 
 	test( 'should render alignment spaced', () => {
-		const { container } = render(
-			<Grid alignment="spaced">
+		render(
+			<Grid alignment="spaced" role="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			alignItems: 'center',
 			justifyContent: 'space-between',
@@ -104,60 +104,60 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render justify', () => {
-		const { container } = render(
-			<Grid justify="flex-start">
+		render(
+			<Grid justify="flex-start" role="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			justifyContent: 'flex-start',
 		} );
 	} );
 
 	test( 'should render isInline', () => {
-		const { container } = render(
-			<Grid columns={ 3 } isInline>
+		render(
+			<Grid columns={ 3 } isInline role="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
 			display: 'inline-grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 		} );
 	} );
 
 	test( 'should render custom templateColumns', () => {
-		const { container } = render(
-			<Grid templateColumns="1fr auto 1fr">
+		render(
+			<Grid templateColumns="1fr auto 1fr" role="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: '1fr auto 1fr',
 		} );
 	} );
 
 	test( 'should render custom templateRows', () => {
-		const { container } = render(
-			<Grid templateRows="1fr auto 1fr">
+		render(
+			<Grid templateRows="1fr auto 1fr" role="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: '1fr auto 1fr',
 		} );

From f47bd0704262071bbf7f7e3c1e3eaa58224dadf6 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Fri, 18 Nov 2022 23:36:36 +0200
Subject: [PATCH 2/2] role -> data-testid

---
 packages/components/src/grid/test/grid.tsx | 40 +++++++++++-----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/grid/test/grid.tsx b/packages/components/src/grid/test/grid.tsx
index 9cd7bd1936439..150dac578c80a 100644
--- a/packages/components/src/grid/test/grid.tsx
+++ b/packages/components/src/grid/test/grid.tsx
@@ -13,13 +13,13 @@ import CONFIG from '../../utils/config-values';
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		render(
-			<Grid role="grid">
+			<Grid data-testid="grid">
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 2, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 3 )`,
@@ -28,14 +28,14 @@ describe( 'props', () => {
 
 	test( 'should render gap', () => {
 		render(
-			<Grid columns={ 3 } gap={ 4 } role="grid">
+			<Grid columns={ 3 } gap={ 4 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 4 )`,
@@ -44,14 +44,14 @@ describe( 'props', () => {
 
 	test( 'should render custom columns', () => {
 		render(
-			<Grid columns={ 7 } role="grid">
+			<Grid columns={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 7, 1fr )',
 		} );
@@ -59,14 +59,14 @@ describe( 'props', () => {
 
 	test( 'should render custom rows', () => {
 		render(
-			<Grid rows={ 7 } role="grid">
+			<Grid rows={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: 'repeat( 7, 1fr )',
 		} );
@@ -74,14 +74,14 @@ describe( 'props', () => {
 
 	test( 'should render align', () => {
 		render(
-			<Grid align="flex-start" role="grid">
+			<Grid align="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			alignItems: 'flex-start',
 			display: 'grid',
 		} );
@@ -89,14 +89,14 @@ describe( 'props', () => {
 
 	test( 'should render alignment spaced', () => {
 		render(
-			<Grid alignment="spaced" role="grid">
+			<Grid alignment="spaced" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			alignItems: 'center',
 			justifyContent: 'space-between',
@@ -105,14 +105,14 @@ describe( 'props', () => {
 
 	test( 'should render justify', () => {
 		render(
-			<Grid justify="flex-start" role="grid">
+			<Grid justify="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			justifyContent: 'flex-start',
 		} );
@@ -120,14 +120,14 @@ describe( 'props', () => {
 
 	test( 'should render isInline', () => {
 		render(
-			<Grid columns={ 3 } isInline role="grid">
+			<Grid columns={ 3 } isInline data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'inline-grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 		} );
@@ -135,14 +135,14 @@ describe( 'props', () => {
 
 	test( 'should render custom templateColumns', () => {
 		render(
-			<Grid templateColumns="1fr auto 1fr" role="grid">
+			<Grid templateColumns="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: '1fr auto 1fr',
 		} );
@@ -150,14 +150,14 @@ describe( 'props', () => {
 
 	test( 'should render custom templateRows', () => {
 		render(
-			<Grid templateRows="1fr auto 1fr" role="grid">
+			<Grid templateRows="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: '1fr auto 1fr',
 		} );