@dile/ui 3.18.0 → 3.18.2

package/components/textarea/textarea.spec.js

@@ -1,39 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './textarea.js';
-
-describe('dile-textarea', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderTextarea(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-textarea');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a native textarea with the initial value', async () => {
-    const el = await renderTextarea('<dile-textarea name="bio" value="Hello"></dile-textarea>');
-    const textarea = el.shadowRoot.querySelector('textarea');
-
-    expect(textarea).toBeTruthy();
-    expect(textarea.value).toBe('Hello');
-  });
-
-  it('updates the value property on input', async () => {
-    const el = await renderTextarea('<dile-textarea name="bio"></dile-textarea>');
-    const textarea = el.shadowRoot.querySelector('textarea');
-    textarea.value = 'New text';
-    textarea.dispatchEvent(new Event('input'));
-    await el.updateComplete;
-
-    expect(el.value).toBe('New text');
-  });
-
-  it('renders the label when provided', async () => {
-    const el = await renderTextarea('<dile-textarea name="bio" label="Bio"></dile-textarea>');
-    const label = el.shadowRoot.querySelector('label');
-    expect(label.textContent.trim()).toBe('Bio');
-  });
-});

package/components/time-picker/time-picker.spec.js

@@ -1,26 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './time-picker.js';
-
-describe('dile-time-picker', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderTimePicker(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-time-picker');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('defaults to 00:00:00 and renders three number pickers', async () => {
-    const el = await renderTimePicker('<dile-time-picker name="start"></dile-time-picker>');
-    expect(el.value).toBe('00:00:00');
-    expect(el.shadowRoot.querySelectorAll('dile-number-picker-element').length).toBe(3);
-  });
-
-  it('renders the label when provided', async () => {
-    const el = await renderTimePicker('<dile-time-picker label="Start time"></dile-time-picker>');
-    expect(el.shadowRoot.querySelector('label').textContent.trim()).toBe('Start time');
-  });
-});

package/components/timer/timer.spec.js

@@ -1,31 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './timer.js';
-
-describe('dile-timer', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderTimer(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-timer');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('defaults to a 60s duration shown as 01:00', async () => {
-    const el = await renderTimer('<dile-timer></dile-timer>');
-    expect(el.duration).toBe(60_000);
-    expect(el.shadowRoot.querySelector('.display').textContent.trim()).toBe('01:00');
-  });
-
-  it('renders control buttons when controls is set', async () => {
-    const el = await renderTimer('<dile-timer controls></dile-timer>');
-    expect(el.shadowRoot.querySelectorAll('.controls dile-button').length).toBe(3);
-  });
-
-  it('renders the title when provided', async () => {
-    const el = await renderTimer('<dile-timer title="Countdown"></dile-timer>');
-    expect(el.shadowRoot.querySelector('.title').textContent.trim()).toBe('Countdown');
-  });
-});

package/components/toast/toast.spec.js

@@ -1,86 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './toast.js';
-
-describe('dile-toast', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderToast(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-toast');
-    await el.updateComplete;
-    return el;
-  }
-
-  async function openAndGetItem(el, text, toastType) {
-    el.open(text, toastType);
-    await el.updateComplete;
-    const item = el.shadowRoot.querySelector('dile-toast-item');
-    await item.updateComplete;
-    return item;
-  }
-
-  function wait(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
-  it('does not render a close icon by default', async () => {
-    const el = await renderToast('<dile-toast duration="10000"></dile-toast>');
-    const item = await openAndGetItem(el, 'Hello');
-
-    expect(item.shadowRoot.querySelector('.closeicon')).toBeNull();
-  });
-
-  it('renders the message text and status class', async () => {
-    const el = await renderToast('<dile-toast duration="10000"></dile-toast>');
-    const item = await openAndGetItem(el, 'Saved!', 'success');
-
-    expect(item.shadowRoot.querySelector('.text').textContent.trim()).toBe('Saved!');
-    expect(item.shadowRoot.querySelector('div').classList.contains('success')).toBe(true);
-  });
-
-  it('renders a close icon when showCloseIcon is set', async () => {
-    const el = await renderToast('<dile-toast duration="10000" showCloseIcon></dile-toast>');
-    const item = await openAndGetItem(el, 'Hello');
-
-    expect(item.shadowRoot.querySelector('dile-icon.closeicon')).toBeTruthy();
-  });
-
-  it('closing a toast dispatches dile-toast-closed-by-user with the message detail', async () => {
-    const el = await renderToast('<dile-toast duration="10000" showCloseIcon></dile-toast>');
-    const item = await openAndGetItem(el, 'Dismiss me', 'error');
-
-    let detail = null;
-    el.addEventListener('dile-toast-closed-by-user', (e) => { detail = e.detail; });
-
-    item.shadowRoot.querySelector('dile-icon.closeicon').click();
-    await el.updateComplete;
-
-    expect(detail).toBeTruthy();
-    expect(detail.message.text).toBe('Dismiss me');
-    expect(detail.message.toastType).toBe('error');
-  });
-
-  it('removes the closed toast from the DOM shortly after, without waiting for its duration', async () => {
-    const el = await renderToast('<dile-toast duration="10000" showCloseIcon></dile-toast>');
-    const item = await openAndGetItem(el, 'Dismiss me');
-
-    item.shadowRoot.querySelector('dile-icon.closeicon').click();
-    await el.updateComplete;
-    expect(item.shadowRoot.querySelector('div').classList.contains('hidden')).toBe(true);
-
-    await wait(600);
-
-    expect(el.shadowRoot.querySelector('dile-toast-item')).toBeNull();
-  });
-
-  it('still auto-hides and cleans up a toast on its own after duration elapses', async () => {
-    const el = await renderToast('<dile-toast duration="50"></dile-toast>');
-    await openAndGetItem(el, 'Auto dismiss');
-
-    await wait(1200);
-
-    expect(el.shadowRoot.querySelector('dile-toast-item')).toBeNull();
-  });
-});

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

@@ -1,29 +0,0 @@
-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.spec.js

@@ -1,32 +0,0 @@
-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.spec.js

@@ -1,32 +0,0 @@
-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/mixins/form/src/DileForm.spec.js

@@ -1,29 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { LitElement, html } from 'lit';
-import { DileForm } from './DileForm.js';
-
-class RaceTestForm extends DileForm(LitElement) {
-  render() {
-    return html`<input name="name" />`;
-  }
-}
-
-if (!customElements.get('race-test-form')) {
-  customElements.define('race-test-form', RaceTestForm);
-}
-
-describe('DileForm', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('applies setData after the first render is ready even when called immediately', async () => {
-    const form = document.createElement('race-test-form');
-    document.body.appendChild(form);
-
-    form.setData({ name: 'Alice' });
-    await form.updateComplete;
-
-    expect(form.shadowRoot.querySelector('input').value).toBe('Alice');
-  });
-});