@livestore/livestore 0.0.46-dev.4 → 0.0.46

package/src/react/useRow.test.tsx

@@ -1,22 +1,30 @@
+import { ReadonlyRecord } from '@livestore/utils/effect'
+import * as otel from '@opentelemetry/api'
+import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
 import { act, render, renderHook } from '@testing-library/react'
 import React from 'react'
 import { describe, expect, it } from 'vitest'
 
 import type { Todo } from '../__tests__/react/fixture.js'
 import { makeTodoMvc, todos } from '../__tests__/react/fixture.js'
+import { getSimplifiedRootSpan } from '../__tests__/react/utils/otel.js'
 import * as LiveStore from '../index.js'
 import { mutationForQueryInfo } from '../query-info.js'
 import * as LiveStoreReact from './index.js'
+import type { StackInfo } from './utils/stack-info.js'
 
-describe('useRow', () => {
+// NOTE running tests concurrently doesn't work with the default global db graph
+describe.concurrent('useRow', () => {
   it('should update the data based on component key', async () => {
-    let renderCount = 0
+    using inputs = await makeTodoMvc({ useGlobalDbGraph: false })
 
-    const { wrapper, AppComponentSchema, store, dbGraph } = await makeTodoMvc({ useGlobalDbGraph: false })
+    const { wrapper, AppComponentSchema, store, dbGraph, makeRenderCount } = inputs
+
+    const renderCount = makeRenderCount()
 
     const { result, rerender } = renderHook(
       (userId: string) => {
-        renderCount++
+        renderCount.inc()
 
         const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
         return { state, setState }
@@ -26,25 +34,33 @@ describe('useRow', () => {
 
     expect(result.current.state.id).toBe('u1')
     expect(result.current.state.username).toBe('')
-    expect(renderCount).toBe(1)
+    expect(renderCount.val).toBe(1)
 
-    act(() => store.execute(LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`))
+    act(() =>
+      store.mutate(
+        LiveStore.rawSqlMutation({
+          sql: LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
+        }),
+      ),
+    )
 
     rerender('u2')
 
     expect(result.current.state.id).toBe('u2')
     expect(result.current.state.username).toBe('username_u2')
-    expect(renderCount).toBe(2)
+    expect(renderCount.val).toBe(2)
   })
 
   it('should update the data reactively - via setState', async () => {
-    let renderCount = 0
+    using inputs = await makeTodoMvc({ useGlobalDbGraph: false })
 
-    const { wrapper, AppComponentSchema, dbGraph } = await makeTodoMvc({ useGlobalDbGraph: false })
+    const { wrapper, AppComponentSchema, dbGraph, makeRenderCount } = inputs
+
+    const renderCount = makeRenderCount()
 
     const { result } = renderHook(
       (userId: string) => {
-        renderCount++
+        renderCount.inc()
 
         const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
         return { state, setState }
@@ -54,23 +70,25 @@ describe('useRow', () => {
 
     expect(result.current.state.id).toBe('u1')
     expect(result.current.state.username).toBe('')
-    expect(renderCount).toBe(1)
+    expect(renderCount.val).toBe(1)
 
     act(() => result.current.setState.username('username_u1_hello'))
 
     expect(result.current.state.id).toBe('u1')
     expect(result.current.state.username).toBe('username_u1_hello')
-    expect(renderCount).toBe(2)
+    expect(renderCount.val).toBe(2)
   })
 
-  it('should update the data reactively - via raw store update', async () => {
-    let renderCount = 0
+  it('should update the data reactively - via raw store mutation', async () => {
+    using inputs = await makeTodoMvc({ useGlobalDbGraph: false })
+
+    const { wrapper, AppComponentSchema, store, dbGraph, makeRenderCount } = inputs
 
-    const { wrapper, AppComponentSchema, store, dbGraph } = await makeTodoMvc({ useGlobalDbGraph: false })
+    const renderCount = makeRenderCount()
 
     const { result } = renderHook(
       (userId: string) => {
-        renderCount++
+        renderCount.inc()
 
         const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
         return { state, setState }
@@ -80,19 +98,24 @@ describe('useRow', () => {
 
     expect(result.current.state.id).toBe('u1')
     expect(result.current.state.username).toBe('')
-    expect(renderCount).toBe(1)
-
-    act(() => result.current.setState.username('username_u1_hello'))
+    expect(renderCount.val).toBe(1)
 
-    act(() => store.execute(LiveStore.sql`UPDATE UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`))
+    act(() =>
+      store.mutate(
+        LiveStore.rawSqlMutation({
+          sql: LiveStore.sql`UPDATE UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`,
+        }),
+      ),
+    )
 
     expect(result.current.state.id).toBe('u1')
     expect(result.current.state.username).toBe('username_u1_hello')
-    expect(renderCount).toBe(2)
+    expect(renderCount.val).toBe(2)
   })
 
   it('should work for a larger app', async () => {
-    const { wrapper, store, dbGraph } = await makeTodoMvc({ useGlobalDbGraph: false })
+    using inputs = await makeTodoMvc({ useGlobalDbGraph: false })
+    const { wrapper, store, dbGraph, makeRenderCount } = inputs
 
     const allTodos$ = LiveStore.querySQL<Todo[]>(`select * from todos`, { label: 'allTodos', dbGraph })
 
@@ -104,10 +127,10 @@ describe('useRow', () => {
       { isSingleton: true },
     )
 
-    let appRouterRenderCount = 0
+    const appRouterRenderCount = makeRenderCount()
     let globalSetState: LiveStoreReact.StateSetters<typeof AppRouterSchema> | undefined
     const AppRouter: React.FC = () => {
-      appRouterRenderCount++
+      appRouterRenderCount.inc()
 
       const [state, setState] = LiveStoreReact.useRow(AppRouterSchema, { dbGraph })
 
@@ -143,7 +166,7 @@ describe('useRow', () => {
 
     const renderResult = render(<AppRouter />, { wrapper })
 
-    expect(appRouterRenderCount).toBe(1)
+    expect(appRouterRenderCount.val).toBe(1)
 
     act(() =>
       store.mutate(
@@ -153,12 +176,12 @@ describe('useRow', () => {
       ),
     )
 
-    expect(appRouterRenderCount).toBe(1)
+    expect(appRouterRenderCount.val).toBe(1)
     expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: -"')
 
     act(() => globalSetState!.currentTaskId('t1'))
 
-    expect(appRouterRenderCount).toBe(2)
+    expect(appRouterRenderCount.val).toBe(2)
     expect(renderResult.getByRole('content').innerHTML).toMatchInlineSnapshot(
       `"{"id":"t1","text":"buy milk","completed":false}"`,
     )
@@ -177,9 +200,458 @@ describe('useRow', () => {
       ),
     )
 
-    expect(appRouterRenderCount).toBe(3)
+    expect(appRouterRenderCount.val).toBe(3)
     expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t2"')
   })
-})
 
-// TODO add otel tests
+  it('should work for a useRow query chained with a useTemporary query', async () => {
+    using inputs = await makeTodoMvc({ useGlobalDbGraph: false })
+    const { store, wrapper, AppComponentSchema, dbGraph, makeRenderCount, cud } = inputs
+    const renderCount = makeRenderCount()
+
+    store.mutate(
+      cud.todos.insert({ id: 't1', text: 'buy milk', completed: false }),
+      cud.todos.insert({ id: 't2', text: 'buy bread', completed: false }),
+    )
+
+    const { result, unmount, rerender } = renderHook(
+      (userId: string) => {
+        renderCount.inc()
+
+        const [_row, _setRow, rowState$] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
+        const todos = LiveStoreReact.useTemporaryQuery(
+          () =>
+            LiveStore.querySQL<any[]>(
+              (get) => LiveStore.sql`select * from todos where text like '%${get(rowState$).text}%'`,
+              { dbGraph, label: 'todosFiltered' },
+            ),
+          userId,
+        )
+
+        return { todos }
+      },
+      { wrapper, initialProps: 'u1' },
+    )
+
+    act(() =>
+      store.mutate(
+        LiveStore.rawSqlMutation({
+          sql: LiveStore.sql`INSERT INTO UserInfo (id, username, text) VALUES ('u2', 'username_u2', 'milk')`,
+        }),
+      ),
+    )
+
+    expect(result.current.todos.length).toBe(2)
+    // expect(result.current.state.username).toBe('')
+    expect(renderCount.val).toBe(1)
+
+    rerender('u2')
+
+    expect(result.current.todos.length).toBe(1)
+    expect(renderCount.val).toBe(2)
+
+    unmount()
+  })
+
+  let cachedProvider: BasicTracerProvider | undefined
+
+  describe('otel', () => {
+    const exporter = new InMemorySpanExporter()
+
+    const provider = cachedProvider ?? new BasicTracerProvider()
+    cachedProvider = provider
+    provider.addSpanProcessor(new SimpleSpanProcessor(exporter))
+    provider.register()
+
+    const otelTracer = otel.trace.getTracer('test')
+
+    const span = otelTracer.startSpan('test')
+    const otelContext = otel.trace.setSpan(otel.context.active(), span)
+
+    it('should update the data based on component key', async () => {
+      using inputs = await makeTodoMvc({ useGlobalDbGraph: false, otelContext, otelTracer })
+
+      const { wrapper, AppComponentSchema, store, dbGraph, makeRenderCount, strictMode } = inputs
+
+      const renderCount = makeRenderCount()
+
+      const { result, rerender, unmount } = renderHook(
+        (userId: string) => {
+          renderCount.inc()
+
+          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
+          return { state, setState }
+        },
+        { wrapper, initialProps: 'u1' },
+      )
+
+      expect(result.current.state.id).toBe('u1')
+      expect(result.current.state.username).toBe('')
+      expect(renderCount.val).toBe(1)
+
+      act(() =>
+        store.mutate(
+          LiveStore.rawSqlMutation({
+            sql: LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
+          }),
+        ),
+      )
+
+      rerender('u2')
+
+      expect(result.current.state.id).toBe('u2')
+      expect(result.current.state.username).toBe('username_u2')
+      expect(renderCount.val).toBe(2)
+
+      unmount()
+      store.destroy()
+      span.end()
+
+      const mapAttributes = (attributes: otel.Attributes) => {
+        return ReadonlyRecord.map(attributes, (val, key) => {
+          if (key === 'stackInfo') {
+            const stackInfo = JSON.parse(val as string) as StackInfo
+            // stackInfo.frames.shift() // Removes `renderHook.wrapper` from the stack
+            stackInfo.frames.forEach((_) => {
+              if (_.name.includes('renderHook.wrapper')) {
+                _.name = 'renderHook.wrapper'
+              }
+              _.filePath = '__REPLACED_FOR_SNAPSHOT__'
+            })
+            return JSON.stringify(stackInfo)
+          }
+          return val
+        })
+      }
+
+      if (strictMode) {
+        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchInlineSnapshot(`
+          {
+            "_name": "test",
+            "children": [
+              {
+                "_name": "livestore.in-memory-db:execute",
+                "attributes": {
+                  "sql.query": "
+                PRAGMA page_size=32768;
+                PRAGMA cache_size=10000;
+                PRAGMA journal_mode='MEMORY'; -- we don't flush to disk before committing a write
+                PRAGMA synchronous='OFF';
+                PRAGMA temp_store='MEMORY';
+                PRAGMA foreign_keys='ON'; -- we want foreign key constraints to be enforced
+              ",
+                },
+              },
+              {
+                "_name": "sql-in-memory-select",
+                "attributes": {
+                  "sql.cached": false,
+                  "sql.query": "SELECT schemaHash FROM __livestore_schema WHERE tableName = 'UserInfo'",
+                  "sql.rowsCount": 0,
+                },
+              },
+              {
+                "_name": "LiveStore:mutations",
+                "children": [
+                  {
+                    "_name": "LiveStore:mutate",
+                    "attributes": {
+                      "livestore.mutateLabel": "mutate",
+                    },
+                    "children": [
+                      {
+                        "_name": "LiveStore:processWrites",
+                        "attributes": {
+                          "livestore.mutateLabel": "mutate",
+                        },
+                        "children": [
+                          {
+                            "_name": "LiveStore:mutatetWithoutRefresh",
+                            "attributes": {
+                              "livestore.args": "{
+            "sql": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')"
+          }",
+                              "livestore.mutation": "livestore.RawSql",
+                            },
+                            "children": [
+                              {
+                                "_name": "livestore.in-memory-db:execute",
+                                "attributes": {
+                                  "sql.query": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')",
+                                },
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                "_name": "LiveStore:queries",
+                "children": [
+                  {
+                    "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
+                    "attributes": {
+                      "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                      "sql.rowsCount": 1,
+                    },
+                    "children": [
+                      {
+                        "_name": "sql-in-memory-select",
+                        "attributes": {
+                          "sql.cached": false,
+                          "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                          "sql.rowsCount": 1,
+                        },
+                      },
+                    ],
+                  },
+                  {
+                    "_name": "LiveStore:useRow:UserInfo:u1",
+                    "attributes": {
+                      "id": "u1",
+                    },
+                    "children": [
+                      {
+                        "_name": "livestore.in-memory-db:execute",
+                        "attributes": {
+                          "sql.query": "insert into UserInfo (username, text, id) select $username, $text, $id where not exists(select 1 from UserInfo where id = 'u1')",
+                        },
+                      },
+                      {
+                        "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u1)",
+                        "attributes": {
+                          "label": "sql(rowQuery:query:UserInfo:u1)",
+                          "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
+                        },
+                        "children": [
+                          {
+                            "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
+                            "attributes": {
+                              "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                              "sql.rowsCount": 1,
+                            },
+                            "children": [
+                              {
+                                "_name": "sql-in-memory-select",
+                                "attributes": {
+                                  "sql.cached": false,
+                                  "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                                  "sql.rowsCount": 1,
+                                },
+                              },
+                            ],
+                          },
+                          {
+                            "_name": "LiveStore.subscribe",
+                            "attributes": {
+                              "label": "sql(rowQuery:query:UserInfo:u1)",
+                              "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
+                            },
+                          },
+                          {
+                            "_name": "LiveStore.subscribe",
+                            "attributes": {
+                              "label": "sql(rowQuery:query:UserInfo:u1)",
+                              "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
+                            },
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          }
+        `)
+        // Below: Strict mode disabled
+      } else {
+        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchInlineSnapshot(`
+          {
+            "_name": "test",
+            "children": [
+              {
+                "_name": "livestore.in-memory-db:execute",
+                "attributes": {
+                  "sql.query": "
+                PRAGMA page_size=32768;
+                PRAGMA cache_size=10000;
+                PRAGMA journal_mode='MEMORY'; -- we don't flush to disk before committing a write
+                PRAGMA synchronous='OFF';
+                PRAGMA temp_store='MEMORY';
+                PRAGMA foreign_keys='ON'; -- we want foreign key constraints to be enforced
+              ",
+                },
+              },
+              {
+                "_name": "sql-in-memory-select",
+                "attributes": {
+                  "sql.cached": false,
+                  "sql.query": "SELECT schemaHash FROM __livestore_schema WHERE tableName = 'UserInfo'",
+                  "sql.rowsCount": 0,
+                },
+              },
+              {
+                "_name": "LiveStore:mutations",
+                "children": [
+                  {
+                    "_name": "LiveStore:mutate",
+                    "attributes": {
+                      "livestore.mutateLabel": "mutate",
+                    },
+                    "children": [
+                      {
+                        "_name": "LiveStore:processWrites",
+                        "attributes": {
+                          "livestore.mutateLabel": "mutate",
+                        },
+                        "children": [
+                          {
+                            "_name": "LiveStore:mutatetWithoutRefresh",
+                            "attributes": {
+                              "livestore.args": "{
+            "sql": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')"
+          }",
+                              "livestore.mutation": "livestore.RawSql",
+                            },
+                            "children": [
+                              {
+                                "_name": "livestore.in-memory-db:execute",
+                                "attributes": {
+                                  "sql.query": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')",
+                                },
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                "_name": "LiveStore:queries",
+                "children": [
+                  {
+                    "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
+                    "attributes": {
+                      "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                      "sql.rowsCount": 1,
+                    },
+                    "children": [
+                      {
+                        "_name": "sql-in-memory-select",
+                        "attributes": {
+                          "sql.cached": false,
+                          "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                          "sql.rowsCount": 1,
+                        },
+                      },
+                    ],
+                  },
+                  {
+                    "_name": "LiveStore:useRow:UserInfo:u1",
+                    "attributes": {
+                      "id": "u1",
+                    },
+                    "children": [
+                      {
+                        "_name": "livestore.in-memory-db:execute",
+                        "attributes": {
+                          "sql.query": "insert into UserInfo (username, text, id) select $username, $text, $id where not exists(select 1 from UserInfo where id = 'u1')",
+                        },
+                      },
+                      {
+                        "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u1)",
+                        "attributes": {
+                          "label": "sql(rowQuery:query:UserInfo:u1)",
+                          "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
+                        },
+                        "children": [
+                          {
+                            "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
+                            "attributes": {
+                              "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                              "sql.rowsCount": 1,
+                            },
+                            "children": [
+                              {
+                                "_name": "sql-in-memory-select",
+                                "attributes": {
+                                  "sql.cached": false,
+                                  "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                                  "sql.rowsCount": 1,
+                                },
+                              },
+                            ],
+                          },
+                          {
+                            "_name": "LiveStore.subscribe",
+                            "attributes": {
+                              "label": "sql(rowQuery:query:UserInfo:u1)",
+                              "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
+                            },
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    "_name": "LiveStore:useRow:UserInfo:u2",
+                    "attributes": {
+                      "id": "u2",
+                    },
+                    "children": [
+                      {
+                        "_name": "livestore.in-memory-db:execute",
+                        "attributes": {
+                          "sql.query": "insert into UserInfo (username, text, id) select $username, $text, $id where not exists(select 1 from UserInfo where id = 'u2')",
+                        },
+                      },
+                      {
+                        "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u2)",
+                        "attributes": {
+                          "label": "sql(rowQuery:query:UserInfo:u2)",
+                          "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
+                        },
+                        "children": [
+                          {
+                            "_name": "sql:select * from UserInfo where id = 'u2' limit 1",
+                            "attributes": {
+                              "sql.query": "select * from UserInfo where id = 'u2' limit 1",
+                              "sql.rowsCount": 1,
+                            },
+                            "children": [
+                              {
+                                "_name": "sql-in-memory-select",
+                                "attributes": {
+                                  "sql.cached": false,
+                                  "sql.query": "select * from UserInfo where id = 'u2' limit 1",
+                                  "sql.rowsCount": 1,
+                                },
+                              },
+                            ],
+                          },
+                          {
+                            "_name": "LiveStore.subscribe",
+                            "attributes": {
+                              "label": "sql(rowQuery:query:UserInfo:u2)",
+                              "queryLabel": "sql(rowQuery:query:UserInfo:u2)",
+                            },
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          }
+        `)
+      }
+    })
+  })
+})