diff --git a/src/components/App/SideBar/RegularView/__tests__/index.tsx b/src/components/App/SideBar/RegularView/__tests__/index.tsx new file mode 100644 index 000000000..7fe372b7b --- /dev/null +++ b/src/components/App/SideBar/RegularView/__tests__/index.tsx @@ -0,0 +1,77 @@ +import { ThemeProvider } from '@mui/material' +import { render, renderHook, RenderResult } from '@testing-library/react' +import React, { ReactElement } from 'react' +import { FormProvider, useForm, useFormContext } from 'react-hook-form' +import { MemoryRouter } from 'react-router-dom' +import { ThemeProvider as StyleThemeProvider } from 'styled-components' +import { RegularView } from '..' +import { appTheme } from '../../../Providers' + +const QUERY_SEARCH = 'satoshi' + +jest.mock('react-hook-form', () => ({ + ...jest.requireActual('react-hook-form'), + useFormContext: jest.fn(), +})) + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useSearchParams: () => [new URLSearchParams({ q: QUERY_SEARCH })], +})) + +Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation(() => ({ + matches: false, + addListener: jest.fn(), + removeListener: jest.fn(), + })), +}) + +const renderWithProviders = (ui: ReactElement): RenderResult => { + const { result } = renderHook(() => + useForm<{ search: string }>({ + defaultValues: { + search: QUERY_SEARCH, + }, + }), + ) + + return render( + + + + {ui} + + + , + ) +} + +describe('RegularView Component', () => { + let setValueMock: jest.Mock + + beforeEach(() => { + setValueMock = jest.fn() + + const useFormContextMock = useFormContext as jest.Mock + + useFormContextMock.mockReturnValue({ + setValue: setValueMock, + register: jest.fn(() => ({ name: 'search', value: QUERY_SEARCH })), + watch: jest.fn((field: string) => (field === 'search' ? QUERY_SEARCH : undefined)), + }) + }) + + it('should call setValue with "search" and the correct query value on mount', () => { + renderWithProviders() + expect(setValueMock).toHaveBeenCalledWith('search', QUERY_SEARCH) + }) + + it('should display the correct search query in the input field', () => { + const { queryByTestId } = renderWithProviders() + const searchInput = queryByTestId('search_input') as HTMLInputElement + + expect(searchInput.value).toBe(QUERY_SEARCH) + }) +}) diff --git a/src/components/App/SideBar/RegularView/index.tsx b/src/components/App/SideBar/RegularView/index.tsx index bc4887847..45eabeae0 100644 --- a/src/components/App/SideBar/RegularView/index.tsx +++ b/src/components/App/SideBar/RegularView/index.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx' import React, { useEffect, useRef, useState } from 'react' import { useFormContext } from 'react-hook-form' -import { useNavigate } from 'react-router-dom' +import { useNavigate, useSearchParams } from 'react-router-dom' import { ClipLoader } from 'react-spinners' import styled from 'styled-components' import { SelectWithPopover } from '~/components/App/SideBar/Dropdown' @@ -25,7 +25,6 @@ import { Trending } from '../Trending' export const MENU_WIDTH = 390 -// eslint-disable-next-line react/display-name export const RegularView = () => { const { isFetching: isLoading, setSidebarFilter } = useDataStore((s) => s) @@ -42,10 +41,12 @@ export const RegularView = () => { const [isScrolled, setIsScrolled] = useState(false) const [isFilterOpen, setIsFilterOpen] = useState(false) const [anchorEl, setAnchorEl] = useState(null) + const [searchParams] = useSearchParams() + const query = searchParams.get('q') ?? '' useEffect(() => { - setValue('search', searchFormValue) - }, [setValue, searchFormValue]) + setValue('search', query || searchFormValue) + }, [setValue, searchFormValue, query]) useEffect(() => { const component = componentRef.current diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx index 317204140..57620ca04 100644 --- a/src/components/SearchBar/index.tsx +++ b/src/components/SearchBar/index.tsx @@ -68,6 +68,7 @@ export const SearchBar = ({ loading, placeholder = 'Search', onSubmit }: Props) return ( {