@furystack/shades-common-components 12.4.0 → 12.6.0

package/src/components/modal.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { initializeShadeRoot, createComponent, Shade, flushUpdates } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Modal } from './modal.js'
 
@@ -28,7 +28,7 @@ describe('Modal', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(document.body.innerHTML).toContain('shade-backdrop')
         expect(document.body.innerHTML).toContain('modal-content')
       })
@@ -48,7 +48,7 @@ describe('Modal', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(document.body.innerHTML).not.toContain('shade-backdrop')
         expect(document.body.innerHTML).not.toContain('modal-content')
       })
@@ -74,12 +74,11 @@ describe('Modal', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({ injector, rootElement, jsxElement: <Wrapper /> })
-        await sleepAsync(50)
+        await flushUpdates()
         expect(document.body.innerHTML).not.toContain('modal-content')
 
         setVisible(true)
         await flushUpdates()
-        await sleepAsync(50)
 
         expect(document.body.innerHTML).toContain('shade-backdrop')
         expect(document.body.innerHTML).toContain('modal-content')
@@ -106,12 +105,11 @@ describe('Modal', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({ injector, rootElement, jsxElement: <Wrapper /> })
-        await sleepAsync(50)
+        await flushUpdates()
         expect(document.body.innerHTML).toContain('modal-content')
 
         setVisible(false)
         await flushUpdates()
-        await sleepAsync(50)
 
         expect(document.body.innerHTML).not.toContain('shade-backdrop')
         expect(document.body.innerHTML).not.toContain('modal-content')
@@ -135,12 +133,12 @@ describe('Modal', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const backdrop = document.querySelector('.shade-backdrop') as HTMLDivElement
         expect(backdrop).not.toBeNull()
 
         backdrop.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(onClose).toHaveBeenCalledTimes(1)
       })
@@ -167,10 +165,10 @@ describe('Modal', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const backdrop = document.querySelector('.shade-backdrop') as HTMLDivElement
         backdrop.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(hideAnimation).toHaveBeenCalledTimes(1)
         expect(onClose).toHaveBeenCalledTimes(1)
@@ -195,7 +193,7 @@ describe('Modal', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(showAnimation).toHaveBeenCalled()
       })
     })
