@furystack/shades-common-components 12.0.0 → 12.1.0

package/esm/components/command-palette/command-palette-suggestion-list.spec.js

@@ -44,350 +44,350 @@ describe('CommandPaletteSuggestionList', () => {
     });
     it('should render with shadow DOM', async () => {
         await usingAsync(new Injector(), async (injector) => {
-            const manager = createManager();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                expect(component).not.toBeNull();
             });
-            await sleepAsync(50);
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            expect(component).not.toBeNull();
-            manager[Symbol.dispose]();
         });
     });
     it('should render suggestion items container', async () => {
         await usingAsync(new Injector(), async (injector) => {
-            const manager = createManager();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const container = component?.querySelector('.suggestion-items-container');
+                expect(container).not.toBeNull();
             });
-            await sleepAsync(50);
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const container = component?.querySelector('.suggestion-items-container');
-            expect(container).not.toBeNull();
-            manager[Symbol.dispose]();
         });
     });
     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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)]);
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const items = component?.querySelectorAll('.suggestion-item');
+                expect(items?.length).toBe(2);
             });
-            await sleepAsync(50);
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const items = component?.querySelectorAll('.suggestion-item');
-            expect(items?.length).toBe(2);
-            manager[Symbol.dispose]();
         });
     });
     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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                manager.currentSuggestions.setValue([createSuggestion('Test Command', 100)]);
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const item = component?.querySelector('.suggestion-item');
+                expect(item?.textContent).toContain('Test Command');
             });
-            await sleepAsync(50);
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const item = component?.querySelector('.suggestion-item');
-            expect(item?.textContent).toContain('Test Command');
-            manager[Symbol.dispose]();
         });
     });
     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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(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');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                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');
-            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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(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');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                manager.selectedIndex.setValue(1);
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                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');
-            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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(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');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const selectSpy = vi.spyOn(manager, 'selectSuggestion');
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const item = component?.querySelector('.suggestion-item');
+                item?.click();
+                expect(selectSpy).toHaveBeenCalledWith(injector, 0);
             });
-            await sleepAsync(50);
-            const selectSpy = vi.spyOn(manager, 'selectSuggestion');
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const item = component?.querySelector('.suggestion-item');
-            item?.click();
-            expect(selectSpy).toHaveBeenCalledWith(injector, 0);
-            manager[Symbol.dispose]();
         });
     });
     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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(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');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const selectSpy = vi.spyOn(manager, 'selectSuggestion');
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const item = component?.querySelector('.suggestion-item');
+                item?.click();
+                expect(selectSpy).not.toHaveBeenCalled();
             });
-            await sleepAsync(50);
-            const selectSpy = vi.spyOn(manager, 'selectSuggestion');
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const item = component?.querySelector('.suggestion-item');
-            item?.click();
-            expect(selectSpy).not.toHaveBeenCalled();
-            manager[Symbol.dispose]();
         });
     });
     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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                manager.isOpened.setValue(false);
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(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) => kf.transform === 'translate(0, -50px)') &&
+                    call.keyframes.some((kf) => kf.transform === 'translate(0, 0)'));
+                expect(slideAnimation).toBeDefined();
+                expect(slideAnimation?.options?.duration).toBe(500);
+                expect(slideAnimation?.options?.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) => kf.transform === 'translate(0, -50px)') &&
-                call.keyframes.some((kf) => kf.transform === 'translate(0, 0)'));
-            expect(slideAnimation).toBeDefined();
-            expect(slideAnimation?.options?.duration).toBe(500);
-            expect(slideAnimation?.options?.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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                manager.isOpened.setValue(true);
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(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) => kf.transform === 'translate(0, 0)') &&
+                    call.keyframes.some((kf) => kf.transform === 'translate(0, -50px)'));
+                expect(slideAnimation).toBeDefined();
+                expect(slideAnimation?.options?.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) => kf.transform === 'translate(0, 0)') &&
-                call.keyframes.some((kf) => kf.transform === 'translate(0, -50px)'));
-            expect(slideAnimation).toBeDefined();
-            expect(slideAnimation?.options?.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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                manager.isOpened.setValue(false);
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                manager.isOpened.setValue(true);
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const container = component?.querySelector('.suggestion-items-container');
+                expect(container?.style.display).toBe('initial');
             });
