@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/suggest/index.spec.tsx

@@ -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'
 import type { SuggestionResult } from './suggestion-result.js'
@@ -68,794 +69,817 @@ describe('Suggest', () => {
 
   describe('rendering', () => {
     it('should render with shadow DOM', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest')
-      expect(suggest).not.toBeNull()
+        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') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="Search:"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="Search:"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const termIcon = suggest?.querySelector('.term-icon')
-      expect(termIcon?.textContent).toBe('Search:')
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        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') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const inputContainer = suggest?.querySelector('.input-container')
-      expect(inputContainer).not.toBeNull()
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        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') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-            style={{ backgroundColor: 'red' }}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+              style={{ backgroundColor: 'red' }}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const inputContainer = suggest?.querySelector('.input-container') as HTMLElement
-      expect(inputContainer?.style.backgroundColor).toBe('red')
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const inputContainer = suggest?.querySelector('.input-container') as HTMLElement
+        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') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
-      input.value = 'test'
+        const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'test'
 
-      const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-      Object.defineProperty(keyupEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(keyupEvent)
+        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
+        Object.defineProperty(keyupEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(keyupEvent)
 
-      await advanceTimers(300)
+        await advanceTimers(300)
 
-      const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true })
-      Object.defineProperty(arrowDownEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(arrowDownEvent)
+        const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true })
+        Object.defineProperty(arrowDownEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(arrowDownEvent)
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const selectedItems = suggest?.querySelectorAll('.suggestion-item.selected')
-      expect(selectedItems?.length).toBeGreaterThanOrEqual(0)
+        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') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
-      input.value = 'test'
+        const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'test'
 
-      const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-      Object.defineProperty(keyupEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(keyupEvent)
+        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
+        Object.defineProperty(keyupEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(keyupEvent)
 
-      await advanceTimers(300)
+        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 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)
+        const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true })
+        Object.defineProperty(arrowUpEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(arrowUpEvent)
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      expect(suggest).not.toBeNull()
+        expect(suggest).not.toBeNull()
+      })
     })
 
     it('should handle Enter to select current suggestion', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
-      input.value = 'First'
+        const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'First'
 
-      const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-      Object.defineProperty(keyupEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(keyupEvent)
+        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
+        Object.defineProperty(keyupEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(keyupEvent)
 
-      await advanceTimers(300)
+        await advanceTimers(300)
 
-      const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
-      Object.defineProperty(enterEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(enterEvent)
+        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
+        Object.defineProperty(enterEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(enterEvent)
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      expect(onSelectSuggestion).toHaveBeenCalled()
+        expect(onSelectSuggestion).toHaveBeenCalled()
+      })
     })
 
     it('should prevent default on Enter key', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
-      input.value = 'First'
+        const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'First'
 
-      const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-      Object.defineProperty(keyupEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(keyupEvent)
+        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
+        Object.defineProperty(keyupEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(keyupEvent)
 
-      await advanceTimers(300)
+        await advanceTimers(300)
 
-      const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true, cancelable: true })
-      Object.defineProperty(enterEvent, 'target', { value: input })
+        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)
+        const preventDefaultSpy = vi.spyOn(enterEvent, 'preventDefault')
+        wrapper?.dispatchEvent(enterEvent)
 
-      expect(preventDefaultSpy).toHaveBeenCalled()
+        expect(preventDefaultSpy).toHaveBeenCalled()
+      })
     })
 
     it('should prevent default on ArrowUp key', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
+        const input = suggest?.querySelector('input') as HTMLInputElement
 
-      const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true, cancelable: true })
-      Object.defineProperty(arrowUpEvent, 'target', { value: 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)
+        const preventDefaultSpy = vi.spyOn(arrowUpEvent, 'preventDefault')
+        wrapper?.dispatchEvent(arrowUpEvent)
 
-      expect(preventDefaultSpy).toHaveBeenCalled()
+        expect(preventDefaultSpy).toHaveBeenCalled()
+      })
     })
 
     it('should prevent default on ArrowDown key', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
+        const input = suggest?.querySelector('input') as HTMLInputElement
 
-      const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true, cancelable: true })
-      Object.defineProperty(arrowDownEvent, 'target', { value: 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)
+        const preventDefaultSpy = vi.spyOn(arrowDownEvent, 'preventDefault')
+        wrapper?.dispatchEvent(arrowDownEvent)
 
-      expect(preventDefaultSpy).toHaveBeenCalled()
+        expect(preventDefaultSpy).toHaveBeenCalled()
+      })
     })
 
     it('should not move selection below 0', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
+        const input = suggest?.querySelector('input') as HTMLInputElement
 
-      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)
-      }
+        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)
+        await advanceTimers(50)
 
