@furystack/shades-common-components 12.0.0 → 12.0.1

package/src/components/command-palette/command-palette-suggestion-list.spec.tsx

@@ -56,462 +56,444 @@ describe('CommandPaletteSuggestionList', () => {
 
   it('should render with shadow DOM', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      const rootElement = document.getElementById('root') as HTMLDivElement
+      await usingAsync(createManager(), async (manager) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
-
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      const component = document.querySelector('shade-command-palette-suggestion-list')
-      expect(component).not.toBeNull()
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shade-command-palette-suggestion-list')
+        expect(component).not.toBeNull()
+      })
     })
   })
 
   it('should render suggestion items container', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      const rootElement = document.getElementById('root') as HTMLDivElement
+      await usingAsync(createManager(), async (manager) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      await sleepAsync(50)
+        await sleepAsync(50)
 
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const container = component?.querySelector('.suggestion-items-container')
-      expect(container).not.toBeNull()
-
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const container = component?.querySelector('.suggestion-items-container')
+        expect(container).not.toBeNull()
+      })
     })
   })
 
   it('should render suggestions from manager', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)])
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)])
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const items = component?.querySelectorAll('.suggestion-item')
-      expect(items?.length).toBe(2)
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const items = component?.querySelectorAll('.suggestion-item')
+        expect(items?.length).toBe(2)
+      })
     })
   })
 
   it('should render suggestion content', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.currentSuggestions.setValue([createSuggestion('Test Command', 100)])
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.currentSuggestions.setValue([createSuggestion('Test Command', 100)])
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const item = component?.querySelector('.suggestion-item')
-      expect(item?.textContent).toContain('Test Command')
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const item = component?.querySelector('.suggestion-item')
+        expect(item?.textContent).toContain('Test Command')
+      })
     })
   })
 
   it('should mark first item as selected by default', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)])
-      manager.selectedIndex.setValue(0)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      await usingAsync(createManager(), async (manager) => {
+        manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)])
+        manager.selectedIndex.setValue(0)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
+
+        await sleepAsync(50)
+
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const items = component?.querySelectorAll('.suggestion-item')
+        expect(items?.[0]?.classList.contains('selected')).toBe(true)
+        expect(items?.[1]?.classList.contains('selected')).toBe(false)
       })
-
-      await sleepAsync(50)
-
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const items = component?.querySelectorAll('.suggestion-item')
-      expect(items?.[0]?.classList.contains('selected')).toBe(true)
-      expect(items?.[1]?.classList.contains('selected')).toBe(false)
-
-      manager[Symbol.dispose]()
     })
   })
 
   it('should update selected class when selectedIndex changes', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)])
-      manager.selectedIndex.setValue(0)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      await usingAsync(createManager(), async (manager) => {
+        manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)])
+        manager.selectedIndex.setValue(0)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
+
+        await sleepAsync(50)
+
+        manager.selectedIndex.setValue(1)
+        await sleepAsync(50)
+
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const items = component?.querySelectorAll('.suggestion-item')
+        expect(items?.[0]?.classList.contains('selected')).toBe(false)
+        expect(items?.[1]?.classList.contains('selected')).toBe(true)
       })
