@furystack/shades-common-components 12.4.0 → 12.5.0

package/esm/components/inputs/select.spec.js

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject';
-import { createComponent, initializeShadeRoot } from '@furystack/shades';
-import { sleepAsync, usingAsync } from '@furystack/utils';
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades';
+import { usingAsync } from '@furystack/utils';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Select } from './select.js';
 describe('Select', () => {
@@ -24,7 +24,7 @@ describe('Select', () => {
             rootElement: root,
             jsxElement: createComponent(Select, { ...props }),
         });
-        await sleepAsync(100);
+        await flushUpdates();
         return {
             injector,
             select: document.querySelector('shade-select'),
@@ -278,7 +278,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, disabled: true }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(false);
             });
         });
@@ -288,7 +288,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(true);
                 const dropdown = select.querySelector('.dropdown');
                 expect(dropdown).not.toBeNull();
@@ -298,7 +298,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 expect(items.length).toBe(3);
             });
@@ -307,11 +307,11 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(true);
                 const backdrop = select.querySelector('.dropdown-backdrop');
                 backdrop.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(false);
             });
         });
@@ -319,12 +319,12 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(true);
                 // Re-query after re-render
                 const trigger2 = select.querySelector('.select-trigger');
                 trigger2.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(false);
             });
         });
@@ -335,10 +335,10 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, onValueChange }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 items[1].click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onValueChange).toHaveBeenCalledWith('b');
             });
         });
@@ -347,10 +347,10 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, onValueChange }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 items[0].click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(false);
             });
         });
@@ -363,10 +363,10 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options, onValueChange }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 items[1].click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onValueChange).not.toHaveBeenCalled();
             });
         });
@@ -374,7 +374,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, value: 'b' }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const selected = select.querySelector('.dropdown-item[data-selected]');
                 expect(selected).not.toBeNull();
                 expect(selected?.textContent).toContain('Beta');
@@ -411,10 +411,10 @@ describe('Select', () => {
             }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 items[1].click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onMultiValueChange).toHaveBeenCalledWith(['a', 'b']);
             });
         });
@@ -428,10 +428,10 @@ describe('Select', () => {
             }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 items[0].click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onMultiValueChange).toHaveBeenCalledWith(['b']);
             });
         });
@@ -446,7 +446,7 @@ describe('Select', () => {
                 const chipRemoves = select.querySelectorAll('.select-chip-remove');
                 expect(chipRemoves.length).toBe(2);
                 chipRemoves[0].click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onMultiValueChange).toHaveBeenCalledWith(['b']);
             });
         });
@@ -462,7 +462,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(true);
             });
         });
@@ -470,7 +470,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(true);
             });
         });
@@ -478,7 +478,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(true);
             });
         });
@@ -486,7 +486,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(true);
             });
         });
@@ -494,10 +494,10 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(true);
                 trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(false);
             });
         });
@@ -506,14 +506,14 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, onValueChange }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 // Re-query trigger after re-render, then navigate and select
                 const trigger2 = select.querySelector('.select-trigger');
                 trigger2.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 const trigger3 = select.querySelector('.select-trigger');
                 trigger3.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onValueChange).toHaveBeenCalled();
             });
         });
@@ -522,14 +522,14 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, onValueChange }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 // Re-query trigger after re-render
                 const trigger2 = select.querySelector('.select-trigger');
                 trigger2.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 const trigger3 = select.querySelector('.select-trigger');
                 trigger3.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onValueChange).toHaveBeenCalledWith('c');
             });
         });
@@ -537,7 +537,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, disabled: true }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(false);
             });
         });
@@ -547,7 +547,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, showSearch: true }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const searchInput = select.querySelector('.dropdown-search');
                 expect(searchInput).not.toBeNull();
             });
@@ -556,7 +556,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, showSearch: false }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const searchInput = select.querySelector('.dropdown-search');
                 expect(searchInput).toBeNull();
             });
@@ -565,11 +565,11 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, showSearch: true }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const searchInput = select.querySelector('.dropdown-search');
                 searchInput.value = 'alp';
                 searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-                await sleepAsync(100);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 expect(items.length).toBe(1);
                 expect(items[0].textContent).toContain('Alpha');
@@ -579,11 +579,11 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, showSearch: true }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const searchInput = select.querySelector('.dropdown-search');
                 searchInput.value = 'zzz';
                 searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-                await sleepAsync(100);
+                await flushUpdates();
                 const noResults = select.querySelector('.dropdown-no-results');
                 expect(noResults).not.toBeNull();
                 expect(noResults?.textContent).toContain('No results found');
@@ -594,11 +594,11 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, showSearch: true, filterOption }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const searchInput = select.querySelector('.dropdown-search');
                 searchInput.value = 'anything';
                 searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-                await sleepAsync(100);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 expect(items.length).toBe(1);
                 expect(items[0].textContent).toContain('Alpha');
