@lockin90/ui-native 1.0.1 → 2.1.0

package/src/components/__tests__/CodeInput.test.tsx

@@ -1,46 +1,90 @@
 import { describe, expect, test } from 'vitest';
-import { CodeInput, spreadCodeAcrossBoxes } from '../TagInput';
+import { CodeInput, codeToBoxes, resizeBoxes, spreadDigits, typeIntoBox } from '../TagInput';
 import { findAll, parse, render } from './markup';
 
-/* Multi-char paste / iOS SMS autofill lands the whole code in ONE box; the
- * component spreads it across the remaining boxes and moves focus after the
- * last written char. The spread math lives in the pure helper
- * `spreadCodeAcrossBoxes` (extracted from `onBoxChange` — press/typing events
- * can't be dispatched without a DOM environment). */
+/* Multi-char paste / iOS SMS autofill lands the whole code in ONE box; the component spreads it
+ * across the remaining boxes and moves focus after the last written digit. The box math lives in
+ * the pure helpers `codeToBoxes` / `spreadDigits` (press/typing events can't be dispatched without a
+ * DOM environment). */
 
-describe('spreadCodeAcrossBoxes (paste spread math)', () => {
+describe('codeToBoxes', () => {
+  test('puts one digit per box, padded to the length', () => {
+    expect(codeToBoxes('12', 4)).toEqual(['1', '2', '', '']);
+  });
+
+  test('drops non-digits and anything past the last box', () => {
+    expect(codeToBoxes('1a2-345', 4)).toEqual(['1', '2', '3', '4']);
+  });
+});
+
+describe('spreadDigits (paste / autofill)', () => {
   test('a full-length paste into box 0 fills every box and focuses the last', () => {
-    expect(spreadCodeAcrossBoxes(['', '', '', '', '', ''], 0, '123456', 6)).toEqual({
-      code: '123456',
+    expect(spreadDigits(['', '', '', '', '', ''], 0, '123456')).toEqual({
+      boxes: ['1', '2', '3', '4', '5', '6'],
       focusIndex: 5,
     });
   });
 
-  test('a mid-code paste fills from that box on and keeps earlier digits', () => {
-    expect(spreadCodeAcrossBoxes(['1', '2', '', '', '', ''], 2, '345', 6)).toEqual({
-      code: '12345',
-      focusIndex: 5,
+  test('takes only the digits of a copied "Code: 1234-5678"', () => {
+    expect(spreadDigits(Array(8).fill(''), 0, 'Code: 1234-5678').boxes).toEqual([
+      '1', '2', '3', '4', '5', '6', '7', '8',
+    ]);
+  });
+
+  test('keeps earlier boxes, and a gap stays a gap', () => {
+    expect(spreadDigits(['1', '', '3', '', ''], 3, '45')).toEqual({
+      boxes: ['1', '', '3', '4', '5'],
+      focusIndex: 4,
     });
   });
 
-  test('overflow past the last box is dropped and focus clamps to the last box', () => {
-    expect(spreadCodeAcrossBoxes(['1', '2', '3', '4', '', ''], 4, '789XYZ', 6)).toEqual({
-      code: '123478',
+  test('digits past the last box are dropped and focus clamps to the last box', () => {
+    expect(spreadDigits(['1', '2', '3', '4', '', ''], 4, '789')).toEqual({
+      boxes: ['1', '2', '3', '4', '7', '8'],
       focusIndex: 5,
     });
   });
 
-  test('pasting over existing digits overwrites them', () => {
-    expect(spreadCodeAcrossBoxes(['9', '9', '9', '9', '9', '9'], 1, '00', 6)).toEqual({
-      code: '900999',
-      focusIndex: 3,
-    });
+  test('does not mutate the incoming boxes', () => {
+    const boxes = ['1', '', ''];
+    spreadDigits(boxes, 0, '456');
+    expect(boxes).toEqual(['1', '', '']);
+  });
+});
+
+describe('typeIntoBox (typing)', () => {
+  test('a digit fills the box and moves on', () => {
+    expect(typeIntoBox(['1', '', ''], 1, '2')).toEqual({ boxes: ['1', '2', ''], focusIndex: 2 });
   });
 
-  test('does not mutate the incoming chars', () => {
-    const chars = ['1', '', ''];
-    spreadCodeAcrossBoxes(chars, 0, '456', 3);
-    expect(chars).toEqual(['1', '', '']);
+  test('a digit replaces the box\'s one (it is selected)', () => {
+    expect(typeIntoBox(['1', '5', ''], 0, '2')).toEqual({ boxes: ['2', '5', ''], focusIndex: 1 });
+  });
+
+  test('two digits into box 0 (a short autofill) spread, not collapse', () => {
+    expect(typeIntoBox(['', '', ''], 0, '34')).toEqual({ boxes: ['3', '4', ''], focusIndex: 2 });
+  });
+
+  test('a letter is ignored', () => {
+    expect(typeIntoBox(['1', '', ''], 1, 'a')).toBeNull();
+  });
+
+  test('clearing a middle box leaves a gap, later digits stay put', () => {
+    expect(typeIntoBox(['1', '2', '3'], 1, '')).toEqual({ boxes: ['1', '', '3'], focusIndex: 1 });
+  });
+
+  test('a whole code spreads like a paste', () => {
+    expect(typeIntoBox(['', '', ''], 0, '987')).toEqual({ boxes: ['9', '8', '7'], focusIndex: 2 });
+  });
+});
+
+describe('resizeBoxes (another length)', () => {
+  test('keeps each digit in its place, a gap stays a gap', () => {
+    expect(resizeBoxes(['1', '', '3', '4'], 6)).toEqual(['1', '', '3', '4', '', '']);
+  });
+
+  test('drops the boxes past the new length', () => {
+    expect(resizeBoxes(['1', '2', '3', '4'], 2)).toEqual(['1', '2']);
   });
 });
 
@@ -59,4 +103,16 @@ describe('CodeInput rendering', () => {
     expect(inputs[0].attrs.maxLength).toBe('6');
     for (const box of inputs.slice(1)) expect(box.attrs.maxLength).toBe('1');
   });
+
+  test('labels each box "Digit N of L" by default', () => {
+    const html = render(CodeInput, { length: 8 });
+    expect(html).toContain('aria-label="Digit 1 of 8"');
+    expect(html).toContain('aria-label="Digit 8 of 8"');
+  });
+
+  test("labels each box with the app's digitLabel", () => {
+    const html = render(CodeInput, { length: 3, digitLabel: (p: number, l: number) => `Цифра ${p} из ${l}` });
+    expect(html).toContain('aria-label="Цифра 2 из 3"');
+    expect(html).not.toContain('Digit');
+  });
 });

package/src/components/__tests__/PasswordInput.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'vitest';
+import { PasswordInput } from '../PasswordInput';
+import { render } from './markup';
+
+/* The eye toggle names the action it does now: show while masked, hide while
+ * revealed (one string couldn't, so apps' translated label went stale). */
+describe('PasswordInput toggle label', () => {
+  test('uses showLabel while masked', () => {
+    const html = render(PasswordInput, { showLabel: 'Mostrar', hideLabel: 'Ocultar' });
+    expect(html).toContain('aria-label="Mostrar"');
+    expect(html).not.toContain('Ocultar');
+  });
+
+  test('uses hideLabel while revealed', () => {
+    const html = render(PasswordInput, { defaultVisible: true, showLabel: 'Mostrar', hideLabel: 'Ocultar' });
+    expect(html).toContain('aria-label="Ocultar"');
+    expect(html).not.toContain('Mostrar');
+  });
+});

package/src/components/__tests__/Select.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, test } from 'vitest';
+import { Select } from '../Select';
+import { render } from './markup';
+
+const OPTIONS = [
+  { value: 'en', label: 'English' },
+  { value: 'uk', label: 'Українська' },
+];
+
+/* The trigger has a name for screen readers even with no visible label (the
+ * language picker), not just the selected value. */
+describe('Select trigger name', () => {
+  test('takes accessibilityLabel', () => {
+    const html = render(Select, { options: OPTIONS, value: 'en', accessibilityLabel: 'Мова' });
+    expect(html).toContain('aria-label="Мова"');
+  });
+
+  test('falls back to the visible label', () => {
+    const html = render(Select, { options: OPTIONS, value: 'en', label: 'Language' });
+    expect(html).toContain('aria-label="Language"');
+  });
+});

package/src/internal/absoluteFill.ts

@@ -0,0 +1,11 @@
+// The plain style object to spread for an absolute fill. React Native 0.88
+// removed StyleSheet.absoluteFillObject (spreading it silently drops the
+// positioning), and older versions type StyleSheet.absoluteFill as a
+// registered id that can't be spread.
+export const absoluteFill = {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+} as const;