@furystack/shades-common-components 12.3.0 → 12.5.0

package/src/components/menu/menu.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 type { MenuEntry } from './menu-types.js'
 import { Menu } from './menu.js'
@@ -29,7 +29,7 @@ describe('Menu', () => {
       rootElement: root,
       jsxElement: <Menu {...props} />,
     })
-    await sleepAsync(50)
+    await flushUpdates()
     return {
       injector,
       menu: root.querySelector('shade-menu') as HTMLElement,
@@ -219,7 +219,7 @@ describe('Menu', () => {
         const groupLabel = menu.querySelector('.menu-group-label-inline') as HTMLElement
         expect(groupLabel).toBeTruthy()
         groupLabel.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const groupItems = menu.querySelectorAll('[role="menuitem"]')
         expect(groupItems.length).toBe(1)
@@ -239,7 +239,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems() }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem).toBeTruthy()
@@ -251,7 +251,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems(), mode: 'horizontal' }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem).toBeTruthy()
@@ -265,10 +265,10 @@ describe('Menu', () => {
         menu.focus()
         // Navigate to first item
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         // Press Enter
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         expect(handleSelect).toHaveBeenCalledWith('home')
       })
     })
@@ -277,7 +277,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems() }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('settings')
@@ -289,10 +289,10 @@ describe('Menu', () => {
         menu.focus()
         // Go to end first
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         // Then Home
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('home')
@@ -308,10 +308,10 @@ describe('Menu', () => {
         menu.focus()
         // Navigate to end
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         // One more down should wrap to first
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('a')
@@ -327,10 +327,10 @@ describe('Menu', () => {
         menu.focus()
         // Navigate to Home first
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         // One more up should wrap to last
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('b')
@@ -342,9 +342,9 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems(), onSelect: handleSelect }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         expect(handleSelect).toHaveBeenCalledWith('home')
       })
     })
@@ -354,11 +354,11 @@ describe('Menu', () => {
         menu.focus()
         // First go to end
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Then ArrowUp
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('about')
@@ -370,11 +370,11 @@ describe('Menu', () => {
         menu.focus()
         // First go to end
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Then ArrowLeft
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('about')
@@ -386,7 +386,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems(), onSelect: handleSelect }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'a', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         expect(handleSelect).not.toHaveBeenCalled()
       })
     })
@@ -397,7 +397,7 @@ describe('Menu', () => {
         menu.focus()
         // Press Enter without navigating to any item first
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         expect(handleSelect).not.toHaveBeenCalled()
       })
     })
@@ -407,7 +407,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem).toBeNull()
       })
@@ -419,7 +419,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems() }), async ({ menu }) => {
         const item = menu.querySelector('[data-key="about"]') as HTMLElement
         item.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(item.classList.contains('focused')).toBe(true)
       })
@@ -430,7 +430,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items }), async ({ menu }) => {
         const item = menu.querySelector('[data-key="disabled-item"]') as HTMLElement
         item.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(item.classList.contains('focused')).toBe(false)
       })
@@ -452,13 +452,13 @@ describe('Menu', () => {
 
         // Expand
         groupLabel.click()
-        await sleepAsync(50)
+        await flushUpdates()
         const groupChildren = menu.querySelector('.menu-group-children') as HTMLElement
         expect(groupChildren.style.display).toBe('')
 
         // Collapse
         groupLabel.click()
-        await sleepAsync(50)
+        await flushUpdates()
         expect(groupChildren.style.display).toBe('none')
       })
     })

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')