@furystack/shades-common-components 11.0.0 → 12.0.1

package/esm/components/suggest/index.spec.js

@@ -1,5 +1,6 @@
 import { Injector } from '@furystack/inject';
 import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { usingAsync } from '@furystack/utils';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Suggest } from './index.js';
 describe('Suggest', () => {
@@ -54,461 +55,484 @@ describe('Suggest', () => {
     });
     describe('rendering', () => {
         it('should render with shadow DOM', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                expect(suggest).not.toBeNull();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            expect(suggest).not.toBeNull();
         });
         it('should render the default prefix', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "Search:", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "Search:", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const termIcon = suggest?.querySelector('.term-icon');
+                expect(termIcon?.textContent).toBe('Search:');
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const termIcon = suggest?.querySelector('.term-icon');
-            expect(termIcon?.textContent).toBe('Search:');
         });
         it('should render the input container', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const inputContainer = suggest?.querySelector('.input-container');
+                expect(inputContainer).not.toBeNull();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const inputContainer = suggest?.querySelector('.input-container');
-            expect(inputContainer).not.toBeNull();
         });
         it('should apply custom styles', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion, style: { backgroundColor: 'red' } })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion, style: { backgroundColor: 'red' } })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const inputContainer = suggest?.querySelector('.input-container');
+                expect(inputContainer?.style.backgroundColor).toBe('red');
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const inputContainer = suggest?.querySelector('.input-container');
-            expect(inputContainer?.style.backgroundColor).toBe('red');
         });
     });
     describe('keyboard navigation', () => {
         it('should handle ArrowDown to move selection down', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                input.value = 'test';
+                const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
+                Object.defineProperty(keyupEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(keyupEvent);
+                await advanceTimers(300);
+                const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true });
+                Object.defineProperty(arrowDownEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(arrowDownEvent);
+                await advanceTimers(50);
+                const selectedItems = suggest?.querySelectorAll('.suggestion-item.selected');
+                expect(selectedItems?.length).toBeGreaterThanOrEqual(0);
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            input.value = 'test';
-            const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
-            Object.defineProperty(keyupEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(keyupEvent);
-            await advanceTimers(300);
-            const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true });
-            Object.defineProperty(arrowDownEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(arrowDownEvent);
-            await advanceTimers(50);
-            const selectedItems = suggest?.querySelectorAll('.suggestion-item.selected');
-            expect(selectedItems?.length).toBeGreaterThanOrEqual(0);
         });
         it('should handle ArrowUp to move selection up', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                input.value = 'test';
+                const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
+                Object.defineProperty(keyupEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(keyupEvent);
+                await advanceTimers(300);
+                const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true });
+                Object.defineProperty(arrowDownEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(arrowDownEvent);
+                wrapper?.dispatchEvent(arrowDownEvent);
+                const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true });
+                Object.defineProperty(arrowUpEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(arrowUpEvent);
+                await advanceTimers(50);
+                expect(suggest).not.toBeNull();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            input.value = 'test';
-            const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
-            Object.defineProperty(keyupEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(keyupEvent);
-            await advanceTimers(300);
-            const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true });
-            Object.defineProperty(arrowDownEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(arrowDownEvent);
-            wrapper?.dispatchEvent(arrowDownEvent);
-            const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true });
-            Object.defineProperty(arrowUpEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(arrowUpEvent);
-            await advanceTimers(50);
-            expect(suggest).not.toBeNull();
         });
         it('should handle Enter to select current suggestion', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                input.value = 'First';
+                const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
+                Object.defineProperty(keyupEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(keyupEvent);
+                await advanceTimers(300);
+                const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true });
+                Object.defineProperty(enterEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(enterEvent);
+                await advanceTimers(50);
+                expect(onSelectSuggestion).toHaveBeenCalled();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            input.value = 'First';
-            const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
-            Object.defineProperty(keyupEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(keyupEvent);
-            await advanceTimers(300);
-            const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true });
-            Object.defineProperty(enterEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(enterEvent);
-            await advanceTimers(50);
-            expect(onSelectSuggestion).toHaveBeenCalled();
         });
         it('should prevent default on Enter key', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                input.value = 'First';
+                const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
+                Object.defineProperty(keyupEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(keyupEvent);
+                await advanceTimers(300);
+                const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true, cancelable: true });
+                Object.defineProperty(enterEvent, 'target', { value: input });
+                const preventDefaultSpy = vi.spyOn(enterEvent, 'preventDefault');
+                wrapper?.dispatchEvent(enterEvent);
+                expect(preventDefaultSpy).toHaveBeenCalled();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            input.value = 'First';
-            const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
-            Object.defineProperty(keyupEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(keyupEvent);
-            await advanceTimers(300);
-            const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true, cancelable: true });
-            Object.defineProperty(enterEvent, 'target', { value: input });
-            const preventDefaultSpy = vi.spyOn(enterEvent, 'preventDefault');
-            wrapper?.dispatchEvent(enterEvent);
-            expect(preventDefaultSpy).toHaveBeenCalled();
         });
         it('should prevent default on ArrowUp key', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true, cancelable: true });
