@furystack/shades-common-components 12.0.0 → 12.1.0

package/src/components/context-menu/context-menu-manager.spec.ts

@@ -1,3 +1,4 @@
+import { using } from '@furystack/utils'
 import { describe, expect, it, vi } from 'vitest'
 import type { ContextMenuItem } from './context-menu-manager.js'
 import { ContextMenuManager } from './context-menu-manager.js'
@@ -15,447 +16,401 @@ describe('ContextMenuManager', () => {
 
   describe('getNavigableIndices', () => {
     it('should return indices of non-separator, non-disabled items', () => {
-      const manager = new ContextMenuManager<TestData>()
-      manager.items.setValue(createTestItems())
-
-      const indices = manager.getNavigableIndices()
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.items.setValue(createTestItems())
 
-      expect(indices).toEqual([0, 1, 3])
+        const indices = manager.getNavigableIndices()
 
-      manager[Symbol.dispose]()
+        expect(indices).toEqual([0, 1, 3])
+      })
     })
 
     it('should return empty array when there are no navigable items', () => {
-      const manager = new ContextMenuManager<TestData>()
-      manager.items.setValue([
-        { type: 'separator' },
-        { type: 'item', data: { id: 1, name: 'Disabled' }, label: 'Disabled', disabled: true },
-      ])
-
-      const indices = manager.getNavigableIndices()
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.items.setValue([
+          { type: 'separator' },
+          { type: 'item', data: { id: 1, name: 'Disabled' }, label: 'Disabled', disabled: true },
+        ])
 
-      expect(indices).toEqual([])
+        const indices = manager.getNavigableIndices()
 
-      manager[Symbol.dispose]()
+        expect(indices).toEqual([])
+      })
     })
 
     it('should return empty array for empty items', () => {
-      const manager = new ContextMenuManager<TestData>()
-
-      const indices = manager.getNavigableIndices()
-
-      expect(indices).toEqual([])
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        const indices = manager.getNavigableIndices()
 
-      manager[Symbol.dispose]()
+        expect(indices).toEqual([])
+      })
     })
   })
 
   describe('open', () => {
     it('should set isOpened to true', () => {
-      const manager = new ContextMenuManager<TestData>()
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({ items: createTestItems(), position: { x: 100, y: 200 } })
 
-      manager.open({ items: createTestItems(), position: { x: 100, y: 200 } })
-
-      expect(manager.isOpened.getValue()).toBe(true)
-
-      manager[Symbol.dispose]()
+        expect(manager.isOpened.getValue()).toBe(true)
+      })
     })
 
     it('should set items when provided', () => {
-      const manager = new ContextMenuManager<TestData>()
-      const items = createTestItems()
-
-      manager.open({ items, position: { x: 0, y: 0 } })
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        const items = createTestItems()
 
-      expect(manager.items.getValue()).toEqual(items)
+        manager.open({ items, position: { x: 0, y: 0 } })
 
-      manager[Symbol.dispose]()
+        expect(manager.items.getValue()).toEqual(items)
+      })
     })
 
     it('should set position when provided', () => {
-      const manager = new ContextMenuManager<TestData>()
-
-      manager.open({ items: createTestItems(), position: { x: 150, y: 250 } })
-
-      expect(manager.position.getValue()).toEqual({ x: 150, y: 250 })
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({ items: createTestItems(), position: { x: 150, y: 250 } })
 
-      manager[Symbol.dispose]()
+        expect(manager.position.getValue()).toEqual({ x: 150, y: 250 })
+      })
     })
 
     it('should focus the first navigable item', () => {
-      const manager = new ContextMenuManager<TestData>()
-
-      manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-
-      expect(manager.focusedIndex.getValue()).toBe(0)
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
 
-      manager[Symbol.dispose]()
+        expect(manager.focusedIndex.getValue()).toBe(0)
+      })
     })
 
     it('should focus the first navigable item when first items are separators', () => {
-      const manager = new ContextMenuManager<TestData>()
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({
+          items: [{ type: 'separator' }, { type: 'item', data: { id: 1, name: 'First' }, label: 'First' }],
+          position: { x: 0, y: 0 },
+        })
 
-      manager.open({
-        items: [{ type: 'separator' }, { type: 'item', data: { id: 1, name: 'First' }, label: 'First' }],
-        position: { x: 0, y: 0 },
+        expect(manager.focusedIndex.getValue()).toBe(1)
       })
-
-      expect(manager.focusedIndex.getValue()).toBe(1)
-
-      manager[Symbol.dispose]()
     })
 
     it('should set focusedIndex to -1 when no navigable items exist', () => {
-      const manager = new ContextMenuManager<TestData>()
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({
+          items: [{ type: 'separator' }],
+          position: { x: 0, y: 0 },
+        })
 
-      manager.open({
-        items: [{ type: 'separator' }],
-        position: { x: 0, y: 0 },
+        expect(manager.focusedIndex.getValue()).toBe(-1)
       })
-
-      expect(manager.focusedIndex.getValue()).toBe(-1)
-
-      manager[Symbol.dispose]()
     })
 
     it('should keep existing items when items option is not provided', () => {
-      const manager = new ContextMenuManager<TestData>()
-      const items = createTestItems()
-      manager.items.setValue(items)
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        const items = createTestItems()
+        manager.items.setValue(items)
 
-      manager.open({ position: { x: 50, y: 50 } })
+        manager.open({ position: { x: 50, y: 50 } })
 
-      expect(manager.items.getValue()).toEqual(items)
-      expect(manager.isOpened.getValue()).toBe(true)
-
-      manager[Symbol.dispose]()
+        expect(manager.items.getValue()).toEqual(items)
+        expect(manager.isOpened.getValue()).toBe(true)
+      })
     })
 
     it('should keep existing position when position option is not provided', () => {
-      const manager = new ContextMenuManager<TestData>()
-      manager.position.setValue({ x: 100, y: 200 })
-      manager.items.setValue(createTestItems())
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.position.setValue({ x: 100, y: 200 })
+        manager.items.setValue(createTestItems())
 
-      manager.open()
+        manager.open()
 
-      expect(manager.position.getValue()).toEqual({ x: 100, y: 200 })
-      expect(manager.isOpened.getValue()).toBe(true)
-
-      manager[Symbol.dispose]()
+        expect(manager.position.getValue()).toEqual({ x: 100, y: 200 })
+        expect(manager.isOpened.getValue()).toBe(true)
+      })
     })
   })
 
   describe('close', () => {
     it('should set isOpened to false', () => {
-      const manager = new ContextMenuManager<TestData>()
-      manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-
-      manager.close()
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
 
-      expect(manager.isOpened.getValue()).toBe(false)
+        manager.close()
 
-      manager[Symbol.dispose]()
+        expect(manager.isOpened.getValue()).toBe(false)
+      })
     })
 
     it('should reset focusedIndex to -1', () => {
-      const manager = new ContextMenuManager<TestData>()
-      manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-
-      manager.close()
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
 
-      expect(manager.focusedIndex.getValue()).toBe(-1)
+        manager.close()
 
-      manager[Symbol.dispose]()
+        expect(manager.focusedIndex.getValue()).toBe(-1)
+      })
     })
   })
 
   describe('selectItem', () => {
     it('should emit onSelectItem event with the item data', () => {
-      const manager = new ContextMenuManager<TestData>()
-      const items = createTestItems()
-      manager.open({ items, position: { x: 0, y: 0 } })
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        const items = createTestItems()
+        manager.open({ items, position: { x: 0, y: 0 } })
 
-      const onSelect = vi.fn()
-      const subscription = manager.subscribe('onSelectItem', onSelect)
-
-      manager.selectItem(1)
+        const onSelect = vi.fn()
+        manager.subscribe('onSelectItem', onSelect)
 
-      expect(onSelect).toHaveBeenCalledWith({ id: 2, name: 'Copy' })
+        manager.selectItem(1)
 
-      subscription[Symbol.dispose]()
-      manager[Symbol.dispose]()
+        expect(onSelect).toHaveBeenCalledWith({ id: 2, name: 'Copy' })
+      })
     })
 
     it('should close the menu after selection', () => {
-      const manager = new ContextMenuManager<TestData>()
-      manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-
-      manager.selectItem(0)
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
 
-      expect(manager.isOpened.getValue()).toBe(false)
+        manager.selectItem(0)
 
-      manager[Symbol.dispose]()
+        expect(manager.isOpened.getValue()).toBe(false)
+      })
     })
 
     it('should use the focused index when no index is provided', () => {
-      const manager = new ContextMenuManager<TestData>()
-      const items = createTestItems()
-      manager.open({ items, position: { x: 0, y: 0 } })
-      manager.focusedIndex.setValue(3)
-
-      const onSelect = vi.fn()
-      const subscription = manager.subscribe('onSelectItem', onSelect)
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        const items = createTestItems()
+        manager.open({ items, position: { x: 0, y: 0 } })
+        manager.focusedIndex.setValue(3)
 
-      manager.selectItem()
+        const onSelect = vi.fn()
+        manager.subscribe('onSelectItem', onSelect)
 
-      expect(onSelect).toHaveBeenCalledWith({ id: 3, name: 'Paste' })
+        manager.selectItem()
 
-      subscription[Symbol.dispose]()
-      manager[Symbol.dispose]()
+        expect(onSelect).toHaveBeenCalledWith({ id: 3, name: 'Paste' })
+      })
     })
 
     it('should not emit when selecting a separator', () => {
-      const manager = new ContextMenuManager<TestData>()
-      manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-
-      const onSelect = vi.fn()
-      const subscription = manager.subscribe('onSelectItem', onSelect)
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
 
-      manager.selectItem(2)
+        const onSelect = vi.fn()
+        manager.subscribe('onSelectItem', onSelect)
 
-      expect(onSelect).not.toHaveBeenCalled()
+        manager.selectItem(2)
 
-      subscription[Symbol.dispose]()
-      manager[Symbol.dispose]()
+        expect(onSelect).not.toHaveBeenCalled()
+      })
     })
 
     it('should not emit when selecting a disabled item', () => {
-      const manager = new ContextMenuManager<TestData>()
-      manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-
-      const onSelect = vi.fn()
-      const subscription = manager.subscribe('onSelectItem', onSelect)
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
 
-      manager.selectItem(4)
+        const onSelect = vi.fn()
+        manager.subscribe('onSelectItem', onSelect)
 
-      expect(onSelect).not.toHaveBeenCalled()
+        manager.selectItem(4)
 
-      subscription[Symbol.dispose]()
-      manager[Symbol.dispose]()
+        expect(onSelect).not.toHaveBeenCalled()
+      })
     })
 
     it('should not emit when item has no data', () => {
-      const manager = new ContextMenuManager<TestData>()
-      manager.open({
-        items: [{ type: 'item', label: 'No data' }],
-        position: { x: 0, y: 0 },
-      })
-
-      const onSelect = vi.fn()
-      const subscription = manager.subscribe('onSelectItem', onSelect)
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.open({
+          items: [{ type: 'item', label: 'No data' }],
+          position: { x: 0, y: 0 },
+        })
 
-      manager.selectItem(0)
+        const onSelect = vi.fn()
+        manager.subscribe('onSelectItem', onSelect)
 
-      expect(onSelect).not.toHaveBeenCalled()
+        manager.selectItem(0)
 
-      subscription[Symbol.dispose]()
-      manager[Symbol.dispose]()
+        expect(onSelect).not.toHaveBeenCalled()
+      })
     })
   })
 
   describe('handleKeyDown', () => {
     it('should not handle keyboard events when menu is closed', () => {
-      const manager = new ContextMenuManager<TestData>()
-      manager.items.setValue(createTestItems())
-      manager.focusedIndex.setValue(0)
-
-      manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+      using(new ContextMenuManager<TestData>(), (manager) => {
+        manager.items.setValue(createTestItems())
+        manager.focusedIndex.setValue(0)
 
-      expect(manager.focusedIndex.getValue()).toBe(0)
+        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
 
-      manager[Symbol.dispose]()
+        expect(manager.focusedIndex.getValue()).toBe(0)
+      })
     })
 
     describe('ArrowDown', () => {
       it('should move focus to the next navigable item', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-        manager.focusedIndex.setValue(0)
-
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+          manager.focusedIndex.setValue(0)
 
-        expect(manager.focusedIndex.getValue()).toBe(1)
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
 
-        manager[Symbol.dispose]()
+          expect(manager.focusedIndex.getValue()).toBe(1)
+        })
       })
 
       it('should skip separators', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-        manager.focusedIndex.setValue(1)
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+          manager.focusedIndex.setValue(1)
 
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-
-        expect(manager.focusedIndex.getValue()).toBe(3)
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
 
-        manager[Symbol.dispose]()
+          expect(manager.focusedIndex.getValue()).toBe(3)
+        })
       })
 
       it('should skip disabled items', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({
-          items: [
-            { type: 'item', data: { id: 1, name: 'A' }, label: 'A' },
-            { type: 'item', data: { id: 2, name: 'B' }, label: 'B', disabled: true },
-            { type: 'item', data: { id: 3, name: 'C' }, label: 'C' },
-          ],
-          position: { x: 0, y: 0 },
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({
+            items: [
+              { type: 'item', data: { id: 1, name: 'A' }, label: 'A' },
+              { type: 'item', data: { id: 2, name: 'B' }, label: 'B', disabled: true },
+              { type: 'item', data: { id: 3, name: 'C' }, label: 'C' },
+            ],
+            position: { x: 0, y: 0 },
+          })
+          manager.focusedIndex.setValue(0)
+
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+
+          expect(manager.focusedIndex.getValue()).toBe(2)
         })
-        manager.focusedIndex.setValue(0)
-
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-
-        expect(manager.focusedIndex.getValue()).toBe(2)
-
-        manager[Symbol.dispose]()
       })
 
       it('should wrap to first item when at the end', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-        manager.focusedIndex.setValue(3)
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+          manager.focusedIndex.setValue(3)
 
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-
-        expect(manager.focusedIndex.getValue()).toBe(0)
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
 
-        manager[Symbol.dispose]()
+          expect(manager.focusedIndex.getValue()).toBe(0)
+        })
       })
     })
 
     describe('ArrowUp', () => {
       it('should move focus to the previous navigable item', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-        manager.focusedIndex.setValue(1)
-
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+          manager.focusedIndex.setValue(1)
 
-        expect(manager.focusedIndex.getValue()).toBe(0)
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
 
-        manager[Symbol.dispose]()
+          expect(manager.focusedIndex.getValue()).toBe(0)
+        })
       })
 
       it('should skip separators', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-        manager.focusedIndex.setValue(3)
-
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+          manager.focusedIndex.setValue(3)
 
-        expect(manager.focusedIndex.getValue()).toBe(1)
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
 
-        manager[Symbol.dispose]()
+          expect(manager.focusedIndex.getValue()).toBe(1)
+        })
       })
 
       it('should wrap to last navigable item when at the beginning', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-        manager.focusedIndex.setValue(0)
-
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+          manager.focusedIndex.setValue(0)
 
-        expect(manager.focusedIndex.getValue()).toBe(3)
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
 
-        manager[Symbol.dispose]()
+          expect(manager.focusedIndex.getValue()).toBe(3)
+        })
       })
     })
 
     describe('Home', () => {
       it('should move focus to the first navigable item', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-        manager.focusedIndex.setValue(3)
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+          manager.focusedIndex.setValue(3)
 
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'Home' }))
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'Home' }))
 
