42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { CollapsibleCard } from './CollapsibleCard';
|
|
|
|
const header = 'Card header';
|
|
const body = 'Card body';
|
|
|
|
describe( 'CollapsibleCard component', () => {
|
|
it( 'should render a card that can be expanded or collapsed when the card header is clicked', async () => {
|
|
render( <CollapsibleCard header={ header }>{ body }</CollapsibleCard> );
|
|
|
|
// Card is expanded by default.
|
|
expect( screen.queryByText( header ) ).toBeInTheDocument();
|
|
expect( screen.queryByText( body ) ).toBeInTheDocument();
|
|
|
|
// Click on card header to collapsed the card.
|
|
await userEvent.click( screen.getByText( header ) );
|
|
|
|
// Card body should not be there.
|
|
expect( screen.queryByText( body ) ).not.toBeInTheDocument();
|
|
} );
|
|
|
|
it( 'should render a card that is collapsed by default when `initialCollapsed` is set', async () => {
|
|
render(
|
|
<CollapsibleCard initialCollapsed header={ header }>
|
|
{ body }
|
|
</CollapsibleCard>
|
|
);
|
|
|
|
// Card is collapsed by default.
|
|
expect( screen.queryByText( header ) ).toBeInTheDocument();
|
|
expect( screen.queryByText( body ) ).not.toBeInTheDocument();
|
|
} );
|
|
} );
|