@furystack/shades-common-components 12.3.0 → 12.5.0

package/src/components/list/list.spec.tsx

@@ -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 { ListService } from '../../services/list-service.js'
 import { List } from './list.js'
@@ -40,7 +40,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         expect(list).not.toBeNull()
@@ -62,7 +62,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const items = list?.querySelectorAll('shade-list-item')
@@ -85,7 +85,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listbox = list?.querySelector('[role="listbox"]')
@@ -109,7 +109,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const options = list?.querySelectorAll('[role="option"]')
@@ -137,7 +137,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const icons = list?.querySelectorAll('[data-testid="icon"]')
@@ -165,7 +165,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const actions = list?.querySelectorAll('[data-testid="action"]')
@@ -193,7 +193,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list') as HTMLElement
         expect(list?.getAttribute('data-variant')).toBe('contained')
@@ -215,7 +215,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(service.items.getValue()).toEqual(testItems)
 
@@ -240,7 +240,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const wrapper = list?.querySelector('.shade-list-wrapper') as HTMLElement
@@ -268,7 +268,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const wrapper = list?.querySelector('.shade-list-wrapper') as HTMLElement
@@ -298,7 +298,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listItems = list?.querySelectorAll('shade-list-item') as NodeListOf<HTMLElement>
@@ -323,10 +323,10 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         service.focusedItem.setValue(testItems[1])
-        await sleepAsync(10)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listItems = list?.querySelectorAll('shade-list-item') as NodeListOf<HTMLElement>
@@ -352,10 +352,10 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         service.selection.setValue([testItems[0], testItems[2]])
-        await sleepAsync(10)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listItems = list?.querySelectorAll('shade-list-item') as NodeListOf<HTMLElement>
@@ -380,10 +380,10 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         service.selection.setValue([testItems[0]])
-        await sleepAsync(10)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listItems = list?.querySelectorAll('shade-list-item') as NodeListOf<HTMLElement>
@@ -413,10 +413,10 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         service.selection.setValue([testItems[0]])
-        await sleepAsync(10)
+        await flushUpdates()
 
         expect(onSelectionChange).toHaveBeenCalledWith([testItems[0]])
 
@@ -442,7 +442,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
 
@@ -468,7 +468,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
 
@@ -494,7 +494,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
 
@@ -520,7 +520,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
 
@@ -546,7 +546,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
         expect(service.selection.getValue()).toContain(testItems[0])
@@ -573,7 +573,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: '+', bubbles: true }))
 
@@ -599,7 +599,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: '-', bubbles: true }))
 
@@ -625,7 +625,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: '*', bubbles: true }))
 
@@ -655,7 +655,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
 
@@ -681,7 +681,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
 
@@ -707,7 +707,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
 
@@ -741,7 +741,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
 
@@ -770,7 +770,7 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list')
         const listItems = list?.querySelectorAll('shade-list-item') as NodeListOf<HTMLElement>
