@nyaruka/temba-components 0.122.0 → 0.124.0

package/test/temba-select.test.ts

@@ -1,16 +1,16 @@
-import * as sinon from 'sinon';
+import Sinon, * as sinon from 'sinon';
 import { fixture, expect, assert } from '@open-wc/testing';
 import { useFakeTimers } from 'sinon';
 import { Options } from '../src/options/Options';
 import { Select, SelectOption } from '../src/select/Select';
 import {
   assertScreenshot,
-  checkTimers,
   getClip,
+  getOptions,
   loadStore,
-  mouseClickElement
+  openAndClick,
+  openSelect
 } from './utils.test';
-import { CustomEventType } from '../src/interfaces';
 
 const colors = [
   { name: 'Red', value: '0' },
@@ -20,7 +20,7 @@ const colors = [
 
 export const createSelect = async (clock, def: string) => {
   const parentNode = document.createElement('div');
-  parentNode.setAttribute('style', 'width: 250px;');
+  parentNode.setAttribute('style', 'width: 400px;');
 
   const select: Select<SelectOption> = await fixture(def, { parentNode });
   clock.runAll();
@@ -28,66 +28,10 @@ export const createSelect = async (clock, def: string) => {
   return select;
 };
 
-export const open = async (clock, select: Select<SelectOption>) => {
-  if (!select.endpoint) {
-    await mouseClickElement(select);
-    await clock.runAll();
-    await clock.runAll();
-    return select;
-  }
-
-  const promise = new Promise<Select<SelectOption>>((resolve) => {
-    select.addEventListener(
-      CustomEventType.FetchComplete,
-      async () => {
-        await clock.runAll();
-        resolve(select);
-      },
-      { once: true }
-    );
-  });
-
-  await mouseClickElement(select);
-  await clock.runAll();
-
-  return promise;
-};
-
 export const clear = (select: Select<SelectOption>) => {
   (select.shadowRoot.querySelector('.clear-button') as HTMLDivElement).click();
 };
 
-export const getOptions = (select: Select<SelectOption>): Options => {
-  return select.shadowRoot.querySelector('temba-options[visible]');
-};
-
-export const clickOption = async (
-  clock: any,
-  select: Select<SelectOption>,
-  index: number
-) => {
-  const options = getOptions(select);
-  const option = options.shadowRoot.querySelector(
-    `[data-option-index="${index}"]`
-  ) as HTMLDivElement;
-
-  await mouseClickElement(option);
-  await options.updateComplete;
-  await select.updateComplete;
-  await clock.runAll();
-
-  checkTimers(clock);
-};
-
-export const openAndClick = async (
-  clock: any,
-  select: Select<SelectOption>,
-  index: number
-) => {
-  await open(clock, select);
-  await clickOption(clock, select, index);
-};
-
 export const getSelectHTML = (
   options: SelectOption[] = colors,
   attrs: any = { placeholder: 'Select a color', name: 'color' },
@@ -143,7 +87,7 @@ const getClipWithOptions = (select: Select<any>) => {
 };
 
 describe('temba-select', () => {
-  let clock: any;
+  let clock: Sinon.SinonFakeTimers;
   beforeEach(function () {
     clock = useFakeTimers();
     clock.tick(400);
@@ -190,7 +134,7 @@ describe('temba-select', () => {
     expect(select.disabled).to.equal(true);
 
     // make sure we can't select anymore
-    await open(clock, select);
+    await openSelect(clock, select);
     expect(select.isOpen()).to.equal(false);
     await assertScreenshot('select/disabled-multi-selection', getClip(select));
   });
@@ -211,7 +155,7 @@ describe('temba-select', () => {
 
   it('shows options when opened', async () => {
     const select = await createSelect(clock, getSelectHTML());
-    await open(clock, select);
+    await openSelect(clock, select);
     const options = getOptions(select);
     assert.instanceOf(options, Options);
 
@@ -234,6 +178,33 @@ describe('temba-select', () => {
     await assertScreenshot('select/embedded', getClipWithOptions(select));
   });
 
+  it('shows no options message when opening with empty options', async () => {
+    const select = await createSelect(
+      clock,
+      getSelectHTML([], { placeholder: 'Select an option' })
+    );
+
+    // attempt to open the select with no options
+    await openSelect(clock, select);
+
+    // should show options dropdown even though there are no options
+    const options = getOptions(select);
+    assert.instanceOf(options, Options);
+
+    // the options dropdown should be visible
+    assert.isTrue(
+      options.shadowRoot
+        .querySelector('.options-container')
+        .classList.contains('show')
+    );
+
+    // should contain a "No options" message
+    const noOptionsText = options.shadowRoot.textContent;
+    assert.include(noOptionsText.toLowerCase(), 'no options');
+
+    await assertScreenshot('select/empty-options', getClipWithOptions(select));
+  });
+
   describe('single selection', () => {
     it('can select a single option', async () => {
       const select = await createSelect(clock, getSelectHTML());
@@ -270,13 +241,13 @@ describe('temba-select', () => {
       expect(select.values[0].name).to.equal('Green');
 
       // for single selection our current selection should be in the list and focused
-      await open(clock, select);
+      await openSelect(clock, select);
       assert.equal(select.cursorIndex, 1);
       assert.equal(select.visibleOptions.length, 3);
 
       // now lets do a search, we should see our selection (green) and one other (red)
       await typeInto('temba-select', 're', false);
-      await open(clock, select);
+      await openSelect(clock, select);
       assert.equal(select.visibleOptions.length, 2);
 
       await assertScreenshot(
@@ -342,7 +313,7 @@ describe('temba-select', () => {
       assert(changeEvent.called, 'change event not fired');
 
       changeEvent.resetHistory();
-      await open(clock, select);
+      await openSelect(clock, select);
       assert.equal(select.visibleOptions.length, 0);
       assert(!changeEvent.called, 'change event should not be fired');
 
@@ -377,6 +348,163 @@ describe('temba-select', () => {
     });
   });
 
+  describe('drag and drop reordering', () => {
+    it('handles drag and drop with swap-based logic', async () => {
+      const select = await createSelect(
+        clock,
+        getSelectHTML(
+          [
+            { name: 'Red', value: '0', selected: true },
+            { name: 'Green', value: '1', selected: true },
+            { name: 'Blue', value: '2', selected: true }
+          ],
+          {
+            placeholder: 'Select colors',
+            multi: true
+          }
+        )
+      );
+
+      // Verify initial order: Red, Green, Blue
+      expect(select.values.length).to.equal(3);
+      expect(select.values[0].name).to.equal('Red');
+      expect(select.values[1].name).to.equal('Green');
+      expect(select.values[2].name).to.equal('Blue');
+
+      const sortableList = select.shadowRoot.querySelector(
+        'temba-sortable-list'
+      );
+      expect(sortableList).to.not.be.null;
+
+      // Example 1: Pick up Blue (index 2), drop between Red and Green
+      // Expected result: Red, Blue, Green (swap [1,2])
+      const blueItem = sortableList.querySelector('#selected-2');
+      const greenItem = sortableList.querySelector('#selected-1');
+      expect(blueItem).to.not.be.null;
+      expect(greenItem).to.not.be.null;
+
+      const blueBounds = blueItem.getBoundingClientRect();
+      const greenBounds = greenItem.getBoundingClientRect();
+
+      // Start drag from Blue item
+      await moveMouse(blueBounds.left + 10, blueBounds.top + 10);
+      await mouseDown();
+
+      // Drag to position between Red and Green (left side of Green)
+      await moveMouse(greenBounds.left - 5, greenBounds.top + 10);
+      await waitFor(100);
+      await mouseUp();
+      clock.runAll();
+
+      // Verify result: Red, Blue, Green (Green and Blue swapped)
+      expect(select.values.length).to.equal(3);
+      expect(select.values[0].name).to.equal('Red');
+      expect(select.values[1].name).to.equal('Blue');
+      expect(select.values[2].name).to.equal('Green');
+
+      // Reset for next test
+      select.values = [
+        { name: 'Red', value: '0', selected: true },
+        { name: 'Green', value: '1', selected: true },
+        { name: 'Blue', value: '2', selected: true }
+      ];
+      await select.updateComplete;
+
+      // Example 2: Pick up Red (index 0), drop at end
+      // Expected result: Green, Blue, Red (swap [0,2])
+      const redItem = sortableList.querySelector('#selected-0');
+      const redBounds = redItem.getBoundingClientRect();
+      const blueItemBounds = sortableList
+        .querySelector('#selected-2')
+        .getBoundingClientRect();
+
+      // Start drag from Red item
+      await moveMouse(redBounds.left + 10, redBounds.top + 10);
+      await mouseDown();
+
+      // Drag to end position (right side of Blue)
+      await moveMouse(blueItemBounds.right + 5, blueItemBounds.top + 10);
+      await waitFor(100);
+      await mouseUp();
+      clock.runAll();
+
+      // Verify result: Green, Blue, Red (Red and Blue swapped)
+      expect(select.values.length).to.equal(3);
+      expect(select.values[0].name).to.equal('Green');
+      expect(select.values[1].name).to.equal('Blue');
+      expect(select.values[2].name).to.equal('Red');
+
+      // Reset for next test
+      select.values = [
+        { name: 'Red', value: '0', selected: true },
+        { name: 'Green', value: '1', selected: true },
+        { name: 'Blue', value: '2', selected: true }
+      ];
+      await select.updateComplete;
+
+      // Example 3: Pick up Green (index 1), drop at same position
+      // Expected result: No change, no event
+      const greenItemNew = sortableList.querySelector('#selected-1');
+      const greenBoundsNew = greenItemNew.getBoundingClientRect();
+
+      // Start drag from Green item
+      await moveMouse(greenBoundsNew.left + 10, greenBoundsNew.top + 10);
+      await mouseDown();
+
+      // Drag slightly but return to same position
+      await moveMouse(greenBoundsNew.left + 15, greenBoundsNew.top + 10);
+      await moveMouse(greenBoundsNew.left + 10, greenBoundsNew.top + 10);
+      await waitFor(100);
+      await mouseUp();
+      clock.runAll();
+
+      // Verify result: No change
+      expect(select.values.length).to.equal(3);
+      expect(select.values[0].name).to.equal('Red');
+      expect(select.values[1].name).to.equal('Green');
+      expect(select.values[2].name).to.equal('Blue');
+    });
+
+    it('does not show sortable list for single item', async () => {
+      const select = await createSelect(
+        clock,
+        getSelectHTML([{ name: 'Red', value: '0', selected: true }], {
+          placeholder: 'Select a color',
+          multi: true
+        })
+      );
+
+      // Should not have a sortable list with only one item
+      const sortableList = select.shadowRoot.querySelector(
+        'temba-sortable-list'
+      );
+      expect(sortableList).to.be.null;
+
+      // Should still show the selected item normally
+      expect(select.values.length).to.equal(1);
+      expect(select.values[0].name).to.equal('Red');
+    });
+
+    it('does not show sortable list for non-multi select', async () => {
+      const select = await createSelect(
+        clock,
+        getSelectHTML([{ name: 'Red', value: '0', selected: true }], {
+          placeholder: 'Select a color',
+          multi: false
+        })
+      );
+
+      // Should not have a sortable list for single select
+      const sortableList = select.shadowRoot.querySelector(
+        'temba-sortable-list'
+      );
+      expect(sortableList).to.be.null;
+
+      expect(select.values.length).to.equal(1);
+      expect(select.values[0].name).to.equal('Red');
+    });
+  });
+
   describe('static options', () => {
     it('accepts an initial value', async () => {
       const select = await createSelect(
@@ -407,7 +535,7 @@ describe('temba-select', () => {
         })
       );
 
-      await open(clock, select);
+      await openSelect(clock, select);
       await assertScreenshot(
         'select/remote-options',
         getClipWithOptions(select)
@@ -426,7 +554,7 @@ describe('temba-select', () => {
       );
 
       await typeInto('temba-select', 're', false);
-      await open(clock, select);
+      await openSelect(clock, select);
       assert.equal(select.visibleOptions.length, 2);
 
       await assertScreenshot('select/searching', getClipWithOptions(select));
@@ -463,7 +591,7 @@ describe('temba-select', () => {
         })
       );
 
-      await open(clock, select);
+      await openSelect(clock, select);
 
       // should have all three pages visible right away
       assert.equal(select.visibleOptions.length, 15);
@@ -481,14 +609,14 @@ describe('temba-select', () => {
       );
 
       // wait for updates from fetching three pages
-      await open(clock, select);
+      await openSelect(clock, select);
       assert.equal(select.visibleOptions.length, 15);
 
       // close and reopen
       select.blur();
       await clock.tick(250);
 
-      await open(clock, select);
+      await openSelect(clock, select);
       assert.equal(select.visibleOptions.length, 15);
 
       // close and reopen once more (previous bug failed on third opening)
@@ -509,7 +637,7 @@ describe('temba-select', () => {
       );
 
       await typeInto('temba-select', 'Hi there @contact', false);
-      await open(clock, select);
+      await openSelect(clock, select);
 
       assert.equal(select.completionOptions.length, 14);
       await assertScreenshot('select/expressions', getClipWithOptions(select));
@@ -569,7 +697,7 @@ describe('temba-select', () => {
       await openAndClick(clock, select, 1);
 
       // now open and look at focus
-      await open(clock, select);
+      await openSelect(clock, select);
       await assertScreenshot(
         'select/search-selected-focus',
         getClipWithOptions(select)
@@ -589,11 +717,11 @@ describe('temba-select', () => {
       // select the first option
       await openAndClick(clock, select, 0);
       await openAndClick(clock, select, 0);
-      await open(clock, select);
+      await openSelect(clock, select);
 
       // now lets do a search, we should see our selection (green) and one other (red)
       await typeInto('temba-select', 're', false);
-      await open(clock, select);
+      await openSelect(clock, select);
 
       // should have two things selected and active query and no matching options
       await assertScreenshot(
@@ -615,7 +743,7 @@ describe('temba-select', () => {
       );
 
       await typeInto('temba-select', 'look at @(max(m', false);
-      await open(clock, select);
+      await openSelect(clock, select);
 
       await assertScreenshot('select/functions', getClipWithOptions(select));
     });
@@ -623,7 +751,7 @@ describe('temba-select', () => {
     it('should truncate selection if necessesary', async () => {
       const options = [
         {
-          name: 'this_is_a_long_selection_to_make_sure_it_truncates',
+          name: 'this_is_a_long_selection_to_make_sure_it_truncates_but_it_needs_to_be_longer',
           value: '0'
         }
       ];

package/test/temba-sortable-list.test.ts

@@ -3,52 +3,145 @@ import { html, TemplateResult } from 'lit';
 import { CustomEventType } from '../src/interfaces';
 import { SortableList } from '../src/list/SortableList';
 import { assertScreenshot, getClip } from './utils.test';
+import Sinon, { useFakeTimers } from 'sinon';
 
 const BORING_LIST = html`
   <temba-sortable-list>
-    <div class="sortable" id="chicken" style="padding:10px">Chicken</div>
-    <div class="sortable" id="fish" style="padding:10px">Fish</div>
+    <style>
+      .sortable {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        height: 20px;
+      }
+    </style>
+    <div class="sortable" id="chicken" style="">Chicken</div>
+    <div class="sortable" id="fish">Fish</div>
+  </temba-sortable-list>
+`;
+
+const HORIZONTAL_LIST = html`
+  <temba-sortable-list horizontal>
+    <style>
+      .sortable {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        height: 20px;
+        width: 50px;
+      }
+    </style>
+    <div class="sortable" id="red">Red</div>
+    <div class="sortable" id="blue">Blue</div>
+    <div class="sortable" id="green">Green</div>
   </temba-sortable-list>
 `;
 
 const createSorter = async (def: TemplateResult) => {
   const parentNode = document.createElement('div');
-  parentNode.setAttribute('style', 'width: 200px;');
+  parentNode.setAttribute('style', 'width: 100px;');
   return (await fixture(def, { parentNode })) as SortableList;
 };
 
 describe('temba-sortable-list', () => {
+  let clock: Sinon.SinonFakeTimers;
+  beforeEach(function () {
+    clock = useFakeTimers();
+    clock.runAll();
+  });
+
+  afterEach(function () {
+    clock.restore();
+  });
+
   it('renders default', async () => {
     const list: SortableList = await createSorter(BORING_LIST);
     await assertScreenshot('list/sortable', getClip(list));
   });
 
-  it('drags', async () => {
+  it('can get ids of sortable elements', async () => {
     const list: SortableList = await createSorter(BORING_LIST);
-    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);
-    const updated = oneEvent(list, 'change', false);
+    await list.updateComplete;
+
+    const ids = list.getIds();
+    expect(ids).to.deep.equal(['chicken', 'fish']);
+  });
 
+  it('works with horizontal layout', async () => {
+    const list: SortableList = await createSorter(HORIZONTAL_LIST);
+    await list.updateComplete;
+
+    const ids = list.getIds();
+    expect(ids).to.deep.equal(['red', 'blue', 'green']);
+
+    // Test horizontal drag behavior
     const bounds = list.getBoundingClientRect();
+    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);
 
-    await moveMouse(bounds.left + 20, bounds.bottom - 10);
+    // Drag the first item (red) to after the second item (blue)
+    await moveMouse(bounds.left + 10, bounds.top + 10);
     await mouseDown();
-    await moveMouse(bounds.left + 30, bounds.top + 20);
+    await moveMouse(bounds.left + 80, bounds.top + 10);
+    await mouseUp();
+    clock.runAll();
 
-    // we should fire an order changed event
     const orderEvent = await orderChanged;
     expect(orderEvent.detail).to.deep.equal({
-      from: 'fish',
-      to: 'chicken',
-      fromIdx: 1,
-      toIdx: 0
+      swap: [0, 2]
     });
+  });
+
+  it('handles prepareGhost callback', async () => {
+    const list: SortableList = await createSorter(BORING_LIST);
+    let ghostPrepared = false;
+
+    list.prepareGhost = (ghost: HTMLElement) => {
+      ghostPrepared = true;
+      ghost.style.backgroundColor = 'red';
+    };
+
+    const bounds = list.getBoundingClientRect();
+
+    // Start dragging to trigger ghost creation
+    await moveMouse(bounds.left + 20, bounds.bottom - 10);
+    await mouseDown();
+    await moveMouse(bounds.left + 30, bounds.bottom - 10);
+
+    expect(ghostPrepared).to.be.true;
+
+    // Clean up
+    await mouseUp();
+    clock.runAll();
+  });
+
+  it('drags', async () => {
+    const list: SortableList = await createSorter(BORING_LIST);
+    const updated = oneEvent(list, 'change', false);
+
+    const bounds = list.getBoundingClientRect();
+
+    await moveMouse(bounds.left + 20, bounds.bottom - 10);
+    await mouseDown();
+    await moveMouse(bounds.left + 20, bounds.top + 5);
 
     // should be hovered
     await assertScreenshot('list/sortable-dragging', getClip(list));
 
-    // now lets drop, it'll look the same as before dragging since
-    // its the consuming elements job to do the reordering
+    // now lets drop - this will fire the order changed event
+    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);
     await mouseUp();
+    clock.runAll();
+    await list.updateComplete;
+    clock.runAll();
+
+    // we should fire an order changed event on drop
+    const orderEvent = await orderChanged;
+    expect(orderEvent.detail).to.deep.equal({
+      swap: [1, 0]
+    });
+
     await assertScreenshot('list/sortable-dropped', getClip(list));
 
     // we should fire a change event