@furystack/shades-common-components 12.0.0 → 12.1.0

package/src/components/data-grid/data-grid.spec.tsx

@@ -1,3 +1,4 @@
+import type { FindOptions } from '@furystack/core'
 import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
 import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
@@ -29,12 +30,30 @@ describe('DataGrid', () => {
     return service
   }
 
+  const withTestGrid = async (
+    fn: (ctx: {
+      injector: Injector
+      service: CollectionService<TestEntry>
+      findOptions: ObservableValue<FindOptions<TestEntry, Array<keyof TestEntry>>>
+    }) => Promise<void>,
+    opts?: { createService?: () => CollectionService<TestEntry> },
+  ) => {
+    await usingAsync(new Injector(), async (injector) => {
+      await usingAsync(opts?.createService?.() ?? createTestService(), async (service) => {
+        await usingAsync(
+          new ObservableValue<FindOptions<TestEntry, Array<keyof TestEntry>>>({}),
+          async (findOptions) => {
+            await fn({ injector, service, findOptions })
+          },
+        )
+      })
+    })
+  }
+
   describe('rendering', () => {
     it('should render with columns', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         initializeShadeRoot({
           injector,
@@ -58,17 +77,12 @@ describe('DataGrid', () => {
 
         const headers = grid?.querySelectorAll('th')
         expect(headers?.length).toBe(2)
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should render table structure', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         initializeShadeRoot({
           injector,
@@ -95,17 +109,12 @@ describe('DataGrid', () => {
         expect(table).not.toBeNull()
         expect(thead).not.toBeNull()
         expect(tbody).not.toBeNull()
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should render custom header components when provided', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         initializeShadeRoot({
           injector,
@@ -130,17 +139,12 @@ describe('DataGrid', () => {
         const customHeader = grid?.querySelector('[data-testid="custom-header-id"]')
         expect(customHeader).not.toBeNull()
         expect(customHeader?.textContent).toBe('Custom ID Header')
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should render default header components from headerComponents.default', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         initializeShadeRoot({
           injector,
@@ -167,17 +171,12 @@ describe('DataGrid', () => {
 
         expect(defaultHeaderId?.textContent).toBe('Default: id')
         expect(defaultHeaderName?.textContent).toBe('Default: name')
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should render DataGridHeader when no custom header is provided', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         initializeShadeRoot({
           injector,
@@ -199,19 +198,14 @@ describe('DataGrid', () => {
         const grid = document.querySelector('shade-data-grid')
         const defaultHeaders = grid?.querySelectorAll('data-grid-header')
         expect(defaultHeaders?.length).toBe(2)
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
   })
 
   describe('focus management', () => {
     it('should set focus on click', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         expect(service.hasFocus.getValue()).toBe(false)
 
@@ -238,17 +232,12 @@ describe('DataGrid', () => {
         wrapper?.click()
 
         expect(service.hasFocus.getValue()).toBe(true)
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should lose focus on click outside', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         initializeShadeRoot({
           injector,
@@ -280,19 +269,14 @@ describe('DataGrid', () => {
         outside?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
 
         expect(service.hasFocus.getValue()).toBe(false)
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
   })
 
   describe('keyboard navigation', () => {
     it('should handle ArrowDown to move focus to next entry', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         service.hasFocus.setValue(true)
         service.focusedEntry.setValue(service.data.getValue().entries[0])
@@ -318,17 +302,12 @@ describe('DataGrid', () => {
         window.dispatchEvent(keydownEvent)
 
         expect(service.focusedEntry.getValue()).toEqual({ id: 2, name: 'Second' })
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should handle ArrowUp to move focus to previous entry', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         service.hasFocus.setValue(true)
         service.focusedEntry.setValue(service.data.getValue().entries[1])
@@ -354,17 +333,12 @@ describe('DataGrid', () => {
         window.dispatchEvent(keydownEvent)
 
         expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should handle Home to move focus to first entry', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         service.hasFocus.setValue(true)
         service.focusedEntry.setValue(service.data.getValue().entries[2])
@@ -390,17 +364,12 @@ describe('DataGrid', () => {
         window.dispatchEvent(keydownEvent)
 
         expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should handle End to move focus to last entry', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         service.hasFocus.setValue(true)
         service.focusedEntry.setValue(service.data.getValue().entries[0])
@@ -426,17 +395,12 @@ describe('DataGrid', () => {
         window.dispatchEvent(keydownEvent)
 
         expect(service.focusedEntry.getValue()).toEqual({ id: 3, name: 'Third' })
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should handle Tab to toggle focus', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         service.hasFocus.setValue(true)
 
@@ -461,17 +425,12 @@ describe('DataGrid', () => {
         window.dispatchEvent(keydownEvent)
 
         expect(service.hasFocus.getValue()).toBe(false)
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should handle Escape to clear selection and search', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         const { entries } = service.data.getValue()
         service.hasFocus.setValue(true)
@@ -500,17 +459,12 @@ describe('DataGrid', () => {
 
         expect(service.selection.getValue()).toEqual([])
         expect(service.searchTerm.getValue()).toBe('')
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should handle Space to toggle selection of focused entry', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         const { entries } = service.data.getValue()
         service.hasFocus.setValue(true)
@@ -540,17 +494,12 @@ describe('DataGrid', () => {
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
         expect(service.selection.getValue()).not.toContain(entries[0])
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should handle + to select all entries', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         service.hasFocus.setValue(true)
 
@@ -575,17 +524,12 @@ describe('DataGrid', () => {
         window.dispatchEvent(keydownEvent)
 
         expect(service.selection.getValue().length).toBe(3)
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should handle - to deselect all entries', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         const { entries } = service.data.getValue()
         service.hasFocus.setValue(true)
@@ -612,17 +556,12 @@ describe('DataGrid', () => {
         window.dispatchEvent(keydownEvent)
 
         expect(service.selection.getValue().length).toBe(0)
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should handle * to invert selection', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         const { entries } = service.data.getValue()
         service.hasFocus.setValue(true)
@@ -652,17 +591,12 @@ describe('DataGrid', () => {
         expect(selection).not.toContain(entries[0])
         expect(selection).toContain(entries[1])
         expect(selection).toContain(entries[2])
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should not handle keyboard when not focused', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         service.hasFocus.setValue(false)
         service.focusedEntry.setValue(service.data.getValue().entries[0])
@@ -688,17 +622,12 @@ describe('DataGrid', () => {
         window.dispatchEvent(keydownEvent)
 
         expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should handle Insert to toggle selection and move to next', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         const { entries } = service.data.getValue()
         service.hasFocus.setValue(true)
@@ -726,19 +655,14 @@ describe('DataGrid', () => {
 
         expect(service.selection.getValue()).toContain(entries[0])
         expect(service.focusedEntry.getValue()).toEqual(entries[1])
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
   })
 
   describe('styles', () => {
     it('should apply wrapper styles when provided', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         initializeShadeRoot({
           injector,
@@ -761,17 +685,12 @@ describe('DataGrid', () => {
 
         const grid = document.querySelector('shade-data-grid') as HTMLElement
         expect(grid?.style.backgroundColor).toBe('red')
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
 
     it('should apply header styles when provided', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         initializeShadeRoot({
           injector,
@@ -795,138 +714,127 @@ describe('DataGrid', () => {
         const grid = document.querySelector('shade-data-grid')
         const headers = grid?.querySelectorAll('th') as NodeListOf<HTMLElement>
         expect(headers?.[0]?.style.color).toBe('blue')
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
   })
 
   describe('empty and loading states', () => {
     it('should show empty component when no data', async () => {
-      await usingAsync(new Injector(), async (injector) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = new CollectionService<TestEntry>()
-        const findOptions = new ObservableValue<any>({})
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: (
-            <DataGrid<TestEntry, 'id' | 'name'>
-              columns={['id', 'name']}
-              collectionService={service}
-              findOptions={findOptions}
-              styles={{}}
-              headerComponents={{}}
-              rowComponents={{}}
-              emptyComponent={<div data-testid="empty-state">No data available</div>}
-            />
-          ),
-        })
-
-        await sleepAsync(50)
-
-        const grid = document.querySelector('shade-data-grid')
-        const emptyState = grid?.querySelector('[data-testid="empty-state"]')
-        expect(emptyState).not.toBeNull()
-        expect(emptyState?.textContent).toBe('No data available')
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
-      })
+      await withTestGrid(
+        async ({ injector, service, findOptions }) => {
+          const rootElement = document.getElementById('root') as HTMLDivElement
+
+          initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: (
+              <DataGrid<TestEntry, 'id' | 'name'>
+                columns={['id', 'name']}
+                collectionService={service}
+                findOptions={findOptions}
+                styles={{}}
+                headerComponents={{}}
+                rowComponents={{}}
+                emptyComponent={<div data-testid="empty-state">No data available</div>}
+              />
+            ),
+          })
+
+          await sleepAsync(50)
+
+          const grid = document.querySelector('shade-data-grid')
+          const emptyState = grid?.querySelector('[data-testid="empty-state"]')
+          expect(emptyState).not.toBeNull()
+          expect(emptyState?.textContent).toBe('No data available')
+        },
+        { createService: () => new CollectionService<TestEntry>() },
+      )
     })
   })
 
   describe('row interactions', () => {
     it('should pass row click to collectionService', async () => {
-      await usingAsync(new Injector(), async (injector) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-        const onRowClick = vi.fn()
-        const service = new CollectionService<TestEntry>({ onRowClick })
-        const findOptions = new ObservableValue<any>({})
-
-        service.data.setValue({
-          count: 1,
-          entries: [{ id: 1, name: 'Test' }],
-        })
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: (
-            <DataGrid<TestEntry, 'id' | 'name'>
-              columns={['id', 'name']}
-              collectionService={service}
-              findOptions={findOptions}
-              styles={{}}
-              headerComponents={{}}
-              rowComponents={{}}
-            />
-          ),
-        })
-
-        await sleepAsync(50)
+      const onRowClick = vi.fn()
+      await withTestGrid(
+        async ({ injector, service, findOptions }) => {
+          const rootElement = document.getElementById('root') as HTMLDivElement
+
+          service.data.setValue({
+            count: 1,
+            entries: [{ id: 1, name: 'Test' }],
+          })
+
+          initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: (
+              <DataGrid<TestEntry, 'id' | 'name'>
+                columns={['id', 'name']}
+                collectionService={service}
+                findOptions={findOptions}
+                styles={{}}
+                headerComponents={{}}
+                rowComponents={{}}
+              />
+            ),
+          })
 
-        const grid = document.querySelector('shade-data-grid')
-        const cell = grid?.querySelector('td') as HTMLTableCellElement
-        cell?.click()
+          await sleepAsync(50)
 
-        expect(onRowClick).toHaveBeenCalledWith({ id: 1, name: 'Test' })
+          const grid = document.querySelector('shade-data-grid')
+          const cell = grid?.querySelector('td') as HTMLTableCellElement
+          cell?.click()
 
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
-      })
+          expect(onRowClick).toHaveBeenCalledWith({ id: 1, name: 'Test' })
+        },
+        { createService: () => new CollectionService<TestEntry>({ onRowClick }) },
+      )
     })
 
     it('should pass row double click to collectionService', async () => {
-      await usingAsync(new Injector(), async (injector) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-        const onRowDoubleClick = vi.fn()
-        const service = new CollectionService<TestEntry>({ onRowDoubleClick })
-        const findOptions = new ObservableValue<any>({})
-
-        service.data.setValue({
-          count: 1,
-          entries: [{ id: 1, name: 'Test' }],
-        })
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: (
-            <DataGrid<TestEntry, 'id' | 'name'>
-              columns={['id', 'name']}
-              collectionService={service}
-              findOptions={findOptions}
-              styles={{}}
-              headerComponents={{}}
-              rowComponents={{}}
-            />
-          ),
-        })
-
-        await sleepAsync(50)
+      const onRowDoubleClick = vi.fn()
+      await withTestGrid(
+        async ({ injector, service, findOptions }) => {
+          const rootElement = document.getElementById('root') as HTMLDivElement
+
+          service.data.setValue({
+            count: 1,
+            entries: [{ id: 1, name: 'Test' }],
+          })
+
+          initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: (
+              <DataGrid<TestEntry, 'id' | 'name'>
+                columns={['id', 'name']}
+                collectionService={service}
+                findOptions={findOptions}
+                styles={{}}
+                headerComponents={{}}
+                rowComponents={{}}
+              />
+            ),
+          })
 
-        const grid = document.querySelector('shade-data-grid')
-        const cell = grid?.querySelector('td') as HTMLTableCellElement
-        const dblClickEvent = new MouseEvent('dblclick', { bubbles: true })
-        cell?.dispatchEvent(dblClickEvent)
+          await sleepAsync(50)
 
-        expect(onRowDoubleClick).toHaveBeenCalledWith({ id: 1, name: 'Test' })
+          const grid = document.querySelector('shade-data-grid')
+          const cell = grid?.querySelector('td') as HTMLTableCellElement
+          const dblClickEvent = new MouseEvent('dblclick', { bubbles: true })
+          cell?.dispatchEvent(dblClickEvent)
 
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
-      })
+          expect(onRowDoubleClick).toHaveBeenCalledWith({ id: 1, name: 'Test' })
+        },
+        { createService: () => new CollectionService<TestEntry>({ onRowDoubleClick }) },
+      )
     })
   })
 
   describe('keyboard listener cleanup', () => {
     it('should remove keyboard listener when component is disconnected', async () => {
-      await usingAsync(new Injector(), async (injector) => {
+      await withTestGrid(async ({ injector, service, findOptions }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const service = createTestService()
-        const findOptions = new ObservableValue<any>({})
 
         service.hasFocus.setValue(true)
         service.focusedEntry.setValue(service.data.getValue().entries[0])
@@ -955,9 +863,6 @@ describe('DataGrid', () => {
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
         expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
-
-        service[Symbol.dispose]()
-        findOptions[Symbol.dispose]()
       })
     })
   })

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from './badge.js'
 export * from './breadcrumb.js'
 export * from './button-group.js'
 export * from './button.js'
+export * from './cache-view.js'
 export * from './card.js'
 export * from './carousel.js'
 export * from './chip.js'