@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/recipes/inputs/OTPInput.spec.js

@@ -1,238 +1,251 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import OTPInput from './OTPInput.svelte';
-
-describe('OTPInput Component', () => {
-  it('renders 6 input fields by default', () => {
-    const { container } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-    expect(inputs.length).toBe(6);
-  });
-
-  it('renders custom number of input fields', () => {
-    const { container } = render(OTPInput, { props: { length: 4 } });
-    const inputs = container.querySelectorAll('input');
-    expect(inputs.length).toBe(4);
-  });
-
-  it('has numeric inputmode', () => {
-    const { container } = render(OTPInput);
-    const input = container.querySelector('input');
-    expect(input.getAttribute('inputmode')).toBe('numeric');
-  });
-
-  it('has maxlength of 1', () => {
-    const { container } = render(OTPInput);
-    const input = container.querySelector('input');
-    expect(input.getAttribute('maxlength')).toBe('1');
-  });
-
-  it('has autocomplete one-time-code', () => {
-    const { container } = render(OTPInput);
-    const input = container.querySelector('input');
-    expect(input.getAttribute('autocomplete')).toBe('one-time-code');
-  });
-
-  it('disables inputs when disabled prop is true', () => {
-    const { container } = render(OTPInput, { props: { disabled: true } });
-    const inputs = container.querySelectorAll('input');
-    inputs.forEach((input) => {
-      expect(input.disabled).toBe(true);
-    });
-  });
-
-  it('enables inputs when disabled prop is false', () => {
-    const { container } = render(OTPInput, { props: { disabled: false } });
-    const inputs = container.querySelectorAll('input');
-    inputs.forEach((input) => {
-      expect(input.disabled).toBe(false);
-    });
-  });
-
-  it('accepts digit input', async () => {
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
-    let changeEvent = null;
-    component.$on('change', (e) => {
-      changeEvent = e;
-    });
-
-    await fireEvent.input(inputs[0], { target: { value: '5' } });
-
-    expect(changeEvent).toBeTruthy();
-    expect(changeEvent.detail.value[0]).toBe('5');
-  });
-
-  it('rejects non-digit input', async () => {
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
-    let changeEvent = null;
-    component.$on('change', (e) => {
-      changeEvent = e;
-    });
-
-    await fireEvent.input(inputs[0], { target: { value: 'a' } });
-
-    // Change event should not include the non-digit
-    expect(changeEvent?.detail?.value[0] || '').toBe('');
-  });
-
-  it('auto-advances to next input on valid digit', async () => {
-    const { container } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
-    inputs[0].focus();
-    await fireEvent.input(inputs[0], { target: { value: '1' } });
-
-    // Next input should be focused (tested by being active element)
-    expect(document.activeElement).toBe(inputs[1]);
-  });
-
-  it('dispatches complete event when all digits entered', async () => {
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
-    let completeEvent = null;
-    component.$on('complete', (e) => {
-      completeEvent = e;
-    });
-
-    // Fill all inputs
-    for (let i = 0; i < 6; i++) {
-      await fireEvent.input(inputs[i], { target: { value: String(i + 1) } });
-    }
-
-    expect(completeEvent).toBeTruthy();
-    expect(completeEvent.detail.code).toBe('123456');
-  });
-
-  it('moves focus back on backspace when current input is empty', async () => {
-    const { container } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
-    // Set first input value
-    await fireEvent.input(inputs[0], { target: { value: '1' } });
-
-    // Focus second input (empty)
-    inputs[1].focus();
-
-    // Press backspace
-    await fireEvent.keyDown(inputs[1], { key: 'Backspace' });
-
-    expect(document.activeElement).toBe(inputs[0]);
-  });
-
-  it('does not move focus back on backspace when current input has value', async () => {
-    const { container, component } = render(OTPInput, {
-      props: { value: ['1', '2', '', '', '', ''] },
-    });
-    const inputs = container.querySelectorAll('input');
-
-    inputs[1].focus();
-    await fireEvent.keyDown(inputs[1], { key: 'Backspace' });
-
-    // Should stay on same input since it has a value
-    expect(document.activeElement).toBe(inputs[1]);
-  });
-
-  it('handles paste of complete code', async () => {
-    vi.useFakeTimers();
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
-    let completeEvent = null;
-    component.$on('complete', (e) => {
-      completeEvent = e;
-    });
-
-    await fireEvent.paste(inputs[0], {
-      clipboardData: { getData: () => '123456' },
-    });
-
-    vi.advanceTimersByTime(150);
-
-    expect(completeEvent).toBeTruthy();
-    expect(completeEvent.detail.code).toBe('123456');
-    vi.useRealTimers();
-  });
-
-  it('ignores paste if code length does not match', async () => {
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
-    let completeEvent = null;
-    component.$on('complete', (e) => {
-      completeEvent = e;
-    });
-
-    await fireEvent.paste(inputs[0], {
-      clipboardData: { getData: () => '12345' }, // Only 5 digits
-    });
-
-    expect(completeEvent).toBeFalsy();
-  });
-
-  it('strips non-digits from pasted content', async () => {
-    vi.useFakeTimers();
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
-    let completeEvent = null;
-    component.$on('complete', (e) => {
-      completeEvent = e;
-    });
-
-    await fireEvent.paste(inputs[0], {
-      clipboardData: { getData: () => '1-2-3-4-5-6' }, // Code with dashes
-    });
-
-    vi.advanceTimersByTime(150);
-
-    expect(completeEvent).toBeTruthy();
-    expect(completeEvent.detail.code).toBe('123456');
-    vi.useRealTimers();
-  });
-
-  it('has aria-label for each input', () => {
-    const { container } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
-    inputs.forEach((input, index) => {
-      expect(input.getAttribute('aria-label')).toBe(`Digit ${index + 1} of 6`);
-    });
-  });
-
-  it('has role="group" on container', () => {
-    const { container } = render(OTPInput);
-    const group = container.querySelector('[role="group"]');
-    expect(group).toBeTruthy();
-  });
-
-  it('has screen reader instructions', () => {
-    const { container } = render(OTPInput);
-    const instructions = container.querySelector('#otp-instructions');
-    expect(instructions).toBeTruthy();
-    expect(instructions.classList.contains('sr-only')).toBe(true);
-  });
-
-  it('initializes value array when length changes', () => {
-    const { container, component } = render(OTPInput, { props: { length: 4 } });
-    let inputs = container.querySelectorAll('input');
-    expect(inputs.length).toBe(4);
-
-    component.$set({ length: 8 });
-    // Trigger reactivity
-  });
-
-  it('exposes focus method', () => {
-    const { component } = render(OTPInput);
-    expect(typeof component.focus).toBe('function');
-  });
-
-  it('exposes clear method', () => {
-    const { component } = render(OTPInput);
-    expect(typeof component.clear).toBe('function');
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import OTPInput from './OTPInput.svelte';
+
+describe('OTPInput Component', () => {
+  it('renders 6 input fields by default', () => {
+    const { container } = render(OTPInput);
+    const inputs = container.querySelectorAll('input');
+    expect(inputs.length).toBe(6);
+  });
+
+  it('renders custom number of input fields', () => {
+    const { container } = render(OTPInput, { props: { length: 4 } });
+    const inputs = container.querySelectorAll('input');
+    expect(inputs.length).toBe(4);
+  });
+
+  it('has numeric inputmode', () => {
+    const { container } = render(OTPInput);
+    const input = container.querySelector('input');
+    expect(input.getAttribute('inputmode')).toBe('numeric');
+  });
+
+  it('has maxlength of 1', () => {
+    const { container } = render(OTPInput);
+    const input = container.querySelector('input');
+    expect(input.getAttribute('maxlength')).toBe('1');
+  });
+
+  it('has autocomplete one-time-code', () => {
+    const { container } = render(OTPInput);
+    const input = container.querySelector('input');
+    expect(input.getAttribute('autocomplete')).toBe('one-time-code');
+  });
+
+  it('disables inputs when disabled prop is true', () => {
+    const { container } = render(OTPInput, { props: { disabled: true } });
+    const inputs = container.querySelectorAll('input');
+    inputs.forEach((input) => {
+      expect(input.disabled).toBe(true);
+    });
+  });
+
+  it('enables inputs when disabled prop is false', () => {
+    const { container } = render(OTPInput, { props: { disabled: false } });
+    const inputs = container.querySelectorAll('input');
+    inputs.forEach((input) => {
+      expect(input.disabled).toBe(false);
+    });
+  });
+
+  it('accepts digit input', async () => {
+    let changeEvent = null;
+    const { container } = render(OTPInput, {
+      props: {
+        onchange: (e) => {
+          changeEvent = e;
+        },
+      },
+    });
+    const inputs = container.querySelectorAll('input');
+
+    await fireEvent.input(inputs[0], { target: { value: '5' } });
+
+    expect(changeEvent).toBeTruthy();
+    expect(changeEvent.value[0]).toBe('5');
+  });
+
+  it('rejects non-digit input', async () => {
+    let changeEvent = null;
+    const { container } = render(OTPInput, {
+      props: {
+        onchange: (e) => {
+          changeEvent = e;
+        },
+      },
+    });
+    const inputs = container.querySelectorAll('input');
+
+    await fireEvent.input(inputs[0], { target: { value: 'a' } });
+
+    // Change event should not include the non-digit
+    expect(changeEvent?.value[0] || '').toBe('');
+  });
+
+  it('auto-advances to next input on valid digit', async () => {
+    const { container } = render(OTPInput);
+    const inputs = container.querySelectorAll('input');
+
+    inputs[0].focus();
+    await fireEvent.input(inputs[0], { target: { value: '1' } });
+
+    // Next input should be focused (tested by being active element)
+    expect(document.activeElement).toBe(inputs[1]);
+  });
+
+  it('dispatches complete event when all digits entered', async () => {
+    let completeEvent = null;
+    const { container } = render(OTPInput, {
+      props: {
+        oncomplete: (e) => {
+          completeEvent = e;
+        },
+      },
+    });
+    const inputs = container.querySelectorAll('input');
+
+    // Fill all inputs
+    for (let i = 0; i < 6; i++) {
+      await fireEvent.input(inputs[i], { target: { value: String(i + 1) } });
+    }
+
+    expect(completeEvent).toBeTruthy();
+    expect(completeEvent.code).toBe('123456');
+  });
+
+  it('moves focus back on backspace when current input is empty', async () => {
+    const { container } = render(OTPInput);
+    const inputs = container.querySelectorAll('input');
+
+    // Set first input value
+    await fireEvent.input(inputs[0], { target: { value: '1' } });
+
+    // Focus second input (empty)
+    inputs[1].focus();
+
+    // Press backspace
+    await fireEvent.keyDown(inputs[1], { key: 'Backspace' });
+
+    expect(document.activeElement).toBe(inputs[0]);
+  });
+
+  it('does not move focus back on backspace when current input has value', async () => {
+    const { container, component } = render(OTPInput, {
+      props: { value: ['1', '2', '', '', '', ''] },
+    });
+    const inputs = container.querySelectorAll('input');
+
+    inputs[1].focus();
+    await fireEvent.keyDown(inputs[1], { key: 'Backspace' });
+
+    // Should stay on same input since it has a value
+    expect(document.activeElement).toBe(inputs[1]);
+  });
+
+  it('handles paste of complete code', async () => {
+    vi.useFakeTimers();
+    let completeEvent = null;
+    const { container } = render(OTPInput, {
+      props: {
+        oncomplete: (e) => {
+          completeEvent = e;
+        },
+      },
+    });
+    const inputs = container.querySelectorAll('input');
+
+    await fireEvent.paste(inputs[0], {
+      clipboardData: { getData: () => '123456' },
+    });
+
+    vi.advanceTimersByTime(150);
+
+    expect(completeEvent).toBeTruthy();
+    expect(completeEvent.code).toBe('123456');
+    vi.useRealTimers();
+  });
+
+  it('ignores paste if code length does not match', async () => {
+    let completeEvent = null;
+    const { container } = render(OTPInput, {
+      props: {
+        oncomplete: (e) => {
+          completeEvent = e;
+        },
+      },
+    });
+    const inputs = container.querySelectorAll('input');
+
+    await fireEvent.paste(inputs[0], {
+      clipboardData: { getData: () => '12345' }, // Only 5 digits
+    });
+
+    expect(completeEvent).toBeFalsy();
+  });
+
+  it('strips non-digits from pasted content', async () => {
+    vi.useFakeTimers();
+    let completeEvent = null;
+    const { container } = render(OTPInput, {
+      props: {
+        oncomplete: (e) => {
+          completeEvent = e;
+        },
+      },
+    });
+    const inputs = container.querySelectorAll('input');
+
+    await fireEvent.paste(inputs[0], {
+      clipboardData: { getData: () => '1-2-3-4-5-6' }, // Code with dashes
+    });
+
+    vi.advanceTimersByTime(150);
+
+    expect(completeEvent).toBeTruthy();
+    expect(completeEvent.code).toBe('123456');
+    vi.useRealTimers();
+  });
+
+  it('has aria-label for each input', () => {
+    const { container } = render(OTPInput);
+    const inputs = container.querySelectorAll('input');
+
+    inputs.forEach((input, index) => {
+      expect(input.getAttribute('aria-label')).toBe(`Digit ${index + 1} of 6`);
+    });
+  });
+
+  it('has role="group" on container', () => {
+    const { container } = render(OTPInput);
+    const group = container.querySelector('[role="group"]');
+    expect(group).toBeTruthy();
+  });
+
+  it('has screen reader instructions', () => {
+    const { container } = render(OTPInput);
+    const instructions = container.querySelector('#otp-instructions');
+    expect(instructions).toBeTruthy();
+    expect(instructions.classList.contains('sr-only')).toBe(true);
+  });
+
+  it('initializes value array when length changes', async () => {
+    const { container, rerender } = render(OTPInput, { props: { length: 4 } });
+    let inputs = container.querySelectorAll('input');
+    expect(inputs.length).toBe(4);
+
+    await rerender({ length: 8 });
+    inputs = container.querySelectorAll('input');
+    expect(inputs.length).toBe(8);
+  });
+
+  it('exposes focus method', () => {
+    const { component } = render(OTPInput);
+    expect(typeof component.focus).toBe('function');
+  });
+
+  it('exposes clear method', () => {
+    const { component } = render(OTPInput);
+    expect(typeof component.clear).toBe('function');
+  });
+});