-
-      await sleepAsync(50)
-
-      manager.selectedIndex.setValue(1)
-      await sleepAsync(50)
-
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const items = component?.querySelectorAll('.suggestion-item')
-      expect(items?.[0]?.classList.contains('selected')).toBe(false)
-      expect(items?.[1]?.classList.contains('selected')).toBe(true)
-
-      manager[Symbol.dispose]()
     })
   })
 
   it('should call selectSuggestion when item is clicked while opened', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      const suggestion = createSuggestion('Click Me', 100)
-      manager.currentSuggestions.setValue([suggestion])
-      manager.isOpened.setValue(true)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        const suggestion = createSuggestion('Click Me', 100)
+        manager.currentSuggestions.setValue([suggestion])
+        manager.isOpened.setValue(true)
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+        await sleepAsync(50)
 
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const item = component?.querySelector('.suggestion-item') as HTMLElement
-      item?.click()
+        const selectSpy = vi.spyOn(manager, 'selectSuggestion')
 
-      expect(selectSpy).toHaveBeenCalledWith(injector, 0)
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const item = component?.querySelector('.suggestion-item') as HTMLElement
+        item?.click()
 
-      manager[Symbol.dispose]()
+        expect(selectSpy).toHaveBeenCalledWith(injector, 0)
+      })
     })
   })
 
   it('should not call selectSuggestion when item is clicked while closed', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      const suggestion = createSuggestion('Click Me', 100)
-      manager.currentSuggestions.setValue([suggestion])
-      manager.isOpened.setValue(false)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        const suggestion = createSuggestion('Click Me', 100)
+        manager.currentSuggestions.setValue([suggestion])
+        manager.isOpened.setValue(false)
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+        await sleepAsync(50)
 
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const item = component?.querySelector('.suggestion-item') as HTMLElement
-      item?.click()
+        const selectSpy = vi.spyOn(manager, 'selectSuggestion')
 
-      expect(selectSpy).not.toHaveBeenCalled()
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const item = component?.querySelector('.suggestion-item') as HTMLElement
+        item?.click()
 
-      manager[Symbol.dispose]()
+        expect(selectSpy).not.toHaveBeenCalled()
+      })
     })
   })
 
   it('should animate slide-in when opening', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(false)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(false)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
+
+        await sleepAsync(50)
+        animateCalls = []
+
+        manager.isOpened.setValue(true)
+        await sleepAsync(50)
+
+        const slideAnimation = animateCalls.find(
+          (call) =>
+            Array.isArray(call.keyframes) &&
+            call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, -50px)') &&
+            call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, 0)'),
+        )
+
+        expect(slideAnimation).toBeDefined()
+        expect((slideAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(500)
+        expect((slideAnimation?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
       })
-
-      await sleepAsync(50)
-      animateCalls = []
-
-      manager.isOpened.setValue(true)
-      await sleepAsync(50)
-
-      const slideAnimation = animateCalls.find(
-        (call) =>
-          Array.isArray(call.keyframes) &&
-          call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, -50px)') &&
-          call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, 0)'),
-      )
-
-      expect(slideAnimation).toBeDefined()
-      expect((slideAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(500)
-      expect((slideAnimation?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
-
-      manager[Symbol.dispose]()
     })
   })
 
   it('should animate slide-out when closing', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(true)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(true)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
+
+        await sleepAsync(50)
+        animateCalls = []
+
+        manager.isOpened.setValue(false)
+        await sleepAsync(50)
+
+        const slideAnimation = animateCalls.find(
+          (call) =>
+            Array.isArray(call.keyframes) &&
+            call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, 0)') &&
+            call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, -50px)'),
+        )
+
+        expect(slideAnimation).toBeDefined()
+        expect((slideAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(200)
       })
-
-      await sleepAsync(50)
-      animateCalls = []
-
-      manager.isOpened.setValue(false)
-      await sleepAsync(50)
-
-      const slideAnimation = animateCalls.find(
-        (call) =>
-          Array.isArray(call.keyframes) &&
-          call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, 0)') &&
-          call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, -50px)'),
-      )
-
-      expect(slideAnimation).toBeDefined()
-      expect((slideAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(200)
-
-      manager[Symbol.dispose]()
     })
   })
 
   it('should set container display to initial when opening', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(false)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(false)
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      manager.isOpened.setValue(true)
-      await sleepAsync(50)
+        await sleepAsync(50)
 
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
-      expect(container?.style.display).toBe('initial')
+        manager.isOpened.setValue(true)
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+        expect(container?.style.display).toBe('initial')
+      })
     })
   })
 
   it('should set container display to none when closing', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(true)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(true)
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      manager.isOpened.setValue(false)
-      await sleepAsync(50)
+        await sleepAsync(50)
 
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
-      expect(container?.style.display).toBe('none')
+        manager.isOpened.setValue(false)
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+        expect(container?.style.display).toBe('none')
+      })
     })
   })
 
   it('should render empty list when no suggestions', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.currentSuggestions.setValue([])
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.currentSuggestions.setValue([])
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const items = component?.querySelectorAll('.suggestion-item')
-      expect(items?.length).toBe(0)
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const items = component?.querySelectorAll('.suggestion-item')
+        expect(items?.length).toBe(0)
+      })
     })
   })
 
   it('should support fullScreenSuggestions prop', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(true)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} fullScreenSuggestions />,
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(true)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} fullScreenSuggestions />,
+        })
+
+        await sleepAsync(50)
+
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+        expect(container?.style.left).toBe('0px')
+        expect(container?.style.width).toBe('calc(100% - 42px)')
       })