+                Object.defineProperty(arrowUpEvent, 'target', { value: input });
+                const preventDefaultSpy = vi.spyOn(arrowUpEvent, 'preventDefault');
+                wrapper?.dispatchEvent(arrowUpEvent);
+                expect(preventDefaultSpy).toHaveBeenCalled();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true, cancelable: true });
-            Object.defineProperty(arrowUpEvent, 'target', { value: input });
-            const preventDefaultSpy = vi.spyOn(arrowUpEvent, 'preventDefault');
-            wrapper?.dispatchEvent(arrowUpEvent);
-            expect(preventDefaultSpy).toHaveBeenCalled();
         });
         it('should prevent default on ArrowDown key', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true, cancelable: true });
+                Object.defineProperty(arrowDownEvent, 'target', { value: input });
+                const preventDefaultSpy = vi.spyOn(arrowDownEvent, 'preventDefault');
+                wrapper?.dispatchEvent(arrowDownEvent);
+                expect(preventDefaultSpy).toHaveBeenCalled();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true, cancelable: true });
-            Object.defineProperty(arrowDownEvent, 'target', { value: input });
-            const preventDefaultSpy = vi.spyOn(arrowDownEvent, 'preventDefault');
-            wrapper?.dispatchEvent(arrowDownEvent);
-            expect(preventDefaultSpy).toHaveBeenCalled();
         });
         it('should not move selection below 0', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                for (let i = 0; i < 5; i++) {
+                    const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true });
+                    Object.defineProperty(arrowUpEvent, 'target', { value: input });
+                    wrapper?.dispatchEvent(arrowUpEvent);
+                }
+                await advanceTimers(50);
+                expect(suggest).not.toBeNull();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            for (let i = 0; i < 5; i++) {
-                const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true });
-                Object.defineProperty(arrowUpEvent, 'target', { value: input });
-                wrapper?.dispatchEvent(arrowUpEvent);
-            }
-            await advanceTimers(50);
-            expect(suggest).not.toBeNull();
         });
     });
     describe('open/close behavior', () => {
         it('should open when clicking term icon', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const termIcon = suggest?.querySelector('.term-icon');
+                termIcon?.click();
+                await advanceTimers(50);
+                expect(suggest?.hasAttribute('data-opened')).toBe(true);
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const termIcon = suggest?.querySelector('.term-icon');
-            termIcon?.click();
-            await advanceTimers(50);
-            expect(suggest?.classList.contains('opened')).toBe(true);
         });
         it('should close when clicking close button', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const termIcon = suggest?.querySelector('.term-icon');
+                termIcon?.click();
+                await advanceTimers(50);
+                const closeButton = suggest?.querySelector('.close-suggestions');
+                closeButton?.click();
+                await advanceTimers(50);
+                expect(suggest?.hasAttribute('data-opened')).toBe(false);
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const termIcon = suggest?.querySelector('.term-icon');
-            termIcon?.click();
-            await advanceTimers(50);
-            const closeButton = suggest?.querySelector('.close-suggestions');
-            closeButton?.click();
-            await advanceTimers(50);
-            expect(suggest?.classList.contains('opened')).toBe(false);
         });
         it('should trigger animation when opening', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const initialAnimationCount = animateCalls.length;
+                const suggest = document.querySelector('shade-suggest');
+                const termIcon = suggest?.querySelector('.term-icon');
+                termIcon?.click();
+                await advanceTimers(50);
+                expect(animateCalls.length).toBeGreaterThan(initialAnimationCount);
             });
