@furystack/shades-common-components 10.0.35 → 12.0.0

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

@@ -0,0 +1,586 @@
+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 { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { DataGridHeader, OrderButton } from './header.js'
+
+type TestItem = { id: number; name: string; email: string }
+
+describe('DataGridHeader', () => {
+  let originalAnimate: typeof Element.prototype.animate
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+
+    originalAnimate = Element.prototype.animate
+
+    Element.prototype.animate = vi.fn(() => {
+      const mockAnimation = {
+        onfinish: null as ((event: AnimationPlaybackEvent) => void) | null,
+        oncancel: null as ((event: AnimationPlaybackEvent) => void) | null,
+        cancel: vi.fn(),
+        play: vi.fn(),
+        pause: vi.fn(),
+        finish: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }
+
+      setTimeout(() => {
+        mockAnimation.onfinish?.({} as AnimationPlaybackEvent)
+      }, 0)
+
+      return mockAnimation as unknown as Animation
+    }) as typeof Element.prototype.animate
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    Element.prototype.animate = originalAnimate
+  })
+
+  const createFindOptions = (
+    options: Partial<FindOptions<TestItem, Array<keyof TestItem>>> = {},
+  ): ObservableValue<FindOptions<TestItem, Array<keyof TestItem>>> => {
+    return new ObservableValue<FindOptions<TestItem, Array<keyof TestItem>>>(options)
+  }
+
+  describe('rendering', () => {
+    it('should render with custom element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const header = document.querySelector('data-grid-header')
+        expect(header).not.toBeNull()
+      })
+    })
+
+    it('should render field name', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const header = document.querySelector('data-grid-header')
+        const fieldName = header?.querySelector('.header-field-name')
+        expect(fieldName?.textContent).toBe('name')
+      })
+    })
+
+    it('should render order button', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const orderButton = document.querySelector('data-grid-order-button')
+        expect(orderButton).not.toBeNull()
+      })
+    })
+
+    it('should render search button', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const searchButton = document.querySelector('data-grid-search-button')
+        expect(searchButton).not.toBeNull()
+      })
+    })
+
+    it('should render search form', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const searchForm = document.querySelector('data-grid-search-form')
+        expect(searchForm).not.toBeNull()
+      })
+    })
+  })
+
+  describe('OrderButton', () => {
+    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' } })
+
+        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 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)
+
+        const button = document.querySelector('data-grid-order-button')
+        expect(button?.querySelector('shade-icon')).not.toBeNull()
+      })
+    })
+
+    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()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const button = document.querySelector('data-grid-order-button')?.querySelector('button')
+        button?.click()
+
+        await sleepAsync(50)
+
+        const updatedOptions = findOptions.getValue()
+        expect(updatedOptions.order).toEqual({ name: 'ASC' })
+      })
+    })
+
+    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' } })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const button = document.querySelector('data-grid-order-button')?.querySelector('button')
+        button?.click()
+
+        await sleepAsync(50)
+
+        const updatedOptions = findOptions.getValue()
+        expect(updatedOptions.order).toEqual({ name: 'DESC' })
+      })
+    })
+
+    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' } })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <OrderButton field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const button = document.querySelector('data-grid-order-button')?.querySelector('button')
+        button?.click()
+
+        await sleepAsync(50)
+
+        const updatedOptions = findOptions.getValue()
+        expect(updatedOptions.order).toEqual({ name: 'ASC' })
+      })
+    })
+
+    it('should react to external findOptions changes', 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)
+
+        let button = document.querySelector('data-grid-order-button')
+        expect(button?.querySelector('shade-icon')).not.toBeNull()
+
+        findOptions.setValue({ order: { name: 'ASC' } })
+        await sleepAsync(50)
+
+        button = document.querySelector('data-grid-order-button')
+        expect(button?.querySelector('shade-icon')).not.toBeNull()
+      })
+    })
+  })
+
+  describe('SearchButton', () => {
+    it('should show inactive icon when no filter is set', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const searchButton = document.querySelector('data-grid-search-button')
+        expect(searchButton?.querySelector('shade-icon')).not.toBeNull()
+      })
+    })
+
+    it('should show active icon 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' } } })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const searchButton = document.querySelector('data-grid-search-button')
+        expect(searchButton?.querySelector('shade-icon')).not.toBeNull()
+      })
+    })
+
+    it('should show inactive icon when filter is set for different field', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions({ filter: { email: { $regex: 'test' } } })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const searchButton = document.querySelector('data-grid-search-button')
+        expect(searchButton?.querySelector('shade-icon')).not.toBeNull()
+      })
+    })
+  })
+
+  describe('SearchForm', () => {
+    it('should expand search form when search button is clicked', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const searchButton = document.querySelector('data-grid-search-button')?.querySelector('button')
+        searchButton?.click()
+
+        await sleepAsync(150)
+
+        const searchForm = document.querySelector('.search-form') as HTMLElement
+        expect(searchForm.style.display).toBe('flex')
+      })
+    })
+
+    it('should update findOptions when search is submitted', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        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 }))
+
+        const form = document.querySelector('.search-form') as HTMLFormElement
+        form.dispatchEvent(new Event('submit', { bubbles: true }))
+
+        await sleepAsync(50)
+
+        const updatedOptions = findOptions.getValue()
+        expect(updatedOptions.filter).toEqual({ name: { $regex: 'test-search' } })
+      })
+    })
+
+    it('should clear filter when clear button is clicked', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions({ filter: { name: { $regex: 'existing' } } })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        const searchButton = document.querySelector('data-grid-search-button')?.querySelector('button')
+        searchButton?.click()
+
+        await sleepAsync(150)
+
+        const clearButton = document.querySelector('.search-form button[type="reset"]') as HTMLButtonElement
+        clearButton?.click()
+
+        await sleepAsync(50)
+
+        const updatedOptions = findOptions.getValue()
+        expect(updatedOptions.filter?.name).toBeUndefined()
+      })
+    })
+
+    it('should preserve filters for other fields when submitting search', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions({ filter: { email: { $regex: 'existing' } } })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        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 }))
+
+        const form = document.querySelector('.search-form') as HTMLFormElement
+        form.dispatchEvent(new Event('submit', { bubbles: true }))
+
+        await sleepAsync(50)
+
+        const updatedOptions = findOptions.getValue()
+        expect(updatedOptions.filter).toEqual({
+          email: { $regex: 'existing' },
+          name: { $regex: 'new-search' },
+        })
+      })
+    })
+
+    it('should preserve other findOptions properties when updating filter', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions({
+          order: { id: 'ASC' },
+          top: 10,
+          skip: 20,
+        })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        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 = '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' } })
+      })
+    })
+
+    it('should show current filter value in search input', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions({ filter: { name: { $regex: 'current-filter' } } })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        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
+        expect(input.value).toBe('current-filter')
+      })
+    })
+  })
+
+  describe('integration', () => {
+    it('should support both sorting and filtering simultaneously', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const findOptions = createFindOptions()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DataGridHeader field="name" findOptions={findOptions} />,
+        })
+
+        await sleepAsync(50)
+
+        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)
+
+        const input = document.querySelector('.search-form input') as HTMLInputElement
+        input.value = 'filter-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({ name: 'ASC' })
+        expect(updatedOptions.filter).toEqual({ name: { $regex: 'filter-value' } })
+      })
+    })
+  })
+})