@nyaruka/temba-components 0.131.1 → 0.131.3

package/test/temba-canvas-menu.test.ts

@@ -0,0 +1,156 @@
+import { expect, assert } from '@open-wc/testing';
+import { CanvasMenu } from '../src/flow/CanvasMenu';
+import { assertScreenshot, getClip, getComponent } from './utils.test';
+
+describe('temba-canvas-menu', () => {
+  const createCanvasMenu = async () => {
+    const component = (await getComponent(
+      'temba-canvas-menu',
+      {},
+      '',
+      250,
+      250
+    )) as CanvasMenu;
+    await component.updateComplete;
+    return component;
+  };
+
+  it('can be created', async () => {
+    const menu = await createCanvasMenu();
+    assert.instanceOf(menu, CanvasMenu);
+    expect(menu.open).to.be.false;
+  });
+
+  it('is not visible when closed', async () => {
+    const menu = await createCanvasMenu();
+    expect(menu.open).to.be.false;
+
+    // verify no menu is rendered
+    const menuElement = menu.shadowRoot?.querySelector('.menu');
+    expect(menuElement).to.be.null;
+  });
+
+  it('shows menu when opened', async () => {
+    const menu = await createCanvasMenu();
+
+    // open the menu
+    menu.show(100, 100, { x: 50, y: 50 });
+    await menu.updateComplete;
+
+    expect(menu.open).to.be.true;
+    expect(menu.x).to.equal(100);
+    expect(menu.y).to.equal(100);
+
+    // verify menu is rendered
+    const menuElement = menu.shadowRoot?.querySelector('.menu');
+    expect(menuElement).to.not.be.null;
+
+    await assertScreenshot('canvas-menu/open', getClip(menu));
+  });
+
+  it('has three menu items', async () => {
+    const menu = await createCanvasMenu();
+    menu.show(100, 100, { x: 50, y: 50 });
+    await menu.updateComplete;
+
+    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
+    expect(menuItems?.length).to.equal(3);
+
+    // check menu item titles
+    const titles = Array.from(menuItems || []).map(
+      (item) => item.querySelector('.menu-item-title')?.textContent
+    );
+    expect(titles).to.deep.equal([
+      'Add Action',
+      'Add Split',
+      'Add Sticky Note'
+    ]);
+  });
+
+  it('closes when close() is called', async () => {
+    const menu = await createCanvasMenu();
+    menu.show(100, 100, { x: 50, y: 50 });
+    await menu.updateComplete;
+
+    expect(menu.open).to.be.true;
+
+    menu.close();
+    await menu.updateComplete;
+
+    expect(menu.open).to.be.false;
+  });
+
+  it('fires selection event when menu item is clicked', async () => {
+    const menu = await createCanvasMenu();
+    menu.show(100, 100, { x: 50, y: 50 });
+    await menu.updateComplete;
+
+    let selectionFired = false;
+    let selectionDetail = null;
+
+    menu.addEventListener('temba-selection', (event: any) => {
+      selectionFired = true;
+      selectionDetail = event.detail;
+    });
+
+    // click on sticky note option (now the third item)
+    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
+    const stickyItem = menuItems?.[2] as HTMLElement;
+    stickyItem.click();
+    await menu.updateComplete;
+
+    expect(selectionFired).to.be.true;
+    expect(selectionDetail).to.deep.equal({
+      action: 'sticky',
+      position: { x: 50, y: 50 }
+    });
+    expect(menu.open).to.be.false;
+  });
+
+  it('adjusts position to stay within viewport bounds', async () => {
+    const menu = await createCanvasMenu();
+
+    // open menu at position that would go off screen
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const margin = 10; // matches the margin in CanvasMenu
+
+    // position that would go off the right and bottom edges
+    menu.show(viewportWidth - 50, viewportHeight - 50, {
+      x: 100,
+      y: 100
+    });
+    await menu.updateComplete;
+
+    // wait for position adjustment
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await menu.updateComplete;
+
+    const menuElement = menu.shadowRoot?.querySelector('.menu') as HTMLElement;
+    expect(menuElement).to.not.be.null;
+
+    const menuRect = menuElement.getBoundingClientRect();
+
+    // verify menu stays within viewport with margin
+    expect(menuRect.right).to.be.at.most(viewportWidth - margin);
+    expect(menuRect.bottom).to.be.at.most(viewportHeight - margin);
+
+    // verify click position is preserved (not adjusted)
+    let selectionFired = false;
+    let selectionDetail = null;
+
+    menu.addEventListener('temba-selection', (event: any) => {
+      selectionFired = true;
+      selectionDetail = event.detail;
+    });
+
+    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
+    const actionItem = menuItems?.[0] as HTMLElement;
+    actionItem.click();
+    await menu.updateComplete;
+
+    expect(selectionFired).to.be.true;
+    // click position should remain unchanged
+    expect(selectionDetail.position).to.deep.equal({ x: 100, y: 100 });
+  });
+});