-            await advanceTimers(50);
-            const initialAnimationCount = animateCalls.length;
-            const suggest = document.querySelector('shade-suggest');
-            const termIcon = suggest?.querySelector('.term-icon');
-            termIcon?.click();
-            await advanceTimers(50);
-            expect(animateCalls.length).toBeGreaterThan(initialAnimationCount);
         });
         it('should trigger animation when closing', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const termIcon = suggest?.querySelector('.term-icon');
+                termIcon?.click();
+                await advanceTimers(50);
+                const animationCountAfterOpen = animateCalls.length;
+                const closeButton = suggest?.querySelector('.close-suggestions');
+                closeButton?.click();
+                await advanceTimers(50);
+                expect(animateCalls.length).toBeGreaterThan(animationCountAfterOpen);
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const termIcon = suggest?.querySelector('.term-icon');
-            termIcon?.click();
-            await advanceTimers(50);
-            const animationCountAfterOpen = animateCalls.length;
-            const closeButton = suggest?.querySelector('.close-suggestions');
-            closeButton?.click();
-            await advanceTimers(50);
-            expect(animateCalls.length).toBeGreaterThan(animationCountAfterOpen);
         });
     });
     describe('suggestions loading', () => {
         it('should fetch suggestions when typing', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            const getEntriesSpy = vi.fn(getTestEntries);
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getEntriesSpy, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                const getEntriesSpy = vi.fn(getTestEntries);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getEntriesSpy, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                input.value = 'First';
+                const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
+                Object.defineProperty(keyupEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(keyupEvent);
+                await advanceTimers(300);
+                expect(getEntriesSpy).toHaveBeenCalledWith('First');
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            input.value = 'First';
-            const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
-            Object.defineProperty(keyupEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(keyupEvent);
-            await advanceTimers(300);
-            expect(getEntriesSpy).toHaveBeenCalledWith('First');
         });
         it('should show loader animation while loading', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            const resolveHolder = { resolve: null };
-            const slowGetEntries = () => new Promise((resolve) => {
-                resolveHolder.resolve = resolve;
-            });
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: slowGetEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                const resolveHolder = { resolve: null };
+                const slowGetEntries = () => new Promise((resolve) => {
+                    resolveHolder.resolve = resolve;
+                });
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: slowGetEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                input.value = 'test';
+                const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
+                Object.defineProperty(keyupEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(keyupEvent);
+                await advanceTimers(300);
+                const loader = suggest?.querySelector('shade-loader');
+                expect(loader).not.toBeNull();
+                resolveHolder.resolve?.(createTestEntries());
+                await advanceTimers(50);
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            input.value = 'test';
-            const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
-            Object.defineProperty(keyupEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(keyupEvent);
-            await advanceTimers(300);
-            const loader = suggest?.querySelector('shade-loader');
-            expect(loader).not.toBeNull();
-            resolveHolder.resolve?.(createTestEntries());
-            await advanceTimers(50);
         });
         it('should render suggestions after loading', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                input.value = 'test';
+                const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
+                Object.defineProperty(keyupEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(keyupEvent);
+                await advanceTimers(300);
+                const suggestionList = suggest?.querySelector('shade-suggest-suggestion-list');
+                expect(suggestionList).not.toBeNull();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            input.value = 'test';
-            const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
-            Object.defineProperty(keyupEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(keyupEvent);
-            await advanceTimers(300);
-            const suggestionList = suggest?.querySelector('shade-suggest-suggestion-list');
-            expect(suggestionList).not.toBeNull();
         });
     });
     describe('suggestion selection', () => {
         it('should call onSelectSuggestion when selecting via Enter', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                input.value = 'First';
+                const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
+                Object.defineProperty(keyupEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(keyupEvent);
+                await advanceTimers(300);
+                const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true });
+                Object.defineProperty(enterEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(enterEvent);
+                await advanceTimers(50);
+                expect(onSelectSuggestion).toHaveBeenCalledWith(expect.objectContaining({ name: 'First' }));
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            input.value = 'First';
-            const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
-            Object.defineProperty(keyupEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(keyupEvent);
-            await advanceTimers(300);
-            const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true });
-            Object.defineProperty(enterEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(enterEvent);
-            await advanceTimers(50);
-            expect(onSelectSuggestion).toHaveBeenCalledWith(expect.objectContaining({ name: 'First' }));
         });
         it('should close after selecting a suggestion', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const wrapper = suggest?.querySelector('.suggest-wrapper');
+                const input = suggest?.querySelector('input');
+                input.value = 'First';
+                const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
+                Object.defineProperty(keyupEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(keyupEvent);
+                await advanceTimers(300);
+                expect(suggest?.hasAttribute('data-opened')).toBe(true);
+                const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true });
+                Object.defineProperty(enterEvent, 'target', { value: input });
+                wrapper?.dispatchEvent(enterEvent);
+                await advanceTimers(50);
+                expect(suggest?.hasAttribute('data-opened')).toBe(false);
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const wrapper = suggest?.querySelector('.suggest-wrapper');
-            const input = suggest?.querySelector('input');
-            input.value = 'First';
-            const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true });
-            Object.defineProperty(keyupEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(keyupEvent);
-            await advanceTimers(300);
-            expect(suggest?.classList.contains('opened')).toBe(true);
-            const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true });
-            Object.defineProperty(enterEvent, 'target', { value: input });
-            wrapper?.dispatchEvent(enterEvent);
-            await advanceTimers(50);
-            expect(suggest?.classList.contains('opened')).toBe(false);
         });
     });
     describe('sub-components', () => {
         it('should render SuggestInput component', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const suggestInput = suggest?.querySelector('shades-suggest-input');
+                expect(suggestInput).not.toBeNull();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const suggestInput = suggest?.querySelector('shades-suggest-input');
-            expect(suggestInput).not.toBeNull();
         });
         it('should render SuggestionList component', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const suggestionList = suggest?.querySelector('shade-suggest-suggestion-list');
+                expect(suggestionList).not.toBeNull();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const suggestionList = suggest?.querySelector('shade-suggest-suggestion-list');
-            expect(suggestionList).not.toBeNull();
         });
         it('should render Loader component', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onSelectSuggestion = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onSelectSuggestion = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Suggest, { defaultPrefix: "\uD83D\uDD0D", getEntries: getTestEntries, getSuggestionEntry: getSuggestionEntry, onSelectSuggestion: onSelectSuggestion })),
+                });
+                await advanceTimers(50);
+                const suggest = document.querySelector('shade-suggest');
+                const loader = suggest?.querySelector('shade-loader');
+                expect(loader).not.toBeNull();
             });
-            await advanceTimers(50);
-            const suggest = document.querySelector('shade-suggest');
-            const loader = suggest?.querySelector('shade-loader');
-            expect(loader).not.toBeNull();
         });
     });
 });