Skip to content

Commit

Permalink
Components: Fix no-container violations in FormGroup tests (#45662)
Browse files Browse the repository at this point in the history
tyxla authored Nov 10, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 780def8 commit 141ee24
Showing 1 changed file with 16 additions and 17 deletions.
33 changes: 16 additions & 17 deletions packages/components/src/ui/form-group/test/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { render } from '@testing-library/react';
import { render, screen } from '@testing-library/react';

/**
* Internal dependencies
@@ -20,44 +20,43 @@ const TextInput = ( { id: idProp, ...props } ) => {
/* eslint-disable no-restricted-syntax */
describe( 'props', () => {
test( 'should render correctly', () => {
const { container } = render(
render(
<FormGroup id="fname" label="First name">
<TextInput />
</FormGroup>
);

const label = container.querySelector( 'label' );
expect( label ).toHaveAttribute( 'for', 'fname' );
expect( label ).toContainHTML( 'First name' );

const input = container.querySelector( 'input' );
expect( input ).toHaveAttribute( 'id', 'fname' );
expect(
screen.getByRole( 'textbox', { name: 'First name' } )
).toBeVisible();
} );

test( 'should render label without prop correctly', () => {
const { container } = render(
render(
<FormGroup id="fname">
<ControlLabel htmlFor="fname">First name</ControlLabel>
<TextInput />
</FormGroup>
);

const label = container.querySelector( 'label' );
expect( label ).toHaveAttribute( 'for', 'fname' );
expect( label ).toContainHTML( 'First name' );
expect(
screen.getByRole( 'textbox', { name: 'First name' } )
).toBeVisible();
} );

test( 'should render labelHidden', () => {
const { container } = render(
render(
<FormGroup labelHidden id="fname" label="First name">
<TextInput />
</FormGroup>
);

const label = container.querySelector( 'label' );
expect( label ).toContainHTML( 'First name' );
// @todo: Refactor this after adding next VisuallyHidden.
expect( label ).toHaveClass( 'components-visually-hidden' );
expect(
screen.getByRole( 'textbox', { name: 'First name' } )
).toBeVisible();
expect( screen.getByText( 'First name' ) ).toHaveClass(
'components-visually-hidden'
);
} );

test( 'should render alignLabel', () => {

0 comments on commit 141ee24

Please sign in to comment.