@api-client/ui 0.2.4 → 0.2.6

package/test/elements/autocomplete/autocomplete-input.spec.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { fixture, expect, html, oneEvent, nextFrame, aTimeout } from '@open-wc/testing'
+import { fixture, expect, html, oneEvent, nextFrame, aTimeout, assert } from '@open-wc/testing'
 import sinon from 'sinon'
 
 import { AutocompleteInput } from '../../../src/elements/autocomplete/autocomplete-input.js'
@@ -16,7 +16,7 @@ describe('AutocompleteInput', () => {
     return fixture(html`
       <autocomplete-input>
         <input id="test-input" slot="input" type="text" placeholder="Search..." />
-        <ui-listbox slot="suggestions">
+        <ui-listbox slot="suggestions" aria-label="Suggestions">
           <ui-list-item data-value="apple">Apple</ui-list-item>
           <ui-list-item data-value="banana">Banana</ui-list-item>
           <ui-list-item data-value="cherry" data-index="value customField" data-custom-field="Sweet Cherry"
@@ -31,7 +31,7 @@ describe('AutocompleteInput', () => {
     return fixture(html`
       <autocomplete-input>
         <input slot="input" type="text" placeholder="Search..." />
-        <ui-listbox slot="suggestions"></ui-listbox>
+        <ui-listbox slot="suggestions" aria-label="Suggestions"></ui-listbox>
       </autocomplete-input>
     `)
   }
@@ -45,13 +45,11 @@ describe('AutocompleteInput', () => {
   }
 
   function getSlottedInput(el: AutocompleteInput): HTMLInputElement | null {
-    const slot = el.shadowRoot!.querySelector('slot[name="input"]') as HTMLSlotElement
-    return (slot.assignedElements({ flatten: true })[0] as HTMLInputElement) || null
+    return el.querySelector('[slot="input"]') as HTMLInputElement | null
   }
 
   function getSlottedSuggestions(el: AutocompleteInput): MdListbox | null {
-    const slot = el.shadowRoot!.querySelector('slot[name="suggestions"]') as HTMLSlotElement
-    return (slot.assignedElements({ flatten: true })[0] as MdListbox) || null
+    return el.querySelector('[slot="suggestions"]') as MdListbox | null
   }
 
   function getSuggestionItems(suggestionsEl: MdListbox): MdListItem[] {
@@ -85,14 +83,15 @@ describe('AutocompleteInput', () => {
       await el.updateComplete
       await nextFrame() // Allow for internal state updates
 
-      const input = getSlottedInput(el)
-      const suggestions = getSlottedSuggestions(el)
+      const input = getSlottedInput(el)!
+      const suggestions = getSlottedSuggestions(el)!
 
-      expect(input?.id).to.match(/^autocomplete-input-/)
+      expect(input.id).to.match(/^autocomplete-input-/)
       // @ts-expect-error _inputId is a protected member
       const internalInputId = el.inputId
-      expect(input?.style.getPropertyValue('anchor-name')).to.equal(`--${internalInputId}`)
-      expect(suggestions?.style.getPropertyValue('position-anchor')).to.equal(`--${internalInputId}`)
+      expect(input.style.getPropertyValue('anchor-name')).to.equal(`--${internalInputId}`, 'input has anchor name')
+      const anchorValue = getComputedStyle(suggestions).getPropertyValue('position-anchor')
+      expect(anchorValue).to.equal(`--${internalInputId}`, 'suggestions element has position-anchor')
     })
 
     it('popover is initially closed', async () => {
@@ -390,7 +389,8 @@ describe('AutocompleteInput', () => {
       const slottedSuggestions = getSlottedSuggestions(el)
       expect(slottedSuggestions).to.equal(suggestionsEl)
       expect(suggestionsEl.popover).to.equal('manual')
-      expect(suggestionsEl.style.getPropertyValue('position-anchor')).to.equal(`--${input.id}`)
+      const anchorValue = getComputedStyle(suggestionsEl).getPropertyValue('position-anchor')
+      expect(anchorValue).to.equal(`--${input.id}`)
     })
 
     it('re-filters when suggestion items change (via itemschange event)', async () => {
@@ -445,4 +445,201 @@ describe('AutocompleteInput', () => {
       expect(suggestions.matches(':popover-open')).to.be.false
     })
   })
+
+  describe('Popover Positioning', () => {
+    let el: AutocompleteInput
+    let input: HTMLInputElement
+    let suggestionsBox: MdListbox
+    let getBoundingClientRectStub: sinon.SinonStub
+
+    // Define a standard popover height for consistent threshold calculation
+    const popoverVisibleHeight = 200 // px, used for scrollHeight
+
+    beforeEach(async () => {
+      el = await basicFixture() // This fixture has suggestions
+      await el.updateComplete // Ensures inputRef is set up
+      input = getSlottedInput(el)!
+      suggestionsBox = getSlottedSuggestions(el)!
+
+      // Set a known height for the suggestions box to make its scrollHeight predictable
+      suggestionsBox.style.height = `${popoverVisibleHeight}px`
+      suggestionsBox.style.display = 'block' // Ensure it's not display:none from other CSS
+      suggestionsBox.style.overflow = 'auto'
+      // Ensure it has some content to have a scrollHeight if not stubbed
+      if (getSuggestionItems(suggestionsBox).length === 0) {
+        const item = document.createElement('ui-list-item')
+        item.textContent = 'Dummy Item'
+        suggestionsBox.appendChild(item)
+      }
+      await nextFrame() // Allow DOM to update for scrollHeight calculation
+
+      // @ts-expect-error accessing protected member `inputRef`
+      const anchorEl = el.inputRef as HTMLElement // Default anchor
+      if (!anchorEl) {
+        throw new Error('el.inputRef was not initialized')
+      }
+      getBoundingClientRectStub = sinon.stub(anchorEl, 'getBoundingClientRect')
+    })
+
+    afterEach(() => {
+      sinon.restore() // Restores window.innerHeight and the getBoundingClientRectStub
+    })
+
+    function setAnchorPosition(
+      anchorRect: Partial<DOMRect & { height: number; width: number }>,
+      viewportHeight: number
+    ) {
+      getBoundingClientRectStub.returns(anchorRect as DOMRect)
+      // Stub window.innerHeight for this call, will be restored by sinon.restore() in afterEach
+      sinon.stub(window, 'innerHeight').get(() => viewportHeight)
+    }
+
+    it('positions at bottom when ample space below', async () => {
+      // Anchor near top, viewport large. popoverThresholdHeight will be popoverVisibleHeight (200)
+      setAnchorPosition({ top: 50, bottom: 80, height: 30, x: 0, y: 50, width: 100, left: 0, right: 100 }, 800)
+      // spaceBelow = 800 - 80 = 720. 720 > 200.
+
+      input.focus() // Triggers openSuggestions
+      await el.updateComplete // For positionArea state change and re-render
+      await nextFrame() // For DOM to reflect changes
+
+      expect(el.positionArea).to.equal('bottom')
+    })
+
+    it('positions at top when insufficient space below but sufficient space above', async () => {
+      // popoverThresholdHeight = 200
+      // Anchor bottom: 750. Viewport: 800. spaceBelow = 50. (50 < 200)
+      // Anchor top: 500. spaceAbove = 500. (500 > 50) && (500 > 200) -> true
+      setAnchorPosition({ top: 500, bottom: 750, height: 250, x: 0, y: 500, width: 100, left: 0, right: 100 }, 800)
+
+      input.focus()
+      await el.updateComplete
+      await nextFrame()
+
+      expect(el.positionArea).to.equal('top')
+    })
+
+    it('positions at top when insufficient space below and more space above', async () => {
+      // popoverThresholdHeight = 200
+      // spaceBelow = 50 (anchor.bottom = viewportHeight - 50)
+      // spaceAbove = 100 (anchor.top = 100)
+      // viewportHeight = anchor.top + anchor.height + spaceBelow = 100 + 30 + 50 = 180
+      // Test case: spaceBelow=50, spaceAbove=100. popoverThresholdHeight=200.
+      // (50 < 200) is true.
+      // (100 > 50) is true.
+      // (100 > 200) is false. -> first 'top' condition fails.
+      // Second 'top' condition: (spaceBelow < popoverThresholdHeight && spaceAbove > spaceBelow) -> true.
+      setAnchorPosition({ top: 100, bottom: 130, height: 30, x: 0, y: 100, width: 100, left: 0, right: 100 }, 180)
+
+      input.focus()
+      await el.updateComplete
+      await nextFrame()
+
+      expect(el.positionArea).to.equal('top')
+    })
+
+    it('positions at bottom when insufficient space below and also insufficient (or less) space above', async () => {
+      // popoverThresholdHeight = 200
+      // spaceBelow = 50 (anchor.bottom = viewportHeight - 50)
+      // spaceAbove = 40 (anchor.top = 40)
+      // viewportHeight = anchor.top + anchor.height + spaceBelow = 40 + 30 + 50 = 120
+      // Test case: spaceBelow=50, spaceAbove=40.
+      // (50 < 200) is true.
+      // (40 > 50) is false. -> both 'top' conditions fail. Defaults to 'bottom'.
+      setAnchorPosition({ top: 40, bottom: 70, height: 30, x: 0, y: 40, width: 100, left: 0, right: 100 }, 120)
+
+      input.focus()
+      await el.updateComplete
+      await nextFrame()
+
+      expect(el.positionArea).to.equal('bottom')
+    })
+
+    it('uses fallback threshold of 150px if popover scrollHeight is 0', async () => {
+      // Stub scrollHeight to be 0 for this test.
+      const scrollHeightStub = sinon.stub(suggestionsBox, 'scrollHeight').get(() => 0)
+
+      // popoverThresholdHeight will be 150 (the fallback).
+      // Scenario: spaceBelow = 100, spaceAbove = 200.
+      // (100 < 150) is true.
+      // (200 > 100) is true. (200 > 150) is true. -> Should be 'top'.
+      setAnchorPosition({ top: 500, bottom: 700, height: 200, x: 0, y: 500, width: 100, left: 0, right: 100 }, 800)
+      // spaceBelow = 800 - 700 = 100
+      // spaceAbove = 500 (mistake in manual calc above, should be 500)
+      // Corrected: spaceBelow = 100. spaceAbove = 500. Threshold = 150.
+      // (100 < 150) -> true
+      // (500 > 100) -> true. (500 > 150) -> true. Result: 'top'.
+
+      input.focus()
+      await el.updateComplete
+      await nextFrame()
+
+      expect(el.positionArea).to.equal('top')
+      scrollHeightStub.restore()
+    })
+
+    it('uses slotted anchor for positioning if provided', async () => {
+      // Need to create a new fixture for this specific setup
+      el = await fixture(html`
+        <autocomplete-input>
+          <div slot="anchor" id="custom-anchor" style="height: 20px; width: 100px; border: 1px solid red;"></div>
+          <input slot="input" type="text" />
+          <ui-listbox slot="suggestions" style="height: ${popoverVisibleHeight}px; overflow: auto;">
+            <ui-list-item>Item 1</ui-list-item>
+          </ui-listbox>
+        </autocomplete-input>
+      `)
+      await el.updateComplete
+      input = getSlottedInput(el)! // Still need to focus input
+      const customAnchor = el.querySelector('#custom-anchor') as HTMLElement
+
+      getBoundingClientRectStub.restore() // remove stub from default input anchor
+      getBoundingClientRectStub = sinon.stub(customAnchor, 'getBoundingClientRect')
+
+      // Scenario: custom anchor is near bottom, should open top. popoverThresholdHeight = 200.
+      setAnchorPosition({ top: 720, bottom: 750, height: 30, x: 0, y: 720, width: 100, left: 0, right: 100 }, 800)
+
+      input.focus() // Triggers openSuggestions
+      await el.updateComplete
+      await nextFrame()
+
+      expect(el.positionArea).to.equal('top')
+      expect(getBoundingClientRectStub.called).to.be.true
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('is accessible when initially rendered', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      await assert.isAccessible(el)
+    })
+
+    it('is accessible when popover is open', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+
+      input.focus() // Opens popover
+      await nextFrame() // Allow popover to open
+      await el.updateComplete // Ensure state updates related to opening are done
+
+      await assert.isAccessible(el)
+    })
+
+    it('is accessible when popover is open and an item is highlighted', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+
+      input.focus() // Opens popover
+      await nextFrame()
+
+      // Simulate highlighting the first item
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true }))
+      await aTimeout(0) // for rAF in handleKeydown
+      await nextFrame() // for highlight to apply
+      await assert.isAccessible(el)
+    })
+  })
 })