@nuvia-ui/components 4.0.1

package/src/ds-rich-list/ds-rich-list.test.js

@@ -0,0 +1,293 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-rich-list.js';
+import '../ds-rich-list-item/ds-rich-list-item.js';
+
+describe('ds-rich-list', () => {
+    let container;
+
+    const tick = (ms = 50) => new Promise(resolve => setTimeout(resolve, ms));
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    // ─── Rendering ───
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-rich-list></ds-rich-list>';
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        expect(el.selectable).toBe('none');
+        expect(el.name).toBe('');
+    });
+
+    it('renders items via slot', async () => {
+        container.innerHTML = `
+            <ds-rich-list>
+                <ds-rich-list-item value="a"><span slot="title">A</span></ds-rich-list-item>
+                <ds-rich-list-item value="b"><span slot="title">B</span></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        const items = el.querySelectorAll('ds-rich-list-item');
+        expect(items.length).toBe(2);
+    });
+
+    // ─── ARIA ───
+
+    it('sets role=list for non-selectable', async () => {
+        container.innerHTML = '<ds-rich-list><ds-rich-list-item><span slot="title">A</span></ds-rich-list-item></ds-rich-list>';
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        const listDiv = el.shadowRoot.querySelector('.list');
+        expect(listDiv.getAttribute('role')).toBe('list');
+    });
+
+    it('sets role=listbox for selectable', async () => {
+        container.innerHTML = '<ds-rich-list selectable="single"><ds-rich-list-item><span slot="title">A</span></ds-rich-list-item></ds-rich-list>';
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        const listDiv = el.shadowRoot.querySelector('.list');
+        expect(listDiv.getAttribute('role')).toBe('listbox');
+    });
+
+    it('sets aria-multiselectable for multiple', async () => {
+        container.innerHTML = '<ds-rich-list selectable="multiple"><ds-rich-list-item><span slot="title">A</span></ds-rich-list-item></ds-rich-list>';
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        const listDiv = el.shadowRoot.querySelector('.list');
+        expect(listDiv.getAttribute('aria-multiselectable')).toBe('true');
+    });
+
+    // ─── Selection Propagation ───
+
+    it('propagates selectable to items', async () => {
+        container.innerHTML = `
+            <ds-rich-list selectable="multiple">
+                <ds-rich-list-item value="a"><span slot="title">A</span></ds-rich-list-item>
+                <ds-rich-list-item value="b"><span slot="title">B</span></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        const items = el.querySelectorAll('ds-rich-list-item');
+        items.forEach(item => {
+            expect(item._selectable).toBe('multiple');
+        });
+    });
+
+    it('propagates name to items', async () => {
+        container.innerHTML = `
+            <ds-rich-list selectable="single" name="test-group">
+                <ds-rich-list-item value="a"><span slot="title">A</span></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        const item = el.querySelector('ds-rich-list-item');
+        expect(item._name).toBe('test-group');
+    });
+
+    // ─── Single Selection ───
+
+    it('deselects siblings on single selection', async () => {
+        container.innerHTML = `
+            <ds-rich-list selectable="single">
+                <ds-rich-list-item value="a" selected><span slot="title">A</span></ds-rich-list-item>
+                <ds-rich-list-item value="b"><span slot="title">B</span></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        const items = el.querySelectorAll('ds-rich-list-item');
+        expect(items[0].selected).toBe(true);
+
+        // Click item B
+        const itemB = items[1].shadowRoot.querySelector('.item');
+        itemB.click();
+        await tick();
+
+        expect(items[0].selected).toBe(false);
+        expect(items[1].selected).toBe(true);
+    });
+
+    // ─── Multiple Selection ───
+
+    it('allows multiple selections', async () => {
+        container.innerHTML = `
+            <ds-rich-list selectable="multiple">
+                <ds-rich-list-item value="a"><span slot="title">A</span></ds-rich-list-item>
+                <ds-rich-list-item value="b"><span slot="title">B</span></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        const items = el.querySelectorAll('ds-rich-list-item');
+
+        items[0].shadowRoot.querySelector('.item').click();
+        await tick();
+        items[1].shadowRoot.querySelector('.item').click();
+        await tick();
+
+        expect(items[0].selected).toBe(true);
+        expect(items[1].selected).toBe(true);
+    });
+
+    // ─── Change Event ───
+
+    it('dispatches aggregated change event', async () => {
+        container.innerHTML = `
+            <ds-rich-list selectable="single">
+                <ds-rich-list-item value="a"><span slot="title">A</span></ds-rich-list-item>
+                <ds-rich-list-item value="b"><span slot="title">B</span></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        let detail = null;
+        el.addEventListener('change', (e) => { detail = e.detail; });
+
+        const items = el.querySelectorAll('ds-rich-list-item');
+        items[0].shadowRoot.querySelector('.item').click();
+        await tick();
+
+        expect(detail).not.toBeNull();
+        expect(detail.value).toBe('a');
+        expect(detail.values).toEqual(['a']);
+    });
+
+    // ─── Layout Propagation ───
+
+    it('forces media column when any item has media', async () => {
+        container.innerHTML = `
+            <ds-rich-list>
+                <ds-rich-list-item media="test.jpg"><span slot="title">With media</span></ds-rich-list-item>
+                <ds-rich-list-item><span slot="title">Without media</span></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick(100);
+
+        const items = el.querySelectorAll('ds-rich-list-item');
+        // Item with media has has-media
+        expect(items[0].hasAttribute('has-media')).toBe(true);
+        // Item without media should get force-media from parent
+        expect(items[1].hasAttribute('force-media')).toBe(true);
+    });
+
+    // ─── Keyboard Navigation ───
+
+    it('handles arrow key navigation', async () => {
+        container.innerHTML = `
+            <ds-rich-list selectable="single">
+                <ds-rich-list-item value="a"><span slot="title">A</span></ds-rich-list-item>
+                <ds-rich-list-item value="b"><span slot="title">B</span></ds-rich-list-item>
+                <ds-rich-list-item value="c"><span slot="title">C</span></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        const items = el.querySelectorAll('ds-rich-list-item');
+
+        // Focus first item
+        items[0].focus();
+        await tick();
+
+        // ArrowDown should move focus to next item
+        el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+        await tick();
+
+        expect(document.activeElement).toBe(items[1]);
+    });
+
+    it('handles Home/End key navigation', async () => {
+        container.innerHTML = `
+            <ds-rich-list selectable="single">
+                <ds-rich-list-item value="a"><span slot="title">A</span></ds-rich-list-item>
+                <ds-rich-list-item value="b"><span slot="title">B</span></ds-rich-list-item>
+                <ds-rich-list-item value="c"><span slot="title">C</span></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick();
+
+        const items = el.querySelectorAll('ds-rich-list-item');
+
+        items[0].focus();
+        await tick();
+
+        // End goes to last
+        el.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+        await tick();
+
+        expect(document.activeElement).toBe(items[2]);
+
+        // Home goes back to first
+        el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+        await tick();
+
+        expect(document.activeElement).toBe(items[0]);
+    });
+
+    // ─── Custom Width ───
+
+    it('updates layout when item structure changes', async () => {
+        container.innerHTML = `
+            <ds-rich-list>
+                <ds-rich-list-item id="item1"><span slot="action-group">Action</span></ds-rich-list-item>
+                <ds-rich-list-item id="item2"><span slot="title">No Action</span></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick(100);
+
+        const item1 = el.querySelector('#item1');
+        const item2 = el.querySelector('#item2');
+
+        // Initially item2 should be forced to show action group
+        expect(item1.hasAttribute('has-action-group')).toBe(true);
+        expect(item2.hasAttribute('force-action-group')).toBe(true);
+
+        // Remove action group from item1
+        item1.innerHTML = '<span slot="title">Updated</span>';
+        await tick(100);
+
+        // item1 no longer has actions
+        expect(item1.hasAttribute('has-action-group')).toBe(false);
+        // item2 should no longer be forced
+        expect(item2.hasAttribute('force-action-group')).toBe(false);
+    });
+
+    // ─── Custom Width ───
+
+    it('propagates custom-width to items', async () => {
+        container.innerHTML = `
+            <ds-rich-list custom-width="200px">
+                <ds-rich-list-item><span slot="title">A</span><div slot="custom">Custom</div></ds-rich-list-item>
+            </ds-rich-list>
+        `;
+        const el = container.querySelector('ds-rich-list');
+        await tick(100);
+
+        const item = el.querySelector('ds-rich-list-item');
+        const value = item.style.getPropertyValue('--ds-rich-list-custom-width');
+        expect(value).toBe('200px');
+    });
+});