123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
import { StrictMode } from 'react'import { fireEvent, render, waitFor } from '@testing-library/react'import { proxy, useSnapshot } from 'valtio'import { proxyMap, proxySet } from 'valtio/utils'
const initialValues = [  {    name: 'number',    value: [[-10, 1]],  },  {    name: 'string',    value: [['hello', 'world']],  },  {    name: 'Symbol',    value: [[Symbol(), Symbol()]],  },  {    name: 'boolean',    value: [[false, true]],  },  {    name: 'array',    value: [      [        [10, 'hello'],        [1, 2, 3, 'x', 'w'],      ],    ],  },  {    name: 'object',    value: [[{}, { id: 'something', field: null }]],  },  {    name: 'null',    value: [[null, [null, 1]]],  },  {    name: 'function',    value: [[() => {}, () => {}]],  },  {    name: 'array buffer',    value: [[new ArrayBuffer(8), new ArrayBuffer(8)]],  },  {    name: 'Set',    value: [[new Set(), new Set(['x', 'y', 'z'])]],  },  {    name: 'Map',    value: [[new Map(), new Map([['key', 'value']])]],  },  {    name: 'proxySet',    value: [[proxySet([{}]), proxySet([{}, Symbol()])]],  },]
const inputValues = [  {    name: 'array',    value: [1, 'hello'],  },  {    name: 'nested array',    value: [[1, 'hello']],  },  {    name: 'Map',    value: new Map<any, any>([      ['key1', 'value1'],      [{}, 'value2'],    ]),  },  {    name: 'boolean',    value: false,  },  {    name: 'number',    value: 123,  },  {    name: 'string',    value: 'hello',  },  {    name: 'Set',    value: new Set([1, 2, 3]),  },  {    name: 'proxySet',    value: proxySet([1, {}, null, 'xyz', Symbol()]),  },  {    name: 'object',    value: { id: Symbol(), field: 'field', bool: true, null: null },  },]
describe('features parity with native Map', () => {  initialValues.forEach(({ name, value }) => {    it(`Support Map operations on ${name}`, () => {      const map = proxyMap(value as any)      const nativeMap = new Map(value as any)
      // check for Symbol.toStringTag / toString      expect(`${map}`).toBe(`${nativeMap}`)
      const expectOutputToMatch = () => {        expect(map.size).toStrictEqual(nativeMap.size)        expect(Array.from(map.values())).toStrictEqual(          Array.from(nativeMap.values())        )        expect(Array.from(map.keys())).toStrictEqual(          Array.from(nativeMap.keys())        )        expect(Array.from(map.entries())).toStrictEqual(          Array.from(nativeMap.entries())        )        expect(JSON.stringify(map)).toStrictEqual(JSON.stringify(nativeMap))
        // cover loops        const handleForEach = jest.fn()        const handleForOf = jest.fn()
        map.forEach(handleForEach)        expect(handleForEach).toHaveBeenCalledTimes(map.size)
        for (const _ of map) {          handleForOf()        }
        expect(handleForOf).toHaveBeenCalledTimes(map.size)      }
      expectOutputToMatch()
      const [firstElementFromMap] = map      const [firstElementFromNativeMap] = nativeMap
      // Bypass Forbidden non-null assertion      const keyFromMap = firstElementFromMap && firstElementFromMap[0]      const keyFromNativeMap =        firstElementFromNativeMap && firstElementFromNativeMap[0]
      expect(map.has(keyFromMap)).toBe(nativeMap.has(keyFromNativeMap))
      map.delete(keyFromMap)      nativeMap.delete(keyFromNativeMap)      expectOutputToMatch()
      map.set('newKey', {})      nativeMap.set('newKey', {})      expectOutputToMatch()
      // test value replacement      map.set('newKey', 'newValue')      nativeMap.set('newKey', 'newValue')      expectOutputToMatch()
      // test getter      expect(map.get('newKey')).toBe(nativeMap.get('newKey'))    })  })
  it('support initialization with null', () => {    const map = proxyMap(null)    const nativeMap = new Map(null)
    expect(map.size).toStrictEqual(nativeMap.size)    expect(Array.from(map.values())).toStrictEqual(      Array.from(nativeMap.values())    )    expect(Array.from(map.keys())).toStrictEqual(Array.from(nativeMap.keys()))    expect(Array.from(map.entries())).toStrictEqual(      Array.from(nativeMap.entries())    )  })})
describe('clear map', () => {  initialValues.forEach(({ name, value }) => {    it(`clear proxyMap of ${name}`, async () => {      const state = proxyMap(value as any)
      const TestComponent = () => {        const snap = useSnapshot(state)
        return (          <>            <div>size: {snap.size}</div>            <button onClick={() => state.clear()}>button</button>          </>        )      }
      const { getByText } = render(        <StrictMode>          <TestComponent />        </StrictMode>      )
      expect(state.size).toBeGreaterThan(0)      getByText(`size: ${state.size}`)
      fireEvent.click(getByText('button'))      await waitFor(() => {        getByText('size: 0')      })    })  })})
describe('add value', () => {  inputValues.forEach(({ name, value }) => {    it(`update size when adding ${name}`, async () => {      const state = proxy({        map: proxyMap(),      })
      const TestComponent = () => {        const snap = useSnapshot(state)
        return (          <>            <div>size: {snap.map.size}</div>            <button onClick={() => state.map.set(value, value)}>button</button>          </>        )      }
      const { getByText } = render(        <StrictMode>          <TestComponent />        </StrictMode>      )
      getByText('size: 0')      fireEvent.click(getByText('button'))
      await waitFor(() => {        getByText('size: 1')      })    })  })})
describe('delete', () => {  inputValues.forEach(({ name, value }) => {    it(`return false when trying to delete non-existing value of type ${name}`, () => {      const set = proxyMap()
      expect(set.delete(value)).toBe(false)    })  })
  initialValues.forEach(({ name, value }) => {    it(`support delete on key of type ${name}`, async () => {      const state = proxy({        map: proxyMap(value as any),      })
      // pick a random value from the set      const [firstValue] = state.map
      // Bypass Forbidden non-null assertion      const firstKey = firstValue && firstValue[0]
      const TestComponent = () => {        const snap = useSnapshot(state)
        return (          <>            <div>size: {snap.map.size}</div>            <button onClick={() => state.map.delete(firstKey)}>button</button>          </>        )      }
      const { getByText } = render(        <StrictMode>          <TestComponent />        </StrictMode>      )
      getByText(`size: ${state.map.size}`)
      const expectedSizeAfterDelete =        state.map.size > 1 ? state.map.size - 1 : 0
      fireEvent.click(getByText('button'))      await waitFor(() => {        getByText(`size: ${expectedSizeAfterDelete}`)      })    })  })})
describe('proxyMap internal', () => {  it('should be sealed', () => {    expect(Object.isSealed(proxySet())).toBe(true)  })
  it('should list only enumerable properties', () => {    const notEnumerableProps = ['data', 'size', 'toJSON']    expect(      Object.keys(proxyMap()).some((k) => notEnumerableProps.includes(k))    ).toBe(false)  })})