@dile/ui 3.17.1 → 3.18.1

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

@@ -1,133 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './color-picker.js';
-
-describe('dile-color-picker', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderColorPicker(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-color-picker');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a trigger swatch matching the initial value', async () => {
-    const el = await renderColorPicker('<dile-color-picker name="color" value="#3366ff"></dile-color-picker>');
-
-    const trigger = el.shadowRoot.getElementById('trigger');
-    expect(trigger).toBeTruthy();
-    expect(trigger.style.backgroundColor).toBe('rgb(51, 102, 255)');
-  });
-
-  it('normalizes 3-digit hex shorthand set externally', async () => {
-    const el = await renderColorPicker('<dile-color-picker name="color" value="#0f0"></dile-color-picker>');
-
-    expect(el.value).toBe('#00ff00');
-  });
-
-  it('updates value and hue/saturation state when the hex input changes', async () => {
-    const el = await renderColorPicker('<dile-color-picker name="color" value="#000000"></dile-color-picker>');
-
-    const hexInput = el.shadowRoot.querySelector('.hex-input');
-    hexInput.value = '#ff0000';
-    hexInput.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-
-    expect(el.value).toBe('#ff0000');
-    expect(el._hue).toBe(0);
-    expect(el._saturation).toBe(100);
-    expect(el._value).toBe(100);
-  });
-
-  it('dispatches element-changed with name and value when the value changes', async () => {
-    const el = await renderColorPicker('<dile-color-picker name="color" value="#000000"></dile-color-picker>');
-    let detail = null;
-    el.addEventListener('element-changed', (e) => { detail = e.detail; });
-
-    const hexInput = el.shadowRoot.querySelector('.hex-input');
-    hexInput.value = '#00ff00';
-    hexInput.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-
-    expect(detail).toEqual({ name: 'color', value: '#00ff00' });
-  });
-
-  it('updates value when the hue slider changes', async () => {
-    const el = await renderColorPicker('<dile-color-picker name="color" value="#ff0000"></dile-color-picker>');
-
-    const hueSlider = el.shadowRoot.querySelector('.hue-slider');
-    hueSlider.value = '120';
-    hueSlider.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-
-    expect(el.value).toBe('#00ff00');
-  });
-
-  it('nudges saturation and brightness with arrow keys on the sv square', async () => {
-    const el = await renderColorPicker('<dile-color-picker name="color" value="#ff0000"></dile-color-picker>');
-
-    const svSquare = el.shadowRoot.getElementById('sv-square');
-    svSquare.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
-    await el.updateComplete;
-
-    expect(el._saturation).toBe(99);
-  });
-
-  it('does not change value when disabled', async () => {
-    const el = await renderColorPicker('<dile-color-picker name="color" value="#ff0000" disabled></dile-color-picker>');
-
-    const trigger = el.shadowRoot.getElementById('trigger');
-    expect(trigger.disabled).toBe(true);
-
-    const svSquare = el.shadowRoot.getElementById('sv-square');
-    svSquare.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
-    await el.updateComplete;
-
-    expect(el.value).toBe('#ff0000');
-  });
-
-  it('reverts the hue slider and ignores hex edits when readonly', async () => {
-    const el = await renderColorPicker('<dile-color-picker name="color" value="#ff0000" readonly></dile-color-picker>');
-
-    const hueSlider = el.shadowRoot.querySelector('.hue-slider');
-    hueSlider.value = '200';
-    hueSlider.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-
-    expect(el.value).toBe('#ff0000');
-    expect(hueSlider.value).toBe('0');
-  });
-
-  it('participates in native form submission via FormData', async () => {
-    document.body.innerHTML = `
-      <form id="testForm">
-        <dile-color-picker name="color" value="#123456"></dile-color-picker>
-      </form>
-    `;
-    const el = document.body.querySelector('dile-color-picker');
-    await el.updateComplete;
-
-    const form = document.getElementById('testForm');
-    const data = new FormData(form);
-
-    expect(data.get('color')).toBe('#123456');
-  });
-
-  it('participates in FormData when name is set as a JS property', async () => {
-    document.body.innerHTML = `
-      <form id="testForm">
-        <dile-color-picker value="#123456"></dile-color-picker>
-      </form>
-    `;
-    const el = document.body.querySelector('dile-color-picker');
-    el.name = 'color';
-    await el.updateComplete;
-
-    expect(el.getAttribute('name')).toBe('color');
-
-    const data = new FormData(document.getElementById('testForm'));
-    expect(data.get('color')).toBe('#123456');
-  });
-});

package/components/confirm/confirm.spec.js

