@dile/ui 3.4.4 → 3.4.6

package/components/tooltip/chip-tooltip.js

@@ -1,3 +1,5 @@
 import { DileChipTooltip } from './src/DileChipTooltip.js';
 
-window.customElements.define('dile-chip-tooltip', DileChipTooltip);
+if (!customElements.get('dile-chip-tooltip')) {
+  window.customElements.define('dile-chip-tooltip', DileChipTooltip);
+}

package/components/tooltip/chip-tooltip.spec.js

@@ -0,0 +1,29 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './chip-tooltip.js';
+
+describe('dile-chip-tooltip', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderChipTooltip(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-chip-tooltip');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the label inside a dile-tooltip with the message', async () => {
+    const el = await renderChipTooltip('<dile-chip-tooltip label="Info" message="More info here"></dile-chip-tooltip>');
+    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
+
+    expect(tooltip).toBeTruthy();
+    expect(tooltip.getAttribute('tooltip')).toBe('More info here');
+    expect(el.shadowRoot.querySelector('.label').textContent.trim()).toBe('Info');
+  });
+
+  it('defaults the position to bottom', async () => {
+    const el = await renderChipTooltip('<dile-chip-tooltip message="Info"></dile-chip-tooltip>');
+    expect(el.position).toBe('bottom');
+  });
+});

package/components/tooltip/tooltip.js

@@ -1,3 +1,5 @@
 import { DileTooltip } from './src/DileTooltip.js';
 
-window.customElements.define('dile-tooltip', DileTooltip);
+if (!customElements.get('dile-tooltip')) {
+  window.customElements.define('dile-tooltip', DileTooltip);
+}

package/components/tooltip/tooltip.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './tooltip.js';
+
+describe('dile-tooltip', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderTooltip(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-tooltip');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the tooltip text hidden by default', async () => {
+    const el = await renderTooltip('<dile-tooltip tooltip="Hello there">Trigger</dile-tooltip>');
+    const tooltipText = el.shadowRoot.querySelector('.tooltiptext');
+
+    expect(tooltipText).toBeTruthy();
+    expect(tooltipText.textContent.trim()).toBe('Hello there');
+    expect(tooltipText.classList.contains('show')).toBe(false);
+  });
+
+  it('shows the tooltip on mouseover', async () => {
+    const el = await renderTooltip('<dile-tooltip tooltip="Hello there">Trigger</dile-tooltip>');
+    el.doMouseover();
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('.tooltiptext').classList.contains('show')).toBe(true);
+  });
+});

package/components/web-visor/web-visor.js

@@ -1,3 +1,5 @@
 import { DileWebVisor } from "./src/DileWebVisor.js";
 
-window.customElements.define("dile-web-visor", DileWebVisor);
+if (!customElements.get("dile-web-visor")) {
+  window.customElements.define("dile-web-visor", DileWebVisor);
+}

package/components/web-visor/web-visor.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './web-visor.js';
+
+describe('dile-web-visor', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderWebVisor(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-web-visor');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders an iframe pointing at the url', async () => {
+    const el = await renderWebVisor('<dile-web-visor url="https://example.com" title="Example"></dile-web-visor>');
+    const iframe = el.shadowRoot.querySelector('iframe');
+
+    expect(iframe).toBeTruthy();
+    expect(iframe.getAttribute('src')).toBe('https://example.com');
+  });
+
+  it('increases zoom when zoom in is clicked', async () => {
+    const el = await renderWebVisor('<dile-web-visor url="https://example.com"></dile-web-visor>');
+    const zoomInButton = el.shadowRoot.querySelectorAll('.controls dile-button')[1];
+    zoomInButton.click();
+    await el.updateComplete;
+
+    expect(el._zoom).toBeCloseTo(1.1);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.4.4",
+  "version": "3.4.6",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -21,12 +21,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/iconlib": "^1.8.0",
+    "@dile/iconlib": "^1.8.1",
     "@dile/icons": "^2.5.1",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "addd7ce4fc5edbd5145fbe1202e61894b42e0c0a"
+  "gitHead": "57a54e50de1a24d64dcf478fa6d39624e1f775eb"
 }