123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
import { Suspense } from 'react'import { fireEvent, render } from '@testing-library/react'import { atom, useAtom } from 'jotai'import { RESET, atomWithDefault } from 'jotai/utils'import { getTestProvider } from '../testUtils'
const Provider = getTestProvider()
it('simple sync get default', async () => {  const count1Atom = atom(1)  const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)
  const Counter = () => {    const [count1, setCount1] = useAtom(count1Atom)    const [count2, setCount2] = useAtom(count2Atom)    return (      <>        <div>          count1: {count1}, count2: {count2}        </div>        <button onClick={() => setCount1((c) => c + 1)}>button1</button>        <button onClick={() => setCount2((c) => c + 1)}>button2</button>      </>    )  }
  const { findByText, getByText } = render(    <Provider>      <Counter />    </Provider>  )
  await findByText('count1: 1, count2: 2')
  fireEvent.click(getByText('button1'))  await findByText('count1: 2, count2: 4')
  fireEvent.click(getByText('button2'))  await findByText('count1: 2, count2: 5')
  fireEvent.click(getByText('button1'))  await findByText('count1: 3, count2: 5')})
it('simple async get default', async () => {  const count1Atom = atom(1)  const count2Atom = atomWithDefault(async (get) => {    await new Promise((r) => setTimeout(r, 500))    return get(count1Atom) * 2  })
  const Counter = () => {    const [count1, setCount1] = useAtom(count1Atom)    const [count2, setCount2] = useAtom(count2Atom)    return (      <>        <div>          count1: {count1}, count2: {count2}        </div>        <button onClick={() => setCount1((c) => c + 1)}>button1</button>        <button onClick={() => setCount2((c) => c + 1)}>button2</button>      </>    )  }
  const { findByText, getByText } = render(    <Provider>      <Suspense fallback="loading">        <Counter />      </Suspense>    </Provider>  )
  await findByText('loading')  await findByText('count1: 1, count2: 2')
  fireEvent.click(getByText('button1'))  await findByText('loading')  await findByText('count1: 2, count2: 4')
  fireEvent.click(getByText('button2'))  await findByText('count1: 2, count2: 5')
  fireEvent.click(getByText('button1'))  await findByText('count1: 3, count2: 5')})
it('refresh sync atoms to default values', async () => {  const count1Atom = atom(1)  const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)
  const Counter = () => {    const [count1, setCount1] = useAtom(count1Atom)    const [count2, setCount2] = useAtom(count2Atom)    return (      <>        <div>          count1: {count1}, count2: {count2}        </div>        <button onClick={() => setCount1((c) => c + 1)}>button1</button>        <button onClick={() => setCount2((c) => c + 1)}>button2</button>        <button onClick={() => setCount2(RESET)}>Refresh count2</button>      </>    )  }
  const { findByText, getByText } = render(    <Provider>      <Counter />    </Provider>  )
  await findByText('count1: 1, count2: 2')
  fireEvent.click(getByText('button1'))  await findByText('count1: 2, count2: 4')
  fireEvent.click(getByText('button2'))  await findByText('count1: 2, count2: 5')
  fireEvent.click(getByText('button1'))  await findByText('count1: 3, count2: 5')
  fireEvent.click(getByText('Refresh count2'))  await findByText('count1: 3, count2: 6')
  fireEvent.click(getByText('button1'))  await findByText('count1: 4, count2: 8')})
it('refresh async atoms to default values', async () => {  const count1Atom = atom(1)  const count2Atom = atomWithDefault(async (get) => {    await new Promise((r) => setTimeout(r, 500))    return get(count1Atom) * 2  })
  const Counter = () => {    const [count1, setCount1] = useAtom(count1Atom)    const [count2, setCount2] = useAtom(count2Atom)    return (      <>        <div>          count1: {count1}, count2: {count2}        </div>        <button onClick={() => setCount1((c) => c + 1)}>button1</button>        <button onClick={() => setCount2((c) => c + 1)}>button2</button>        <button onClick={() => setCount2(RESET)}>Refresh count2</button>      </>    )  }
  const { findByText, getByText } = render(    <Provider>      <Suspense fallback="loading">        <Counter />      </Suspense>    </Provider>  )
  await findByText('loading')  await findByText('count1: 1, count2: 2')
  fireEvent.click(getByText('button1'))  await findByText('loading')  await findByText('count1: 2, count2: 4')
  fireEvent.click(getByText('button2'))  await findByText('count1: 2, count2: 5')
  fireEvent.click(getByText('button1'))  await findByText('count1: 3, count2: 5')
  fireEvent.click(getByText('Refresh count2'))  await findByText('count1: 3, count2: 6')
  fireEvent.click(getByText('button1'))  await findByText('count1: 4, count2: 8')})