@dile/utils 3.3.5 → 3.3.7

package/components/phone-prefix-select/phone-prefix-select.spec.js

@@ -1,257 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './phone-prefix-select.js';
-
-describe('dile-phone-prefix-select', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  function wait(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
-  async function render(attributes = '') {
-    document.body.innerHTML = `<dile-phone-prefix-select ${attributes}></dile-phone-prefix-select>`;
-    const el = document.body.querySelector('dile-phone-prefix-select');
-    await el.updateComplete;
-    return el;
-  }
-
-  async function settle(el) {
-    await wait(20);
-    await el.updateComplete;
-  }
-
-  async function typeKeyword(el, keyword) {
-    const input = el.shadowRoot.getElementById('search');
-    input.value = keyword;
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await settle(el);
-  }
-
-  function visibleOptionTexts(el) {
-    return Array.from(el.select.shadowRoot.querySelectorAll('[role="option"]')).map(o => o.textContent.trim());
-  }
-
-  async function selectOptionByText(el, text) {
-    const option = Array.from(el.select.shadowRoot.querySelectorAll('[role="option"]'))
-      .find(o => o.textContent.trim() === text);
-    option.click();
-    await el.select.updateComplete;
-    await el.updateComplete;
-  }
-
-  describe('Rendering', () => {
-    it('renders the search field without requiring a slotted select', async () => {
-      const el = await render();
-      expect(el.shadowRoot.getElementById('search')).toBeTruthy();
-      expect(el.sourceOptions.length).toBeGreaterThan(200);
-    });
-
-    it('uses English texts by default and Spanish ones with language="es"', async () => {
-      const en = await render();
-      expect(en.shadowRoot.getElementById('search').placeholder).toBe('Search a country or prefix...');
-
-      const es = await render('language="es"');
-      expect(es.shadowRoot.getElementById('search').placeholder).toBe('Busca un país o prefijo...');
-    });
-
-    it('labels the clear button of the selected country in the component language', async () => {
-      for (const [language, expected] of [['en', 'Clear selection'], ['es', 'Borrar selección']]) {
-        const el = await render(`language="${language}" value="+34"`);
-        await el.updateComplete;
-        const result = el.shadowRoot.getElementById('result');
-        await result.updateComplete;
-        expect(result.shadowRoot.querySelector('button').getAttribute('aria-label')).toBe(expected);
-      }
-    });
-
-    it('keeps a custom placeholder', async () => {
-      const el = await render('language="es" placeholder="Prefijo"');
-      expect(el.shadowRoot.getElementById('search').placeholder).toBe('Prefijo');
-    });
-  });
-
-  describe('Searching', () => {
-    it('numeric keywords match the beginning of the prefix', async () => {
-      const el = await render();
-
-      await typeKeyword(el, '35');
-
-      const texts = visibleOptionTexts(el);
-      expect(texts).toContain('Portugal (+351)');
-      expect(texts).toContain('Finland (+358)');
-      expect(texts.every(t => /\(\+35/.test(t))).toBe(true);
-    });
-
-    it('accepts the leading "+" in numeric keywords', async () => {
-      const el = await render();
-
-      await typeKeyword(el, '+34');
-
-      expect(visibleOptionTexts(el)).toEqual(['Spain (+34)']);
-    });
-
-    it('text keywords match country names ignoring case and accents', async () => {
-      const el = await render('language="es"');
-
-      await typeKeyword(el, 'MEXICO');
-
-      expect(visibleOptionTexts(el)).toEqual(['México (+52)']);
-    });
-
-    it('matches alternative names of the same country', async () => {
-      const el = await render('language="es"');
-
-      await typeKeyword(el, 'myanmar');
-
-      expect(visibleOptionTexts(el)).toEqual(['Birmania (+95)']);
-    });
-
-    it('prefixFirst shows the prefix before the country name', async () => {
-      const el = await render('prefixFirst');
-
-      await typeKeyword(el, '+34');
-
-      expect(visibleOptionTexts(el)).toEqual(['+34 Spain']);
-    });
-
-    it('compact shows only the prefix once selected, keeping full texts in the list', async () => {
-      const el = await render('compact value="+44"');
-
-      expect(el.selectedText).toBe('+44');
-      expect(el.sourceOptions.find(o => o.value === 'GB').text).toBe('United Kingdom (+44)');
-    });
-
-    it('compact gives the selected field an accessible name with the country', async () => {
-      const el = await render('compact label="Prefix" value="+44"');
-      await el.updateComplete;
-      const result = el.shadowRoot.getElementById('result');
-      await result.updateComplete;
-      const input = result.shadowRoot.querySelector('input');
-
-      expect(input.value).toBe('+44');
-      expect(input.getAttribute('aria-label')).toBe('Prefix, United Kingdom (+44)');
-    });
-
-    it('lists priority countries first', async () => {
-      const el = await render('priority-countries="US|CA"');
-
-      await typeKeyword(el, '1');
-
-      expect(visibleOptionTexts(el).slice(0, 2)).toEqual(['United States (+1)', 'Canada (+1)']);
-    });
-  });
-
-  describe('Selecting', () => {
-    it('value is the prefix and country is the ISO code of the selected option', async () => {
-      const el = await render('name="phone_prefix"');
-      await typeKeyword(el, 'canada');
-
-      let changedDetail = null;
-      let prefixDetail = null;
-      el.addEventListener('element-changed', (e) => { changedDetail = e.detail; });
-      el.addEventListener('dile-phone-prefix-changed', (e) => { prefixDetail = e.detail; });
-
-      await selectOptionByText(el, 'Canada (+1)');
-
-      expect(el.value).toBe('+1');
-      expect(el.country).toBe('CA');
-      expect(el.selectedText).toBe('Canada (+1)');
-      expect(changedDetail).toEqual({ name: 'phone_prefix', value: '+1' });
-      expect(prefixDetail).toEqual({ value: '+1', country: 'CA' });
-    });
-
-    it('clearing the selection resets value and country', async () => {
-      const el = await render();
-      await typeKeyword(el, 'spain');
-      await selectOptionByText(el, 'Spain (+34)');
-
-      el.shadowRoot.getElementById('result').dispatchEvent(new CustomEvent('dile-input-search-cleared', { bubbles: true }));
-      await el.updateComplete;
-
-      expect(el.value).toBeUndefined();
-      expect(el.country).toBeUndefined();
-      expect(el.isSelected).toBe(false);
-    });
-  });
-
-  describe('Initial value and country', () => {
-    it('resolves the main country of a shared prefix', async () => {
-      const el = await render('value="+1"');
-
-      expect(el.country).toBe('US');
-      expect(el.selectedText).toBe('United States (+1)');
-    });
-
-    it('uses the given country when it matches the prefix', async () => {
-      const el = await render('value="+1" country="CA"');
-
-      expect(el.country).toBe('CA');
-      expect(el.selectedText).toBe('Canada (+1)');
-    });
-
-    it('ignores a country that does not match the prefix', async () => {
-      const el = await render('value="+44" country="CA"');
-
-      expect(el.country).toBe('GB');
-      expect(el.value).toBe('+44');
-    });
-
-    it('accepts a prefix without "+"', async () => {
-      const el = await render('value="34"');
-
-      expect(el.country).toBe('ES');
-      expect(el.selectedText).toBe('Spain (+34)');
-    });
-
-    it('setting only the country selects its prefix', async () => {
-      const el = await render('country="MX"');
-      await el.updateComplete;
-
-      expect(el.value).toBe('+52');
-      expect(el.isSelected).toBe(true);
-      expect(el.selectedText).toBe('Mexico (+52)');
-    });
-
-    it('set() keeps the current country when it shares the new prefix', async () => {
-      const el = await render('value="+1" country="CA"');
-
-      el.set('+1');
-      await el.updateComplete;
-      expect(el.country).toBe('CA');
-
-      el.set('+33');
-      await el.updateComplete;
-      expect(el.country).toBe('FR');
-    });
-
-    it('clear() resets value and country', async () => {
-      const el = await render('value="+34"');
-
-      el.clear();
-      await el.updateComplete;
-
-      expect(el.value).toBeUndefined();
-      expect(el.country).toBeUndefined();
-    });
-
-    it('updates the selected text when the language changes', async () => {
-      const el = await render('value="+34"');
-      expect(el.selectedText).toBe('Spain (+34)');
-
-      el.language = 'es';
-      await el.updateComplete;
-
-      expect(el.selectedText).toBe('España (+34)');
-    });
-
-    it('is form-associated with the prefix as form value', async () => {
-      document.body.innerHTML = '<form><dile-phone-prefix-select name="prefix" value="+34"></dile-phone-prefix-select></form>';
-      const el = document.body.querySelector('dile-phone-prefix-select');
-      await el.updateComplete;
-
-      expect(new FormData(document.body.querySelector('form')).get('prefix')).toBe('+34');
-    });
-  });
-});

package/components/qr-code/qr-code.spec.js

@@ -1,164 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './qr-code.js';
-
-describe('dile-qr-code', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderQrCode(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-qr-code');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders canvas with default properties', async () => {
-    const el = await renderQrCode('<dile-qr-code></dile-qr-code>');
-    const canvas = el.shadowRoot.querySelector('canvas');
-    expect(canvas).not.toBeNull();
-    expect(canvas.getAttribute('role')).toBe('img');
-    expect(canvas.getAttribute('aria-label')).toBe('QR Code');
-    expect(canvas.width).toBe(128);
-    expect(canvas.height).toBe(128);
-    expect(el.value).toBe('');
-    expect(el.size).toBe(128);
-    expect(el.fill).toBe('#000000');
-    expect(el.background).toBe('#ffffff');
-    expect(el.radius).toBe(0);
-    expect(el.errorCorrection).toBe('M');
-    expect(el.logo).toBe('');
-    expect(el.logoSize).toBe(0);
-    expect(el.logoRadius).toBe(4);
-    expect(el.logoBackground).toBe('');
-    expect(el.logoPadding).toBe(4);
-  });
-
-  it('sets accessible label from value or custom label attribute', async () => {
-    const elWithValue = await renderQrCode(
-      '<dile-qr-code value="https://example.com"></dile-qr-code>'
-    );
-    const canvas1 = elWithValue.shadowRoot.querySelector('canvas');
-    expect(canvas1.getAttribute('aria-label')).toBe('https://example.com');
-
-    const elWithLabel = await renderQrCode(
-      '<dile-qr-code value="https://example.com" label="QR para pago"></dile-qr-code>'
-    );
-    const canvas2 = elWithLabel.shadowRoot.querySelector('canvas');
-    expect(canvas2.getAttribute('aria-label')).toBe('QR para pago');
-  });
-
-  it('renders pixels on canvas when value is provided', async () => {
-    const el = await renderQrCode(
-      '<dile-qr-code value="https://dile-components.com"></dile-qr-code>'
-    );
-    const canvas = el.shadowRoot.querySelector('canvas');
-    const ctx = canvas.getContext('2d');
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    const hasDrawnPixels = imageData.data.some((channel) => channel !== 0);
-    expect(hasDrawnPixels).toBe(true);
-  });
-
-  it('clears canvas when value is empty or cleared', async () => {
-    const el = await renderQrCode(
-      '<dile-qr-code value="https://example.com"></dile-qr-code>'
-    );
-    const canvas = el.shadowRoot.querySelector('canvas');
-    const ctx = canvas.getContext('2d');
-
-    // First check it has pixels
-    let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    expect(imageData.data.some((channel) => channel !== 0)).toBe(true);
-
-    // Empty the value
-    el.value = '';
-    await el.updateComplete;
-
-    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    const hasDrawnPixels = imageData.data.some((channel) => channel !== 0);
-    expect(hasDrawnPixels).toBe(false);
-  });
-
-  it('updates canvas dimensions when size property changes', async () => {
-    const el = await renderQrCode(
-      '<dile-qr-code value="test" size="200"></dile-qr-code>'
-    );
-    const canvas = el.shadowRoot.querySelector('canvas');
-    expect(canvas.width).toBe(200);
-    expect(canvas.height).toBe(200);
-
-    el.size = 256;
-    await el.updateComplete;
-    expect(canvas.width).toBe(256);
-    expect(canvas.height).toBe(256);
-  });
-
-  it('updates canvas when fill, background, radius, or errorCorrection change', async () => {
-    const el = await renderQrCode(
-      '<dile-qr-code value="test" fill="#0000ff" background="#ffff00" radius="0.5" error-correction="H"></dile-qr-code>'
-    );
-    const canvas = el.shadowRoot.querySelector('canvas');
-    const ctx = canvas.getContext('2d');
-    let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    expect(imageData.data.some((channel) => channel !== 0)).toBe(true);
-
-    // Update fill and radius
-    el.fill = '#ff0000';
-    el.radius = 0.2;
-    el.errorCorrection = 'Q';
-    await el.updateComplete;
-
-    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    expect(imageData.data.some((channel) => channel !== 0)).toBe(true);
-  });
-
-  it('handles transparent background', async () => {
-    const el = await renderQrCode(
-      '<dile-qr-code value="test" background="transparent"></dile-qr-code>'
-    );
-    const canvas = el.shadowRoot.querySelector('canvas');
-    expect(canvas).not.toBeNull();
-    const ctx = canvas.getContext('2d');
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    expect(imageData.data.some((channel) => channel !== 0)).toBe(true);
-  });
-
-  it('renders logo on top of QR code and dispatches dile-qr-code-logo-loaded', async () => {
-    const sampleLogo =
-      'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="rgb(255,0,0)"/></svg>';
-
-    const el = await renderQrCode(
-      `<dile-qr-code value="https://dile-components.com" logo="${sampleLogo}" logo-size="24" logo-padding="2"></dile-qr-code>`
-    );
-
-    // Wait for the logo load event if not already fired
-    const canvas = el.shadowRoot.querySelector('canvas');
-    expect(canvas).not.toBeNull();
-
-    // Check center pixel in canvas to verify logo/badge was drawn
-    const ctx = canvas.getContext('2d');
-    const centerX = Math.floor(canvas.width / 2);
-    const centerY = Math.floor(canvas.height / 2);
-    const centerPixel = ctx.getImageData(centerX, centerY, 1, 1).data;
-    // Red channel from red svg rect
-    expect(centerPixel[0]).toBe(255);
-  });
-
-  it('handles logo load error gracefully and dispatches dile-qr-code-logo-error', async () => {
-    document.body.innerHTML = '';
-    const el = document.createElement('dile-qr-code');
-    el.value = 'https://dile-components.com';
-
-    const errorPromise = new Promise((resolve) => {
-      el.addEventListener('dile-qr-code-logo-error', resolve, { once: true });
-    });
-
-    el.logo = 'data:image/invalid;base64,broken';
-    document.body.appendChild(el);
-    await el.updateComplete;
-
-    const event = await errorPromise;
-    expect(event).toBeDefined();
-    expect(el.shadowRoot.querySelector('canvas')).not.toBeNull();
-  });
-});

