@furystack/shades-common-components 11.0.0 → 12.0.1

package/esm/components/data-grid/data-grid.spec.js

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject';
 import { createComponent, initializeShadeRoot } from '@furystack/shades';
-import { ObservableValue, sleepAsync } from '@furystack/utils';
+import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { CollectionService } from '../../services/collection-service.js';
 import { DataGrid } from './data-grid.js';
@@ -23,521 +23,455 @@ describe('DataGrid', () => {
         });
         return service;
     };
+    const withTestGrid = async (fn, opts) => {
+        await usingAsync(new Injector(), async (injector) => {
+            await usingAsync(opts?.createService?.() ?? createTestService(), async (service) => {
+                await usingAsync(new ObservableValue({}), async (findOptions) => {
+                    await fn({ injector, service, findOptions });
+                });
+            });
+        });
+    };
     describe('rendering', () => {
         it('should render with columns', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                expect(grid).not.toBeNull();
+                const headers = grid?.querySelectorAll('th');
+                expect(headers?.length).toBe(2);
             });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            expect(grid).not.toBeNull();
-            const headers = grid?.querySelectorAll('th');
-            expect(headers?.length).toBe(2);
-            service[Symbol.dispose]();
-            findOptions[Symbol.dispose]();
         });
         it('should render table structure', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                const table = grid?.querySelector('table');
+                const thead = grid?.querySelector('thead');
+                const tbody = grid?.querySelector('tbody');
+                expect(table).not.toBeNull();
+                expect(thead).not.toBeNull();
+                expect(tbody).not.toBeNull();
             });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            const table = grid?.querySelector('table');
-            const thead = grid?.querySelector('thead');
-            const tbody = grid?.querySelector('tbody');
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {
-                        id: () => createComponent("span", { "data-testid": "custom-header-id" }, "Custom ID Header"),
-                    }, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {
+                            id: () => createComponent("span", { "data-testid": "custom-header-id" }, "Custom ID Header"),
+                        }, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                const customHeader = grid?.querySelector('[data-testid="custom-header-id"]');
+                expect(customHeader).not.toBeNull();
+                expect(customHeader?.textContent).toBe('Custom ID Header');
             });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {
-                        default: (name) => createComponent("span", { "data-testid": `default-header-${name}` },
-                            "Default: ",
-                            name),
-                    }, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {
+                            default: (name) => createComponent("span", { "data-testid": `default-header-${name}` },
+                                "Default: ",
+                                name),
+                        }, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                const defaultHeaderId = grid?.querySelector('[data-testid="default-header-id"]');
+                const defaultHeaderName = grid?.querySelector('[data-testid="default-header-name"]');
+                expect(defaultHeaderId?.textContent).toBe('Default: id');
+                expect(defaultHeaderName?.textContent).toBe('Default: name');
             });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            const defaultHeaderId = grid?.querySelector('[data-testid="default-header-id"]');
-            const defaultHeaderName = grid?.querySelector('[data-testid="default-header-name"]');
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                const defaultHeaders = grid?.querySelectorAll('data-grid-header');
+                expect(defaultHeaders?.length).toBe(2);
             });
-            await sleepAsync(50);
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            expect(service.hasFocus.getValue()).toBe(false);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                expect(service.hasFocus.getValue()).toBe(false);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                const wrapper = grid?.querySelector('.shade-grid-wrapper');
+                wrapper?.click();
+                expect(service.hasFocus.getValue()).toBe(true);
             });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            const wrapper = grid?.querySelector('.shade-grid-wrapper');
-            wrapper?.click();
-            expect(service.hasFocus.getValue()).toBe(true);
-            service[Symbol.dispose]();
-            findOptions[Symbol.dispose]();
         });
         it('should lose focus on click outside', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(createComponent, null,
-                    createComponent("div", { "data-testid": "outside" }, "Outside"),
-                    createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} }))),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(createComponent, null,
+                        createComponent("div", { "data-testid": "outside" }, "Outside"),
+                        createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} }))),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                const wrapper = grid?.querySelector('.shade-grid-wrapper');
+                wrapper?.click();
+                expect(service.hasFocus.getValue()).toBe(true);
+                const outside = document.querySelector('[data-testid="outside"]');
+                outside?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                expect(service.hasFocus.getValue()).toBe(false);
             });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            const wrapper = grid?.querySelector('.shade-grid-wrapper');
