role -> data-testid

WordPress · Nov 18, 2022 · f47bd07 · f47bd07
1 parent b500ef3
commit f47bd07
Showing 1 changed file with 20 additions and 20 deletions.
diff --git 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,59 +44,59 @@ 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 )',
 		} );
 	} );
 
 	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 )',
 		} );
 	} );
 
 	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',
 		} );
 	} );
 
 	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,59 +105,59 @@ 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',
 		} );
 	} );
 
 	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 )',
 		} );
 	} );
 
 	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',
 		} );
 	} );
 
 	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',
 		} );