From ea47223566d37bccf7b4edf4b7296e265b0ca8b7 Mon Sep 17 00:00:00 2001
From: Alexander Shabunevich <loonar@gmail.com>
Date: Sun, 29 Jan 2023 16:27:58 +0300
Subject: [PATCH] Fix bug with onMaska detail payload

---
 src/mask-input.ts       |  11 ++-
 test/mask-input.test.ts | 166 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 171 insertions(+), 6 deletions(-)

diff --git a/src/mask-input.ts b/src/mask-input.ts
index 7d643dd..53c1c0e 100644
--- a/src/mask-input.ts
+++ b/src/mask-input.ts
@@ -142,13 +142,12 @@ export class MaskInput {
       value = this.options.preProcess(value)
     }
 
-    value = mask.masked(value)
+    const masked = mask.masked(value)
+    const unmasked = mask.unmasked(mask.isEager() ? masked : value)
+    const completed = mask.completed(value)
+    const detail = { masked, unmasked, completed }
 
-    const detail = {
-      masked: mask.masked(value),
-      unmasked: mask.unmasked(value),
-      completed: mask.completed(value)
-    }
+    value = masked
 
     if (this.options.postProcess != null) {
       value = this.options.postProcess(value)
diff --git a/test/mask-input.test.ts b/test/mask-input.test.ts
index 009534c..d4562e6 100644
--- a/test/mask-input.test.ts
+++ b/test/mask-input.test.ts
@@ -347,6 +347,172 @@ describe('test hooks', () => {
   })
 })
 
+describe('test callback', () => {
+  beforeEach<HooksTestContext>((context) => {
+    document.body.innerHTML = `<input id="input" data-maska="+1 ###">`
+    input = <HTMLInputElement>document.getElementById('input')
+
+    const hooks = {
+      onMaska: (value) => value,
+    }
+
+    context.onMaska = vi.spyOn(hooks, 'onMaska')
+
+    new MaskInput(input, {
+      onMaska: context.onMaska as any,
+    })
+  })
+
+  test<HooksTestContext>('input 1', async (context) => {
+    await user.type(input, '1')
+    expect(input).toHaveValue('+1')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: false,
+      masked: '+1',
+      unmasked: ''
+    })
+  })
+
+  test<HooksTestContext>('input 12', async (context) => {
+    await user.type(input, '12')
+    expect(input).toHaveValue('+1 2')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: false,
+      masked: '+1 2',
+      unmasked: '2'
+    })
+  })
+
+  test<HooksTestContext>('input 2', async (context) => {
+    await user.type(input, '2')
+    expect(input).toHaveValue('+1 2')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: false,
+      masked: '+1 2',
+      unmasked: '2'
+    })
+  })
+
+  test<HooksTestContext>('input 23', async (context) => {
+    await user.type(input, '23')
+    expect(input).toHaveValue('+1 23')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: false,
+      masked: '+1 23',
+      unmasked: '23'
+    })
+  })
+
+  test<HooksTestContext>('input 234', async (context) => {
+    await user.type(input, '234')
+    expect(input).toHaveValue('+1 234')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: true,
+      masked: '+1 234',
+      unmasked: '234'
+    })
+  })
+
+  test<HooksTestContext>('input 2345', async (context) => {
+    await user.type(input, '2345')
+    expect(input).toHaveValue('+1 234')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: true,
+      masked: '+1 234',
+      unmasked: '234'
+    })
+  })
+})
+
+describe('test eager callback', () => {
+  beforeEach<HooksTestContext>((context) => {
+    document.body.innerHTML = `<input id="input" data-maska="+1 ###" data-maska-eager>`
+    input = <HTMLInputElement>document.getElementById('input')
+
+    const hooks = {
+      onMaska: (value) => value,
+    }
+
+    context.onMaska = vi.spyOn(hooks, 'onMaska')
+
+    new MaskInput(input, {
+      onMaska: context.onMaska as any,
+    })
+  })
+
+  test<HooksTestContext>('input 1', async (context) => {
+    await user.type(input, '1')
+    expect(input).toHaveValue('+1 1')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: false,
+      masked: '+1 1',
+      unmasked: '1'
+    })
+  })
+
+  test<HooksTestContext>('input 12', async (context) => {
+    await user.type(input, '12')
+    expect(input).toHaveValue('+1 12')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: false,
+      masked: '+1 12',
+      unmasked: '12'
+    })
+  })
+
+  test<HooksTestContext>('input 2', async (context) => {
+    await user.type(input, '2')
+    expect(input).toHaveValue('+1 2')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: false,
+      masked: '+1 2',
+      unmasked: '2'
+    })
+  })
+
+  test<HooksTestContext>('input 23', async (context) => {
+    await user.type(input, '23')
+    expect(input).toHaveValue('+1 23')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: false,
+      masked: '+1 23',
+      unmasked: '23'
+    })
+  })
+
+  test<HooksTestContext>('input 234', async (context) => {
+    await user.type(input, '234')
+    expect(input).toHaveValue('+1 234')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: true,
+      masked: '+1 234',
+      unmasked: '234'
+    })
+  })
+
+  test<HooksTestContext>('input 2345', async (context) => {
+    await user.type(input, '2345')
+    expect(input).toHaveValue('+1 234')
+
+    expect(context.onMaska).toHaveBeenLastCalledWith({
+      completed: true,
+      masked: '+1 234',
+      unmasked: '234'
+    })
+  })
+})
+
 describe('test data-attr', () => {
   function prepareMaskWithHtml(html: string) {
     document.body.innerHTML = html