From 66c9f5d9340bcfb700bf9cc20c82bd0ad6d30999 Mon Sep 17 00:00:00 2001 From: tristan Date: Tue, 9 Jun 2026 12:54:22 +0200 Subject: [PATCH] test(email) : couvre le bouton + d'ajout de MalioInputEmail --- app/components/malio/input/InputEmail.test.ts | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/app/components/malio/input/InputEmail.test.ts b/app/components/malio/input/InputEmail.test.ts index 75e7b94..1265678 100644 --- a/app/components/malio/input/InputEmail.test.ts +++ b/app/components/malio/input/InputEmail.test.ts @@ -24,6 +24,9 @@ type InputEmailProps = { iconSize?: string | number iconColor?: string lowercase?: boolean + addable?: boolean + addIconName?: string + addButtonLabel?: string reserveMessageSpace?: boolean } @@ -315,4 +318,78 @@ describe('MalioInputEmail', () => { expect(msg.exists()).toBe(true) expect(msg.classes()).not.toContain('min-h-[1rem]') }) + + it('does not render add button by default', () => { + const wrapper = mountComponent() + + expect(wrapper.find('[data-test="add-button"]').exists()).toBe(false) + }) + + it('renders add button when addable is true', () => { + const wrapper = mountComponent({addable: true}) + + expect(wrapper.find('[data-test="add-button"]').exists()).toBe(true) + }) + + it('emits add event when add button is clicked', async () => { + const wrapper = mountComponent({addable: true}) + + await wrapper.get('[data-test="add-button"]').trigger('click') + + expect(wrapper.emitted('add')).toHaveLength(1) + }) + + it('does not emit add when disabled', async () => { + const wrapper = mountComponent({addable: true, disabled: true}) + + await wrapper.get('[data-test="add-button"]').trigger('click') + + expect(wrapper.emitted('add')).toBeUndefined() + }) + + it('does not emit add when readonly', async () => { + const wrapper = mountComponent({addable: true, readonly: true}) + + await wrapper.get('[data-test="add-button"]').trigger('click') + + expect(wrapper.emitted('add')).toBeUndefined() + }) + + it('disables add button when disabled', () => { + const wrapper = mountComponent({addable: true, disabled: true}) + + expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined() + }) + + it('add button is not natively disabled in readonly (onAdd guard blocks the action)', () => { + const wrapper = mountComponent({addable: true, readonly: true}) + + expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeUndefined() + }) + + it('moves the email icon to the left automatically when addable', () => { + const wrapper = mountComponent({addable: true}) + + const icon = wrapper.get('[data-test="icon"]') + expect(icon.classes()).toContain('left-[10px]') + expect(icon.classes()).not.toContain('right-[10px]') + }) + + it('keeps the email icon on the right when addable is false', () => { + const wrapper = mountComponent() + + expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]') + }) + + it('uses the default add button aria-label', () => { + const wrapper = mountComponent({addable: true}) + + expect(wrapper.get('[data-test="add-button"]').attributes('aria-label')).toBe('Ajouter une adresse email') + }) + + it('allows overriding the add button aria-label', () => { + const wrapper = mountComponent({addable: true, addButtonLabel: 'Ajouter un destinataire'}) + + expect(wrapper.get('[data-test="add-button"]').attributes('aria-label')).toBe('Ajouter un destinataire') + }) })