@livestore/react 0.3.0-dev.9 → 0.3.0

package/src/LiveStoreProvider.test.tsx

@@ -1,27 +1,30 @@
+import { makeInMemoryAdapter } from '@livestore/adapter-web'
 import { sql } from '@livestore/common'
-import { rawSqlMutation } from '@livestore/common/schema'
+import { rawSqlEvent } from '@livestore/common/schema'
 import { queryDb, type Store } from '@livestore/livestore'
 import { Schema } from '@livestore/utils/effect'
-import { makeInMemoryAdapter } from '@livestore/web'
-import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react'
+import * as ReactTesting from '@testing-library/react'
 import React from 'react'
 import { unstable_batchedUpdates as batchUpdates } from 'react-dom'
 import { describe, expect, it } from 'vitest'
 
-import { schema, tables } from './__tests__/fixture.js'
+import { events, schema, tables } from './__tests__/fixture.js'
 import { LiveStoreProvider } from './LiveStoreProvider.js'
 import * as LiveStoreReact from './mod.js'
 
-describe('LiveStoreProvider', () => {
+describe.each([true, false])('LiveStoreProvider (strictMode: %s)', (strictMode) => {
+  const WithStrictMode = strictMode ? React.StrictMode : React.Fragment
+
   it('simple', async () => {
     let appRenderCount = 0
 
-    const allTodos$ = queryDb({ query: `select * from todos`, schema: Schema.Array(tables.todos.schema) })
+    const allTodos$ = queryDb({ query: `select * from todos`, schema: Schema.Array(tables.todos.rowSchema) })
 
     const App = () => {
       appRenderCount++
+      const { store } = LiveStoreReact.useStore()
 
-      const todos = LiveStoreReact.useQuery(allTodos$)
+      const todos = store.useQuery(allTodos$)
 
       return <div>{JSON.stringify(todos)}</div>
     }
@@ -31,8 +34,8 @@ describe('LiveStoreProvider', () => {
     const Root = ({ forceUpdate }: { forceUpdate: number }) => {
       const bootCb = React.useCallback(
         (store: Store) =>
-          store.mutate(
-            rawSqlMutation({
+          store.commit(
+            rawSqlEvent({
               sql: sql`INSERT OR IGNORE INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
             }),
           ),
@@ -41,37 +44,43 @@ describe('LiveStoreProvider', () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       const adapterMemo = React.useMemo(() => makeInMemoryAdapter(), [forceUpdate])
       return (
-        <LiveStoreProvider
-          schema={schema}
-          renderLoading={(status) => <div>Loading LiveStore: {status.stage}</div>}
-          adapter={adapterMemo}
-          boot={bootCb}
-          signal={abortController.signal}
-          batchUpdates={batchUpdates}
-        >
-          <App />
-        </LiveStoreProvider>
+        <WithStrictMode>
+          <LiveStoreProvider
+            schema={schema}
+            renderLoading={(status) => <div>Loading LiveStore: {status.stage}</div>}
+            adapter={adapterMemo}
+            boot={bootCb}
+            signal={abortController.signal}
+            batchUpdates={batchUpdates}
+          >
+            <App />
+          </LiveStoreProvider>
+        </WithStrictMode>
       )
     }
 
-    const { rerender } = render(<Root forceUpdate={1} />)
+    const { rerender } = ReactTesting.render(<Root forceUpdate={1} />)
 
     expect(appRenderCount).toBe(0)
 
-    await waitForElementToBeRemoved(() => screen.getByText((_) => _.startsWith('Loading LiveStore')))
+    await ReactTesting.waitForElementToBeRemoved(() =>
+      ReactTesting.screen.getByText((_) => _.startsWith('Loading LiveStore')),
+    )
 
-    expect(appRenderCount).toBe(1)
+    expect(appRenderCount).toBe(strictMode ? 2 : 1)
 
     rerender(<Root forceUpdate={2} />)
 
-    await waitFor(() => screen.getByText('Loading LiveStore: loading'))
-    await waitFor(() => screen.getByText((_) => _.includes('buy milk')))
+    await ReactTesting.waitFor(() => ReactTesting.screen.getByText('Loading LiveStore: loading'))
+    await ReactTesting.waitFor(() => ReactTesting.screen.getByText((_) => _.includes('buy milk')))
 
-    expect(appRenderCount).toBe(2)
+    expect(appRenderCount).toBe(strictMode ? 4 : 2)
 
     abortController.abort()
 
-    await waitFor(() => screen.getByText('LiveStore Shutdown due to abort signal'))
+    await ReactTesting.waitFor(() =>
+      ReactTesting.screen.getByText('LiveStore Shutdown due to interrupted', { exact: false }),
+    )
   })
 
   // TODO test aborting during boot
@@ -88,8 +97,8 @@ describe('LiveStoreProvider', () => {
     const Root = ({ forceUpdate }: { forceUpdate: number }) => {
       const bootCb = React.useCallback(
         (store: Store) =>
-          store.mutate(
-            rawSqlMutation({
+          store.commit(
+            rawSqlEvent({
               sql: sql`INSERT OR IGNORE INTO todos_missing_table (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
             }),
           ),
@@ -98,22 +107,152 @@ describe('LiveStoreProvider', () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       const adapterMemo = React.useMemo(() => makeInMemoryAdapter(), [forceUpdate])
       return (
+        <WithStrictMode>
+          <LiveStoreProvider
+            schema={schema}
+            renderLoading={(status) => <div>Loading LiveStore: {status.stage}</div>}
+            adapter={adapterMemo}
+            boot={bootCb}
+            batchUpdates={batchUpdates}
+          >
+            <App />
+          </LiveStoreProvider>
+        </WithStrictMode>
+      )
+    }
+
+    ReactTesting.render(<Root forceUpdate={1} />)
+
+    expect(appRenderCount).toBe(0)
+
+    await ReactTesting.waitFor(() => ReactTesting.screen.getByText((_) => _.startsWith('LiveStore.UnexpectedError')))
+  })
+
+  it('unmounts when store is shutdown', async () => {
+    let appRenderCount = 0
+
+    const allTodos$ = queryDb({ query: `select * from todos`, schema: Schema.Array(tables.todos.rowSchema) })
+
+    const shutdownDeferred = Promise.withResolvers<void>()
+
+    const App = () => {
+      appRenderCount++
+      const { store } = LiveStoreReact.useStore()
+
+      React.useEffect(() => {
+        shutdownDeferred.promise.then(() => {
+          console.log('shutdown')
+          return store.shutdown()
+        })
+      }, [store])
+
+      const todos = store.useQuery(allTodos$)
+
+      return <div>{JSON.stringify(todos)}</div>
+    }
+
+    const adapter = makeInMemoryAdapter()
+
+    const Root = () => {
+      return (
+        <WithStrictMode>
+          <LiveStoreProvider
+            schema={schema}
+            renderLoading={(status) => <div>Loading LiveStore: {status.stage}</div>}
+            adapter={adapter}
+            batchUpdates={batchUpdates}
+          >
+            <App />
+          </LiveStoreProvider>
+        </WithStrictMode>
+      )
+    }
+
+    ReactTesting.render(<Root />)
+
+    expect(appRenderCount).toBe(0)
+
+    await ReactTesting.waitFor(() => ReactTesting.screen.getByText('[]'))
+
+    React.act(() => shutdownDeferred.resolve())
+
+    expect(appRenderCount).toBe(strictMode ? 2 : 1)
+
+    await ReactTesting.waitFor(() =>
+      ReactTesting.screen.getByText('LiveStore Shutdown due to manual shutdown', { exact: false }),
+    )
+  })
+})
+
+it('should work two stores with the same storeId', async () => {
+  const allTodos$ = queryDb({ query: `select * from todos`, schema: Schema.Array(tables.todos.rowSchema) })
+
+  const appRenderCount = {
+    store1: 0,
+    store2: 0,
+  }
+
+  const App = () => {
+    const { store } = LiveStoreReact.useStore()
+    const instanceId = store.clientSession.debugInstanceId as 'store1' | 'store2'
+    appRenderCount[instanceId]!++
+
+    const todos = store.useQuery(allTodos$)
+
+    return (
+      <div id={instanceId}>
+        <div role="heading">{instanceId}</div>
+        <div role="content">{JSON.stringify(todos)}</div>
+        <button onClick={() => store.commit(events.todoCreated({ id: 't1', text: 'buy milk', completed: false }))}>
+          create todo {instanceId}
+        </button>
+      </div>
+    )
+  }
+
+  const Root = () => {
+    const storeId = 'fixed-store-id'
+    return (
+      <div>
         <LiveStoreProvider
+          storeId={storeId}
+          debug={{ instanceId: 'store1' }}
           schema={schema}
-          renderLoading={(status) => <div>Loading LiveStore: {status.stage}</div>}
-          adapter={adapterMemo}
-          boot={bootCb}
+          adapter={makeInMemoryAdapter()}
           batchUpdates={batchUpdates}
         >
           <App />
         </LiveStoreProvider>
-      )
-    }
+        <LiveStoreProvider
+          storeId={storeId}
+          debug={{ instanceId: 'store2' }}
+          schema={schema}
+          adapter={makeInMemoryAdapter()}
+          batchUpdates={batchUpdates}
+        >
+          <App />
+        </LiveStoreProvider>
+      </div>
+    )
+  }
 
-    render(<Root forceUpdate={1} />)
+  const { container } = ReactTesting.render(<Root />)
 
-    expect(appRenderCount).toBe(0)
+  await ReactTesting.waitFor(() => ReactTesting.screen.getByRole('heading', { name: 'store1' }))
+  await ReactTesting.waitFor(() => ReactTesting.screen.getByRole('heading', { name: 'store2' }))
 
-    await waitFor(() => screen.getByText((_) => _.startsWith('LiveStore.UnexpectedError')))
-  })
+  expect(appRenderCount.store1).toBe(1)
+  expect(appRenderCount.store2).toBe(1)
+
+  ReactTesting.fireEvent.click(ReactTesting.screen.getByText('create todo store1'))
+
+  expect(appRenderCount.store1).toBe(2)
+
+  expect(container.querySelector('#store1 > div[role="content"]')?.textContent).toBe(
+    '[{"id":"t1","text":"buy milk","completed":false}]',
+  )
+
+  expect(container.querySelector('#store2 > div[role="content"]')?.textContent).toBe('[]')
 })
+
+// TODO test that checks that there are no two exact same instances (i.e. same storeId, clientId, sessionId)