diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx index f5ac55b046d8c3ab4aac649601a79ca602e42c35..a8c934f4cdc75817e2fd45ff6bdbd5dadb301fc5 100644 --- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx +++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx @@ -1,12 +1,10 @@ -import searchReducer from '@/redux/search/search.slice'; -import type { SearchState } from '@/redux/search/search.types'; -import { ToolkitStoreWithSingleSlice } from '@/utils/createStoreInstanceUsingSliceReducer'; -import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer'; +import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore'; +import { StoreType } from '@/redux/store'; import { fireEvent, render, screen } from '@testing-library/react'; import { SearchBar } from './SearchBar.component'; -const renderComponent = (): { store: ToolkitStoreWithSingleSlice<SearchState> } => { - const { Wrapper, store } = getReduxWrapperUsingSliceReducer('search', searchReducer); +const renderComponent = (): { store: StoreType } => { + const { Wrapper, store } = getReduxWrapperWithStore(); return ( render( @@ -23,8 +21,8 @@ const renderComponent = (): { store: ToolkitStoreWithSingleSlice<SearchState> } describe('SearchBar - component', () => { it('should let user type text', () => { renderComponent(); - const input = screen.getByTestId<HTMLInputElement>('search-input'); + fireEvent.change(input, { target: { value: 'test value' } }); expect(input.value).toBe('test value'); @@ -32,13 +30,12 @@ describe('SearchBar - component', () => { it('should disable button when the user clicks the lens button', () => { renderComponent(); - const input = screen.getByTestId<HTMLInputElement>('search-input'); - fireEvent.change(input, { target: { value: 'park7' } }); - expect(input.value).toBe('park7'); + fireEvent.change(input, { target: { value: 'park7' } }); const button = screen.getByRole('button'); + fireEvent.click(button); expect(button).toBeDisabled(); @@ -46,12 +43,9 @@ describe('SearchBar - component', () => { it('should disable input when the user clicks the Enter', () => { renderComponent(); - const input = screen.getByTestId<HTMLInputElement>('search-input'); - fireEvent.change(input, { target: { value: 'park7' } }); - - expect(input.value).toBe('park7'); + fireEvent.change(input, { target: { value: 'park7' } }); fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 }); expect(input).toBeDisabled(); diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx index 1932b5a2e240252e93ae09000b4fe94a5c5b4539..77ec065c9809b2e9355bd9a2bdbc1ccc9d944aba 100644 --- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx +++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx @@ -1,4 +1,6 @@ import lensIcon from '@/assets/vectors/icons/lens.svg'; +import { isDrawerOpenSelector } from '@/redux/drawer/drawer.selectors'; +import { openDrawer } from '@/redux/drawer/drawer.slice'; import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; import { isPendingSearchStatusSelector, @@ -16,17 +18,31 @@ export const SearchBar = (): JSX.Element => { const dispatch = useAppDispatch(); const isPendingSearchStatus = useSelector(isPendingSearchStatusSelector); const prevSearchValue = useSelector(searchValueSelector); + const isDrawerOpen = useSelector(isDrawerOpenSelector); const isSameSearchValue = prevSearchValue === searchValue; + const openSearchDrawerIfClosed = (): void => { + if (!isDrawerOpen) { + dispatch(openDrawer('search')); + } + }; + const onSearchChange = (event: ChangeEvent<HTMLInputElement>): void => setSearchValue(event.target.value); - // eslint-disable-next-line @typescript-eslint/explicit-function-return-type - const onSearchClick = () => !isSameSearchValue && dispatch(getSearchData(searchValue)); + const onSearchClick = (): void => { + if (!isSameSearchValue) { + dispatch(getSearchData(searchValue)); + openSearchDrawerIfClosed(); + } + }; const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>): void => { - if (!isSameSearchValue && event.code === ENTER_KEY_CODE) dispatch(getSearchData(searchValue)); + if (!isSameSearchValue && event.code === ENTER_KEY_CODE) { + dispatch(getSearchData(searchValue)); + openSearchDrawerIfClosed(); + } }; return ( diff --git a/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx b/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx index 6ff1d8495eaa23d3d947a52f707b6e03a3ba85ac..e6e44ac13532f839d4b82fbde10dfdd537fc49ce 100644 --- a/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx +++ b/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx @@ -1,12 +1,10 @@ -import searchReducer from '@/redux/search/search.slice'; -import type { SearchState } from '@/redux/search/search.types'; -import { ToolkitStoreWithSingleSlice } from '@/utils/createStoreInstanceUsingSliceReducer'; -import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer'; +import { StoreType } from '@/redux/store'; +import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore'; import { render, screen } from '@testing-library/react'; import { TopBar } from './TopBar.component'; -const renderComponent = (): { store: ToolkitStoreWithSingleSlice<SearchState> } => { - const { Wrapper, store } = getReduxWrapperUsingSliceReducer('search', searchReducer); +const renderComponent = (): { store: StoreType } => { + const { Wrapper, store } = getReduxWrapperWithStore(); return ( render(