@furystack/shades-common-components 12.4.0 → 12.5.0

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

@@ -1,8 +1,9 @@
 import type { FindOptions } from '@furystack/core'
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { FilterableFindOptions } from './data-grid.js'
 import { DataGridHeader, OrderButton } from './header.js'
 
 type TestItem = { id: number; name: string; email: string }
@@ -46,6 +47,12 @@ describe('DataGridHeader', () => {
     return new ObservableValue<FindOptions<TestItem, Array<keyof TestItem>>>(options)
   }
 
+  const createFilterableFindOptions = (
+    options: Partial<FilterableFindOptions> = {},
+  ): ObservableValue<FilterableFindOptions> => {
+    return new ObservableValue<FilterableFindOptions>(options)
+  }
+
   describe('rendering', () => {
     it('should render with custom element', async () => {
       await usingAsync(new Injector(), async (injector) => {
@@ -58,7 +65,7 @@ describe('DataGridHeader', () => {
           jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const header = document.querySelector('data-grid-header')
         expect(header).not.toBeNull()
@@ -76,7 +83,7 @@ describe('DataGridHeader', () => {
           jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const header = document.querySelector('data-grid-header')
         const fieldName = header?.querySelector('.header-field-name')
@@ -95,14 +102,14 @@ describe('DataGridHeader', () => {
           jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const orderButton = document.querySelector('data-grid-order-button')
         expect(orderButton).not.toBeNull()
       })
     })
 
-    it('should render search button', async () => {
+    it('should not render filter button when no filterConfig is provided', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const findOptions = createFindOptions()
@@ -113,14 +120,14 @@ describe('DataGridHeader', () => {
           jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const searchButton = document.querySelector('data-grid-search-button')
-        expect(searchButton).not.toBeNull()
+        const filterButton = document.querySelector('data-grid-filter-button')
+        expect(filterButton).toBeNull()
       })
     })
 
-    it('should render search form', async () => {
+    it('should render filter button when filterConfig is provided', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const findOptions = createFindOptions()
@@ -128,13 +135,13 @@ describe('DataGridHeader', () => {
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const searchForm = document.querySelector('data-grid-search-form')
-        expect(searchForm).not.toBeNull()
+        const filterButton = document.querySelector('data-grid-filter-button')
+        expect(filterButton).not.toBeNull()
       })
     })
   })
@@ -143,43 +150,7 @@ describe('DataGridHeader', () => {
     it('should show neutral icon when no order is set', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
-        })
-
-        await sleepAsync(50)
-
-        const button = document.querySelector('data-grid-order-button')
-        expect(button?.querySelector('shade-icon')).not.toBeNull()
-      })
-    })
-
-    it('should show descending icon when ASC order is set for field', async () => {
-      await usingAsync(new Injector(), async (injector) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ order: { name: 'ASC' } })
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
-        })
-
-        await sleepAsync(50)
-
-        const button = document.querySelector('data-grid-order-button')
-        expect(button?.querySelector('shade-icon')).not.toBeNull()
-      })
-    })
-
-    it('should show ascending icon when DESC order is set for field', async () => {
-      await usingAsync(new Injector(), async (injector) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ order: { name: 'DESC' } })
+        const findOptions = createFilterableFindOptions()
 
         initializeShadeRoot({
           injector,
@@ -187,25 +158,7 @@ describe('DataGridHeader', () => {
           jsxElement: <OrderButton field="name" findOptions={findOptions} />,
         })
 
-        await sleepAsync(50)
-
-        const button = document.querySelector('data-grid-order-button')
-        expect(button?.querySelector('shade-icon')).not.toBeNull()
-      })
-    })
-
-    it('should show neutral icon when order is set for different field', async () => {
-      await usingAsync(new Injector(), async (injector) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ order: { id: 'ASC' } })
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
-        })
-
-        await sleepAsync(50)
+        await flushUpdates()
 
         const button = document.querySelector('data-grid-order-button')
         expect(button?.querySelector('shade-icon')).not.toBeNull()
