diff --git a/packages/module/src/MultiContentCard/MultiContentCard.test.tsx b/packages/module/src/MultiContentCard/MultiContentCard.test.tsx index 7648b8ee..e368bfc0 100644 --- a/packages/module/src/MultiContentCard/MultiContentCard.test.tsx +++ b/packages/module/src/MultiContentCard/MultiContentCard.test.tsx @@ -1,5 +1,5 @@ import type { Ref } from 'react'; -import { screen, render } from '@testing-library/react'; +import { screen, render, act } from '@testing-library/react'; import { Button, Card, CardHeader, CardBody, Content, ContentVariants, Icon, List, ListItem, CardFooter, Dropdown, MenuToggle, DropdownList, DropdownItem, MenuToggleElement } from '@patternfly/react-core'; import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@patternfly/react-icons'; import MultiContentCard, { MultiContentCardDividerVariant } from './MultiContentCard'; @@ -126,6 +126,29 @@ describe('MultiContentCard component', () => { expect(container.firstChild).toMatchSnapshot(); }); + it('should call onExpand when expanding the multi-content card', () => { + const onExpand = jest.fn(); + + render( + + ); + expect(screen.queryByText('Getting Started')).toBe(null); + + act(() => { + screen.getByRole('button', { name: 'Details' }).click(); + }); + + expect(onExpand).toHaveBeenCalled(); + + expect(screen.getByText('Getting Started')).toBeInTheDocument(); + }); + it('should render expandable multi-content card - with actions', () => { const { container } = render( void; /** Indicates whether the card is expanded by default */ defaultExpanded?: boolean; /** Indicates whether the actions toggle is right aligned */ @@ -67,13 +69,15 @@ const MultiContentCard: FunctionComponent = ({ withDividers = false, isExpandable = false, defaultExpanded = true, + onExpand, ouiaId = 'MultiContentCard', ...props }: MultiContentCardProps) => { const [ isExpanded, setIsExpanded ] = useState(defaultExpanded); const classes = useStyles(); - const onExpand = () => { + const onExpandChange = () => { setIsExpanded(!isExpanded); + onExpand && onExpand(); }; const renderCards = (cards: (ReactElement | MutliContentCardProps)[], withDividers?: boolean) => ( @@ -105,7 +109,7 @@ const MultiContentCard: FunctionComponent = ({ {isExpandable && (