package/components/smooth-scroll/smooth-scroll.spec.js

@@ -1,26 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './smooth-scroll.js';
-
-describe('dile-smooth-scroll', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSmoothScroll(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-smooth-scroll');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders without throwing', async () => {
-    const el = await renderSmoothScroll('<dile-smooth-scroll></dile-smooth-scroll>');
-    expect(el).toBeTruthy();
-  });
-
-  it('exposes smooth scroll methods without throwing when invoked', async () => {
-    const el = await renderSmoothScroll('<dile-smooth-scroll></dile-smooth-scroll>');
-    expect(typeof el.smoothScrollToTop).toBe('function');
-    expect(() => el.smoothScrollToTop()).not.toThrow();
-  });
-});

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

@@ -1,68 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './time-duration.js';
-
-describe('dile-time-duration', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderTimeDuration(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-time-duration');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders 80 seconds as "1m 20s"', async () => {
-    const el = await renderTimeDuration('<dile-time-duration seconds="80"></dile-time-duration>');
-    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
-    expect(timeText).toContain('1m');
-    expect(timeText).toContain('20s');
-  });
-
-  it('renders 3665 seconds as "1h 1m"', async () => {
-    const el = await renderTimeDuration('<dile-time-duration seconds="3665"></dile-time-duration>');
-    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
-    expect(timeText).toContain('1h');
-    expect(timeText).toContain('1m');
-  });
-
-  it('renders with extended format', async () => {
-    const el = await renderTimeDuration('<dile-time-duration seconds="3665" extended></dile-time-duration>');
-    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
-    expect(timeText).toContain('hour');
-    expect(timeText).toContain('minute');
-  });
-
-  it('renders with Spanish language', async () => {
-    const el = await renderTimeDuration('<dile-time-duration seconds="3665" extended language="es"></dile-time-duration>');
-    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
-    expect(timeText).toContain('hora');
-    expect(timeText).toContain('minuto');
-  });
-
-  it('renders with days', async () => {
-    const el = await renderTimeDuration('<dile-time-duration seconds="90061"></dile-time-duration>');
-    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
-    expect(timeText).toContain('1d');
-    expect(timeText).toContain('1h');
-  });
-
-  it('respects precision attribute', async () => {
-    const el = await renderTimeDuration('<dile-time-duration seconds="80" precision="seconds"></dile-time-duration>');
-    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
-    expect(timeText).toContain('1m');
-    expect(timeText).toContain('20s');
-  });
-
-  it('renders 0 seconds with smallest allowed unit', async () => {
-    const el = await renderTimeDuration('<dile-time-duration seconds="0"></dile-time-duration>');
-    const timeText = el.shadowRoot.querySelector('.time-text').textContent;
-    expect(timeText).toContain('0s');
-  });
-
-  it('displays custom icon', async () => {
-    const el = await renderTimeDuration('<dile-time-duration seconds="80" icon="material.timer"></dile-time-duration>');
-    expect(el.shadowRoot.querySelector('dile-iconlib').getAttribute('icon')).toBe('material.timer');
-  });
-});