@api-client/ui 0.5.32 → 0.5.34

package/test/elements/navigation/Navigation.test.ts

@@ -0,0 +1,120 @@
+import { html, fixture, assert, oneEvent, aTimeout } from '@open-wc/testing'
+import type Navigation from '../../../src/elements/navigation/internals/Navigation.js'
+import '../../../src/elements/navigation/ui-navigation.js'
+import '../../../src/elements/navigation/ui-navigation-item.js'
+
+describe('Navigation', () => {
+  it('renders with slot content', async () => {
+    const el = await fixture<Navigation>(html`
+      <ui-navigation aria-label="Main navigation">
+        <ui-navigation-item selected aria-current="page">Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+        <ui-navigation-item>Files</ui-navigation-item>
+      </ui-navigation>
+    `)
+    const nav = el.shadowRoot!.querySelector('nav')
+    assert.ok(nav, 'nav element is rendered')
+    assert.equal(nav?.getAttribute('aria-label'), 'Main navigation')
+    const items = el._items
+    assert.equal(items.length, 3)
+    assert.isTrue(items[0].selected)
+    assert.equal(items[0].getAttribute('aria-current'), 'page')
+  })
+
+  it('sets correct tabindex for items', async () => {
+    const el = await fixture<Navigation>(html`
+      <ui-navigation>
+        <ui-navigation-item selected>Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+      </ui-navigation>
+    `)
+    const items = el._items
+    assert.equal(items[0].getAttribute('tabindex'), '0')
+    assert.equal(items[1].getAttribute('tabindex'), '-1')
+  })
+
+  it('selects item on click and fires select event', async () => {
+    const el = await fixture<Navigation>(html`
+      <ui-navigation>
+        <ui-navigation-item>Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+      </ui-navigation>
+    `)
+    const items = el._items
+    setTimeout(() => items[1].click())
+    const ev = await oneEvent(el, 'select')
+    assert.equal(ev.detail.item, items[1])
+    assert.isTrue(items[1].selected)
+    assert.equal(items[1].getAttribute('tabindex'), '0')
+    assert.isFalse(items[0].selected)
+    assert.equal(items[0].getAttribute('tabindex'), '-1')
+  })
+
+  it('handles keyboard navigation (vertical)', async () => {
+    const el = await fixture<Navigation>(html`
+      <ui-navigation>
+        <ui-navigation-item>Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+        <ui-navigation-item>Files</ui-navigation-item>
+      </ui-navigation>
+    `)
+    const items = el._items
+    items[0].focus()
+    // ArrowDown moves to next
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+    await aTimeout(0)
+    assert.dom.equal(document.activeElement, items[1])
+    // ArrowUp wraps to last
+    items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
+    await aTimeout(0)
+    assert.dom.equal(document.activeElement, items[0])
+  })
+
+  it('handles keyboard navigation (horizontal)', async () => {
+    const el = await fixture<Navigation>(html`
+      <ui-navigation orientation="horizontal">
+        <ui-navigation-item>Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+      </ui-navigation>
+    `)
+    const items = el._items
+    items[0].focus()
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+    await aTimeout(0)
+    assert.dom.equal(document.activeElement, items[1])
+    items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))
+    await aTimeout(0)
+    assert.dom.equal(document.activeElement, items[0])
+  })
+
+  it('skips disabled items in navigation', async () => {
+    const el = await fixture<Navigation>(html`
+      <ui-navigation>
+        <ui-navigation-item>Home</ui-navigation-item>
+        <ui-navigation-item disabled>Search</ui-navigation-item>
+        <ui-navigation-item>Files</ui-navigation-item>
+      </ui-navigation>
+    `)
+    const items = el._items
+    items[0].focus()
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+    await aTimeout(0)
+    // Should skip disabled and go to Files
+    assert.dom.equal(document.activeElement, items[2])
+  })
+
+  it('sets aria-current on selected item if current is set', async () => {
+    const el = await fixture<Navigation>(html`
+      <ui-navigation current="page">
+        <ui-navigation-item>Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+      </ui-navigation>
+    `)
+    const items = el._items
+    // Simulate user selection by clicking the item (public API)
+    items[1].click()
+    await aTimeout(0)
+    assert.equal(items[1].getAttribute('aria-current'), 'page')
+    assert.isFalse(items[0].hasAttribute('aria-current'))
+  })
+})

package/tsconfig.json

@@ -36,6 +36,6 @@
       }
     ]
   },
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "test/elements/navigation/Navigation.test.ts"],
   "exclude": ["demo/apis/*", "demo/models/*", "node_modules", ".wireit", ".tmp", ".rollup.cache"]
 }