deno.land / x / jotai@v1.8.4 / tests / urql / atomWithQuery.test.tsx
نووسراو ببینە
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475import { Component, StrictMode, Suspense, useContext } from 'react'import type { ReactNode } from 'react'import { fireEvent, render } from '@testing-library/react'import type { Client } from '@urql/core'import { delay, fromValue, interval, map, pipe } from 'wonka'import { atom, SECRET_INTERNAL_getScopeContext as getScopeContext, useAtom, useSetAtom,} from 'jotai'import { atomWithQuery } from 'jotai/urql'import { getTestProvider } from '../testUtils'
// This is only used to pass tests with unstable_enableVersionedWriteconst useRetryFromError = (scope?: symbol | string | number) => { const ScopeContext = getScopeContext(scope) const { r: retryFromError } = useContext(ScopeContext) return retryFromError || ((fn) => fn())}
const generateClient = (id: string | number, error?: () => boolean) => ({ query: () => { const source$ = pipe( fromValue( error?.() ? { error: new Error('fetch error') } : { data: { id } } ), delay(100) ) if (typeof id === 'number') { ++id } return source$ }, } as unknown as Client)
const generateContinuousClient = () => ({ query: () => pipe( interval(100), map((i: number) => ({ data: { count: i } })) ), } as unknown as Client)
const Provider = getTestProvider()
it('query basic test', async () => { const countAtom = atomWithQuery<{ count: number }, Record<string, never>>( () => ({ query: '{ count }', variables: {}, }), () => generateContinuousClient() )
const Counter = () => { const [{ data }] = useAtom(countAtom) return ( <> <div>count: {data.count}</div> </> ) }
const { findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findByText('count: 0') await findByText('count: 1') await findByText('count: 2')})
it('query dependency test', async () => { type Update = (prev: number) => number const dummyAtom = atom(10) const setDummyAtom = atom(null, (_get, set, update: Update) => set(dummyAtom, update) ) const countAtom = atomWithQuery<{ count: number }, { dummy: number }>( (get) => ({ query: '{ count }', variables: { dummy: get(dummyAtom), }, }), () => generateContinuousClient() )
const Counter = () => { const [{ data }] = useAtom(countAtom) return ( <> <div>count: {data.count}</div> </> ) }
const Controls = () => { const [, setDummy] = useAtom(setDummyAtom) return <button onClick={() => setDummy((c) => c + 1)}>dummy</button> }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> <Controls /> </Provider> </StrictMode> )
await findByText('loading') await findByText('count: 0') await findByText('count: 1') await findByText('count: 2')
await new Promise((r) => setTimeout(r, 100)) fireEvent.click(getByText('dummy')) await findByText('loading') await findByText('count: 0') await findByText('count: 1') await findByText('count: 2')})
it('query change client at runtime', async () => { const firstClient = generateClient('first') const secondClient = generateClient('second') const clientAtom = atom(firstClient) const idAtom = atomWithQuery<{ id: string }, Record<string, never>>( () => ({ query: '{ id }', variables: {}, }), (get) => get(clientAtom) )
const Identifier = () => { const [{ data }] = useAtom(idAtom) return ( <> <div>id: {data.id}</div> </> ) }
const Controls = () => { const [, setClient] = useAtom(clientAtom) return ( <> <button onClick={() => setClient(firstClient)}>first</button> <button onClick={() => setClient(secondClient)}>second</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Identifier /> </Suspense> <Controls /> </Provider> </StrictMode> )
await findByText('loading') await findByText('id: first')
await new Promise((r) => setTimeout(r, 100)) fireEvent.click(getByText('second')) await findByText('loading') await findByText('id: second')
await new Promise((r) => setTimeout(r, 100)) fireEvent.click(getByText('first')) await findByText('loading') await findByText('id: first')})
it('pause test', async () => { const enabledAtom = atom(false) const countAtom = atomWithQuery<{ count: number }, Record<string, never>>( (get) => ({ query: '{ count }', variables: {}, pause: !get(enabledAtom), }), () => generateContinuousClient() )
const Counter = () => { const [result] = useAtom(countAtom) return ( <> <div>count: {result ? result.data.count : 'paused'}</div> </> ) }
const Controls = () => { const [, setEnabled] = useAtom(enabledAtom) return <button onClick={() => setEnabled((x) => !x)}>toggle</button> }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> <Controls /> </Provider> </StrictMode> )
await findByText('count: paused')
await new Promise((r) => setTimeout(r, 100)) fireEvent.click(getByText('toggle')) await findByText('loading') await findByText('count: 0')})
it('refetch test', async () => { const countAtom = atomWithQuery<{ count: number }, Record<string, never>>( () => ({ query: '{ count }', variables: {}, }), () => generateContinuousClient() )
const Counter = () => { const [{ data }, dispatch] = useAtom(countAtom) return ( <> <div>count: {data.count}</div> <button onClick={() => dispatch({ type: 'refetch' })}>button</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findByText('count: 0') await findByText('count: 1') await findByText('count: 2')
await new Promise((r) => setTimeout(r, 100)) fireEvent.click(getByText('button')) await findByText('loading') await findByText('count: 0') await findByText('count: 1') await findByText('count: 2')})
it('query null client suspense', async () => { const client = generateClient('client is set') const clientAtom = atom<Client | null>(null) const idAtom = atomWithQuery<{ id: string }, Record<string, never>>( () => ({ query: '{ id }', variables: {}, }), (get) => get(clientAtom) as Client ) // Derived Atom to safe guard when client is null const guardedIdAtom = atom((get): { data?: { id: string } } => { const client = get(clientAtom) if (client === null) return {} return get(idAtom) })
const Identifier = () => { const [{ data }] = useAtom(guardedIdAtom) return ( <> <div>{data?.id ? data?.id : 'no data'}</div> </> ) }
const Controls = () => { const [, setClient] = useAtom(clientAtom) return ( <> <button onClick={() => setClient(null)}>unset</button> <button onClick={() => setClient(client)}>set</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Identifier /> </Suspense> <Controls /> </Provider> </StrictMode> )
await findByText('no data')
await new Promise((r) => setTimeout(r, 100)) fireEvent.click(getByText('set')) await findByText('loading') await findByText('client is set')
await new Promise((r) => setTimeout(r, 100)) fireEvent.click(getByText('unset')) await findByText('no data')
await new Promise((r) => setTimeout(r, 100)) fireEvent.click(getByText('unset')) fireEvent.click(getByText('set')) await findByText('loading') await findByText('client is set')})
describe('error handling', () => { class ErrorBoundary extends Component< { message?: string; retry?: () => void; children: ReactNode }, { hasError: boolean } > { constructor(props: { message?: string; children: ReactNode }) { super(props) this.state = { hasError: false } } static getDerivedStateFromError() { return { hasError: true } } render() { return this.state.hasError ? ( <div> {this.props.message || 'errored'} {this.props.retry && ( <button onClick={() => { this.props.retry?.() this.setState({ hasError: false }) }}> retry </button> )} </div> ) : ( this.props.children ) } }
it('can catch error in error boundary', async () => { const countAtom = atomWithQuery<{ id: number }, Record<string, never>>( () => ({ query: '{ id }', variables: {}, }), () => generateClient(0, () => true) )
const Counter = () => { const [{ data }] = useAtom(countAtom) return <div>count: {data.id}</div> }
const { findByText } = render( <Provider> <ErrorBoundary> <Suspense fallback="loading"> <Counter /> </Suspense> </ErrorBoundary> </Provider> )
await findByText('loading') await findByText('errored') })
it('can recover from error', async () => { let willThrowError = true const countAtom = atomWithQuery<{ id: number }, Record<string, never>>( () => ({ query: '{ id }', variables: {}, }), () => generateClient(0, () => willThrowError) )
const Counter = () => { const [ { data: { id }, }, dispatch, ] = useAtom(countAtom) const refetch = () => dispatch({ type: 'refetch' }) return ( <> <div>count: {id}</div> <button onClick={refetch}>refetch</button> </> ) }
const App = () => { const dispatch = useSetAtom(countAtom) const retryFromError = useRetryFromError() const retry = () => { retryFromError(() => { dispatch({ type: 'refetch' }) }) } return ( <ErrorBoundary retry={retry}> <Suspense fallback="loading"> <Counter /> </Suspense> </ErrorBoundary> ) }
const { findByText, getByText } = render( <Provider> <App /> </Provider> )
await findByText('loading') await findByText('errored')
await new Promise((r) => setTimeout(r, 100)) willThrowError = false fireEvent.click(getByText('retry')) await findByText('loading') await findByText('count: 1')
await new Promise((r) => setTimeout(r, 100)) willThrowError = true fireEvent.click(getByText('refetch')) await findByText('loading') await findByText('errored')
await new Promise((r) => setTimeout(r, 100)) willThrowError = false fireEvent.click(getByText('retry')) await findByText('loading') await findByText('count: 3') })})
jotai
Version Info
a year ago
