@aquera/nile-elements 1.6.1 → 1.6.3

package/src/nile-otp-input/nile-otp-input.test.ts

@@ -0,0 +1,732 @@
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
+import './nile-otp-input';
+import type { NileOtpInput } from './nile-otp-input';
+
+const getCells = (el: NileOtpInput) =>
+  Array.from(el.shadowRoot!.querySelectorAll<HTMLInputElement>('.otp__cell'));
+
+const inputCell = async (el: NileOtpInput, index: number, value: string) => {
+  const cell = getCells(el)[index];
+  cell.value = value;
+  cell.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+  await el.updateComplete;
+  return cell;
+};
+
+const pressKey = async (
+  el: NileOtpInput,
+  index: number,
+  key: string,
+  opts: Partial<KeyboardEventInit> = {}
+) => {
+  const cell = getCells(el)[index];
+  cell.dispatchEvent(
+    new KeyboardEvent('keydown', {
+      key,
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      ...opts,
+    })
+  );
+  await el.updateComplete;
+  return cell;
+};
+
+const pasteInto = async (el: NileOtpInput, index: number, text: string) => {
+  const cell = getCells(el)[index];
+  const event = new Event('paste', {
+    bubbles: true,
+    composed: true,
+    cancelable: true,
+  }) as ClipboardEvent;
+  Object.defineProperty(event, 'clipboardData', {
+    value: { getData: () => text },
+  });
+  cell.dispatchEvent(event);
+  await el.updateComplete;
+};
+
+describe('NileOtpInput', () => {
+  // ---- Rendering ----
+
+  it('renders default 6 cells', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input></nile-otp-input>`
+    );
+    expect(el).to.exist;
+    expect(getCells(el).length).to.equal(6);
+  });
+
+  it('normalizes incoming value (strips non-numeric in numeric mode)', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="12A34B"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    expect(el.value).to.equal('1234');
+    expect(getCells(el).map(c => c.value)).to.deep.equal([
+      '1', '2', '3', '4', '', '',
+    ]);
+  });
+
+  it('supports configurable length and clamps below 4', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input length="8"></nile-otp-input>`
+    );
+    expect(getCells(el).length).to.equal(8);
+
+    el.length = 2;
+    await el.updateComplete;
+    expect(el.length).to.equal(4);
+    expect(getCells(el).length).to.equal(4);
+  });
+
+  it('renders label when provided', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input label="Verification code"></nile-otp-input>`
+    );
+    const label = el.shadowRoot!.querySelector('.form-control__label');
+    expect(label).to.exist;
+    expect(label!.textContent).to.contain('Verification code');
+  });
+
+  it('renders help text when provided', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input .helpText=${'Enter your code'}></nile-otp-input>`
+    );
+    const helpText = el.shadowRoot!.querySelector('.form-control__help-text');
+    expect(helpText).to.exist;
+    expect(helpText!.textContent).to.contain('Enter your code');
+  });
+
+  it('renders error message when provided', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input .errorMessage=${'Invalid code'}></nile-otp-input>`
+    );
+    const errorMsg = el.shadowRoot!.querySelector('.form-control__error-message');
+    expect(errorMsg).to.exist;
+    expect(errorMsg!.textContent).to.contain('Invalid code');
+  });
+
+  it('renders separators with separator-every', async () => {
+    const el = await fixture<NileOtpInput>(html`
+      <nile-otp-input separator="-" .separatorEvery=${3}></nile-otp-input>
+    `);
+    const separators = el.shadowRoot!.querySelectorAll('.otp__separator');
+    expect(separators.length).to.equal(1);
+    expect(separators[0].textContent!.trim()).to.equal('-');
+  });
+
+  it('renders separators from separator-positions', async () => {
+    const el = await fixture<NileOtpInput>(html`
+      <nile-otp-input
+        length="8"
+        separator="/"
+        separator-positions="1, 3, 5"
+      ></nile-otp-input>
+    `);
+    const separators = el.shadowRoot!.querySelectorAll('.otp__separator');
+    expect(separators.length).to.equal(3);
+    separators.forEach(s =>
+      expect(s.textContent!.trim()).to.equal('/')
+    );
+  });
+
+  // ---- Input behavior ----
+
+  it('auto-advances focus to next empty cell after typing', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input></nile-otp-input>`
+    );
+    const cells = getCells(el);
+
+    cells[0].focus();
+    await inputCell(el, 0, '1');
+    await aTimeout(0);
+
+    expect(el.value).to.equal('1');
+    expect(el.shadowRoot!.activeElement).to.equal(cells[1]);
+  });
+
+  it('typing a character on a filled cell replaces it and advances', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="123456"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[2].focus();
+    await el.updateComplete;
+    await pressKey(el, 2, '9');
+    await aTimeout(0);
+
+    expect(el.value[2]).to.equal('9');
+  });
+
+  it('blocks invalid characters in numeric mode', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input></nile-otp-input>`
+    );
+    const first = getCells(el)[0];
+    first.focus();
+
+    const event = new KeyboardEvent('keydown', {
+      key: 'A',
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+    first.dispatchEvent(event);
+
+    expect(event.defaultPrevented).to.be.true;
+  });
+
+  it('allows alphanumeric values when alphanumeric attribute is set', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input alphanumeric></nile-otp-input>`
+    );
+    const cells = getCells(el);
+    cells[0].focus();
+    await el.updateComplete;
+
+    await pressKey(el, 0, 'A');
+    expect(el.value).to.equal('A');
+  });
+
+  it('alphanumeric overrides numeric-only', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input numeric-only alphanumeric></nile-otp-input>`
+    );
+    const cells = getCells(el);
+    cells[0].focus();
+    await el.updateComplete;
+
+    await pressKey(el, 0, 'B');
+    expect(el.value).to.equal('B');
+  });
+
+  it('supports controlled value updates', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input></nile-otp-input>`
+    );
+
+    el.value = '2468';
+    await el.updateComplete;
+
+    expect(getCells(el).map(c => c.value)).to.deep.equal([
+      '2', '4', '6', '8', '', '',
+    ]);
+  });
+
+  // ---- Focus management (ShadCN style) ----
+
+  it('focus() targets the first empty cell', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="12"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    el.focus();
+    await aTimeout(0);
+
+    expect(el.shadowRoot!.activeElement).to.equal(cells[2]);
+  });
+
+  it('clicking an empty cell beyond the cursor redirects to first empty', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="12"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[5].focus();
+    await aTimeout(0);
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.activeElement).to.equal(cells[2]);
+  });
+
+  it('clicking a filled cell focuses it directly', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="123"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[1].focus();
+    await aTimeout(0);
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.activeElement).to.equal(cells[1]);
+  });
+
+  // ---- Keyboard navigation ----
+
+  it('Backspace clears current cell and retreats', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="123"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[2].focus();
+    await pressKey(el, 2, 'Backspace');
+    await aTimeout(0);
+
+    expect(el.value).to.equal('12');
+    expect(el.shadowRoot!.activeElement).to.equal(cells[1]);
+  });
+
+  it('Backspace on empty cell clears previous and moves there', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="12"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[2].focus();
+    await pressKey(el, 2, 'Backspace');
+    await aTimeout(0);
+
+    expect(el.value).to.equal('1');
+    expect(cells[1].value).to.equal('');
+    expect(el.shadowRoot!.activeElement).to.equal(cells[1]);
+  });
+
+  it('Delete clears current cell without moving', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="123"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[1].focus();
+    await pressKey(el, 1, 'Delete');
+    await aTimeout(0);
+
+    expect(el.value).to.equal('13');
+    expect(el.shadowRoot!.activeElement).to.equal(cells[1]);
+  });
+
+  it('ArrowLeft moves focus back', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="123"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[2].focus();
+    await pressKey(el, 2, 'ArrowLeft');
+    await aTimeout(0);
+
+    expect(el.shadowRoot!.activeElement).to.equal(cells[1]);
+  });
+
+  it('ArrowRight cannot move past the first empty cell', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="12"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[1].focus();
+    await pressKey(el, 1, 'ArrowRight');
+    await aTimeout(0);
+
+    expect(el.shadowRoot!.activeElement).to.equal(cells[2]);
+
+    await pressKey(el, 2, 'ArrowRight');
+    await aTimeout(0);
+
+    expect(el.shadowRoot!.activeElement).to.equal(cells[2]);
+  });
+
+  it('Home goes to first cell', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="123"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[2].focus();
+    await pressKey(el, 2, 'Home');
+    await aTimeout(0);
+
+    expect(el.shadowRoot!.activeElement).to.equal(cells[0]);
+  });
+
+  it('End goes to first empty cell', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="123"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[0].focus();
+    await pressKey(el, 0, 'End');
+    await aTimeout(0);
+
+    expect(el.shadowRoot!.activeElement).to.equal(cells[3]);
+  });
+
+  it('Space is blocked', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input></nile-otp-input>`
+    );
+    const cells = getCells(el);
+    cells[0].focus();
+
+    const event = new KeyboardEvent('keydown', {
+      key: ' ',
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+    cells[0].dispatchEvent(event);
+
+    expect(event.defaultPrevented).to.be.true;
+  });
+
+  // ---- Paste ----
+
+  it('paste fills from position 0 and focuses next empty', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input></nile-otp-input>`
+    );
+
+    await pasteInto(el, 3, '987654');
+
+    expect(el.value).to.equal('987654');
+    expect(getCells(el).map(c => c.value).join('')).to.equal('987654');
+  });
+
+  it('paste emits nile-paste event', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input></nile-otp-input>`
+    );
+    let pasteValue = '';
+
+    el.addEventListener('nile-paste', (e: Event) => {
+      pasteValue = (e as CustomEvent).detail.value;
+    });
+
+    await pasteInto(el, 0, '123456');
+
+    expect(pasteValue).to.equal('123456');
+  });
+
+  it('paste is ignored when disabled', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input disabled></nile-otp-input>`
+    );
+
+    await pasteInto(el, 0, '123456');
+
+    expect(el.value).to.equal('');
+  });
+
+  // ---- Visual states ----
+
+  it('applies warning class', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input warning></nile-otp-input>`
+    );
+    const base = el.shadowRoot!.querySelector('.otp');
+    expect(base!.classList.contains('otp--warning')).to.be.true;
+  });
+
+  it('applies error class', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input error></nile-otp-input>`
+    );
+    const base = el.shadowRoot!.querySelector('.otp');
+    expect(base!.classList.contains('otp--error')).to.be.true;
+  });
+
+  it('applies success class', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input success></nile-otp-input>`
+    );
+    const base = el.shadowRoot!.querySelector('.otp');
+    expect(base!.classList.contains('otp--success')).to.be.true;
+  });
+
+  it('applies disabled class and blocks input', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input disabled></nile-otp-input>`
+    );
+    const base = el.shadowRoot!.querySelector('.otp');
+    expect(base!.classList.contains('otp--disabled')).to.be.true;
+
+    const first = getCells(el)[0];
+    first.value = '9';
+    first.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('');
+    expect(first.value).to.equal('');
+  });
+
+  it('applies readonly class and blocks input', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input readonly value="123456"></nile-otp-input>`
+    );
+    const base = el.shadowRoot!.querySelector('.otp');
+    expect(base!.classList.contains('otp--readonly')).to.be.true;
+
+    const first = getCells(el)[0];
+    first.value = '9';
+    first.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('123456');
+  });
+
+  // ---- Masked ----
+
+  it('masked cells use type="password" for filled non-active cells', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input masked value="12"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    expect(cells[0].type).to.equal('password');
+    expect(cells[1].type).to.equal('password');
+    expect(cells[2].type).to.equal('text');
+  });
+
+  it('active masked cell shows text while typing', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input masked value="12"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells[1].focus();
+    await el.updateComplete;
+
+    expect(cells[1].type).to.equal('text');
+    expect(cells[0].type).to.equal('password');
+  });
+
+  it('unmasked cells are always type="text"', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="12"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    const cells = getCells(el);
+
+    cells.forEach(c => expect(c.type).to.equal('text'));
+  });
+
+  // ---- Events ----
+
+  it('emits nile-input and nile-change with value detail', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input></nile-otp-input>`
+    );
+    let inputDetail: any;
+    let changeDetail: any;
+
+    el.addEventListener('nile-input', (e: Event) => {
+      inputDetail = (e as CustomEvent).detail;
+    });
+    el.addEventListener('nile-change', (e: Event) => {
+      changeDetail = (e as CustomEvent).detail;
+    });
+
+    getCells(el)[0].focus();
+    await el.updateComplete;
+    await pressKey(el, 0, '7');
+
+    expect(inputDetail.value).to.equal('7');
+    expect(inputDetail.complete).to.be.false;
+    expect(changeDetail.value).to.equal('7');
+  });
+
+  it('emits nile-complete when all cells are filled', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input length="4" value="123"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    let completedValue = '';
+
+    el.addEventListener('nile-complete', (e: Event) => {
+      completedValue = (e as CustomEvent).detail.value;
+    });
+
+    const cells = getCells(el);
+    cells[3].focus();
+    await el.updateComplete;
+    await pressKey(el, 3, '4');
+
+    expect(completedValue).to.equal('1234');
+  });
+
+  it('emits nile-focus when entering and nile-blur when leaving', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input></nile-otp-input>`
+    );
+    let focused = false;
+    let blurred = false;
+
+    el.addEventListener('nile-focus', () => { focused = true; });
+    el.addEventListener('nile-blur', () => { blurred = true; });
+
+    getCells(el)[0].focus();
+    await el.updateComplete;
+    expect(focused).to.be.true;
+
+    getCells(el)[0].blur();
+    await aTimeout(50);
+    expect(blurred).to.be.true;
+  });
+
+  // ---- Public methods ----
+
+  it('clear() empties all cells', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="123456"></nile-otp-input>`
+    );
+    await el.updateComplete;
+
+    el.clear();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('');
+    getCells(el).forEach(c => expect(c.value).to.equal(''));
+  });
+
+  it('clear() is blocked when disabled', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input disabled value="123456"></nile-otp-input>`
+    );
+    await el.updateComplete;
+
+    el.clear();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('123456');
+  });
+
+  it('complete getter returns true when all cells filled', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="123456"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    expect(el.complete).to.be.true;
+  });
+
+  it('complete getter returns false when cells are empty', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="12"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    expect(el.complete).to.be.false;
+  });
+
+  // ---- Validation ----
+
+  it('validates required and exact length using checkValidity', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input required></nile-otp-input>`
+    );
+    el.value = '12';
+    await el.updateComplete;
+    expect(el.checkValidity()).to.be.false;
+
+    el.value = '123456';
+    await el.updateComplete;
+    expect(el.checkValidity()).to.be.true;
+  });
+
+  it('supports custom validity messaging', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input value="123456"></nile-otp-input>`
+    );
+    el.setCustomValidity('Invalid OTP');
+    await el.updateComplete;
+
+    expect(el.checkValidity()).to.be.false;
+    expect(el.validationMessage).to.equal('Invalid OTP');
+
+    el.setCustomValidity('');
+    await el.updateComplete;
+    expect(el.checkValidity()).to.be.true;
+  });
+
+  it('validates against custom pattern', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input pattern="[0-9]{6}" value="1234"></nile-otp-input>`
+    );
+    await el.updateComplete;
+    expect(el.checkValidity()).to.be.false;
+
+    el.value = '123456';
+    await el.updateComplete;
+    expect(el.checkValidity()).to.be.true;
+  });
+
+  // ---- Form integration ----
+
+  it('participates in form data submission', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form id="otp-form">
+        <nile-otp-input name="otp" value="321654"></nile-otp-input>
+      </form>
+    `);
+    const data = new FormData(form);
+
+    expect(data.get('otp')).to.equal('321654');
+  });
+
+  // ---- Placeholder ----
+
+  it('shows no placeholder by default', async () => {
+    const el = await fixture<NileOtpInput>(html`
+      <nile-otp-input value="12"></nile-otp-input>
+    `);
+
+    const placeholders = getCells(el).map(c => c.getAttribute('placeholder'));
+    expect(placeholders).to.deep.equal([null, null, null, null, null, null]);
+  });
+
+  it('moves custom placeholder to active cell on focus', async () => {
+    const el = await fixture<NileOtpInput>(
+      html`<nile-otp-input placeholder="0"></nile-otp-input>`
+    );
+    const cells = getCells(el);
+
+    cells[0].focus();
+    await el.updateComplete;
+
+    const placeholders = getCells(el).map(c => c.getAttribute('placeholder'));
+    expect(placeholders[0]).to.equal('0');
+    expect(placeholders.slice(1).every(p => p === null)).to.be.true;
+  });
+
+  // ---- CSS parts ----
+
+  it('exposes all required CSS parts', async () => {
+    const el = await fixture<NileOtpInput>(html`
+      <nile-otp-input
+        label="Test"
+        .helpText=${'Help'}
+        .errorMessage=${'Error'}
+        separator="-"
+        .separatorEvery=${3}
+      ></nile-otp-input>
+    `);
+
+    expect(el.shadowRoot!.querySelector('[part="form-control"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="form-control-label"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="form-control-input"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="base"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="cell"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="separator"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="form-control-help-text"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="form-control-error-message"]')).to.exist;
+  });
+});