-
-      await sleepAsync(50)
-
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
-      expect(container?.style.left).toBe('0px')
-      expect(container?.style.width).toBe('calc(100% - 42px)')
-
-      manager[Symbol.dispose]()
     })
   })
 
   it('should set max height based on window height', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(true)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(true)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
+
+        await sleepAsync(50)
+
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+        const expectedMaxHeight = `${window.innerHeight * 0.8}px`
+        expect(container?.style.maxHeight).toBe(expectedMaxHeight)
       })
-
-      await sleepAsync(50)
-
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
-      const expectedMaxHeight = `${window.innerHeight * 0.8}px`
-      expect(container?.style.maxHeight).toBe(expectedMaxHeight)
-
-      manager[Symbol.dispose]()
     })
   })
 
   it('should have correct CSS styles for suggestion items container', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      const rootElement = document.getElementById('root') as HTMLDivElement
+      await usingAsync(createManager(), async (manager) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      await sleepAsync(50)
+        await sleepAsync(50)
 
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
-      const computedStyle = window.getComputedStyle(container)
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+        const computedStyle = window.getComputedStyle(container)
 
-      expect(computedStyle.position).toBe('absolute')
-      expect(computedStyle.overflow).toBe('hidden')
-      expect(computedStyle.zIndex).toBe('1')
-
-      manager[Symbol.dispose]()
+        expect(computedStyle.position).toBe('absolute')
+        expect(computedStyle.overflow).toBe('hidden')
+        expect(computedStyle.zIndex).toBe('1')
+      })
     })
   })
 
   it('should call selectSuggestion with correct index for second item', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.currentSuggestions.setValue([
-        createSuggestion('First', 100),
-        createSuggestion('Second', 90),
-        createSuggestion('Third', 80),
-      ])
-      manager.isOpened.setValue(true)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      await usingAsync(createManager(), async (manager) => {
+        manager.currentSuggestions.setValue([
+          createSuggestion('First', 100),
+          createSuggestion('Second', 90),
+          createSuggestion('Third', 80),
+        ])
+        manager.isOpened.setValue(true)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
+
+        await sleepAsync(50)
+
+        const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const items = component?.querySelectorAll('.suggestion-item')
+        ;(items[1] as HTMLElement)?.click()
+
+        expect(selectSpy).toHaveBeenCalledWith(injector, 1)
       })
-
-      await sleepAsync(50)
-
-      const selectSpy = vi.spyOn(manager, 'selectSuggestion')
-
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const items = component?.querySelectorAll('.suggestion-item')
-      ;(items[1] as HTMLElement)?.click()
-
-      expect(selectSpy).toHaveBeenCalledWith(injector, 1)
-
-      manager[Symbol.dispose]()
     })
   })
 
   it('should update container z-index when opening and closing', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(false)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(false)
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+        })
 
-      manager.isOpened.setValue(true)
-      await sleepAsync(50)
+        await sleepAsync(50)
 
-      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
-      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
-      expect(container?.style.zIndex).toBe('1')
+        manager.isOpened.setValue(true)
+        await sleepAsync(50)
 
-      manager.isOpened.setValue(false)
-      await sleepAsync(50)
+        const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+        const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+        expect(container?.style.zIndex).toBe('1')
 
-      expect(container?.style.zIndex).toBe('-1')
+        manager.isOpened.setValue(false)
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        expect(container?.style.zIndex).toBe('-1')
+      })
     })
   })
 })