Components: Refactor AlignmentMatrixControl tests to use @testing-library/react

packages/components/src/alignment-matrix-control/test/index.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
+import { render, screen, within } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -19,73 +18,39 @@ afterAll( () => {
 	window.focus = __windowFocus;
 } );
 
-let container = null;
-
-beforeEach( () => {
-	container = document.createElement( 'div' );
-	document.body.appendChild( container );
-} );
-
-afterEach( () => {
-	unmountComponentAtNode( container );
-	container.remove();
-	container = null;
-} );
-
 const getControl = () => {
-	return container.querySelector( '.component-alignment-matrix-control' );
+	return screen.getByRole( 'grid' );
 };
 
-const getCells = () => {
-	const control = getControl();
-	return control.querySelectorAll( '[role="gridcell"]' );
+const getCell = ( name ) => {
+	return within( getControl() ).getByRole( 'gridcell', { name } );
 };
 
 describe( 'AlignmentMatrixControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			act( () => {
-				render( <AlignmentMatrixControl />, container );
-			} );
-			const control = getControl();
+			render( <AlignmentMatrixControl /> );
 
-			expect( control ).toBeTruthy();
+			expect( getControl() ).toBeInTheDocument();
 		} );
 	} );
 
 	describe( 'Change value', () => {
-		it( 'should change value on cell click', () => {
-			const spy = jest.fn();
+		const alignments = [ 'center left', 'center center', 'bottom center' ];
+
+		it.each( alignments )(
+			'should change value on %s cell click',
+			( alignment ) => {
+				const spy = jest.fn();
 
-			act( () => {
 				render(
-					<AlignmentMatrixControl
-						value={ 'center' }
-						onChange={ spy }
-					/>,
-					container
+					<AlignmentMatrixControl value="center" onChange={ spy } />
 				);
-			} );
 
-			const cells = getCells();
+				getCell( alignment ).focus();
 
-			act( () => {
-				cells[ 3 ].focus();
-			} );
-
-			expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( 'center left' );
-
-			act( () => {
-				cells[ 4 ].focus();
-			} );
-
-			expect( spy.mock.calls[ 1 ][ 0 ] ).toBe( 'center center' );
-
-			act( () => {
-				cells[ 7 ].focus();
-			} );
-
-			expect( spy.mock.calls[ 2 ][ 0 ] ).toBe( 'bottom center' );
-		} );
+				expect( spy ).toHaveBeenCalledWith( alignment );
+			}
+		);
 	} );
 } );