fix(tests): add more test (#1233)

* fix(tests): add more test

* fix

Author: dai-shi

tests/react/arrays.test.tsx

@@ -115,6 +115,76 @@ describe('updating values inside arrays', () => {
     expect(listRenderFn).toBeCalledTimes(2)
   })
 
+  // The todo example derives its list inside a custom hook (useTodos) that
+  // filters the snapshot array rather than reading it directly.
+  describe('derived through a custom hook', () => {
+    const createTodoState = () =>
+      proxy({
+        todos: [
+          { id: 1, name: 'a', completed: false },
+          { id: 2, name: 'b', completed: true },
+        ],
+        filter: 'completed' as 'all' | 'completed',
+      })
+
+    it('should track only what the derivation reads', async () => {
+      const state = createTodoState()
+
+      const useTodos = () => {
+        const snap = useSnapshot(state)
+        return snap.filter === 'all'
+          ? snap.todos
+          : snap.todos.filter((todo) => todo.completed)
+      }
+
+      const renderFn = vi.fn()
+      const TodoList = () => {
+        const todos = useTodos()
+        renderFn()
+        return <div>{`ids: ${todos.map((todo) => todo.id).join(',')}`}</div>
+      }
+
+      render(<TodoList />)
+      expect(screen.getByText('ids: 2')).toBeInTheDocument()
+      expect(renderFn).toBeCalledTimes(1)
+
+      // `name` is never read by the derivation or the render
+      state.todos[0]!.name = 'renamed'
+      await act(() => vi.advanceTimersByTimeAsync(0))
+      expect(renderFn).toBeCalledTimes(1)
+
+      state.todos[0]!.completed = true
+      await act(() => vi.advanceTimersByTimeAsync(0))
+      expect(screen.getByText('ids: 1,2')).toBeInTheDocument()
+      expect(renderFn).toBeCalledTimes(2)
+    })
+
+    it('should re-render when the filter itself changes', async () => {
+      const state = createTodoState()
+
+      const TodoList = () => {
+        const snap = useSnapshot(state)
+        const todos =
+          snap.filter === 'all'
+            ? snap.todos
+            : snap.todos.filter((todo) => todo.completed)
+        return (
+          <>
+            <div>{`ids: ${todos.map((todo) => todo.id).join(',')}`}</div>
+            <button onClick={() => (state.filter = 'all')}>all</button>
+          </>
+        )
+      }
+
+      render(<TodoList />)
+      expect(screen.getByText('ids: 2')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByText('all'))
+      await act(() => vi.advanceTimersByTimeAsync(0))
+      expect(screen.getByText('ids: 1,2')).toBeInTheDocument()
+    })
+  })
+
   it('should mutate an item through the proxy from a child callback', async () => {
     const state = createState()
 

tests/react/object.test.tsx

@@ -38,6 +38,35 @@ describe('object', () => {
     expect(screen.getByText('count: 1')).toBeInTheDocument()
   })
 
+  // The counter example creates the proxy without `nested`, assigns it right
+  // after, and reads it optionally in the component.
+  it('property added after creation', async () => {
+    const obj = proxy<{ count: number; nested?: { ticks: number } }>({
+      count: 0,
+    })
+
+    const Counter = () => {
+      const snap = useSnapshot(obj)
+      return <div>ticks: {snap.nested?.ticks ?? 'none'}</div>
+    }
+
+    render(
+      <StrictMode>
+        <Counter />
+      </StrictMode>,
+    )
+
+    expect(screen.getByText('ticks: none')).toBeInTheDocument()
+
+    obj.nested = { ticks: 0 }
+    await act(() => vi.advanceTimersByTimeAsync(0))
+    expect(screen.getByText('ticks: 0')).toBeInTheDocument()
+
+    obj.nested.ticks += 1
+    await act(() => vi.advanceTimersByTimeAsync(0))
+    expect(screen.getByText('ticks: 1')).toBeInTheDocument()
+  })
+
   it('deleting property', async () => {
     const obj = proxy<{ count?: number }>({ count: 1 })
 

tests/utils/proxyMap.test.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { proxy, snapshot, useSnapshot } from 'valtio'
+import { proxy, snapshot, subscribe, useSnapshot } from 'valtio'
 import { proxyMap, proxySet } from 'valtio/utils'
 
 const initialValues = [
@@ -329,6 +329,83 @@ describe('proxyMap', () => {
       ).toBe(false)
     })
 
+    // The todo-with-proxyMap example stores objects and mutates them in place
+    // via get() and forEach(). The other ui tests here only store primitives.
+    it('should proxy object values and notify when one is mutated', async () => {
+      const state = proxy({
+        todos: proxyMap<number, { name: string; completed: boolean }>(),
+      })
+      state.todos.set(1, { name: 'a', completed: false })
+
+      const handler = vi.fn()
+      subscribe(state, handler)
+
+      state.todos.get(1)!.completed = true
+      await vi.advanceTimersByTimeAsync(0)
+
+      expect(handler).toBeCalledTimes(1)
+      expect(state.todos.get(1)).toEqual({ name: 'a', completed: true })
+      expect(snapshot(state).todos.get(1)).toEqual({
+        name: 'a',
+        completed: true,
+      })
+    })
+
+    it('should notify when object values are mutated during forEach', async () => {
+      const state = proxy({
+        todos: proxyMap<number, { completed: boolean }>([
+          [1, { completed: false }],
+          [2, { completed: false }],
+        ]),
+      })
+
+      const handler = vi.fn()
+      subscribe(state, handler)
+
+      state.todos.forEach((todo) => {
+        todo.completed = true
+      })
+      await vi.advanceTimersByTimeAsync(0)
+
+      expect(handler).toBeCalledTimes(1)
+      expect(Array.from(state.todos.values())).toEqual([
+        { completed: true },
+        { completed: true },
+      ])
+    })
+
+    it('should re-render a component when an object value is mutated', async () => {
+      const state = proxy({
+        todos: proxyMap<number, { name: string; completed: boolean }>([
+          [1, { name: 'a', completed: false }],
+        ]),
+      })
+
+      const TestComponent = () => {
+        const snap = useSnapshot(state)
+        return (
+          <div>
+            {Array.from(snap.todos.values())
+              .map((todo) => `${todo.name}:${todo.completed}`)
+              .join(',')}
+          </div>
+        )
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      )
+
+      expect(screen.getByText('a:false')).toBeInTheDocument()
+
+      state.todos.get(1)!.completed = true
+      await act(() => vi.advanceTimersByTimeAsync(0))
+
+      expect(screen.getByText('a:true')).toBeInTheDocument()
+    })
+
     it('should not implement getOrInsert', () => {
       const map = proxyMap<string, number>() as any
       expect(() => map.getOrInsert('a', 1)).toThrow('not implemented')

tests/vanilla/entrypoints.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it, vi } from 'vitest'
+import * as main from 'valtio'
+import * as react from 'valtio/react'
+import * as reactUtils from 'valtio/react/utils'
+import * as mainUtils from 'valtio/utils'
+import * as vanilla from 'valtio/vanilla'
+import * as vanillaUtils from 'valtio/vanilla/utils'
+
+// docs/how-tos/some-gotchas.mdx tells non-React users to import from
+// valtio/vanilla and valtio/vanilla/utils, and the photo-booth example does.
+// Nothing else in the suite touches those entry points.
+//
+// These tests also run against the built CJS and ESM output, where the CJS
+// interop adds a `default` key that the sources do not have, so it is dropped
+// before comparing.
+const exportsOf = (ns: object) =>
+  Object.keys(ns)
+    .filter((key) => key !== 'default')
+    .sort()
+
+describe('entry points', () => {
+  it('should expose the core from valtio/vanilla', () => {
+    expect(exportsOf(vanilla)).toEqual([
+      'getVersion',
+      'proxy',
+      'ref',
+      'snapshot',
+      'subscribe',
+      'unstable_enableOp',
+      'unstable_getInternalStates',
+      'unstable_replaceInternalFunction',
+    ])
+  })
+
+  it('should not expose React bindings from valtio/vanilla', () => {
+    expect(exportsOf(vanilla)).not.toContain('useSnapshot')
+    expect(exportsOf(vanillaUtils)).not.toContain('useProxy')
+  })
+
+  it('should expose the utils from valtio/vanilla/utils', () => {
+    expect(exportsOf(vanillaUtils)).toEqual([
+      'deepClone',
+      'devtools',
+      'isProxyMap',
+      'isProxySet',
+      'proxyMap',
+      'proxySet',
+      'subscribeKey',
+      'unstable_deepProxy',
+      'watch',
+    ])
+  })
+
+  it('should expose useSnapshot from valtio/react and useProxy from valtio/react/utils', () => {
+    expect(exportsOf(react)).toEqual(['useSnapshot'])
+    expect(exportsOf(reactUtils)).toEqual(['useProxy'])
+  })
+
+  it('should re-export both halves from the main entry points', () => {
+    expect(exportsOf(main)).toEqual(
+      [...exportsOf(vanilla), ...exportsOf(react)].sort(),
+    )
+    expect(exportsOf(mainUtils)).toEqual(
+      [...exportsOf(vanillaUtils), ...exportsOf(reactUtils)].sort(),
+    )
+  })
+
+  it('should work end to end through valtio/vanilla alone', async () => {
+    const state = vanilla.proxy({ count: 0, nested: { text: 'a' } })
+    const handler = vi.fn()
+    vanilla.subscribe(state, handler)
+
+    state.count += 1
+    state.nested.text = 'b'
+    await Promise.resolve()
+
+    expect(handler).toBeCalledTimes(1)
+    expect(vanilla.snapshot(state)).toEqual({ count: 1, nested: { text: 'b' } })
+  })
+
+  it('should work end to end through valtio/vanilla/utils alone', () => {
+    const set = vanillaUtils.proxySet([1, 2])
+    const map = vanillaUtils.proxyMap<string, number>([['a', 1]])
+
+    expect(vanillaUtils.isProxySet(set)).toBe(true)
+    expect(vanillaUtils.isProxyMap(map)).toBe(true)
+    expect(vanillaUtils.deepClone({ nested: { count: 0 } })).toEqual({
+      nested: { count: 0 },
+    })
+  })
+})

tests/vanilla/proxy.test.ts

@@ -230,6 +230,41 @@ describe('proxy arrays', () => {
     expect([...state]).toEqual([3, 2, 1])
   })
 
+  // The todo example removes an item with
+  // `store.todos = store.todos.filter(...)`, replacing the array with a plain
+  // copy whose members are already proxies.
+  it('should preserve member identity when replaced by a filtered copy', async () => {
+    const state = proxy({ items: [{ id: 1 }, { id: 2 }, { id: 3 }] })
+    const survivor = state.items[1]
+    const handler = vi.fn()
+    subscribe(state, handler)
+
+    state.items = state.items.filter((item) => item.id !== 1)
+
+    await Promise.resolve()
+    expect(handler).toBeCalledTimes(1)
+    expect(state.items.map((item) => item.id)).toEqual([2, 3])
+    expect(state.items[0]).toBe(survivor)
+    expect(snapshot(state)).toEqual({ items: [{ id: 2 }, { id: 3 }] })
+  })
+
+  it('should keep notifying through a member that survived the replacement', async () => {
+    const state = proxy({
+      items: [
+        { id: 1, n: 0 },
+        { id: 2, n: 0 },
+      ],
+    })
+    state.items = state.items.filter((item) => item.id !== 1)
+
+    const handler = vi.fn()
+    subscribe(state, handler)
+
+    state.items[0]!.n += 1
+    await Promise.resolve()
+    expect(handler).toBeCalledTimes(1)
+  })
+
   it('should keep length in sync with sparse assignment', () => {
     const state = proxy([0])
     state[3] = 3