diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx index 328480d9692..d8637a4965e 100644 --- a/packages/react-core/src/components/SearchInput/SearchInput.tsx +++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx @@ -140,7 +140,7 @@ const SearchInputBase: React.FunctionComponent = ({ onSearch, onClear, onToggleAdvancedSearch, - isAdvancedSearchOpen, + isAdvancedSearchOpen = false, resultsCount, onNextClick, onPreviousClick, diff --git a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx index 0ac3fe0205c..cb9bd7f648c 100644 --- a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx +++ b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx @@ -105,6 +105,8 @@ describe('SearchInput', () => { onClear={props.onClear} /> ); + const expandButton = screen.getByRole('button', { name: 'Open advanced search' }); + expect(expandButton).toHaveAttribute('aria-expanded', 'false'); await user.click(screen.getByRole('button', { name: 'Search' })); @@ -139,7 +141,12 @@ describe('SearchInput', () => { await user.click(screen.getByRole('button', { name: 'Search' })); - await user.click(screen.getByRole('button', { name: 'Open advanced search' })); + const expandButton = screen.getByRole('button', { name: 'Open advanced search' }); + expect(expandButton).toHaveAttribute('aria-expanded', 'false'); + + await user.click(expandButton); + expect(expandButton).toHaveAttribute('aria-expanded', 'true'); + expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name')); expect(props.onSearch).toHaveBeenCalled(); @@ -149,7 +156,14 @@ describe('SearchInput', () => { test('advanced search with custom attributes and appendTo="inline', async () => { const user = userEvent.setup(); - render(); + render( + + ); await user.click(screen.getByRole('button', { name: 'Open advanced search' })); @@ -160,7 +174,12 @@ describe('SearchInput', () => { const user = userEvent.setup(); render( - + ); await user.click(screen.getByRole('button', { name: 'Open advanced search' })); diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap index 90d8d776499..142d15d97ee 100644 --- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap @@ -138,13 +138,6 @@ exports[`SearchInput advanced search 1`] = ` -
`; @@ -293,7 +286,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = ` data-popper-escaped="true" data-popper-placement="bottom-start" data-popper-reference-hidden="true" - style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);" + style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);" >
-
`;