@furystack/shades-common-components 12.0.0 → 12.1.0

package/src/components/command-palette/command-palette-input.spec.tsx

@@ -49,283 +49,272 @@ describe('CommandPaletteInput', () => {
 
   it('should render as custom element', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      const rootElement = document.getElementById('root') as HTMLDivElement
+      await usingAsync(createManager(), async (manager) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
-      })
-
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
 
-      const input = document.querySelector('shades-command-palette-input')
-      expect(input).not.toBeNull()
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const input = document.querySelector('shades-command-palette-input')
+        expect(input).not.toBeNull()
+      })
     })
   })
 
   it('should render an input element with placeholder', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
 
-      const component = document.querySelector('shades-command-palette-input') as HTMLElement
-      const inputElement = component?.querySelector('input')
-      expect(inputElement).not.toBeNull()
-      expect(inputElement?.placeholder).toBe('Type to search commands...')
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shades-command-palette-input') as HTMLElement
+        const inputElement = component?.querySelector('input')
+        expect(inputElement).not.toBeNull()
+        expect(inputElement?.placeholder).toBe('Type to search commands...')
+      })
     })
   })
 
   it('should start with width 0% when closed', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(false)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(false)
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
 
-      const component = document.querySelector('shades-command-palette-input') as HTMLElement
-      expect(component.hasAttribute('data-opened')).toBe(false)
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shades-command-palette-input') as HTMLElement
+        expect(component.hasAttribute('data-opened')).toBe(false)
+      })
     })
   })
 
   it('should have width 100% when opened', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(true)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(true)
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
 
-      const component = document.querySelector('shades-command-palette-input') as HTMLElement
-      expect(component.hasAttribute('data-opened')).toBe(true)
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shades-command-palette-input') as HTMLElement
+        expect(component.hasAttribute('data-opened')).toBe(true)
+      })
     })
   })
 
   it('should animate width when opening', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(false)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(false)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
+
+        await sleepAsync(50)
+        animateCalls = []
+
+        manager.isOpened.setValue(true)
+        await sleepAsync(50)
+
+        const widthAnimation = animateCalls.find(
+          (call) =>
+            Array.isArray(call.keyframes) &&
+            call.keyframes.some((kf: Keyframe) => kf.width === '0%') &&
+            call.keyframes.some((kf: Keyframe) => kf.width === '100%'),
+        )
+
+        expect(widthAnimation).toBeDefined()
+        expect((widthAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(300)
       })
-
-      await sleepAsync(50)
-      animateCalls = []
-
-      manager.isOpened.setValue(true)
-      await sleepAsync(50)
-
-      const widthAnimation = animateCalls.find(
-        (call) =>
-          Array.isArray(call.keyframes) &&
-          call.keyframes.some((kf: Keyframe) => kf.width === '0%') &&
-          call.keyframes.some((kf: Keyframe) => kf.width === '100%'),
-      )
-
-      expect(widthAnimation).toBeDefined()
-      expect((widthAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(300)
-
-      manager[Symbol.dispose]()
     })
   })
 
   it('should animate width when closing', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(true)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(true)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
+
+        await sleepAsync(50)
+        animateCalls = []
+
+        manager.isOpened.setValue(false)
+        await sleepAsync(50)
+
+        const widthAnimation = animateCalls.find(
+          (call) =>
+            Array.isArray(call.keyframes) &&
+            call.keyframes.some((kf: Keyframe) => kf.width === '100%') &&
+            call.keyframes.some((kf: Keyframe) => kf.width === '0%'),
+        )
+
+        expect(widthAnimation).toBeDefined()
       })