-        expect(manager.focusedIndex.getValue()).toBe(0)
-
-        manager[Symbol.dispose]()
+          expect(manager.focusedIndex.getValue()).toBe(0)
+        })
       })
     })
 
     describe('End', () => {
       it('should move focus to the last navigable item', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-        manager.focusedIndex.setValue(0)
-
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'End' }))
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+          manager.focusedIndex.setValue(0)
 
-        expect(manager.focusedIndex.getValue()).toBe(3)
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'End' }))
 
-        manager[Symbol.dispose]()
+          expect(manager.focusedIndex.getValue()).toBe(3)
+        })
       })
     })
 
     describe('Enter', () => {
       it('should select the focused item', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-
-        const onSelect = vi.fn()
-        const subscription = manager.subscribe('onSelectItem', onSelect)
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
 
-        manager.focusedIndex.setValue(1)
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
+          const onSelect = vi.fn()
+          manager.subscribe('onSelectItem', onSelect)
 
-        expect(onSelect).toHaveBeenCalledWith({ id: 2, name: 'Copy' })
+          manager.focusedIndex.setValue(1)
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
 
-        subscription[Symbol.dispose]()
-        manager[Symbol.dispose]()
+          expect(onSelect).toHaveBeenCalledWith({ id: 2, name: 'Copy' })
+        })
       })
 
       it('should not select when no item is focused', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-        manager.focusedIndex.setValue(-1)
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+          manager.focusedIndex.setValue(-1)
 
-        const onSelect = vi.fn()
-        const subscription = manager.subscribe('onSelectItem', onSelect)
+          const onSelect = vi.fn()
+          manager.subscribe('onSelectItem', onSelect)
 
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
 
-        expect(onSelect).not.toHaveBeenCalled()
-
-        subscription[Symbol.dispose]()
-        manager[Symbol.dispose]()
+          expect(onSelect).not.toHaveBeenCalled()
+        })
       })
 
       it('should close the menu after selection', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
-        manager.focusedIndex.setValue(0)
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+          manager.focusedIndex.setValue(0)
 
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
 
-        expect(manager.isOpened.getValue()).toBe(false)
-
-        manager[Symbol.dispose]()
+          expect(manager.isOpened.getValue()).toBe(false)
+        })
       })
     })
 
     describe('Escape', () => {
       it('should close the menu', () => {
-        const manager = new ContextMenuManager<TestData>()
-        manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
+        using(new ContextMenuManager<TestData>(), (manager) => {
+          manager.open({ items: createTestItems(), position: { x: 0, y: 0 } })
 
-        manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'Escape' }))
+          manager.handleKeyDown(new KeyboardEvent('keydown', { key: 'Escape' }))
 
-        expect(manager.isOpened.getValue()).toBe(false)
-        expect(manager.focusedIndex.getValue()).toBe(-1)
-
-        manager[Symbol.dispose]()
+          expect(manager.isOpened.getValue()).toBe(false)
+          expect(manager.focusedIndex.getValue()).toBe(-1)
+        })
       })
     })
   })