diff --git a/src/components/molecules/SearchPriceFilter.tsx b/src/components/molecules/SearchPriceFilter.tsx index e672fdc4d..02d0b7069 100644 --- a/src/components/molecules/SearchPriceFilter.tsx +++ b/src/components/molecules/SearchPriceFilter.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent } from 'react' +import React, { ChangeEvent, ReactElement } from 'react' import SearchFilterSection from '../atoms/SearchFilterSection' import usePriceQueryParams from '../../hooks/usePriceQueryParams' @@ -17,7 +17,7 @@ export const PriceInput = ({ value, onChange, text -}: PriceInputProps) => { +}: PriceInputProps): ReactElement => { return ( { +const Wallet = ({ balanceOcean }: { balanceOcean: string }): ReactElement => { const { account, balance, web3Connect } = useWeb3() const ethBalanceText = formatNumber(Number(balance)) const oceanBalanceText = formatNumber(Number(balanceOcean)) @@ -24,7 +24,7 @@ const Wallet = ({ balanceOcean }: { balanceOcean: string }) => { ) : ( - )} diff --git a/src/components/molecules/Web3Feedback/index.tsx b/src/components/molecules/Web3Feedback/index.tsx index 03cf4c675..49964706a 100644 --- a/src/components/molecules/Web3Feedback/index.tsx +++ b/src/components/molecules/Web3Feedback/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { ReactElement } from 'react' import Status from '../../atoms/Status' import Wallet from './Wallet' import styles from './index.module.css' @@ -19,7 +19,7 @@ export default function Web3Feedback({ isBalanceInsufficient }: { isBalanceInsufficient?: boolean -}) { +}): ReactElement { const { ethProviderStatus } = useWeb3() const { status, balanceInOcean } = useOcean() const isEthProviderAbsent = ethProviderStatus === -1 diff --git a/src/components/templates/Search.tsx b/src/components/templates/Search.tsx index 05a52514e..3e148bed0 100644 --- a/src/components/templates/Search.tsx +++ b/src/components/templates/Search.tsx @@ -11,7 +11,6 @@ import styles from './Search.module.css' import { priceQueryParamToWei } from '../../utils' import { Aquarius, Logger } from '@oceanprotocol/squid' import { config } from '../../config/ocean' -import { useLocation } from '@reach/router' import queryString from 'query-string' export declare type SearchPageProps = { @@ -74,8 +73,11 @@ export async function getResults(params: any): Promise { return queryResult } -export default function SearchPage(): ReactElement { - const location = useLocation() +export default function SearchPage({ + location +}: { + location: Location +}): ReactElement { const parsed = queryString.parse(location.search) const { text, tag } = parsed const [queryResult, setQueryResult] = useState() diff --git a/src/pages/search.tsx b/src/pages/search.tsx index 5b030317f..f021f9968 100644 --- a/src/pages/search.tsx +++ b/src/pages/search.tsx @@ -3,6 +3,13 @@ import PageSearch from '../components/templates/Search' import { PageProps } from 'gatsby' import Layout from '../components/Layout' import queryString from 'query-string' +import { + Router, + Link, + createHistory, + createMemorySource, + LocationProvider +} from '@reach/router' export default function PageGatsbySearch(props: PageProps): ReactElement { const parsed = queryString.parse(props.location.search) @@ -10,7 +17,7 @@ export default function PageGatsbySearch(props: PageProps): ReactElement { return ( - + ) } diff --git a/tests/unit/pages/index.test.tsx b/tests/unit/pages/index.test.tsx index 989cacc5c..9246ac38f 100644 --- a/tests/unit/pages/index.test.tsx +++ b/tests/unit/pages/index.test.tsx @@ -1,6 +1,6 @@ import React from 'react' import { render } from '@testing-library/react' -import Home from '../../../src/pages/index' +import Home from '../../../src/components/pages/Home' describe('Home', () => { it('renders without crashing', () => { diff --git a/tests/unit/pages/search.test.tsx b/tests/unit/pages/search.test.tsx index 7aa15ca0f..0964c9ef2 100644 --- a/tests/unit/pages/search.test.tsx +++ b/tests/unit/pages/search.test.tsx @@ -1,20 +1,20 @@ import React from 'react' import { render, fireEvent } from '@testing-library/react' -import Search from '../../../src/pages/search' -import ddo from '../__fixtures__/ddo' -import { DDO } from '@oceanprotocol/squid' -import { QueryResult } from '@oceanprotocol/squid/dist/node/aquarius/Aquarius' +import Search from '../../../src/components/templates/search' +import { + createHistory, + createMemorySource, + LocationProvider +} from '@reach/router' describe('Search', () => { it('renders without crashing', async () => { - const queryResult = { - results: [new DDO(ddo), new DDO(ddo)], - page: 1, - totalPages: 10, - totalResults: 200 - } + const history = createHistory(createMemorySource('/search?text=water')) + const { container } = render( - + + + ) expect(container.firstChild).toBeInTheDocument() @@ -32,25 +32,5 @@ describe('Search', () => { button && fireEvent.click(button) form && fireEvent.submit(form) - - // interact with pagination - const pageItem = container.querySelector( - '.pagination li:nth-child(3) .number' - ) - - pageItem && fireEvent.click(pageItem) - }) - - it('renders empty state', async () => { - const queryResult: QueryResult = { - results: [], - page: 1, - totalPages: 1, - totalResults: 0 - } - const { container } = render( - - ) - expect(container.querySelector('.empty')).toBeInTheDocument() }) }) diff --git a/tests/unit/testRender.ts b/tests/unit/testRender.ts index 85342b85e..ade041abc 100644 --- a/tests/unit/testRender.ts +++ b/tests/unit/testRender.ts @@ -1,12 +1,10 @@ import { render } from '@testing-library/react' import { ReactElement } from 'react' -const testRender = (component: ReactElement): void => { +export default function testRender(component: ReactElement): void { it('renders without crashing', () => { const { container } = render(component) expect(container.firstChild).toBeInTheDocument() }) } - -export default testRender