@@ -800,12 +800,12 @@ describe('List', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const list = document.querySelector('shade-list') as HTMLElement
         list.remove()
 
-        await sleepAsync(10)
+        await flushUpdates()
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
         expect(service.focusedItem.getValue()).toEqual(testItems[0])

package/src/components/markdown/markdown-display.spec.tsx

@@ -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 { MarkdownDisplay } from './markdown-display.js'
 
@@ -24,7 +24,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="Hello" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const el = document.querySelector('shade-markdown-display')
       expect(el).not.toBeNull()
@@ -41,7 +41,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="# Hello World" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const typography = document.querySelector('shade-markdown-display shade-typography')
       expect(typography).not.toBeNull()
@@ -60,7 +60,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="Just a paragraph." />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const typography = document.querySelector('shade-markdown-display shade-typography[data-variant="body1"]')
       expect(typography).not.toBeNull()
@@ -78,7 +78,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content={'```js\nconsole.log("hi")\n```'} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const codeBlock = document.querySelector('shade-markdown-display .md-code-block')
       expect(codeBlock).not.toBeNull()
@@ -96,7 +96,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content={'- Item A\n- Item B'} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const list = document.querySelector('shade-markdown-display ul')
       expect(list).not.toBeNull()
@@ -115,7 +115,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="- [ ] Task" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const checkbox = document.querySelector('shade-markdown-display shade-checkbox')
       expect(checkbox).not.toBeNull()
@@ -134,7 +134,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="- [ ] Task" readOnly={false} onChange={onChange} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const checkbox = document.querySelector('shade-markdown-display shade-checkbox')
       expect(checkbox).not.toBeNull()
@@ -144,7 +144,7 @@ describe('MarkdownDisplay', () => {
       expect(input).not.toBeNull()
       input.click()
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       expect(onChange).toHaveBeenCalledOnce()
       expect(onChange).toHaveBeenCalledWith('- [x] Task')
@@ -161,7 +161,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="> Quote text" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const bq = document.querySelector('shade-markdown-display .md-blockquote')
       expect(bq).not.toBeNull()
@@ -179,7 +179,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="---" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const hr = document.querySelector('shade-markdown-display .md-hr')
       expect(hr).not.toBeNull()
@@ -196,7 +196,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="[Click here](https://example.com)" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const link = document.querySelector('shade-markdown-display .md-link') as HTMLAnchorElement
       expect(link).not.toBeNull()
@@ -215,7 +215,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="![alt text](image.png)" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const img = document.querySelector('shade-markdown-display .md-image') as HTMLImageElement
       expect(img).not.toBeNull()
@@ -233,7 +233,7 @@ describe('MarkdownDisplay', () => {
         jsxElement: <MarkdownDisplay content="" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const root = document.querySelector('shade-markdown-display .md-root')
       expect(root).not.toBeNull()

package/src/components/markdown/markdown-editor.spec.tsx

@@ -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 { MarkdownEditor } from './markdown-editor.js'
 
@@ -24,7 +24,7 @@ describe('MarkdownEditor', () => {
         jsxElement: <MarkdownEditor value="# Hello" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const el = document.querySelector('shade-markdown-editor')
       expect(el).not.toBeNull()
@@ -42,7 +42,7 @@ describe('MarkdownEditor', () => {
           jsxElement: <MarkdownEditor value="# Hello" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const split = document.querySelector('.md-editor-split') as HTMLElement
         expect(split).not.toBeNull()
@@ -68,7 +68,7 @@ describe('MarkdownEditor', () => {
           jsxElement: <MarkdownEditor value="# Hello" layout="above-below" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const split = document.querySelector('.md-editor-split') as HTMLElement
         expect(split).not.toBeNull()
@@ -88,7 +88,7 @@ describe('MarkdownEditor', () => {
           jsxElement: <MarkdownEditor value="# Hello" layout="tabs" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const tabs = document.querySelector('shade-markdown-editor shade-tabs')
         expect(tabs).not.toBeNull()
@@ -108,7 +108,7 @@ describe('MarkdownEditor', () => {
           jsxElement: <MarkdownEditor value="# Hello" layout="tabs" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const input = document.querySelector('shade-markdown-editor shade-markdown-input')
         expect(input).not.toBeNull()
@@ -127,7 +127,7 @@ describe('MarkdownEditor', () => {
         jsxElement: <MarkdownEditor value={mdContent} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
       expect(textarea.value).toBe(mdContent)

package/src/components/markdown/markdown-input.spec.tsx

@@ -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 { MarkdownInput } from './markdown-input.js'
 
@@ -24,7 +24,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const el = document.querySelector('shade-markdown-input')
       expect(el).not.toBeNull()
@@ -41,7 +41,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="# Hello" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
       expect(textarea).not.toBeNull()
@@ -59,7 +59,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" labelTitle="Markdown Content" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const label = document.querySelector('shade-markdown-input label')
       expect(label?.textContent).toContain('Markdown Content')
@@ -76,7 +76,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" placeholder="Type markdown..." />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
       expect(textarea.placeholder).toBe('Type markdown...')
@@ -93,7 +93,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" disabled />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
       expect(wrapper.hasAttribute('data-disabled')).toBe(true)
@@ -113,7 +113,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" readOnly />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
       expect(textarea.readOnly).toBe(true)
@@ -131,13 +131,13 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" onValueChange={onValueChange} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
       textarea.value = '# New content'
       textarea.dispatchEvent(new Event('input', { bubbles: true }))
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       expect(onValueChange).toHaveBeenCalledWith('# New content')
     })
@@ -153,7 +153,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" rows={20} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
       expect(textarea.rows).toBe(20)
@@ -200,7 +200,7 @@ describe('MarkdownInput', () => {
             jsxElement: <MarkdownInput value="Hello " onValueChange={onValueChange} />,
           })
 
-          await sleepAsync(50)
+          await flushUpdates()
 
           const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
           textarea.selectionStart = 6
@@ -210,7 +210,7 @@ describe('MarkdownInput', () => {
           const pasteEvent = createPasteEvent([{ type: 'image/png', file }])
           textarea.dispatchEvent(pasteEvent)
 
-          await sleepAsync(100)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalledOnce()
           const result = onValueChange.mock.calls[0][0] as string
@@ -233,14 +233,14 @@ describe('MarkdownInput', () => {
           jsxElement: <MarkdownInput value="" onValueChange={onValueChange} maxImageSizeBytes={5} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
         const file = new File(['this-is-larger-than-5-bytes'], 'big.png', { type: 'image/png' })
         const pasteEvent = createPasteEvent([{ type: 'image/png', file }])
         textarea.dispatchEvent(pasteEvent)
 
-        await sleepAsync(100)
+        await flushUpdates()
 
         expect(onValueChange).not.toHaveBeenCalled()
       })
@@ -257,14 +257,14 @@ describe('MarkdownInput', () => {
           jsxElement: <MarkdownInput value="" onValueChange={onValueChange} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
         const file = new File(['text content'], 'note.txt', { type: 'text/plain' })
         const pasteEvent = createPasteEvent([{ type: 'text/plain', file }])
         const wasDefaultPrevented = !textarea.dispatchEvent(pasteEvent)
 
-        await sleepAsync(100)
+        await flushUpdates()
 
         expect(wasDefaultPrevented).toBe(false)
         expect(onValueChange).not.toHaveBeenCalled()