-
-      await sleepAsync(50)
-      animateCalls = []
-
-      manager.isOpened.setValue(false)
-      await sleepAsync(50)
-
-      const widthAnimation = animateCalls.find(
-        (call) =>
-          Array.isArray(call.keyframes) &&
-          call.keyframes.some((kf: Keyframe) => kf.width === '100%') &&
-          call.keyframes.some((kf: Keyframe) => kf.width === '0%'),
-      )
-
-      expect(widthAnimation).toBeDefined()
-
-      manager[Symbol.dispose]()
     })
   })
 
   it('should clear input value when opening', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(false)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(false)
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
 
-      const component = document.querySelector('shades-command-palette-input') as HTMLElement
-      const inputElement = component?.querySelector('input') as HTMLInputElement
-      inputElement.value = 'some text'
+        await sleepAsync(50)
 
-      manager.isOpened.setValue(true)
-      await sleepAsync(50)
+        const component = document.querySelector('shades-command-palette-input') as HTMLElement
+        const inputElement = component?.querySelector('input') as HTMLInputElement
+        inputElement.value = 'some text'
 
-      expect(inputElement.value).toBe('')
+        manager.isOpened.setValue(true)
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        expect(inputElement.value).toBe('')
+      })
     })
   })
 
   it('should clear input value when closing', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(true)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(true)
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
 
-      const component = document.querySelector('shades-command-palette-input') as HTMLElement
-      const inputElement = component?.querySelector('input') as HTMLInputElement
-      inputElement.value = 'search term'
+        await sleepAsync(50)
 
-      manager.isOpened.setValue(false)
-      await sleepAsync(50)
+        const component = document.querySelector('shades-command-palette-input') as HTMLElement
+        const inputElement = component?.querySelector('input') as HTMLInputElement
+        inputElement.value = 'search term'
 
-      expect(inputElement.value).toBe('')
+        manager.isOpened.setValue(false)
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        expect(inputElement.value).toBe('')
+      })
     })
   })
 
   it('should have overflow hidden style', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
 
-      const component = document.querySelector('shades-command-palette-input') as HTMLElement
-      const computedStyle = window.getComputedStyle(component)
-      expect(computedStyle.overflow).toBe('hidden')
+        await sleepAsync(50)
 
-      manager[Symbol.dispose]()
+        const component = document.querySelector('shades-command-palette-input') as HTMLElement
+        const computedStyle = window.getComputedStyle(component)
+        expect(computedStyle.overflow).toBe('hidden')
+      })
     })
   })
 
   it('should use cubic-bezier easing for animations', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(false)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(false)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
+
+        await sleepAsync(50)
+        animateCalls = []
+
+        manager.isOpened.setValue(true)
+        await sleepAsync(50)
+
+        const widthAnimation = animateCalls.find(
+          (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
+        )
+
+        expect(widthAnimation).toBeDefined()
+        expect((widthAnimation?.options as KeyframeAnimationOptions)?.easing).toBe(
+          'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
+        )
       })
-
-      await sleepAsync(50)
-      animateCalls = []
-
-      manager.isOpened.setValue(true)
-      await sleepAsync(50)
-
-      const widthAnimation = animateCalls.find(
-        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
-      )
-
-      expect(widthAnimation).toBeDefined()
-      expect((widthAnimation?.options as KeyframeAnimationOptions)?.easing).toBe(
-        'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-      )
-
-      manager[Symbol.dispose]()
     })
   })
 
   it('should fill animation forwards', async () => {
     await usingAsync(new Injector(), async (injector) => {
-      const manager = createManager()
-      manager.isOpened.setValue(false)
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <CommandPaletteInput manager={manager} />,
-      })
+      await usingAsync(createManager(), async (manager) => {
+        manager.isOpened.setValue(false)
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-      await sleepAsync(50)
-      animateCalls = []
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPaletteInput manager={manager} />,
+        })
 
-      manager.isOpened.setValue(true)
-      await sleepAsync(50)
+        await sleepAsync(50)
+        animateCalls = []
 
-      const widthAnimation = animateCalls.find(
-        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
-      )
+        manager.isOpened.setValue(true)
+        await sleepAsync(50)
 
-      expect(widthAnimation).toBeDefined()
-      expect((widthAnimation?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
+        const widthAnimation = animateCalls.find(
+          (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
+        )
 
-      manager[Symbol.dispose]()
+        expect(widthAnimation).toBeDefined()
+        expect((widthAnimation?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
+      })
     })
   })
 })