123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
import { useState } from 'react'import { fireEvent, render, waitFor } from '@testing-library/react'import { atom, useAtom } from 'jotai'import { getTestProvider } from './testUtils'
const Provider = getTestProvider()
it('simple scoped provider with scoped atom', async () => {  const scope = Symbol()  const countAtom = atom(0)
  const Display = () => {    const [count, setCount] = useAtom(countAtom, scope)
    return (      <>        <p>count: {count}</p>        <button onClick={() => setCount((c) => c + 1)}>dispatch</button>      </>    )  }
  const { findByText, getByText } = render(    <Provider scope={scope}>      <Display />    </Provider>  )  await findByText('count: 0')  fireEvent.click(getByText('dispatch'))  await findByText('count: 1')})
it('default provider and atom with scoped provider and scoped atom', async () => {  const scope = Symbol()
  const scopedCountAtom = atom(0)  const countAtom = atom(0)
  const Display = () => {    const [scopedCount, setScopedCount] = useAtom(scopedCountAtom, scope)    const [count, setCount] = useAtom(countAtom)
    return (      <>        <p>scopedCount: {scopedCount}</p>        <p>count: {count}</p>        <button          onClick={() => {            setScopedCount((c) => c + 1)            setCount((c) => c + 1)          }}>          dispatch        </button>      </>    )  }
  const { getByText } = render(    <Provider>      <Provider scope={scope}>        <Display />      </Provider>    </Provider>  )  await waitFor(() => {    getByText('count: 0')    getByText('scopedCount: 0')  })  fireEvent.click(getByText('dispatch'))  await waitFor(() => {    getByText('count: 1')    getByText('scopedCount: 1')  })})
it('keeps scoped atom value when default provider is removed', async () => {  const scope = Symbol()
  const scopedCountAtom = atom(0)
  const Display = () => {    const [scopedCount, setScopedCount] = useAtom(scopedCountAtom, scope)
    return (      <>        <p>scopedCount: {scopedCount}</p>        <button          onClick={() => {            setScopedCount((c) => c + 1)          }}>          dispatch        </button>      </>    )  }
  const App = () => {    const [hide, setHide] = useState(false)    if (hide) {      return (        <Provider scope={scope}>          <Display />        </Provider>      )    }    return (      <Provider scope={scope}>        <Provider>          <button onClick={() => setHide(true)}>hide</button>          <Display />        </Provider>      </Provider>    )  }
  const { getByText, findByText } = render(<App />)  await findByText('scopedCount: 0')  fireEvent.click(getByText('dispatch'))  await findByText('scopedCount: 1')  fireEvent.click(getByText('hide'))  await findByText('scopedCount: 1')})
it('two different scoped providers and scoped atoms', async () => {  const scope = Symbol()  const secondScope = Symbol()
  const scopedCountAtom = atom(0)  const secondScopedCountAtom = atom(10)
  const Display = () => {    const [scopedCount, setScopedCount] = useAtom(scopedCountAtom, scope)    const [secondScopedCount, setSecondScopedCount] = useAtom(      secondScopedCountAtom,      secondScope    )
    return (      <>        <p>scopedCount: {scopedCount}</p>        <p>secondScopedCount: {secondScopedCount}</p>        <button          onClick={() => {            setScopedCount((c) => c + 1)            setSecondScopedCount((c) => c + 2)          }}>          dispatch        </button>      </>    )  }
  const { getByText } = render(    <Provider scope={scope}>      <Provider scope={secondScope}>        <Display />      </Provider>    </Provider>  )  await waitFor(() => {    getByText('scopedCount: 0')    getByText('secondScopedCount: 10')  })  fireEvent.click(getByText('dispatch'))  await waitFor(() => {    getByText('scopedCount: 1')    getByText('secondScopedCount: 12')  })})