@automerge/automerge-repo-react-hooks 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automerge/automerge-repo-react-hooks",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Hooks to access an Automerge Repo from your react app.",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/packages/automerge-repo-react-hooks",
   "author": "Peter van Hardenberg <pvh@pvh.ca>",
@@ -10,12 +10,12 @@
   "scripts": {
     "build": "tsc --noEmit && vite build",
     "test": "vitest run",
-    "watch": "npm-watch",
+    "watch": "npm-watch build",
     "visualize": "VISUALIZE=true vite build"
   },
   "dependencies": {
     "@automerge/automerge": "^2.1.9",
-    "@automerge/automerge-repo": "1.1.2",
+    "@automerge/automerge-repo": "1.1.4",
     "eventemitter3": "^5.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8bcba031ae952b1f3302cd41d1066cd2db5b677f"
+  "gitHead": "e819a7ed6302ce34f372b119ea3e8bab052e3af6"
 }

package/test/useDocument.test.tsx

@@ -1,22 +1,21 @@
 import { AutomergeUrl, PeerId, Repo } from "@automerge/automerge-repo"
 import { DummyStorageAdapter } from "@automerge/automerge-repo/test/helpers/DummyStorageAdapter"
-import { renderHook, waitFor } from "@testing-library/react"
-import React, { useState } from "react"
-import { act } from "react-dom/test-utils"
-import { describe, expect, it } from "vitest"
+import { render, waitFor } from "@testing-library/react"
+import React from "react"
+import { describe, expect, it, vi } from "vitest"
 import { useDocument } from "../src/useDocument"
 import { RepoContext } from "../src/useRepo"
 
 const SLOW_DOC_LOAD_TIME_MS = 10
 
 describe("useDocument", () => {
-  const repo = new Repo({
-    peerId: "bob" as PeerId,
-    network: [],
-    storage: new DummyStorageAdapter(),
-  })
-
   function setup() {
+    const repo = new Repo({
+      peerId: "bob" as PeerId,
+      network: [],
+      storage: new DummyStorageAdapter(),
+    })
+
     const handleA = repo.create<ExampleDoc>()
     handleA.change(doc => (doc.foo = "A"))
 
@@ -36,121 +35,98 @@ describe("useDocument", () => {
       return result
     }
 
+    const wrapper = ({ children }) => {
+      return <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
+    }
+
     return {
       repo,
       handleA,
       handleB,
       handleSlow,
-      wrapper: getRepoWrapper(repo),
+      wrapper,
     }
   }
 
+  const Component = ({ url, onDoc }: {
+    url: AutomergeUrl,
+    onDoc: (doc: ExampleDoc) => void,
+  }) => {
+    const [doc] = useDocument(url)
+    onDoc(doc)
+    return null
+  }
+
   it("should load a document", async () => {
     const { handleA, wrapper } = setup()
+    const onDoc = vi.fn()
 
-    const { result } = renderHook(() => useDocument(handleA.url), { wrapper })
-
-    await waitFor(() => {
-      const [doc] = result.current
-      expect(doc).toEqual({ foo: "A" })
-    })
+    render(<Component url={handleA.url} onDoc={onDoc} />, {wrapper})
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith({ foo: "A" }))
   })
 
   it("should update if the url changes", async () => {
-    const { wrapper, handleA, handleB } = setup()
+    const { handleA, handleB, wrapper } = setup()
+    const onDoc = vi.fn()
 
-    const { result } = await act(() =>
-      renderHook(
-        () => {
-          const [url, setUrl] = useState<AutomergeUrl>()
-          const [doc] = useDocument(url)
-          return { setUrl, doc }
-        },
-        { wrapper }
-      )
-    )
-
-    await waitFor(() => expect(result.current).not.toBeNull())
+    const { rerender } = render(<Component url={undefined} onDoc={onDoc} />, {wrapper})
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith(undefined))
 
     // set url to doc A
-    act(() => result.current.setUrl(handleA.url))
-    await waitFor(() => expect(result.current.doc).toEqual({ foo: "A" }))
+    rerender(<Component url={handleA.url} onDoc={onDoc} />)
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith({ foo: "A" }))
 
     // set url to doc B
-    act(() => result.current.setUrl(handleB.url))
-    await waitFor(() => expect(result.current.doc).toEqual({ foo: "B" }))
+    rerender(<Component url={handleB.url} onDoc={onDoc} />)
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith({ foo: "B" }))
 
     // set url to undefined
-    act(() => result.current.setUrl(undefined))
-    await waitFor(() => expect(result.current.doc).toBeUndefined())
+    rerender(<Component url={undefined} onDoc={onDoc} />)
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith(undefined))
   })
 
   it("sets the doc to undefined while the initial load is happening", async () => {
-    const { wrapper, handleA, handleSlow } = setup()
-
-    const { result } = await act(() =>
-      renderHook(
-        () => {
-          const [url, setUrl] = useState<AutomergeUrl>()
-          const [doc] = useDocument(url)
-          return { setUrl, doc }
-        },
-        { wrapper }
-      )
-    )
+    const { handleA, handleSlow, wrapper } = setup()
+    const onDoc = vi.fn()
 
-    await waitFor(() => expect(result.current).not.toBeNull())
+    const { rerender } = render(<Component url={undefined} onDoc={onDoc} />, {wrapper})
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith(undefined))
 
     // start by setting url to doc A
-    act(() => result.current.setUrl(handleA.url))
-    await waitFor(() => expect(result.current.doc).toEqual({ foo: "A" }))
+    rerender(<Component url={handleA.url} onDoc={onDoc} />)
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith({ foo: "A" }))
 
     // Now we set the URL to a handle that's slow to load.
     // The doc should be undefined while the load is happening.
