@nyaruka/temba-components 0.131.2 → 0.131.3

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);
+  });
+});

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

@@ -0,0 +1,477 @@
+import { expect, assert } from '@open-wc/testing';
+import { FloatingWindow } from '../src/layout/FloatingWindow';
+import { assertScreenshot, getComponent } from './utils.test';
+
+describe('temba-floating-window', () => {
+  it('can be created', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Phone Simulator',
+        width: 250,
+        maxHeight: 700,
+        top: 100
+      },
+      '<div style="padding: 20px;">Window content goes here</div>',
+      300,
+      750
+    )) as FloatingWindow;
+
+    assert.instanceOf(window, FloatingWindow);
+    expect(window.header).to.equal('Phone Simulator');
+    expect(window.width).to.equal(250);
+    expect(window.maxHeight).to.equal(700);
+    expect(window.top).to.equal(100);
+
+    // show the window for screenshot
+    window.hidden = false;
+    await window.updateComplete;
+    expect(window.hidden).to.equal(false);
+
+    // use custom clip for fixed positioned element
+    const windowElement = window.shadowRoot.querySelector(
+      '.window'
+    ) as HTMLElement;
+    const clip = {
+      x: window.left,
+      y: window.top,
+      width: window.width,
+      height: windowElement.offsetHeight
+    };
+    await assertScreenshot('floating-window/default', clip);
+  });
+
+  it('starts hidden by default', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Test Window'
+      },
+      '<div>Content</div>'
+    )) as FloatingWindow;
+
+    expect(window.hidden).to.equal(true);
+    expect(window.classList.contains('hidden')).to.equal(true);
+  });
+
+  it('can be shown and hidden', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Test Window',
+        hidden: true
+      },
+      '<div>Content</div>'
+    )) as FloatingWindow;
+
+    expect(window.hidden).to.equal(true);
+
+    window.show();
+    await window.updateComplete;
+    expect(window.hidden).to.equal(false);
+    expect(window.classList.contains('hidden')).to.equal(false);
+
+    window.hide();
+    await window.updateComplete;
+    expect(window.hidden).to.equal(true);
+    expect(window.classList.contains('hidden')).to.equal(true);
+  });
+
+  it('fires close event when close button clicked', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Test Window'
+      },
+      '<div>Content</div>',
+      300,
+      750
+    )) as FloatingWindow;
+
+    // show the window first
+    window.hidden = false;
+    await window.updateComplete;
+
+    let closed = false;
+    window.addEventListener('temba-dialog-hidden', () => {
+      closed = true;
+    });
+
+    const closeButton = window.shadowRoot.querySelector(
+      '.close-button'
+    ) as HTMLElement;
+    expect(closeButton).to.exist;
+
+    closeButton.click();
+    await window.updateComplete;
+
+    expect(closed).to.equal(true);
+    expect(window.hidden).to.equal(true);
+  });
+
+  it('displays header correctly', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Phone Simulator'
+      },
+      '<div>Content</div>',
+      300,
+      400
+    )) as FloatingWindow;
+
+    window.hidden = false;
+    await window.updateComplete;
+
+    const titleElement = window.shadowRoot.querySelector('.title');
+    expect(titleElement).to.exist;
+    expect(titleElement.textContent).to.equal('Phone Simulator');
+
+    // use custom clip for fixed positioned element
+    const windowElement = window.shadowRoot.querySelector(
+      '.window'
+    ) as HTMLElement;
+    const clip = {
+      x: window.left,
+      y: window.top,
+      width: window.width,
+      height: windowElement.offsetHeight
+    };
+    await assertScreenshot('floating-window/with-header', clip);
+  });
+
+  it('renders slot content', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Test'
+      },
+      '<div class="test-content">Custom content</div>',
+      300,
+      400
+    )) as FloatingWindow;
+
+    window.hidden = false;
+    await window.updateComplete;
+
+    const slotContent = window.querySelector('.test-content');
+    expect(slotContent).to.exist;
+    expect(slotContent.textContent).to.equal('Custom content');
+  });
+
+  it('supports custom dimensions', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Custom Size',
+        width: 400,
+        maxHeight: 600,
+        top: 100,
+        left: 100
+      },
+      '<div>Content</div>',
+      450,
+      650
+    )) as FloatingWindow;
+
+    window.show();
+    await window.updateComplete;
+    expect(window.width).to.equal(400);
+    expect(window.maxHeight).to.equal(600);
+    expect(window.top).to.equal(100);
+    expect(window.left).to.equal(100);
+
+    // use custom clip for fixed positioned element
+    const windowElement = window.shadowRoot.querySelector(
+      '.window'
+    ) as HTMLElement;
+    const clip = {
+      x: window.left,
+      y: window.top,
+      width: window.width,
+      height: windowElement.offsetHeight
+    };
+
+    await assertScreenshot('floating-window/custom-size', clip);
+  });
+
+  it('can be dragged by header', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Draggable Window',
+        width: 250,
+        maxHeight: 400,
+        top: 100,
+        left: 100
+      },
+      '<div>Content</div>',
+      300,
+      450
+    )) as FloatingWindow;
+
+    window.hidden = false;
+    await window.updateComplete;
+
+    const header = window.shadowRoot.querySelector('.header') as HTMLElement;
+    expect(header).to.exist;
+
+    // simulate drag by setting dragging state
+    window.dragging = true;
+    await window.updateComplete;
+
+    const windowElement = window.shadowRoot.querySelector('.window');
+    expect(windowElement.classList.contains('dragging')).to.equal(true);
+  });
+
+  it('respects viewport bounds when dragging', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Bounded Window',
+        width: 250,
+        maxHeight: 400,
+        top: 100,
+        left: 100
+      },
+      '<div style="height: 200px;">Content with specific height</div>',
+      300,
+      450
+    )) as FloatingWindow;
+
+    window.hidden = false;
+    await window.updateComplete;
+
+    // get actual window height
+    const windowElement = window.shadowRoot.querySelector(
+      '.window'
+    ) as HTMLElement;
+    const actualHeight = windowElement.offsetHeight;
+
+    // simulate dragging near bottom of viewport
+    const viewportHeight = window.ownerDocument.defaultView.innerHeight;
+    const maxAllowedTop = viewportHeight - actualHeight;
+
+    // try to drag below the viewport
+    window.top = viewportHeight + 100;
+    await window.updateComplete;
+
+    // the handleMouseMove should clamp this, but we'll test the logic exists
+    expect(actualHeight).to.be.greaterThan(0);
+    expect(maxAllowedTop).to.be.lessThan(viewportHeight);
+  });
+
+  it('maintains consistent starting position', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Test',
+        width: 250,
+        maxHeight: 400,
+        top: 100,
+        left: 100
+      },
+      '<div>Content</div>',
+      300,
+      450
+    )) as FloatingWindow;
+
+    window.hidden = false;
+    await window.updateComplete;
+
+    // verify initial position matches properties
+    expect(window.top).to.equal(100);
+    expect(window.left).to.equal(100);
+
+    // change position (simulating drag)
+    window.top = 200;
+    window.left = 200;
+    await window.updateComplete;
+
+    // hide and show
+    window.hide();
+    await window.updateComplete;
+    window.show();
+    await window.updateComplete;
+
+    // position should remain at property values (100, 100) not dragged position
+    expect(window.top).to.equal(100);
+    expect(window.left).to.equal(100);
+  });
+
+  it('can disable chrome', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Test',
+        width: 250,
+        maxHeight: 400,
+        top: 100,
+        left: 100,
+        chromeless: true
+      },
+      '<div style="background: white; padding: 20px;">Chromeless content</div>',
+      300,
+      450
+    )) as FloatingWindow;
+
+    expect(window.chromeless).to.equal(true);
+
+    window.hidden = false;
+    await window.updateComplete;
+
+    const windowElement = window.shadowRoot.querySelector(
+      '.window'
+    ) as HTMLElement;
+    expect(windowElement.classList.contains('chromeless')).to.equal(true);
+
+    // header should not be rendered
+    const header = window.shadowRoot.querySelector('.header');
+    expect(header).to.not.exist;
+
+    // body should have no padding
+    const body = window.shadowRoot.querySelector('.body') as HTMLElement;
+    const bodyStyles = getComputedStyle(body);
+    expect(bodyStyles.padding).to.equal('0px');
+
+    // use custom clip for fixed positioned element
+    const clip = {
+      x: window.left,
+      y: window.top,
+      width: window.width,
+      height: windowElement.offsetHeight
+    };
+    await assertScreenshot('floating-window/chromeless', clip);
+  });
+
+  it('defaults to showing chrome', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Test'
+      },
+      '<div>Content</div>'
+    )) as FloatingWindow;
+
+    expect(window.chromeless).to.equal(false);
+  });
+
+  it('can close via public close() method', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Test',
+        chromeless: true
+      },
+      '<div>Content</div>'
+    )) as FloatingWindow;
+
+    window.hidden = false;
+    await window.updateComplete;
+    expect(window.hidden).to.equal(false);
+
+    let eventFired = false;
+    window.addEventListener('temba-dialog-hidden', () => {
+      eventFired = true;
+    });
+
+    // call public close() method
+    window.close();
+    await window.updateComplete;
+
+    expect(window.hidden).to.equal(true);
+    expect(eventFired).to.equal(true);
+  });
+
+  it('chromeless window has no borders or shadows', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Test',
+        width: 250,
+        maxHeight: 400,
+        chromeless: true
+      },
+      '<div>Content</div>',
+      300,
+      450
+    )) as FloatingWindow;
+
+    window.hidden = false;
+    await window.updateComplete;
+
+    const windowElement = window.shadowRoot.querySelector(
+      '.window'
+    ) as HTMLElement;
+    const styles = getComputedStyle(windowElement);
+
+    expect(styles.boxShadow).to.equal('none');
+    expect(styles.borderRadius).to.equal('0px');
+    expect(styles.background.includes('rgba(0, 0, 0, 0)')).to.be.true;
+  });
+
+  it('supports min and max height constraints', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Min/Max Test',
+        width: 300,
+        minHeight: 200,
+        maxHeight: 500
+      },
+      '<div style="padding: 20px;">Content that can vary in height</div>',
+      350,
+      550
+    )) as FloatingWindow;
+
+    window.hidden = false;
+    await window.updateComplete;
+
+    expect(window.minHeight).to.equal(200);
+    expect(window.maxHeight).to.equal(500);
+
+    // verify the styles are applied
+    const windowElement = window.shadowRoot.querySelector(
+      '.window'
+    ) as HTMLElement;
+    const styles = getComputedStyle(windowElement);
+    expect(styles.minHeight).to.equal('200px');
+    expect(styles.maxHeight).to.equal('500px');
+  });
+
+  it('stays on screen when browser is resized', async () => {
+    const window = (await getComponent(
+      'temba-floating-window',
+      {
+        header: 'Resize Test',
+        width: 250,
+        maxHeight: 400,
+        top: 100,
+        left: 100
+      },
+      '<div style="height: 200px;">Content</div>',
+      300,
+      450
+    )) as FloatingWindow;
+
+    window.hidden = false;
+    await window.updateComplete;
+
+    // position window near right edge
+    const originalViewportWidth = window.ownerDocument.defaultView.innerWidth;
+    window.left = originalViewportWidth - window.width - 30;
+    await window.updateComplete;
+
+    // simulate window resize event (the component should constrain position)
+    window.dispatchEvent(new Event('resize', { bubbles: true }));
+    await window.updateComplete;
+
+    // window should still be within viewport bounds with 20px padding
+    const padding = 20;
+    expect(window.left).to.be.at.least(padding);
+    expect(window.left).to.be.at.most(
+      window.ownerDocument.defaultView.innerWidth - window.width - padding
+    );
+    expect(window.top).to.be.at.least(padding);
+  });
+});