@@ -1,57 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './confirm.js';
-
-describe('dile-confirm', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderConfirm(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-confirm');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a dile-modal with the default action labels', async () => {
-    const el = await renderConfirm('<dile-confirm>Are you sure?</dile-confirm>');
-    expect(el.shadowRoot.querySelector('dile-modal')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('.accept').textContent.trim()).toBe('Accept');
-    expect(el.shadowRoot.querySelector('.cancel').textContent.trim()).toBe('Cancell');
-  });
-
-  it('dispatches dile-confirm-accepted when accept is clicked', async () => {
-    const el = await renderConfirm('<dile-confirm>Are you sure?</dile-confirm>');
-    let accepted = false;
-    el.addEventListener('dile-confirm-accepted', () => { accepted = true; });
-
-    el.shadowRoot.querySelector('.accept').click();
-
-    expect(accepted).toBe(true);
-  });
-
-  it('handles dontCloseOnAccept and can be reset with resetProcessing()', async () => {
-    const el = await renderConfirm('<dile-confirm dontCloseOnAccept>Are you sure?</dile-confirm>');
-    let acceptCount = 0;
-    el.addEventListener('dile-confirm-accepted', () => { acceptCount++; });
-
-    el.shadowRoot.querySelector('.accept').click();
-    await el.updateComplete;
-    expect(acceptCount).toBe(1);
-    expect(el._isProcessing).toBe(true);
-    expect(el.shadowRoot.querySelector('.accept').classList.contains('disabled')).toBe(true);
-
-    // Clicking again while processing should not trigger accept
-    el.shadowRoot.querySelector('.accept').click();
-    expect(acceptCount).toBe(1);
-
-    // Calling resetProcessing should unlock the buttons
-    el.resetProcessing();
-    await el.updateComplete;
-    expect(el._isProcessing).toBe(false);
-    expect(el.shadowRoot.querySelector('.accept').classList.contains('disabled')).toBe(false);
-
-    el.shadowRoot.querySelector('.accept').click();
-    expect(acceptCount).toBe(2);
-  });
-});

package/components/confirm-text/confirm-text.spec.js

@@ -1,29 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './confirm-text.js';
-
-describe('dile-confirm-text', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderConfirmText(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-confirm-text');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the title and an input to type the confirmation text', async () => {
-    const el = await renderConfirmText('<dile-confirm-text title="Delete item">This cannot be undone</dile-confirm-text>');
-    expect(el.shadowRoot.querySelector('.title').textContent.trim()).toBe('Delete item');
-    expect(el.shadowRoot.querySelector('dile-input')).toBeTruthy();
-  });
-
-  it('shows negative feedback when accepting with an empty text field', async () => {
-    const el = await renderConfirmText('<dile-confirm-text>Confirm</dile-confirm-text>');
-    el.shadowRoot.querySelector('.accept').click();
-    await el.updateComplete;
-
-    expect(el.feedback.shadowRoot.textContent).toContain(el.emptyTextMessage);
-  });
-});

package/components/copy-markdown-url/copy-markdown-url.spec.js

@@ -1,27 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './copy-markdown-url.js';
-
-describe('dile-copy-markdown-url', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderCopyMarkdownUrl(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-copy-markdown-url');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a dile-copy-text with the slotted content', async () => {
-    const el = await renderCopyMarkdownUrl('<dile-copy-markdown-url url="/doc.md">Copy link</dile-copy-markdown-url>');
-    expect(el.shadowRoot.querySelector('dile-copy-text')).toBeTruthy();
-    expect(el.textContent.trim()).toBe('Copy link');
-  });
-
-  it('defaults to an empty url and content', async () => {
-    const el = await renderCopyMarkdownUrl('<dile-copy-markdown-url></dile-copy-markdown-url>');
-    expect(el.url).toBe('');
-    expect(el.content).toBe('');
-  });
-});

package/components/copy-text/copy-text.spec.js

@@ -1,38 +0,0 @@
-import { describe, it, expect, afterEach, vi } from 'vitest';
-import './copy-text.js';
-
-describe('dile-copy-text', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderCopyText(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-copy-text');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the slotted content inside a clickable link', async () => {
-    const el = await renderCopyText('<dile-copy-text content="hello">Copy me</dile-copy-text>');
-    const link = el.shadowRoot.querySelector('a');
-    expect(link).toBeTruthy();
-    expect(el.textContent.trim()).toBe('Copy me');
-  });
-
-  it('dispatches dile-text-copied with the content on copy()', async () => {
-    const el = await renderCopyText('<dile-copy-text content="hello">Copy me</dile-copy-text>');
-    const writeText = vi.fn().mockResolvedValue(undefined);
-    vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } });
-
-    let detail = null;
-    el.addEventListener('dile-text-copied', (e) => { detail = e.detail; });
-
-    await el.copy();
-
-    expect(writeText).toHaveBeenCalledWith('hello');
-    expect(detail).toEqual({ text: 'hello' });
-
-    vi.unstubAllGlobals();
-  });
-});