@@ -215,7 +168,7 @@ describe('DataGridHeader', () => {
     it('should toggle order to ASC when clicking on unsorted field', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const findOptions = createFilterableFindOptions()
 
         initializeShadeRoot({
           injector,
@@ -223,12 +176,12 @@ describe('DataGridHeader', () => {
           jsxElement: <OrderButton field="name" findOptions={findOptions} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const button = document.querySelector('data-grid-order-button')?.querySelector('button')
         button?.click()
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const updatedOptions = findOptions.getValue()
         expect(updatedOptions.order).toEqual({ name: 'ASC' })
@@ -238,7 +191,7 @@ describe('DataGridHeader', () => {
     it('should toggle order from ASC to DESC when clicking', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ order: { name: 'ASC' } })
+        const findOptions = createFilterableFindOptions({ order: { name: 'ASC' } })
 
         initializeShadeRoot({
           injector,
@@ -246,12 +199,12 @@ describe('DataGridHeader', () => {
           jsxElement: <OrderButton field="name" findOptions={findOptions} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const button = document.querySelector('data-grid-order-button')?.querySelector('button')
         button?.click()
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const updatedOptions = findOptions.getValue()
         expect(updatedOptions.order).toEqual({ name: 'DESC' })
@@ -261,7 +214,7 @@ describe('DataGridHeader', () => {
     it('should toggle order from DESC to ASC when clicking', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ order: { name: 'DESC' } })
+        const findOptions = createFilterableFindOptions({ order: { name: 'DESC' } })
 
         initializeShadeRoot({
           injector,
@@ -269,12 +222,12 @@ describe('DataGridHeader', () => {
           jsxElement: <OrderButton field="name" findOptions={findOptions} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const button = document.querySelector('data-grid-order-button')?.querySelector('button')
         button?.click()
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const updatedOptions = findOptions.getValue()
         expect(updatedOptions.order).toEqual({ name: 'ASC' })
@@ -284,7 +237,7 @@ describe('DataGridHeader', () => {
     it('should react to external findOptions changes', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions()
+        const findOptions = createFilterableFindOptions()
 
         initializeShadeRoot({
           injector,
@@ -292,13 +245,13 @@ describe('DataGridHeader', () => {
           jsxElement: <OrderButton field="name" findOptions={findOptions} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         let button = document.querySelector('data-grid-order-button')
         expect(button?.querySelector('shade-icon')).not.toBeNull()
 
         findOptions.setValue({ order: { name: 'ASC' } })
-        await sleepAsync(50)
+        await flushUpdates()
 
         button = document.querySelector('data-grid-order-button')
         expect(button?.querySelector('shade-icon')).not.toBeNull()
@@ -306,8 +259,8 @@ describe('DataGridHeader', () => {
     })
   })
 
-  describe('SearchButton', () => {
-    it('should show inactive icon when no filter is set', async () => {
+  describe('FilterButton', () => {
+    it('should show inactive state when no filter is set', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const findOptions = createFindOptions()
@@ -315,17 +268,17 @@ describe('DataGridHeader', () => {
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const searchButton = document.querySelector('data-grid-search-button')
-        expect(searchButton?.querySelector('shade-icon')).not.toBeNull()
+        const filterButton = document.querySelector('data-grid-filter-button')
+        expect(filterButton?.querySelector('shade-icon')).not.toBeNull()
       })
     })
 
-    it('should show active icon when filter is set for field', async () => {
+    it('should show active state when filter is set for field', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const findOptions = createFindOptions({ filter: { name: { $regex: 'test' } } })
@@ -333,37 +286,42 @@ describe('DataGridHeader', () => {
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const searchButton = document.querySelector('data-grid-search-button')
-        expect(searchButton?.querySelector('shade-icon')).not.toBeNull()
+        const filterButton = document.querySelector('data-grid-filter-button')
+        expect(filterButton?.querySelector('shade-icon')).not.toBeNull()
       })
     })
 
-    it('should show inactive icon when filter is set for different field', async () => {
+    it('should transition from active to inactive when filter is externally cleared', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ filter: { email: { $regex: 'test' } } })
+        const findOptions = createFindOptions({ filter: { name: { $regex: 'test' } } })
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
         })
 
-        await sleepAsync(50)
+        // Parent renders, then child FilterButton renders
+        await flushUpdates()
 
-        const searchButton = document.querySelector('data-grid-search-button')
-        expect(searchButton?.querySelector('shade-icon')).not.toBeNull()
+        const filterButton = document.querySelector('data-grid-filter-button button')
+        expect(filterButton?.hasAttribute('data-selected')).toBe(true)
+
+        findOptions.setValue({ filter: {} })
+        await flushUpdates()
+
+        const updatedButton = document.querySelector('data-grid-filter-button button')
+        expect(updatedButton?.hasAttribute('data-selected')).toBe(false)
       })
     })
-  })
 
-  describe('SearchForm', () => {
-    it('should expand search form when search button is clicked', async () => {
+    it('should open filter dropdown when clicked', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const findOptions = createFindOptions()
@@ -371,22 +329,24 @@ describe('DataGridHeader', () => {
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const searchButton = document.querySelector('data-grid-search-button')?.querySelector('button')
-        searchButton?.click()
+        const filterButton = document.querySelector('data-grid-filter-button')?.querySelector('button')
+        filterButton?.click()
 
-        await sleepAsync(150)
+        await flushUpdates()
 
-        const searchForm = document.querySelector('.search-form') as HTMLElement
-        expect(searchForm.style.display).toBe('flex')
+        const dropdown = document.querySelector('data-grid-filter-dropdown')
+        expect(dropdown).not.toBeNull()
       })
     })
+  })
 
-    it('should update findOptions when search is submitted', async () => {
+  describe('filter type routing', () => {
+    it('should render StringFilter for string filterConfig', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const findOptions = createFindOptions()
@@ -394,152 +354,116 @@ describe('DataGridHeader', () => {
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
         })
 
-        await sleepAsync(50)
-
-        const searchButton = document.querySelector('data-grid-search-button')?.querySelector('button')
-        searchButton?.click()
-
-        await sleepAsync(150)
-
-        const input = document.querySelector('.search-form input') as HTMLInputElement
-        input.value = 'test-search'
-        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await flushUpdates()
 
-        const form = document.querySelector('.search-form') as HTMLFormElement
-        form.dispatchEvent(new Event('submit', { bubbles: true }))
+        const filterButton = document.querySelector('data-grid-filter-button')?.querySelector('button')
+        filterButton?.click()
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const updatedOptions = findOptions.getValue()
-        expect(updatedOptions.filter).toEqual({ name: { $regex: 'test-search' } })
+        const stringFilter = document.querySelector('data-grid-string-filter')
+        expect(stringFilter).not.toBeNull()
       })
     })
 
-    it('should clear filter when clear button is clicked', async () => {
+    it('should render NumberFilter for number filterConfig', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ filter: { name: { $regex: 'existing' } } })
+        const findOptions = createFindOptions()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="id" findOptions={findOptions} filterConfig={{ type: 'number' }} />,
         })
 
-        await sleepAsync(50)
-
-        const searchButton = document.querySelector('data-grid-search-button')?.querySelector('button')
-        searchButton?.click()
-
-        await sleepAsync(150)
+        await flushUpdates()
 
-        const clearButton = document.querySelector('.search-form button[type="reset"]') as HTMLButtonElement
-        clearButton?.click()
+        const filterButton = document.querySelector('data-grid-filter-button')?.querySelector('button')
+        filterButton?.click()
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const updatedOptions = findOptions.getValue()
-        expect(updatedOptions.filter?.name).toBeUndefined()
+        const numberFilter = document.querySelector('data-grid-number-filter')
+        expect(numberFilter).not.toBeNull()
       })
     })
 
-    it('should preserve filters for other fields when submitting search', async () => {
+    it('should render BooleanFilter for boolean filterConfig', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ filter: { email: { $regex: 'existing' } } })
+        const findOptions = createFindOptions()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'boolean' }} />,
         })
 
-        await sleepAsync(50)
-
-        const searchButton = document.querySelector('data-grid-search-button')?.querySelector('button')
-        searchButton?.click()
-
-        await sleepAsync(150)
-
-        const input = document.querySelector('.search-form input') as HTMLInputElement
-        input.value = 'new-search'
-        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await flushUpdates()
 
-        const form = document.querySelector('.search-form') as HTMLFormElement
-        form.dispatchEvent(new Event('submit', { bubbles: true }))
+        const filterButton = document.querySelector('data-grid-filter-button')?.querySelector('button')
+        filterButton?.click()
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const updatedOptions = findOptions.getValue()
-        expect(updatedOptions.filter).toEqual({
-          email: { $regex: 'existing' },
-          name: { $regex: 'new-search' },
-        })
+        const booleanFilter = document.querySelector('data-grid-boolean-filter')
+        expect(booleanFilter).not.toBeNull()
       })
     })
 
-    it('should preserve other findOptions properties when updating filter', async () => {
+    it('should render EnumFilter for enum filterConfig', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({
-          order: { id: 'ASC' },
-          top: 10,
-          skip: 20,
-        })
+        const findOptions = createFindOptions()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: (
+            <DataGridHeader
+              field="name"
+              findOptions={findOptions}
+              filterConfig={{ type: 'enum', values: [{ label: 'A', value: 'a' }] }}
+            />
+          ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const searchButton = document.querySelector('data-grid-search-button')?.querySelector('button')
-        searchButton?.click()
+        const filterButton = document.querySelector('data-grid-filter-button')?.querySelector('button')
+        filterButton?.click()
 
-        await sleepAsync(150)
+        await flushUpdates()
 
-        const input = document.querySelector('.search-form input') as HTMLInputElement
-        input.value = 'search-value'
-        input.dispatchEvent(new Event('input', { bubbles: true }))
-
-        const form = document.querySelector('.search-form') as HTMLFormElement
-        form.dispatchEvent(new Event('submit', { bubbles: true }))
-
-        await sleepAsync(50)
-
-        const updatedOptions = findOptions.getValue()
-        expect(updatedOptions.order).toEqual({ id: 'ASC' })
-        expect(updatedOptions.top).toBe(10)
-        expect(updatedOptions.skip).toBe(20)
-        expect(updatedOptions.filter).toEqual({ name: { $regex: 'search-value' } })
+        const enumFilter = document.querySelector('data-grid-enum-filter')
+        expect(enumFilter).not.toBeNull()
       })
     })
 
-    it('should show current filter value in search input', async () => {
+    it('should render DateFilter for date filterConfig', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const findOptions = createFindOptions({ filter: { name: { $regex: 'current-filter' } } })
+        const findOptions = createFindOptions()
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'date' }} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const searchButton = document.querySelector('data-grid-search-button')?.querySelector('button')
-        searchButton?.click()
+        const filterButton = document.querySelector('data-grid-filter-button')?.querySelector('button')
+        filterButton?.click()
 
-        await sleepAsync(150)
+        await flushUpdates()
 
-        const input = document.querySelector('.search-form input') as HTMLInputElement
-        expect(input.value).toBe('current-filter')
+        const dateFilter = document.querySelector('data-grid-date-filter')
+        expect(dateFilter).not.toBeNull()
       })
     })
   })
@@ -553,33 +477,25 @@ describe('DataGridHeader', () => {
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} filterConfig={{ type: 'string' }} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const orderButton = document.querySelector('data-grid-order-button')?.querySelector('button')
         orderButton?.click()
 
-        await sleepAsync(50)
-
-        const searchButton = document.querySelector('data-grid-search-button')?.querySelector('button')
-        searchButton?.click()
-
-        await sleepAsync(150)
+        await flushUpdates()
 
-        const input = document.querySelector('.search-form input') as HTMLInputElement
-        input.value = 'filter-value'
-        input.dispatchEvent(new Event('input', { bubbles: true }))
+        expect(findOptions.getValue().order).toEqual({ name: 'ASC' })
 
-        const form = document.querySelector('.search-form') as HTMLFormElement
-        form.dispatchEvent(new Event('submit', { bubbles: true }))
+        const filterButton = document.querySelector('data-grid-filter-button')?.querySelector('button')
+        filterButton?.click()
 
-        await sleepAsync(50)
+        await flushUpdates()
 
-        const updatedOptions = findOptions.getValue()
-        expect(updatedOptions.order).toEqual({ name: 'ASC' })
-        expect(updatedOptions.filter).toEqual({ name: { $regex: 'filter-value' } })
+        const dropdown = document.querySelector('data-grid-filter-dropdown')
+        expect(dropdown).not.toBeNull()
       })
     })
   })