diff --git a/packages/components/src/alignment-matrix-control/test/index.js b/packages/components/src/alignment-matrix-control/test/index.js
index eaa28941048c1..638d8acb96ad5 100644
--- a/packages/components/src/alignment-matrix-control/test/index.js
+++ b/packages/components/src/alignment-matrix-control/test/index.js
@@ -1,91 +1,46 @@
/**
* 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
*/
import AlignmentMatrixControl from '../';
-const __windowFocus = window.focus;
-
-beforeAll( () => {
- window.focus = jest.fn();
-} );
-
-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( , container );
- } );
- const control = getControl();
+ render( );
- 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(
- ,
- container
+
);
- } );
-
- const cells = getCells();
-
- act( () => {
- cells[ 3 ].focus();
- } );
- expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( 'center left' );
+ getCell( alignment ).focus();
- 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 );
+ }
+ );
} );
} );