@mseep/claudian 2.0.25

package/tests/unit/shared/components/SelectableDropdown.test.ts

@@ -0,0 +1,406 @@
+import { createMockEl } from '@test/helpers/mockElement';
+
+import { SelectableDropdown, type SelectableDropdownRenderOptions } from '@/shared/components/SelectableDropdown';
+
+function createRenderOptions<T>(overrides: Partial<SelectableDropdownRenderOptions<T>> = {}): SelectableDropdownRenderOptions<T> {
+  return {
+    items: [] as T[],
+    selectedIndex: 0,
+    emptyText: 'No items',
+    renderItem: jest.fn(),
+    ...overrides,
+  };
+}
+
+describe('SelectableDropdown', () => {
+  let containerEl: any;
+  let dropdown: SelectableDropdown<string>;
+
+  beforeEach(() => {
+    containerEl = createMockEl();
+    dropdown = new SelectableDropdown(containerEl, {
+      listClassName: 'dropdown-list',
+      itemClassName: 'dropdown-item',
+      emptyClassName: 'dropdown-empty',
+    });
+  });
+
+  afterEach(() => {
+    dropdown.destroy();
+  });
+
+  describe('initial state', () => {
+    it('is not visible before render', () => {
+      expect(dropdown.isVisible()).toBe(false);
+    });
+
+    it('has no element before render', () => {
+      expect(dropdown.getElement()).toBeNull();
+    });
+
+    it('returns 0 for selectedIndex', () => {
+      expect(dropdown.getSelectedIndex()).toBe(0);
+    });
+
+    it('returns null for selectedItem', () => {
+      expect(dropdown.getSelectedItem()).toBeNull();
+    });
+
+    it('returns empty items array', () => {
+      expect(dropdown.getItems()).toEqual([]);
+    });
+  });
+
+  describe('render with items', () => {
+    it('creates dropdown element and marks it visible', () => {
+      dropdown.render(createRenderOptions({
+        items: ['alpha', 'beta'],
+        selectedIndex: 0,
+        renderItem: (item, el) => el.setText(item),
+      }));
+
+      const el = dropdown.getElement();
+      expect(el).not.toBeNull();
+      expect(el!.hasClass('visible')).toBe(true);
+    });
+
+    it('stores items and exposes them via getItems', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b', 'c'],
+        renderItem: jest.fn(),
+      }));
+
+      expect(dropdown.getItems()).toEqual(['a', 'b', 'c']);
+    });
+
+    it('calls renderItem for each item', () => {
+      const renderItem = jest.fn();
+      dropdown.render(createRenderOptions({
+        items: ['x', 'y'],
+        renderItem,
+      }));
+
+      expect(renderItem).toHaveBeenCalledTimes(2);
+      expect(renderItem).toHaveBeenCalledWith('x', expect.anything());
+      expect(renderItem).toHaveBeenCalledWith('y', expect.anything());
+    });
+
+    it('marks selected item with selected class', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b', 'c'],
+        selectedIndex: 1,
+        renderItem: jest.fn(),
+      }));
+
+      expect(dropdown.getSelectedIndex()).toBe(1);
+      expect(dropdown.getSelectedItem()).toBe('b');
+    });
+
+    it('creates item elements with itemClassName', () => {
+      dropdown.render(createRenderOptions({
+        items: ['one'],
+        renderItem: jest.fn(),
+      }));
+
+      const el = dropdown.getElement()!;
+      const items = el.querySelectorAll('dropdown-item');
+      expect(items.length).toBe(1);
+    });
+  });
+
+  describe('render with empty items', () => {
+    it('shows empty text when items array is empty', () => {
+      dropdown.render(createRenderOptions({
+        items: [],
+        emptyText: 'Nothing here',
+        renderItem: jest.fn(),
+      }));
+
+      const el = dropdown.getElement()!;
+      const emptyEl = el.querySelector('dropdown-empty');
+      expect(emptyEl).not.toBeNull();
+      expect(emptyEl!.textContent).toBe('Nothing here');
+    });
+  });
+
+  describe('getItemClass support', () => {
+    it('applies string class to items', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a'],
+        renderItem: jest.fn(),
+        getItemClass: () => 'extra-class',
+      }));
+
+      const el = dropdown.getElement()!;
+      const items = el.querySelectorAll('dropdown-item');
+      expect(items[0].hasClass('extra-class')).toBe(true);
+    });
+
+    it('applies array of classes to items', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a'],
+        renderItem: jest.fn(),
+        getItemClass: () => ['cls-a', 'cls-b'],
+      }));
+
+      const el = dropdown.getElement()!;
+      const items = el.querySelectorAll('dropdown-item');
+      expect(items[0].hasClass('cls-a')).toBe(true);
+      expect(items[0].hasClass('cls-b')).toBe(true);
+    });
+
+    it('handles undefined class gracefully', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a'],
+        renderItem: jest.fn(),
+        getItemClass: () => undefined,
+      }));
+
+      const el = dropdown.getElement()!;
+      const items = el.querySelectorAll('dropdown-item');
+      expect(items.length).toBe(1);
+    });
+  });
+
+  describe('click handler', () => {
+    it('calls onItemClick when item is clicked', () => {
+      const onItemClick = jest.fn();
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b'],
+        renderItem: jest.fn(),
+        onItemClick,
+      }));
+
+      const el = dropdown.getElement()!;
+      const items = el.querySelectorAll('dropdown-item');
+      items[1].dispatchEvent({ type: 'click', target: items[1] } as any);
+
+      expect(onItemClick).toHaveBeenCalledWith('b', 1, expect.anything());
+    });
+
+    it('updates selectedIndex on click', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b', 'c'],
+        selectedIndex: 0,
+        renderItem: jest.fn(),
+      }));
+
+      const el = dropdown.getElement()!;
+      const items = el.querySelectorAll('dropdown-item');
+      items[2].dispatchEvent({ type: 'click', target: items[2] } as any);
+
+      expect(dropdown.getSelectedIndex()).toBe(2);
+    });
+  });
+
+  describe('hover handler', () => {
+    it('calls onItemHover when item is hovered', () => {
+      const onItemHover = jest.fn();
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b'],
+        renderItem: jest.fn(),
+        onItemHover,
+      }));
+
+      const el = dropdown.getElement()!;
+      const items = el.querySelectorAll('dropdown-item');
+      items[0].dispatchEvent({ type: 'mouseenter' } as any);
+
+      expect(onItemHover).toHaveBeenCalledWith('a', 0);
+    });
+
+    it('updates selectedIndex on hover', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b', 'c'],
+        selectedIndex: 0,
+        renderItem: jest.fn(),
+      }));
+
+      const el = dropdown.getElement()!;
+      const items = el.querySelectorAll('dropdown-item');
+      items[1].dispatchEvent({ type: 'mouseenter' } as any);
+
+      expect(dropdown.getSelectedIndex()).toBe(1);
+    });
+  });
+
+  describe('moveSelection', () => {
+    it('moves selection down', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b', 'c'],
+        selectedIndex: 0,
+        renderItem: jest.fn(),
+      }));
+
+      dropdown.moveSelection(1);
+      expect(dropdown.getSelectedIndex()).toBe(1);
+    });
+
+    it('moves selection up', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b', 'c'],
+        selectedIndex: 2,
+        renderItem: jest.fn(),
+      }));
+
+      dropdown.moveSelection(-1);
+      expect(dropdown.getSelectedIndex()).toBe(1);
+    });
+
+    it('clamps at 0 when moving up past beginning', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b'],
+        selectedIndex: 0,
+        renderItem: jest.fn(),
+      }));
+
+      dropdown.moveSelection(-1);
+      expect(dropdown.getSelectedIndex()).toBe(0);
+    });
+
+    it('clamps at max index when moving down past end', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b'],
+        selectedIndex: 1,
+        renderItem: jest.fn(),
+      }));
+
+      dropdown.moveSelection(1);
+      expect(dropdown.getSelectedIndex()).toBe(1);
+    });
+  });
+
+  describe('updateSelection', () => {
+    it('adds selected class to current item and removes from others', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b', 'c'],
+        selectedIndex: 0,
+        renderItem: jest.fn(),
+      }));
+
+      dropdown.moveSelection(2);
+
+      const el = dropdown.getElement()!;
+      const items = el.querySelectorAll('dropdown-item');
+      expect(items[0].hasClass('selected')).toBe(false);
+      expect(items[1].hasClass('selected')).toBe(false);
+      expect(items[2].hasClass('selected')).toBe(true);
+    });
+  });
+
+  describe('hide', () => {
+    it('removes visible class from dropdown', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a'],
+        renderItem: jest.fn(),
+      }));
+
+      expect(dropdown.isVisible()).toBe(true);
+      dropdown.hide();
+      expect(dropdown.isVisible()).toBe(false);
+    });
+
+    it('is safe to call before render', () => {
+      expect(() => dropdown.hide()).not.toThrow();
+    });
+  });
+
+  describe('destroy', () => {
+    it('removes the dropdown element', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a'],
+        renderItem: jest.fn(),
+      }));
+
+      expect(dropdown.getElement()).not.toBeNull();
+      dropdown.destroy();
+      expect(dropdown.getElement()).toBeNull();
+    });
+
+    it('is safe to call before render', () => {
+      expect(() => dropdown.destroy()).not.toThrow();
+    });
+
+    it('is safe to call multiple times', () => {
+      dropdown.render(createRenderOptions({ items: ['a'], renderItem: jest.fn() }));
+      dropdown.destroy();
+      expect(() => dropdown.destroy()).not.toThrow();
+    });
+  });
+
+  describe('re-render', () => {
+    it('reuses existing dropdown element on subsequent renders', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a'],
+        renderItem: jest.fn(),
+      }));
+
+      const firstEl = dropdown.getElement();
+
+      dropdown.render(createRenderOptions({
+        items: ['b', 'c'],
+        renderItem: jest.fn(),
+      }));
+
+      expect(dropdown.getElement()).toBe(firstEl);
+    });
+
+    it('clears old items and renders new ones', () => {
+      dropdown.render(createRenderOptions({
+        items: ['a', 'b'],
+        renderItem: jest.fn(),
+      }));
+
+      dropdown.render(createRenderOptions({
+        items: ['x'],
+        renderItem: jest.fn(),
+      }));
+
+      expect(dropdown.getItems()).toEqual(['x']);
+    });
+  });
+
+  describe('fixed className', () => {
+    it('applies fixedClassName when fixed option is true', () => {
+      const fixedDropdown = new SelectableDropdown<string>(containerEl, {
+        listClassName: 'dropdown-list',
+        itemClassName: 'dropdown-item',
+        emptyClassName: 'dropdown-empty',
+        fixed: true,
+        fixedClassName: 'dropdown-fixed',
+      });
+
+      fixedDropdown.render(createRenderOptions({
+        items: ['a'],
+        renderItem: jest.fn(),
+      }));
+
+      const el = fixedDropdown.getElement()!;
+      expect(el.hasClass('dropdown-list')).toBe(true);
+      expect(el.hasClass('dropdown-fixed')).toBe(true);
+
+      fixedDropdown.destroy();
+    });
+
+    it('does not apply fixedClassName when fixed is false', () => {
+      const nonFixedDropdown = new SelectableDropdown<string>(containerEl, {
+        listClassName: 'dropdown-list',
+        itemClassName: 'dropdown-item',
+        emptyClassName: 'dropdown-empty',
+        fixed: false,
+        fixedClassName: 'dropdown-fixed',
+      });
+
+      nonFixedDropdown.render(createRenderOptions({
+        items: ['a'],
+        renderItem: jest.fn(),
+      }));
+
+      const el = nonFixedDropdown.getElement()!;
+      expect(el.hasClass('dropdown-list')).toBe(true);
+      expect(el.hasClass('dropdown-fixed')).toBe(false);
+
+      nonFixedDropdown.destroy();
+    });
+  });
+});