-    act(() => result.current.setUrl(handleSlow.url))
-    await waitFor(() => expect(result.current.doc).toBeUndefined())
-    await waitFor(() => expect(result.current.doc).toEqual({ foo: "slow" }))
+    rerender(<Component url={handleSlow.url} onDoc={onDoc} />)
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith(undefined))
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith({ foo: "slow" }))
   })
 
   it("avoids showing stale data", async () => {
-    const { wrapper, handleA, handleSlow } = setup()
-    const { result } = await act(() =>
-      renderHook(
-        () => {
-          const [url, setUrl] = useState<AutomergeUrl>()
-          const [doc] = useDocument(url)
-          return { setUrl, doc }
-        },
-        { wrapper }
-      )
-    )
-
-    await waitFor(() => expect(result.current).not.toBeNull())
+    const { handleA, handleSlow, wrapper } = setup()
+    const onDoc = vi.fn()
+
+    const { rerender } = render(<Component url={undefined} onDoc={onDoc} />, {wrapper})
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith(undefined))
 
     // Set the URL to a slow doc and then a fast doc.
     // We should see the fast doc forever, even after
     // the slow doc has had time to finish loading.
-    act(() => {
-      result.current.setUrl(handleSlow.url)
-      result.current.setUrl(handleA.url)
-    })
-    await waitFor(() => expect(result.current.doc).toEqual({ foo: "A" }))
+    rerender(<Component url={handleSlow.url} onDoc={onDoc} />)
+    rerender(<Component url={handleA.url} onDoc={onDoc} />)
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith({ foo: "A" }))
 
     // wait for the slow doc to finish loading...
     await pause(SLOW_DOC_LOAD_TIME_MS * 2)
 
     // we didn't update the doc to the slow doc, so it should still be A
-    await waitFor(() => expect(result.current.doc).toEqual({ foo: "A" }))
+    expect(onDoc).not.toHaveBeenCalledWith({ foo: "slow" })
   })
 })
 
 const pause = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
 
-const getRepoWrapper =
-  (repo: Repo) =>
-  ({ children }) =>
-    <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
-
 interface ExampleDoc {
   foo: string
 }

package/test/useDocuments.test.tsx

@@ -1,8 +1,8 @@
 import { DocumentId, PeerId, Repo } from "@automerge/automerge-repo"
 import { DummyStorageAdapter } from "@automerge/automerge-repo/test/helpers/DummyStorageAdapter"
-import { act, renderHook, waitFor } from "@testing-library/react"
+import { act, render, waitFor } from "@testing-library/react"
 import React from "react"
-import { describe, expect, it } from "vitest"
+import { describe, expect, it, vi } from "vitest"
 import { useDocuments } from "../src/useDocuments"
 import { RepoContext } from "../src/useRepo"
 
@@ -14,7 +14,9 @@ describe("useDocuments", () => {
       storage: new DummyStorageAdapter(),
     })
 