-            wrapper?.click();
-            expect(service.hasFocus.getValue()).toBe(true);
-            const outside = document.querySelector('[data-testid="outside"]');
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            service.hasFocus.setValue(true);
-            service.focusedEntry.setValue(service.data.getValue().entries[0]);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                service.hasFocus.setValue(true);
+                service.focusedEntry.setValue(service.data.getValue().entries[0]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.focusedEntry.getValue()).toEqual({ id: 2, name: 'Second' });
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            service.hasFocus.setValue(true);
-            service.focusedEntry.setValue(service.data.getValue().entries[1]);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                service.hasFocus.setValue(true);
+                service.focusedEntry.setValue(service.data.getValue().entries[1]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' });
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true });
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            service.hasFocus.setValue(true);
-            service.focusedEntry.setValue(service.data.getValue().entries[2]);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                service.hasFocus.setValue(true);
+                service.focusedEntry.setValue(service.data.getValue().entries[2]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: 'Home', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' });
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: 'Home', bubbles: true });
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            service.hasFocus.setValue(true);
-            service.focusedEntry.setValue(service.data.getValue().entries[0]);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                service.hasFocus.setValue(true);
+                service.focusedEntry.setValue(service.data.getValue().entries[0]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: 'End', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.focusedEntry.getValue()).toEqual({ id: 3, name: 'Third' });
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: 'End', bubbles: true });
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            service.hasFocus.setValue(true);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                service.hasFocus.setValue(true);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.hasFocus.getValue()).toBe(false);
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true });
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            const { entries } = service.data.getValue();
-            service.hasFocus.setValue(true);
-            service.selection.setValue([entries[0], entries[1]]);
-            service.searchTerm.setValue('test');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                const { entries } = service.data.getValue();
+                service.hasFocus.setValue(true);
+                service.selection.setValue([entries[0], entries[1]]);
+                service.searchTerm.setValue('test');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.selection.getValue()).toEqual([]);
+                expect(service.searchTerm.getValue()).toBe('');
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
-            window.dispatchEvent(keydownEvent);
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            const { entries } = service.data.getValue();
-            service.hasFocus.setValue(true);
-            service.focusedEntry.setValue(entries[0]);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                const { entries } = service.data.getValue();
+                service.hasFocus.setValue(true);
+                service.focusedEntry.setValue(entries[0]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: ' ', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.selection.getValue()).toContain(entries[0]);
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+                expect(service.selection.getValue()).not.toContain(entries[0]);
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: ' ', bubbles: true });
-            window.dispatchEvent(keydownEvent);
-            expect(service.selection.getValue()).toContain(entries[0]);
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            service.hasFocus.setValue(true);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                service.hasFocus.setValue(true);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: '+', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.selection.getValue().length).toBe(3);
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: '+', bubbles: true });
-            window.dispatchEvent(keydownEvent);
-            expect(service.selection.getValue().length).toBe(3);
-            service[Symbol.dispose]();
-            findOptions[Symbol.dispose]();
         });
         it('should handle - to deselect all entries', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            const { entries } = service.data.getValue();
-            service.hasFocus.setValue(true);
-            service.selection.setValue([...entries]);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                const { entries } = service.data.getValue();
+                service.hasFocus.setValue(true);
+                service.selection.setValue([...entries]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: '-', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.selection.getValue().length).toBe(0);
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: '-', bubbles: true });
-            window.dispatchEvent(keydownEvent);
-            expect(service.selection.getValue().length).toBe(0);
-            service[Symbol.dispose]();
-            findOptions[Symbol.dispose]();
         });
         it('should handle * to invert selection', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            const { entries } = service.data.getValue();
-            service.hasFocus.setValue(true);
-            service.selection.setValue([entries[0]]);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                const { entries } = service.data.getValue();
+                service.hasFocus.setValue(true);
+                service.selection.setValue([entries[0]]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: '*', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                const selection = service.selection.getValue();
+                expect(selection).not.toContain(entries[0]);
+                expect(selection).toContain(entries[1]);
+                expect(selection).toContain(entries[2]);
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: '*', bubbles: true });
-            window.dispatchEvent(keydownEvent);
-            const selection = service.selection.getValue();
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            service.hasFocus.setValue(false);
-            service.focusedEntry.setValue(service.data.getValue().entries[0]);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                service.hasFocus.setValue(false);
+                service.focusedEntry.setValue(service.data.getValue().entries[0]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' });
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            const { entries } = service.data.getValue();
-            service.hasFocus.setValue(true);
-            service.focusedEntry.setValue(entries[0]);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                const { entries } = service.data.getValue();
+                service.hasFocus.setValue(true);
+                service.focusedEntry.setValue(entries[0]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const keydownEvent = new KeyboardEvent('keydown', { key: 'Insert', bubbles: true });
+                window.dispatchEvent(keydownEvent);
+                expect(service.selection.getValue()).toContain(entries[0]);
+                expect(service.focusedEntry.getValue()).toEqual(entries[1]);
             });