package/test/temba-floating-tab.test.ts

@@ -0,0 +1,110 @@
+import { expect, assert } from '@open-wc/testing';
+import { FloatingTab } from '../src/display/FloatingTab';
+import { assertScreenshot, getClip, getComponent } from './utils.test';
+
+describe('temba-floating-tab', () => {
+  it('can be created', async () => {
+    const tab = (await getComponent('temba-floating-tab', {
+      icon: 'phone',
+      label: 'Phone Simulator',
+      color: '#10b981',
+      top: 100
+    })) as FloatingTab;
+
+    assert.instanceOf(tab, FloatingTab);
+    expect(tab.icon).to.equal('phone');
+    expect(tab.label).to.equal('Phone Simulator');
+    expect(tab.color).to.equal('#10b981');
+    expect(tab.top).to.equal(100);
+    expect(tab.hidden).to.equal(false);
+
+    await assertScreenshot('floating-tab/default', getClip(tab));
+  });
+
+  it('can be hidden', async () => {
+    const tab = (await getComponent('temba-floating-tab', {
+      icon: 'phone',
+      label: 'Phone Simulator',
+      color: '#10b981',
+      hidden: true
+    })) as FloatingTab;
+
+    expect(tab.hidden).to.equal(true);
+    expect(tab.classList.contains('hidden')).to.equal(true);
+
+    await assertScreenshot('floating-tab/hidden', getClip(tab));
+  });
+
+  it('shows label on hover', async () => {
+    const tab = (await getComponent('temba-floating-tab', {
+      icon: 'phone',
+      label: 'Phone Simulator',
+      color: '#6366f1'
+    })) as FloatingTab;
+
+    const tabElement = tab.shadowRoot.querySelector('.tab') as HTMLElement;
+    expect(tabElement).to.exist;
+
+    // simulate hover state
+    const labelElement = tab.shadowRoot.querySelector('.label') as HTMLElement;
+    expect(labelElement).to.exist;
+
+    await assertScreenshot('floating-tab/hover', getClip(tab));
+  });
+
+  it('fires click event', async () => {
+    const tab = (await getComponent('temba-floating-tab', {
+      icon: 'clock',
+      label: 'History',
+      color: '#8b5cf6'
+    })) as FloatingTab;
+
+    let clicked = false;
+    tab.addEventListener('temba-button-clicked', () => {
+      clicked = true;
+    });
+
+    const tabElement = tab.shadowRoot.querySelector('.tab') as HTMLElement;
+    tabElement.click();
+
+    expect(clicked).to.equal(true);
+  });
+
+  it('supports different colors', async () => {
+    const tab1 = (await getComponent('temba-floating-tab', {
+      icon: 'phone',
+      label: 'Phone',
+      color: '#10b981',
+      top: 100
+    })) as FloatingTab;
+
+    const tab2 = (await getComponent('temba-floating-tab', {
+      icon: 'globe',
+      label: 'Translation',
+      color: '#6b7280',
+      top: 200
+    })) as FloatingTab;
+
+    const tab3 = (await getComponent('temba-floating-tab', {
+      icon: 'clock',
+      label: 'History',
+      color: '#8b5cf6',
+      top: 300
+    })) as FloatingTab;
+
+    await assertScreenshot('floating-tab/green', getClip(tab1));
+    await assertScreenshot('floating-tab/gray', getClip(tab2));
+    await assertScreenshot('floating-tab/purple', getClip(tab3));
+  });
+
+  it('supports custom positioning', async () => {
+    const tab = (await getComponent('temba-floating-tab', {
+      icon: 'phone',
+      label: 'Phone Simulator',
+      color: '#10b981',
+      top: 250
+    })) as FloatingTab;
+
+    expect(tab.top).to.equal(250);
+  });
+});