test(amount) : affichage groupé + maxLength sur le modèle

app/components/malio/input/InputAmount.test.ts

@@ -97,7 +97,7 @@ describe('MalioInputAmount', () => {
     await wrapper.get('input').setValue('12.5')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.5'])
-    expect(wrapper.get('input').element.value).toBe('12.5')
+    expect(wrapper.get('input').element.value).toBe('12,5')
   })
 
   it('accepts commas but normalizes them to dots', async () => {
@@ -106,7 +106,7 @@ describe('MalioInputAmount', () => {
     await wrapper.get('input').setValue('0012,345abc')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.34'])
-    expect(wrapper.get('input').element.value).toBe('12.34')
+    expect(wrapper.get('input').element.value).toBe('12,34')
   })
 
   it('normalizes a leading decimal separator', async () => {
@@ -115,7 +115,7 @@ describe('MalioInputAmount', () => {
     await wrapper.get('input').setValue(',5')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['0.5'])
-    expect(wrapper.get('input').element.value).toBe('0.5')
+    expect(wrapper.get('input').element.value).toBe('0,5')
   })
 
   it('keeps the normalized decimal value on blur', async () => {
@@ -126,7 +126,7 @@ describe('MalioInputAmount', () => {
     await input.trigger('blur')
 
     expect(wrapper.emitted('update:modelValue')).toEqual([['12.5']])
-    expect(input.element.value).toBe('12.5')
+    expect(input.element.value).toBe('12,5')
   })
 
   it('keeps integer values unchanged on blur', async () => {
@@ -230,4 +230,52 @@ describe('MalioInputAmount', () => {
     expect(msg.exists()).toBe(true)
     expect(msg.classes()).not.toContain('min-h-[1rem]')
   })
+
+  it('groupe les milliers à l\'affichage tout en émettant la valeur propre', async () => {
+    const wrapper = mountInputAmount({modelValue: ''})
+
+    await wrapper.get('input').setValue('1234567')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['1234567'])
+    expect(wrapper.get('input').element.value).toBe('1 234 567')
+  })
+
+  it('groupe un grand montant avec décimales', async () => {
+    const wrapper = mountInputAmount({modelValue: ''})
+
+    await wrapper.get('input').setValue('1234567,89')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['1234567.89'])
+    expect(wrapper.get('input').element.value).toBe('1 234 567,89')
+  })
+
+  it('formate la valeur initiale (modelValue) en groupé', () => {
+    const wrapper = mountInputAmount({modelValue: '1234567.89'})
+
+    expect(wrapper.get('input').element.value).toBe('1 234 567,89')
+  })
+
+  it('maxLength borne la longueur du modèle : un dépassement est ignoré', async () => {
+    const wrapper = mountInputAmount({modelValue: '', maxLength: 4})
+
+    await wrapper.get('input').setValue('12345')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.get('input').element.value).toBe('')
+  })
+
+  it('maxLength autorise une valeur à la limite', async () => {
+    const wrapper = mountInputAmount({modelValue: '', maxLength: 4})
+
+    await wrapper.get('input').setValue('1234')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['1234'])
+    expect(wrapper.get('input').element.value).toBe('1 234')
+  })
+
+  it('n\'a plus d\'attribut maxlength natif sur l\'input', () => {
+    const wrapper = mountInputAmount({maxLength: 4})
+
+    expect(wrapper.get('input').attributes('maxlength')).toBeUndefined()
+  })
 })