-      expect(suggest).not.toBeNull()
+        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') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const termIcon = suggest?.querySelector('.term-icon') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const termIcon = suggest?.querySelector('.term-icon') as HTMLElement
 
-      termIcon?.click()
+        termIcon?.click()
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      expect(suggest?.classList.contains('opened')).toBe(true)
+        expect(suggest?.hasAttribute('data-opened')).toBe(true)
+      })
     })
 
     it('should close when clicking close button', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const termIcon = suggest?.querySelector('.term-icon') as HTMLElement
-      termIcon?.click()
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const termIcon = suggest?.querySelector('.term-icon') as HTMLElement
+        termIcon?.click()
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const closeButton = suggest?.querySelector('.close-suggestions') as HTMLElement
-      closeButton?.click()
+        const closeButton = suggest?.querySelector('.close-suggestions') as HTMLElement
+        closeButton?.click()
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      expect(suggest?.classList.contains('opened')).toBe(false)
+        expect(suggest?.hasAttribute('data-opened')).toBe(false)
+      })
     })
 
     it('should trigger animation when opening', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const initialAnimationCount = animateCalls.length
+        const initialAnimationCount = animateCalls.length
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const termIcon = suggest?.querySelector('.term-icon') as HTMLElement
-      termIcon?.click()
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const termIcon = suggest?.querySelector('.term-icon') as HTMLElement
+        termIcon?.click()
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      expect(animateCalls.length).toBeGreaterThan(initialAnimationCount)
+        expect(animateCalls.length).toBeGreaterThan(initialAnimationCount)
+      })
     })
 
     it('should trigger animation when closing', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const termIcon = suggest?.querySelector('.term-icon') as HTMLElement
-      termIcon?.click()
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const termIcon = suggest?.querySelector('.term-icon') as HTMLElement
+        termIcon?.click()
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const animationCountAfterOpen = animateCalls.length
+        const animationCountAfterOpen = animateCalls.length
 
-      const closeButton = suggest?.querySelector('.close-suggestions') as HTMLElement
-      closeButton?.click()
+        const closeButton = suggest?.querySelector('.close-suggestions') as HTMLElement
+        closeButton?.click()
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      expect(animateCalls.length).toBeGreaterThan(animationCountAfterOpen)
+        expect(animateCalls.length).toBeGreaterThan(animationCountAfterOpen)
+      })
     })
   })
 
   describe('suggestions loading', () => {
     it('should fetch suggestions when typing', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-      const getEntriesSpy = vi.fn(getTestEntries)
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getEntriesSpy}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+        const getEntriesSpy = vi.fn(getTestEntries)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getEntriesSpy}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
-      input.value = 'First'
+        const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'First'
 
-      const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-      Object.defineProperty(keyupEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(keyupEvent)
+        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
+        Object.defineProperty(keyupEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(keyupEvent)
 
-      await advanceTimers(300)
+        await advanceTimers(300)
 
-      expect(getEntriesSpy).toHaveBeenCalledWith('First')
+        expect(getEntriesSpy).toHaveBeenCalledWith('First')
+      })
     })
 
     it('should show loader animation while loading', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      const resolveHolder: { resolve: ((entries: TestEntry[]) => void) | null } = { resolve: null }
-      const slowGetEntries = () =>
-        new Promise<TestEntry[]>((resolve) => {
-          resolveHolder.resolve = resolve
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        const resolveHolder: { resolve: ((entries: TestEntry[]) => void) | null } = { resolve: null }
+        const slowGetEntries = () =>
+          new Promise<TestEntry[]>((resolve) => {
+            resolveHolder.resolve = resolve
+          })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={slowGetEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
         })
 
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={slowGetEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
-
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
-      input.value = 'test'
+        const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'test'
 
-      const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-      Object.defineProperty(keyupEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(keyupEvent)
+        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
+        Object.defineProperty(keyupEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(keyupEvent)
 
-      await advanceTimers(300)
+        await advanceTimers(300)
 
-      const loader = suggest?.querySelector('shade-loader')
-      expect(loader).not.toBeNull()
+        const loader = suggest?.querySelector('shade-loader')
+        expect(loader).not.toBeNull()
 
-      resolveHolder.resolve?.(createTestEntries())
-      await advanceTimers(50)
+        resolveHolder.resolve?.(createTestEntries())
+        await advanceTimers(50)
+      })
     })
 
     it('should render suggestions after loading', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
-      input.value = 'test'
+        const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'test'
 
-      const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-      Object.defineProperty(keyupEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(keyupEvent)
+        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
+        Object.defineProperty(keyupEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(keyupEvent)
 
-      await advanceTimers(300)
+        await advanceTimers(300)
 
-      const suggestionList = suggest?.querySelector('shade-suggest-suggestion-list')
-      expect(suggestionList).not.toBeNull()
+        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') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
-      input.value = 'First'
+        const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'First'
 
-      const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-      Object.defineProperty(keyupEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(keyupEvent)
+        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
+        Object.defineProperty(keyupEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(keyupEvent)
 
-      await advanceTimers(300)
+        await advanceTimers(300)
 
-      const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
-      Object.defineProperty(enterEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(enterEvent)
+        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
+        Object.defineProperty(enterEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(enterEvent)
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      expect(onSelectSuggestion).toHaveBeenCalledWith(expect.objectContaining({ name: 'First' }))
+        expect(onSelectSuggestion).toHaveBeenCalledWith(expect.objectContaining({ name: 'First' }))
+      })
     })
 
     it('should close after selecting a suggestion', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
-      const input = suggest?.querySelector('input') as HTMLInputElement
-      input.value = 'First'
+        const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'First'
 
-      const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-      Object.defineProperty(keyupEvent, 'target', { value: input })
-      wrapper?.dispatchEvent(keyupEvent)
+        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
+        Object.defineProperty(keyupEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(keyupEvent)
 
-      await advanceTimers(300)
+        await advanceTimers(300)
 
-      expect(suggest?.classList.contains('opened')).toBe(true)
+        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)
+        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
+        Object.defineProperty(enterEvent, 'target', { value: input })
+        wrapper?.dispatchEvent(enterEvent)
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      expect(suggest?.classList.contains('opened')).toBe(false)
+        expect(suggest?.hasAttribute('data-opened')).toBe(false)
+      })
     })
   })
 
   describe('sub-components', () => {
     it('should render SuggestInput component', async () => {
-      const injector = new Injector()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const suggestInput = suggest?.querySelector('shades-suggest-input')
-      expect(suggestInput).not.toBeNull()
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        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') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const suggestionList = suggest?.querySelector('shade-suggest-suggestion-list')
-      expect(suggestionList).not.toBeNull()
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        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') as HTMLDivElement
-      const onSelectSuggestion = vi.fn()
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: (
-          <Suggest<TestEntry>
-            defaultPrefix="🔍"
-            getEntries={getTestEntries}
-            getSuggestionEntry={getSuggestionEntry}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        ),
-      })
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
 
-      await advanceTimers(50)
+        await advanceTimers(50)
 
-      const suggest = document.querySelector('shade-suggest') as HTMLElement
-      const loader = suggest?.querySelector('shade-loader')
-      expect(loader).not.toBeNull()
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const loader = suggest?.querySelector('shade-loader')
+        expect(loader).not.toBeNull()
+      })
     })
   })
 })