-            await sleepAsync(50);
-            const keydownEvent = new KeyboardEvent('keydown', { key: 'Insert', bubbles: true });
-            window.dispatchEvent(keydownEvent);
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {
-                        wrapper: { backgroundColor: 'red' },
-                    }, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {
+                            wrapper: { backgroundColor: 'red' },
+                        }, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                expect(grid?.style.backgroundColor).toBe('red');
             });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            expect(grid?.style.backgroundColor).toBe('red');
-            service[Symbol.dispose]();
-            findOptions[Symbol.dispose]();
         });
         it('should apply header styles when provided', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {
-                        header: { color: 'blue' },
-                    }, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {
+                            header: { color: 'blue' },
+                        }, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                const headers = grid?.querySelectorAll('th');
+                expect(headers?.[0]?.style.color).toBe('blue');
             });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            const headers = grid?.querySelectorAll('th');
-            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 () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = new CollectionService();
-            const findOptions = new ObservableValue({});
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {}, emptyComponent: createComponent("div", { "data-testid": "empty-state" }, "No data available") })),
-            });
-            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');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {}, emptyComponent: createComponent("div", { "data-testid": "empty-state" }, "No data available") })),
+                });
+                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() });
         });
     });
     describe('row interactions', () => {
         it('should pass row click to collectionService', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
             const onRowClick = vi.fn();
-            const service = new CollectionService({ onRowClick });
-            const findOptions = new ObservableValue({});
-            service.data.setValue({
-                count: 1,
-                entries: [{ id: 1, name: 'Test' }],
-            });
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
-            });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            const cell = grid?.querySelector('td');
-            cell?.click();
-            expect(onRowClick).toHaveBeenCalledWith({ id: 1, name: 'Test' });
-            service[Symbol.dispose]();
-            findOptions[Symbol.dispose]();
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                service.data.setValue({
+                    count: 1,
+                    entries: [{ id: 1, name: 'Test' }],
+                });
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                const cell = grid?.querySelector('td');
+                cell?.click();
+                expect(onRowClick).toHaveBeenCalledWith({ id: 1, name: 'Test' });
+            }, { createService: () => new CollectionService({ onRowClick }) });
         });
         it('should pass row double click to collectionService', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
             const onRowDoubleClick = vi.fn();
-            const service = new CollectionService({ onRowDoubleClick });
-            const findOptions = new ObservableValue({});
-            service.data.setValue({
-                count: 1,
-                entries: [{ id: 1, name: 'Test' }],
-            });
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
-            });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            const cell = grid?.querySelector('td');
-            const dblClickEvent = new MouseEvent('dblclick', { bubbles: true });
-            cell?.dispatchEvent(dblClickEvent);
-            expect(onRowDoubleClick).toHaveBeenCalledWith({ id: 1, name: 'Test' });
-            service[Symbol.dispose]();
-            findOptions[Symbol.dispose]();
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                service.data.setValue({
+                    count: 1,
+                    entries: [{ id: 1, name: 'Test' }],
+                });
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                const cell = grid?.querySelector('td');
+                const dblClickEvent = new MouseEvent('dblclick', { bubbles: true });
+                cell?.dispatchEvent(dblClickEvent);
+                expect(onRowDoubleClick).toHaveBeenCalledWith({ id: 1, name: 'Test' });
+            }, { createService: () => new CollectionService({ onRowDoubleClick }) });
         });
     });
     describe('keyboard listener cleanup', () => {
         it('should remove keyboard listener when component is disconnected', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const service = createTestService();
-            const findOptions = new ObservableValue({});
-            service.hasFocus.setValue(true);
-            service.focusedEntry.setValue(service.data.getValue().entries[0]);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+            await withTestGrid(async ({ injector, service, findOptions }) => {
+                const rootElement = document.getElementById('root');
+                service.hasFocus.setValue(true);
+                service.focusedEntry.setValue(service.data.getValue().entries[0]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                });
+                await sleepAsync(50);
+                const grid = document.querySelector('shade-data-grid');
+                grid.remove();
+                await sleepAsync(10);
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' });
             });
-            await sleepAsync(50);
-            const grid = document.querySelector('shade-data-grid');
-            grid.remove();
-            await sleepAsync(10);
-            window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-            expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' });
-            service[Symbol.dispose]();
-            findOptions[Symbol.dispose]();
         });
     });
 });