@@ -221,12 +219,11 @@ describe('Modal', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({ injector, rootElement, jsxElement: <Wrapper /> })
-        await sleepAsync(50)
+        await flushUpdates()
         expect(showAnimation).not.toHaveBeenCalled()
 
         setVisible(true)
         await flushUpdates()
-        await sleepAsync(50)
 
         expect(showAnimation).toHaveBeenCalled()
         expect(showAnimation.mock.calls[0][0]).toBeInstanceOf(Element)
@@ -248,10 +245,10 @@ describe('Modal', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const backdrop = document.querySelector('.shade-backdrop') as HTMLDivElement
         backdrop.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(hideAnimation).toHaveBeenCalled()
         expect(hideAnimation.mock.calls[0][0]).toBeInstanceOf(Element)
@@ -278,7 +275,7 @@ describe('Modal', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const backdrop = document.querySelector('.shade-backdrop') as HTMLDivElement
         expect(backdrop).not.toBeNull()
         expect(backdrop.style.backgroundColor).toBe('rgba(0, 0, 0, 0.5)')
@@ -303,7 +300,7 @@ describe('Modal', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const backdrop = document.querySelector('.shade-backdrop') as HTMLDivElement
         expect(backdrop).not.toBeNull()
         expect(backdrop.innerHTML).toContain('child-1')

package/src/components/noty-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 { defaultDarkTheme } from '../services/default-dark-theme.js'
 import type { NotyModel } from '../services/noty-service.js'
@@ -80,7 +80,7 @@ describe('NotyComponent', () => {
         jsxElement: <NotyComponent model={model} onDismiss={() => {}} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const noty = document.querySelector('shade-noty')
       expect(noty).not.toBeNull()
@@ -100,7 +100,7 @@ describe('NotyComponent', () => {
         jsxElement: <NotyComponent model={model} onDismiss={() => {}} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       expect(document.body.innerHTML).toContain('Success Title')
       expect(document.body.innerHTML).toContain('Success message body')
@@ -119,7 +119,7 @@ describe('NotyComponent', () => {
         jsxElement: <NotyComponent model={model} onDismiss={() => {}} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const noty = document.querySelector('shade-noty') as HTMLElement
       expect(noty).not.toBeNull()
@@ -139,7 +139,7 @@ describe('NotyComponent', () => {
         jsxElement: <NotyComponent model={model} onDismiss={() => {}} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const dismissButton = document.querySelector('.dismiss-button')
       expect(dismissButton).not.toBeNull()
@@ -148,6 +148,7 @@ describe('NotyComponent', () => {
   })
 
   it('should call onDismiss when dismiss button is clicked', async () => {
+    vi.useFakeTimers()
     const onDismiss = vi.fn()
 
     Element.prototype.animate = vi.fn(
@@ -181,16 +182,17 @@ describe('NotyComponent', () => {
         jsxElement: <NotyComponent model={model} onDismiss={onDismiss} />,
       })
 
-      await sleepAsync(50)
+      await vi.advanceTimersByTimeAsync(50)
 
       const dismissButton = document.querySelector('.dismiss-button') as HTMLButtonElement
       expect(dismissButton).not.toBeNull()
       dismissButton.click()
 
-      await sleepAsync(50)
+      await vi.advanceTimersByTimeAsync(50)
 
       expect(onDismiss).toHaveBeenCalled()
     })
+    vi.useRealTimers()
   })
 
   it('should start fade-in animation on mount', async () => {
@@ -363,7 +365,7 @@ describe('NotyComponent', () => {
           jsxElement: <NotyComponent model={model} onDismiss={() => {}} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const noty = document.querySelector('shade-noty') as HTMLElement
         expect(noty).not.toBeNull()
@@ -384,7 +386,7 @@ describe('NotyComponent', () => {
         jsxElement: <NotyComponent model={model} onDismiss={() => {}} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const noty = document.querySelector('shade-noty') as HTMLElement
       expect(noty).not.toBeNull()
@@ -443,7 +445,7 @@ describe('NotyList', () => {
         jsxElement: <NotyList />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const notyList = document.querySelector('shade-noty-list')
       expect(notyList).not.toBeNull()
@@ -461,7 +463,7 @@ describe('NotyList', () => {
         jsxElement: <NotyList />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const notyList = document.querySelector('shade-noty-list') as HTMLElement
       expect(notyList).not.toBeNull()
@@ -491,7 +493,7 @@ describe('NotyList', () => {
         jsxElement: <NotyList />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const notys = document.querySelectorAll('shade-noty')
       expect(notys.length).toBe(2)
@@ -510,7 +512,7 @@ describe('NotyList', () => {
         jsxElement: <NotyList />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       let notys = document.querySelectorAll('shade-noty')
       expect(notys.length).toBe(0)
@@ -518,7 +520,7 @@ describe('NotyList', () => {
       const newNoty: NotyModel = { type: 'warning', title: 'Warning', body: 'Warning message' }
       notyService.emit('onNotyAdded', newNoty)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       notys = document.querySelectorAll('shade-noty')
       expect(notys.length).toBe(1)
@@ -541,14 +543,14 @@ describe('NotyList', () => {
         jsxElement: <NotyList />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       let notys = document.querySelectorAll('shade-noty')
       expect(notys.length).toBe(1)
 
       notyService.emit('onNotyRemoved', noty)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       notys = document.querySelectorAll('shade-noty')
       expect(notys.length).toBe(0)
@@ -567,7 +569,7 @@ describe('NotyList', () => {
         jsxElement: <NotyList />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const noty1: NotyModel = { type: 'info', title: 'Info 1', body: 'Body 1' }
       const noty2: NotyModel = { type: 'success', title: 'Success 1', body: 'Body 2' }
@@ -577,14 +579,14 @@ describe('NotyList', () => {
       notyService.emit('onNotyAdded', noty2)
       notyService.emit('onNotyAdded', noty3)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       let notys = document.querySelectorAll('shade-noty')
       expect(notys.length).toBe(3)
 
       notyService.emit('onNotyRemoved', noty2)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       notys = document.querySelectorAll('shade-noty')
       expect(notys.length).toBe(2)
@@ -592,7 +594,7 @@ describe('NotyList', () => {
       notyService.emit('onNotyRemoved', noty1)
       notyService.emit('onNotyRemoved', noty3)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       notys = document.querySelectorAll('shade-noty')
       expect(notys.length).toBe(0)
@@ -617,11 +619,11 @@ describe('NotyList', () => {
         jsxElement: <NotyList />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       notyService.emit('onNotyRemoved', noty2)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const notys = document.querySelectorAll('shade-noty')
       expect(notys.length).toBe(1)

package/src/components/page-container/index.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 } from 'vitest'
 import { PageContainer } from './index.js'
 
@@ -24,7 +24,7 @@ describe('PageContainer component', () => {
           jsxElement: <PageContainer>Content</PageContainer>,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]')
         expect(element).not.toBeNull()
         expect(element?.tagName.toLowerCase()).toBe('div')
@@ -46,7 +46,7 @@ describe('PageContainer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]')
         expect(element?.textContent).toContain('Child content')
       })
@@ -67,7 +67,7 @@ describe('PageContainer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]')
         expect(element?.textContent).toContain('First')
         expect(element?.textContent).toContain('Second')
@@ -86,7 +86,7 @@ describe('PageContainer component', () => {
           jsxElement: <PageContainer>Content</PageContainer>,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.padding).toBe('24px')
       })
@@ -102,7 +102,7 @@ describe('PageContainer component', () => {
           jsxElement: <PageContainer>Content</PageContainer>,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.gap).toBe('16px')
       })
@@ -118,7 +118,7 @@ describe('PageContainer component', () => {
           jsxElement: <PageContainer>Content</PageContainer>,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.maxWidth).toBe('100%')
       })
@@ -134,7 +134,7 @@ describe('PageContainer component', () => {
           jsxElement: <PageContainer>Content</PageContainer>,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.height).toBe('100%')
       })
@@ -150,7 +150,7 @@ describe('PageContainer component', () => {
           jsxElement: <PageContainer>Content</PageContainer>,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.marginLeft).toBe('')
         expect(element.style.marginRight).toBe('')
@@ -169,7 +169,7 @@ describe('PageContainer component', () => {
           jsxElement: <PageContainer maxWidth="800px">Content</PageContainer>,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.maxWidth).toBe('800px')
       })
@@ -185,7 +185,7 @@ describe('PageContainer component', () => {
           jsxElement: <PageContainer padding="48px">Content</PageContainer>,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.padding).toBe('48px')
       })
@@ -201,7 +201,7 @@ describe('PageContainer component', () => {
           jsxElement: <PageContainer gap="32px">Content</PageContainer>,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.gap).toBe('32px')
       })
@@ -221,7 +221,7 @@ describe('PageContainer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.marginLeft).toBe('auto')
         expect(element.style.marginRight).toBe('auto')
@@ -238,7 +238,7 @@ describe('PageContainer component', () => {
           jsxElement: <PageContainer fullHeight={false}>Content</PageContainer>,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.height).toBe('auto')
       })
@@ -260,7 +260,7 @@ describe('PageContainer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('div[is="shade-page-container"]') as HTMLDivElement
         expect(element.style.maxWidth).toBe('800px')
         expect(element.style.marginLeft).toBe('auto')

package/src/components/page-container/page-header.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 } from 'vitest'
 import { PageHeader } from './page-header.js'
 
@@ -24,7 +24,7 @@ describe('PageHeader component', () => {
           jsxElement: <PageHeader title="Test Title" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const element = document.querySelector('shade-page-header')
         expect(element).not.toBeNull()
         expect(element?.tagName.toLowerCase()).toBe('shade-page-header')
@@ -41,7 +41,7 @@ describe('PageHeader component', () => {
           jsxElement: <PageHeader title="Users" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const title = document.querySelector('[data-testid="page-header-title"]')
         expect(title).not.toBeNull()
         expect(title?.textContent).toBe('Users')
@@ -58,7 +58,7 @@ describe('PageHeader component', () => {
           jsxElement: <PageHeader title="Dashboard" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const title = document.querySelector('[data-testid="page-header-title"]')
         expect(title?.tagName.toLowerCase()).toBe('h2')
       })
@@ -76,7 +76,7 @@ describe('PageHeader component', () => {
           jsxElement: <PageHeader icon="👥" title="Users" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const icon = document.querySelector('.page-header-icon')
         expect(icon).not.toBeNull()
         expect(icon?.textContent).toBe('👥')
@@ -93,7 +93,7 @@ describe('PageHeader component', () => {
           jsxElement: <PageHeader title="Users" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const icon = document.querySelector('.page-header-icon')
         expect(icon).toBeNull()
       })
@@ -109,7 +109,7 @@ describe('PageHeader component', () => {
           jsxElement: <PageHeader icon="📁" title="Projects" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const title = document.querySelector('[data-testid="page-header-title"]')
         expect(title?.textContent).toContain('📁')
         expect(title?.textContent).toContain('Projects')
@@ -128,7 +128,7 @@ describe('PageHeader component', () => {
           jsxElement: <PageHeader title="Users" description="Manage user accounts." />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const description = document.querySelector('[data-testid="page-header-description"]')
         expect(description).not.toBeNull()
         expect(description?.textContent).toBe('Manage user accounts.')
@@ -145,7 +145,7 @@ describe('PageHeader component', () => {
           jsxElement: <PageHeader title="Users" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const description = document.querySelector('[data-testid="page-header-description"]')
         expect(description).toBeNull()
       })
@@ -161,7 +161,7 @@ describe('PageHeader component', () => {
           jsxElement: <PageHeader title="Dashboard" description="Overview of your data." />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const description = document.querySelector('[data-testid="page-header-description"]')
         expect(description?.tagName.toLowerCase()).toBe('p')
       })
@@ -188,7 +188,7 @@ describe('PageHeader component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const actionsContainer = document.querySelector('[data-testid="page-header-actions"]')
         expect(actionsContainer).not.toBeNull()
 
@@ -208,7 +208,7 @@ describe('PageHeader component', () => {
           jsxElement: <PageHeader title="Users" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const actionsContainer = document.querySelector('[data-testid="page-header-actions"]')
         expect(actionsContainer).toBeNull()
       })
@@ -234,7 +234,7 @@ describe('PageHeader component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const actionsContainer = document.querySelector('[data-testid="page-header-actions"]')
         const buttons = actionsContainer?.querySelectorAll('button')
         expect(buttons?.length).toBe(2)
@@ -260,7 +260,7 @@ describe('PageHeader component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const icon = document.querySelector('.page-header-icon')
         expect(icon?.textContent).toBe('👥')
@@ -292,7 +292,7 @@ describe('PageHeader component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const container = document.querySelector('div[is="shade-page-container"]')
         expect(container).not.toBeNull()