Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mamaduka merged 3 commits into from
Oct 4, 2022
Merged

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

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
722597c
Components: Refactor AlignmentMatrixControl tests to use @testing-lib…
tyxla Oct 4, 2022
5a9d0ad
Refactor some tests
tyxla Oct 4, 2022
525f023
Remove unnecessary window.focus mocks
tyxla Oct 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Refactor some tests
  • Loading branch information
@tyxla
tyxla committed Oct 4, 2022
commit 5a9d0ad57dc3232026814f0be48c8ecd179792b9
35 changes: 15 additions & 20 deletions packages/components/src/alignment-matrix-control/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,40 +22,35 @@ const getControl = () => {
return screen.getByRole( 'grid' );
};

const getCells = () => {
return within( getControl() ).getAllByRole( 'gridcell' );
const getCell = ( name ) => {
return within( getControl() ).getByRole( 'gridcell', { name } );
};

describe( 'AlignmentMatrixControl', () => {
describe( 'Basic rendering', () => {
it( 'should render', () => {
render( <AlignmentMatrixControl /> );

expect( getControl() ).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' ];

render(
<AlignmentMatrixControl value={ 'center' } onChange={ spy } />
);
it.each( alignments )(
'should change value on %s cell click',
( alignment ) => {
const spy = jest.fn();

const cells = getCells();
render(
<AlignmentMatrixControl value="center" onChange={ spy } />
);

cells[ 3 ].focus();
getCell( alignment ).focus();

expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( 'center left' );

cells[ 4 ].focus();

expect( spy.mock.calls[ 1 ][ 0 ] ).toBe( 'center center' );

cells[ 7 ].focus();

expect( spy.mock.calls[ 2 ][ 0 ] ).toBe( 'bottom center' );
} );
expect( spy ).toHaveBeenCalledWith( alignment );
}
);
} );
} );