-    const wrapper = getRepoWrapper(repo)
+    const wrapper = ({ children }) => {
+      return <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
+    }
 
     const documentIds = range(10).map(i => {
       const handle = repo.create({ foo: i })
@@ -24,88 +26,68 @@ describe("useDocuments", () => {
     return { repo, wrapper, documentIds }
   }
 
+  const Component = ({ ids, onDocs }: {
+    ids: DocumentId[],
+    onDocs: (documents: Record<DocumentId, unknown>) => void,
+  }) => {
+    const documents = useDocuments(ids)
+    onDocs(documents)
+    return null
+  }
+
   it("returns a collection of documents, given a list of ids", async () => {
     const { documentIds, wrapper } = setup()
-    const { result } = renderHook(
-      () => {
-        const documents = useDocuments(documentIds)
-        return { documents }
-      },
-      { wrapper }
-    )
+    const onDocs = vi.fn()
 
-    await waitFor(() => {
-      const { documents } = result.current
-      documentIds.forEach((id, i) => expect(documents[id]).toEqual({ foo: i }))
-    })
+    render(<Component ids={documentIds} onDocs={onDocs} />, { wrapper })
+    await waitFor(() => expect(onDocs).toHaveBeenCalledWith(
+      Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]))
+    ))
   })
 
   it("updates documents when they change", async () => {
     const { repo, documentIds, wrapper } = setup()
-
-    const { result } = renderHook(
-      () => {
-        const documents = useDocuments(documentIds)
-        return { documents }
-      },
-      { wrapper }
-    )
-
-    await waitFor(() => {
-      const { documents } = result.current
-      documentIds.forEach((id, i) => expect(documents[id]).toEqual({ foo: i }))
-    })
-
-    // multiply the value of foo in each document by 10
-    documentIds.forEach(id => {
-      const handle = repo.find(id)
-      handle.change(s => (s.foo *= 10))
-    })
-
-    await waitFor(() => {
-      const { documents } = result.current
-      documentIds.forEach((id, i) =>
-        expect(documents[id]).toEqual({ foo: i * 10 })
-      )
+    const onDocs = vi.fn()
+
+    render(<Component ids={documentIds} onDocs={onDocs} />, { wrapper })
+    await waitFor(() => expect(onDocs).toHaveBeenCalledWith(
+      Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]))
+    ))
+
+    act(() => {
+      // multiply the value of foo in each document by 10
+      documentIds.forEach(id => {
+        const handle = repo.find(id)
+        handle.change(s => (s.foo *= 10))
+      })
     })
+    await waitFor(() => expect(onDocs).toHaveBeenCalledWith(
+      Object.fromEntries(documentIds.map((id, i) => [id, { foo: i * 10 }]))
+    ))
   })
 
   it(`removes documents when they're removed from the list of ids`, async () => {
-    const { repo, documentIds, wrapper } = setup()
-    const { result } = renderHook(
-      () => {
-        const [ids, setIds] = React.useState(documentIds)
-        const documents = useDocuments(ids)
-        return { documents, setIds }
-      },
-      { wrapper }
-    )
-    const [firstId, ...restIds] = documentIds
+    const { documentIds, wrapper } = setup()
+    const onDocs = vi.fn()
 
-    await waitFor(() => {
-      const { documents } = result.current
-      expect(documents[firstId]).toEqual({ foo: 0 })
-    })
+    const { rerender } = render(<Component ids={documentIds} onDocs={onDocs} />, { wrapper })
+    await waitFor(() => expect(onDocs).toHaveBeenCalledWith(
+      Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]))
+    ))
 
     // remove the first document
-    act(() => result.current.setIds(restIds))
-    // 👆 Note that this only works because restIds is a different object from documentIds.
-    // If we modified documentIds directly, the hook wouldn't re-run.
-
-    await waitFor(() => {
-      const { documents } = result.current
-      expect(documents[firstId]).toBeUndefined()
-    })
+    rerender(<Component ids={documentIds.slice(1)} onDocs={onDocs} />)
+    // 👆 Note that this only works because documentIds.slice(1) is a different
+    // object from documentIds. If we modified documentIds directly, the hook
+    // wouldn't re-run.
+    await waitFor(() => expect(onDocs).toHaveBeenCalledWith(
+      Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]).slice(1))
+    ))
   })
 })
 
 const range = (n: number) => [...Array(n).keys()]
 
-const getRepoWrapper =
-  (repo: Repo) =>
-  ({ children }) =>
-    <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
-
 interface ExampleDoc {
   foo: number
 }

package/test/useHandle.test.tsx

@@ -1,11 +1,10 @@
-import { PeerId, Repo, AutomergeUrl } from "@automerge/automerge-repo"
+import { AutomergeUrl, DocHandle, PeerId, Repo } from "@automerge/automerge-repo"
 import { DummyStorageAdapter } from "@automerge/automerge-repo/test/helpers/DummyStorageAdapter"
-import { describe, expect, it } from "vitest"
-import { RepoContext } from "../src/useRepo"
+import { render, waitFor } from "@testing-library/react"
+import React from "react"
+import { describe, expect, it, vi } from "vitest"
 import { useHandle } from "../src/useHandle"