-            await sleepAsync(50);
-            manager.isOpened.setValue(true);
-            await sleepAsync(50);
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const container = component?.querySelector('.suggestion-items-container');
-            expect(container?.style.display).toBe('initial');
-            manager[Symbol.dispose]();
         });
     });
     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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                manager.isOpened.setValue(true);
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                manager.isOpened.setValue(false);
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const container = component?.querySelector('.suggestion-items-container');
+                expect(container?.style.display).toBe('none');
             });
-            await sleepAsync(50);
-            manager.isOpened.setValue(false);
-            await sleepAsync(50);
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const container = component?.querySelector('.suggestion-items-container');
-            expect(container?.style.display).toBe('none');
-            manager[Symbol.dispose]();
         });
     });
     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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                manager.currentSuggestions.setValue([]);
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const items = component?.querySelectorAll('.suggestion-item');
+                expect(items?.length).toBe(0);
             });
-            await sleepAsync(50);
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const items = component?.querySelectorAll('.suggestion-item');
-            expect(items?.length).toBe(0);
-            manager[Symbol.dispose]();
         });
     });
     it('should support fullScreenSuggestions prop', async () => {
         await usingAsync(new Injector(), async (injector) => {
-            const manager = createManager();
-            manager.isOpened.setValue(true);
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager, fullScreenSuggestions: true }),
+            await usingAsync(createManager(), async (manager) => {
+                manager.isOpened.setValue(true);
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager, fullScreenSuggestions: true }),
+                });
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const container = component?.querySelector('.suggestion-items-container');
+                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');
-            const container = component?.querySelector('.suggestion-items-container');
-            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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                manager.isOpened.setValue(true);
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const container = component?.querySelector('.suggestion-items-container');
+                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');
-            const container = component?.querySelector('.suggestion-items-container');
-            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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const container = component?.querySelector('.suggestion-items-container');
+                const computedStyle = window.getComputedStyle(container);
+                expect(computedStyle.position).toBe('absolute');
+                expect(computedStyle.overflow).toBe('hidden');
+                expect(computedStyle.zIndex).toBe('1');
             });
-            await sleepAsync(50);
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const container = component?.querySelector('.suggestion-items-container');
-            const computedStyle = window.getComputedStyle(container);
-            expect(computedStyle.position).toBe('absolute');
-            expect(computedStyle.overflow).toBe('hidden');
-            expect(computedStyle.zIndex).toBe('1');
-            manager[Symbol.dispose]();
         });
     });
     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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(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');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                const selectSpy = vi.spyOn(manager, 'selectSuggestion');
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const items = component?.querySelectorAll('.suggestion-item');
+                items[1]?.click();
+                expect(selectSpy).toHaveBeenCalledWith(injector, 1);
             });
-            await sleepAsync(50);
-            const selectSpy = vi.spyOn(manager, 'selectSuggestion');
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const items = component?.querySelectorAll('.suggestion-item');
-            items[1]?.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');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            await usingAsync(createManager(), async (manager) => {
+                manager.isOpened.setValue(false);
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+                });
+                await sleepAsync(50);
+                manager.isOpened.setValue(true);
+                await sleepAsync(50);
+                const component = document.querySelector('shade-command-palette-suggestion-list');
+                const container = component?.querySelector('.suggestion-items-container');
+                expect(container?.style.zIndex).toBe('1');
+                manager.isOpened.setValue(false);
+                await sleepAsync(50);
+                expect(container?.style.zIndex).toBe('-1');
             });
-            await sleepAsync(50);
-            manager.isOpened.setValue(true);
-            await sleepAsync(50);
-            const component = document.querySelector('shade-command-palette-suggestion-list');
-            const container = component?.querySelector('.suggestion-items-container');
-            expect(container?.style.zIndex).toBe('1');
-            manager.isOpened.setValue(false);
-            await sleepAsync(50);
-            expect(container?.style.zIndex).toBe('-1');
-            manager[Symbol.dispose]();
         });
     });
 });