test: additional tests for cursor position

test/mask-input.test.ts

@@ -138,20 +138,16 @@ describe('test hooks', () => {
     const hooks = {
       onMaska: (value) => value,
       preProcess: (value: string) => value.replace(/[$,]/g, ''),
-      postProcess: (value: string) => {
-        if (!value) return ''
+      postProcess: val => {
+        if (!val) return ''
 
-        const parts = value.split('.')
-        const sub = parts.length === 1 ? 3 : 2 - parts[1].length
-        const result = Intl.NumberFormat('en-US', {
+        const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)
+
+        return Intl.NumberFormat('en-US', {
           style: 'currency',
           currency: 'USD'
-        })
-          .formatToParts(Number(value))
-          .map((v) => v.value)
-          .join('')
-
-        return result.substring(0, result.length - sub)
+        }).format(val)
+          .slice(0, sub ? -sub : undefined)
       }
     }
 
@@ -345,6 +341,19 @@ describe('test hooks', () => {
       unmasked: '1234'
     })
   })
+
+  test('input 12345678, delete 6 and check cursor position', async () => {
+    await user.type(input, '12345678')
+    expect(input).toHaveValue('$12,345,678')
+
+    await user.type(input, '{ArrowLeft}{ArrowLeft}{backspace}')
+    expect(input).toHaveValue('$1,234,578')
+    expect(input.selectionStart).toBe(8)
+
+    await user.type(input, '6', { initialSelectionStart: 8 })
+    expect(input).toHaveValue('$12,345,678')
+    expect(input.selectionStart).toBe(9)
+  })
 })
 
 describe('test callback', () => {
@@ -2067,3 +2076,31 @@ describe('Dynamic eager mask', () => {
     expect(input).toHaveValue('1--2')
   })
 })
+
+describe('Cursor position eager mask', () => {
+  beforeAll(() => {
+    input = prepareInput({ mask: '##-##', eager: true })
+  })
+
+  afterEach(async () => {
+    await user.clear(input)
+  })
+
+  test('input 123 {ArrowLeft}×2 ', async () => {
+    await user.type(input, '123{ArrowLeft}{ArrowLeft}')
+    expect(input).toHaveValue('12-3')
+    expect(input.selectionStart).toBe(2)
+  })
+
+  test('input 123 {ArrowLeft}×2 0', async () => {
+    await user.type(input, '123{ArrowLeft}{ArrowLeft}0')
+    expect(input).toHaveValue('12-03')
+    expect(input.selectionStart).toBe(4)
+  })
+
+  test('input 123 {ArrowLeft} {space}', async () => {
+    await user.type(input, '123{ArrowLeft}{space}')
+    expect(input).toHaveValue('12-3')
+    expect(input.selectionStart).toBe(3)
+  })
+})

test/mask.test.ts

@@ -351,10 +351,13 @@ test('(#) 3## eager mask', () => {
   const mask = new Mask({ mask: '(#) 3##', eager: true })
 
   expect(mask.masked('1')).toBe('(1) 3')
+  expect(mask.masked('1 ')).toBe('(1) 3')
   expect(mask.masked('12')).toBe('(1) 32')
+  expect(mask.masked('1 2')).toBe('(1) 32')
   expect(mask.masked('123')).toBe('(1) 323')
   expect(mask.masked('1234')).toBe('(1) 323')
   expect(mask.masked('13')).toBe('(1) 3')
+  expect(mask.masked('1 3')).toBe('(1) 3')
   expect(mask.masked('134')).toBe('(1) 34')
   expect(mask.masked('(1) 23')).toBe('(1) 323')
   expect(mask.masked('(1) 34')).toBe('(1) 34')
@@ -396,13 +399,18 @@ test('(1) 2## eager mask', () => {
   expect(mask.masked('1')).toBe('(1) 2')
   expect(mask.masked('1 ')).toBe('(1) 2')
   expect(mask.masked('12')).toBe('(1) 2')
+  expect(mask.masked('1 2')).toBe('(1) 2')
   expect(mask.masked('123')).toBe('(1) 23')
+  expect(mask.masked('1 23')).toBe('(1) 23')
+  expect(mask.masked('12 3')).toBe('(1) 23')
   expect(mask.masked('13')).toBe('(1) 23')
+  expect(mask.masked('134')).toBe('(1) 234')
   expect(mask.masked('(1) 23')).toBe('(1) 23')
   expect(mask.masked('(1) 34')).toBe('(1) 234')
   expect(mask.masked('2')).toBe('(1) 2')
   expect(mask.masked('23')).toBe('(1) 23')
   expect(mask.masked('3')).toBe('(1) 23')
+  expect(mask.masked('34')).toBe('(1) 234')
 
   expect(mask.unmasked('1')).toBe('')
   expect(mask.unmasked('12')).toBe('')
@@ -415,9 +423,11 @@ test('12## mask', () => {
 
   expect(mask.masked('.')).toBe('12')
   expect(mask.masked('1')).toBe('1')
+  expect(mask.masked('1 ')).toBe('12')
   expect(mask.masked('2')).toBe('12')
   expect(mask.masked('3')).toBe('123')
   expect(mask.masked('12')).toBe('12')
+  expect(mask.masked('12 ')).toBe('12')
   expect(mask.masked('123')).toBe('123')
   expect(mask.masked('13')).toBe('123')
   expect(mask.masked('134')).toBe('1234')
@@ -442,6 +452,7 @@ test('12## eager mask', () => {
   expect(mask.masked('123')).toBe('123')
   expect(mask.masked('13')).toBe('123')
   expect(mask.masked('134')).toBe('1234')
+  expect(mask.masked('34')).toBe('1234')
 
   expect(mask.unmasked('1')).toBe('')
   expect(mask.unmasked('12')).toBe('')