test: render multiple components on loaded data

Author: ph-fritsche

test/methods/_.ts

@@ -2,7 +2,8 @@ import { clear, createStore, setMany } from 'idb-keyval';
 import { createApi } from '../../src/methods';
 import { cachedObj, reactCache, reactCacheEntry } from '../../src/shared';
 
-export async function setupApi({cacheEntries, cacheObjects, cacheValues, idbObjects, idbValues}: {
+export async function setupApi({cache: reactCache, cacheEntries, cacheObjects, cacheValues, idbObjects, idbValues}: {
+    cache?: reactCache,
     cacheEntries?: Record<string, reactCacheEntry>,
     cacheObjects?: Record<string, cachedObj>,
     cacheValues?: Record<string, unknown>,
@@ -14,7 +15,7 @@ export async function setupApi({cacheEntries, cacheObjects, cacheValues, idbObje
     rerender: jest.Mock<() => void>,
     api: ReturnType<typeof createApi>,
 }> {
-    const cache: reactCache = {}
+    const cache: reactCache = reactCache ?? {}
     Object.entries(cacheEntries ?? {}).forEach(([key, entry]) => {
         cache[key] = entry
     })

test/methods/get.ts

@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/react'
 import { setupApi } from './_'
 
 it('get value from cache', async () => {
@@ -152,3 +153,24 @@ it('skip fetching object when a promise is pending', async () => {
     await new Promise(r => setTimeout(r, 1))
     expect(loader).toBeCalledTimes(2)
 })
+
+it('rerender when pending promise is resolved', async () => {
+    const compA = await setupApi()
+    const compB = await setupApi({cache: compA.cache})
+    let resolveLoader: () => void = () => { return }
+    const loader = jest.fn(() => new Promise<void>(r => { resolveLoader = r }))
+
+    expect(compA.api.get('foo', loader)).toBe(undefined)
+    expect(compB.api.get('foo', loader)).toBe(undefined)
+
+    await waitFor(() => expect(resolveLoader).toBeTruthy())
+    expect(loader).toHaveBeenCalledTimes(1)
+
+    resolveLoader()
+    await new Promise(r => setTimeout(r, 1))
+
+    expect(compA.rerender).toBeCalledTimes(1)
+    expect(compA.api.get('foo')).toBe('foo')
+    expect(compB.rerender).toBeCalledTimes(1)
+    expect(compB.api.get('foo')).toBe('foo')
+})

test/useCached.tsx

@@ -109,3 +109,32 @@ it('rerender component on updated cache', async () => {
     expect(render).toReturnTimes(2)
     expect(render).toHaveNthReturnedWith(2, 'bar')
 })
+
+it('rerender multiple components waiting for the same value', async () => {
+    let loadingResolve: (() => void) | undefined = undefined
+    const loading = jest.fn((api: ReturnType<typeof useCached>) => new Promise<void>(res => {
+        api.set('foo', 'bar')
+        loadingResolve = res
+    }))
+    const renderA = jest.fn((api: ReturnType<typeof useCached>) => {
+        return api.get('foo', () => loading(api))
+    })
+    const renderB = jest.fn((api: ReturnType<typeof useCached>) => {
+        return api.get('foo', () => loading(api))
+    })
+    await setup([undefined, undefined], [renderA, renderB])
+
+    expect(renderA).toHaveBeenCalledTimes(1)
+    expect(renderB).toHaveBeenCalledTimes(1)
+
+    await waitFor(() => expect(loadingResolve).toBeTruthy())
+    expect(loading).toHaveBeenCalledTimes(1)
+    act(() => {
+        loadingResolve && loadingResolve()
+    })
+
+    expect(renderA).toReturnTimes(2)
+    expect(renderA).toHaveNthReturnedWith(2, 'bar')
+    expect(renderB).toReturnTimes(2)
+    expect(renderB).toHaveNthReturnedWith(2, 'bar')
+})