-import { act, renderHook, waitFor } from "@testing-library/react"
-import React, { useState } from "react"
-import assert from "assert"
+import { RepoContext } from "../src/useRepo"
 
 interface ExampleDoc {
   foo: string
@@ -39,64 +38,48 @@ describe("useHandle", () => {
     }
   }
 
+  const Component = ({ url, onHandle }: {
+    url: AutomergeUrl,
+    onHandle: (handle: DocHandle<unknown> | undefined) => void,
+  }) => {
+    const handle = useHandle(url)
+    onHandle(handle)
+    return null
+  }
+
   it("loads a handle", async () => {
     const { handleA, wrapper } = setup()
+    const onHandle = vi.fn()
 
-    const { result } = await act(() =>
-      renderHook(
-        () => {
-          const handle = useHandle(handleA.url)
-          return { handle }
-        },
-        { wrapper }
-      )
-    )
-
-    assert.deepStrictEqual(result.current.handle, handleA)
+    render(<Component url={handleA.url} onHandle={onHandle} />, {wrapper})
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleA))
   })
 
   it("returns undefined when no url given", async () => {
     const { wrapper } = setup()
+    const onHandle = vi.fn()
 
-    const { result } = await act(() =>
-      renderHook(
-        () => {
-          const handle = useHandle()
-          return { handle }
-        },
-        { wrapper }
-      )
-    )
-
-    await waitFor(() => expect(result.current.handle).toBeUndefined())
+    render(<Component url={undefined} onHandle={onHandle} />, {wrapper})
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(undefined))
   })
 
   it("updates the handle when the url changes", async () => {
     const { wrapper, handleA, handleB } = setup()
+    const onHandle = vi.fn()
 
-    const { result } = await act(() =>
-      renderHook(
-        () => {
-          const [url, setUrl] = useState<AutomergeUrl>()
-          const handle = useHandle(url)
-          return { setUrl, handle }
-        },
-        { wrapper }
-      )
-    )
-
-    await waitFor(() => expect(result.current).not.toBeNull())
+    const { rerender } = render(<Component url={undefined} onHandle={onHandle} />, {wrapper})
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(undefined))
 
     // set url to doc A
-    act(() => result.current.setUrl(handleA.url))
-    await waitFor(() => expect(result.current.handle).toMatchObject(handleA))
+    rerender(<Component url={handleA.url} onHandle={onHandle} />)
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleA))
 
     // set url to doc B
-    act(() => result.current.setUrl(handleB.url))
-    await waitFor(() => expect(result.current.handle).toMatchObject(handleB))
+    rerender(<Component url={handleB.url} onHandle={onHandle} />)
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleB))
 
     // set url to undefined
-    act(() => result.current.setUrl(undefined))
-    await waitFor(() => expect(result.current.handle).toBeUndefined())
+    rerender(<Component url={undefined} onHandle={onHandle} />)
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(undefined))
   })
 })

package/test/useRepo.test.tsx

@@ -1,16 +1,24 @@
-import { renderHook } from "@testing-library/react"
-import { describe, expect, test, vi } from "vitest"
-import { RepoContext, useRepo } from "../src/useRepo.js"
 import { Repo } from "@automerge/automerge-repo"
+import { render } from "@testing-library/react"
 import React from "react"
+import { describe, expect, test, vi } from "vitest"
+import { RepoContext, useRepo } from "../src/useRepo.js"
 
 describe("useRepo", () => {
+  const Component = ({ onRepo }: {
+    onRepo: (repo: Repo) => void,
+  }) => {
+    const repo = useRepo()
+    onRepo(repo)
+    return null
+  }
+
   test("should error when context unavailable", () => {
     const repo = new Repo({ network: [] })
     // Prevent console spam by swallowing console.error "uncaught error" message
     const spy = vi.spyOn(console, "error")
     spy.mockImplementation(() => {})
-    expect(() => renderHook(() => useRepo())).toThrow(
+    expect(() => render(<Component onRepo={() => {}}/>)).toThrow(
       /Repo was not found on RepoContext/
     )
     spy.mockRestore()
@@ -21,7 +29,8 @@ describe("useRepo", () => {
     const wrapper = ({ children }) => (
       <RepoContext.Provider value={repo} children={children} />
     )
-    const { result } = renderHook(() => useRepo(), { wrapper })
-    expect(result.current).toBe(repo)
+    const onRepo = vi.fn()
+    render(<Component onRepo={onRepo} />, { wrapper })
+    expect(onRepo).toHaveBeenLastCalledWith(repo)
   })
 })