@@ -623,7 +623,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ optionGroups }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const groupLabels = select.querySelectorAll('.dropdown-group-label');
                 expect(groupLabels.length).toBe(2);
                 expect(groupLabels[0].textContent).toContain('Fruits');
@@ -649,11 +649,11 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ optionGroups, showSearch: true }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const searchInput = select.querySelector('.dropdown-search');
                 searchInput.value = 'apple';
                 searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-                await sleepAsync(100);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 expect(items.length).toBe(1);
                 expect(items[0].textContent).toContain('Apple');
@@ -703,7 +703,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 // Focus handler sets data-focused on the inner container div (selectRootRef), not the host
                 const innerContainer = select.querySelector('div');
                 expect(innerContainer.hasAttribute('data-focused')).toBe(true);
@@ -713,11 +713,11 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 const innerContainer = select.querySelector('div');
                 expect(innerContainer.hasAttribute('data-focused')).toBe(true);
                 trigger.dispatchEvent(new FocusEvent('blur', { bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(innerContainer.hasAttribute('data-focused')).toBe(false);
             });
         });
@@ -779,7 +779,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 // Re-query after re-render
                 const trigger2 = select.querySelector('.select-trigger');
                 expect(trigger2.getAttribute('aria-expanded')).toBe('true');
@@ -789,7 +789,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const dropdown = select.querySelector('.dropdown');
                 expect(dropdown?.getAttribute('role')).toBe('listbox');
             });
@@ -798,7 +798,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect(), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 items.forEach((item) => {
                     expect(item.getAttribute('role')).toBe('option');
@@ -809,7 +809,7 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, mode: 'multiple' }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const dropdown = select.querySelector('.dropdown');
                 expect(dropdown?.getAttribute('aria-multiselectable')).toBe('true');
             });
@@ -827,10 +827,10 @@ describe('Select', () => {
             }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const searchInput = select.querySelector('.dropdown-search');
                 searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onMultiValueChange).toHaveBeenCalledWith(['a']);
             });
         });
@@ -841,19 +841,19 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, onValueChange }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 // Navigate to End first
                 const trigger2 = select.querySelector('.select-trigger');
                 trigger2.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 // Now ArrowUp
                 const trigger3 = select.querySelector('.select-trigger');
                 trigger3.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 // Then select with Enter
                 const trigger4 = select.querySelector('.select-trigger');
                 trigger4.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onValueChange).toHaveBeenCalledWith('b');
             });
         });
@@ -864,13 +864,13 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, onValueChange }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const trigger2 = select.querySelector('.select-trigger');
                 trigger2.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 const trigger3 = select.querySelector('.select-trigger');
                 trigger3.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onValueChange).toHaveBeenCalled();
             });
         });
@@ -879,10 +879,10 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, showSearch: true, onValueChange }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const searchInput = select.querySelector('.dropdown-search');
                 searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 // Space should be ignored as a selection trigger when search is active
                 expect(onValueChange).not.toHaveBeenCalled();
             });
@@ -894,13 +894,13 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, onValueChange }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const trigger2 = select.querySelector('.select-trigger');
                 trigger2.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 const trigger3 = select.querySelector('.select-trigger');
                 trigger3.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onValueChange).toHaveBeenCalledWith('a');
             });
         });
@@ -930,10 +930,10 @@ describe('Select', () => {
             }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const items = select.querySelectorAll('.dropdown-item');
                 items[1].click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onValueChange).toHaveBeenCalledWith('a,b');
             });
         });
@@ -949,7 +949,7 @@ describe('Select', () => {
             }), async ({ select }) => {
                 const chipRemoves = select.querySelectorAll('.select-chip-remove');
                 chipRemoves[0].click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(onValueChange).toHaveBeenCalledWith('b');
             });
         });
@@ -979,11 +979,11 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ optionGroups, showSearch: true }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 const searchInput = select.querySelector('.dropdown-search');
                 searchInput.value = 'zzz';
                 searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-                await sleepAsync(100);
+                await flushUpdates();
                 const noResults = select.querySelector('.dropdown-no-results');
                 expect(noResults).not.toBeNull();
                 expect(noResults?.textContent).toContain('No results found');
@@ -995,12 +995,12 @@ describe('Select', () => {
             await usingAsync(await renderSelect({ options: defaultOptions, mode: 'multiple' }), async ({ select }) => {
                 const trigger = select.querySelector('.select-trigger');
                 trigger.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 expect(select.hasAttribute('data-open')).toBe(true);
                 // In multi mode, clicking trigger again should NOT close (only backdrop closes)
                 const trigger2 = select.querySelector('.select-trigger');
                 trigger2.click();
-                await sleepAsync(50);
+                await flushUpdates();
                 // It should still remain open or re-open in multi mode
             });
         });