From bdca9490eedc6e5b6e263ffac474044f4d21f6da Mon Sep 17 00:00:00 2001 From: tristan Date: Wed, 3 Jun 2026 15:49:56 +0200 Subject: [PATCH] =?UTF-8?q?test(ui)=20:=20couvre=20ic=C3=B4ne/label=20read?= =?UTF-8?q?only=20vide=20sur=20la=20famille=20champs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.8 (1M context) --- app/components/malio/date/Date.test.ts | 5 +++++ app/components/malio/input/InputAmount.test.ts | 5 +++++ .../malio/input/InputAutocomplete.test.ts | 5 +++++ app/components/malio/input/InputPassword.test.ts | 5 +++++ app/components/malio/input/InputPhone.test.ts | 15 +++++++++++++-- app/components/malio/input/InputUpload.test.ts | 5 +++++ app/components/malio/time/TimePicker.test.ts | 5 +++++ 7 files changed, 43 insertions(+), 2 deletions(-) diff --git a/app/components/malio/date/Date.test.ts b/app/components/malio/date/Date.test.ts index 9c30a1b..25c6f30 100644 --- a/app/components/malio/date/Date.test.ts +++ b/app/components/malio/date/Date.test.ts @@ -201,6 +201,11 @@ describe('MalioDate', () => { expect(label.classes()).not.toContain('text-m-primary') }) + it('readonly vide : icône calendrier en text-m-muted', () => { + const wrapper = mountDate({readonly: true, label: 'Date'}) + expect(wrapper.get('[data-test="calendar-icon"]').classes()).toContain('text-m-muted') + }) + it('readonly rempli : label et icône en noir, bordure noire', () => { const wrapper = mountDate({readonly: true, label: 'Date', modelValue: '2026-05-19'}) const input = wrapper.get('[data-test="date-input"]') diff --git a/app/components/malio/input/InputAmount.test.ts b/app/components/malio/input/InputAmount.test.ts index 8085599..8eced10 100644 --- a/app/components/malio/input/InputAmount.test.ts +++ b/app/components/malio/input/InputAmount.test.ts @@ -200,6 +200,11 @@ describe('MalioInputAmount', () => { expect(wrapper.get('label').classes()).toContain('text-m-muted') }) + it('readonly vide : icône en text-m-muted', () => { + const wrapper = mountInputAmount({label: 'Champ', readonly: true}) + expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted') + }) + it('readonly rempli : label noir et icône noire', () => { const wrapper = mountInputAmount({label: 'Champ', readonly: true, modelValue: '12.50'}) expect(wrapper.get('label').classes()).toContain('text-black') diff --git a/app/components/malio/input/InputAutocomplete.test.ts b/app/components/malio/input/InputAutocomplete.test.ts index 596896e..b5247b4 100644 --- a/app/components/malio/input/InputAutocomplete.test.ts +++ b/app/components/malio/input/InputAutocomplete.test.ts @@ -532,6 +532,11 @@ describe('MalioInputAutocomplete', () => { expect(wrapper.get('label').classes()).toContain('text-m-muted') }) + it('readonly vide : chevron en text-m-muted', () => { + const wrapper = mountComponent({label: 'Champ', readonly: true}) + expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted') + }) + it('readonly rempli : label noir et icône noire', () => { const wrapper = mountComponent({label: 'Champ', readonly: true, modelValue: 'fr', options, iconName: 'mdi:magnify', iconPosition: 'left'}) expect(wrapper.get('label').classes()).toContain('text-black') diff --git a/app/components/malio/input/InputPassword.test.ts b/app/components/malio/input/InputPassword.test.ts index dac4f20..4610ef5 100644 --- a/app/components/malio/input/InputPassword.test.ts +++ b/app/components/malio/input/InputPassword.test.ts @@ -211,6 +211,11 @@ describe('MalioInputPassword', () => { expect(wrapper.get('label').classes()).toContain('text-m-muted') }) + it('readonly vide : icône en text-m-muted', () => { + const wrapper = mountComponent({label: 'Champ', readonly: true}) + expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted') + }) + it('readonly rempli : label noir et icône noire', () => { const wrapper = mountComponent({label: 'Champ', readonly: true, modelValue: 'secret'}) expect(wrapper.get('label').classes()).toContain('text-black') diff --git a/app/components/malio/input/InputPhone.test.ts b/app/components/malio/input/InputPhone.test.ts index b5903b4..f6f6a07 100644 --- a/app/components/malio/input/InputPhone.test.ts +++ b/app/components/malio/input/InputPhone.test.ts @@ -296,12 +296,23 @@ describe('MalioInputPhone', () => { }) it('readonly : pas d\'apparence désactivée (pas opacity-40)', () => { - const wrapper = mountComponent({label: 'Tel', readonly: true}) - expect(wrapper.get('input').classes()).not.toContain('opacity-40') + const wrapper = mountComponent({label: 'Tel', addable: true, readonly: true}) + // opacity-40 was only ever applied to the add button, not the input + expect(wrapper.get('[data-test="add-button"]').classes()).not.toContain('opacity-40') // and the input is not natively disabled in readonly: expect(wrapper.get('input').attributes('disabled')).toBeUndefined() }) + it('readonly vide : label en text-m-muted', () => { + const wrapper = mountComponent({label: 'Tel', readonly: true}) + expect(wrapper.get('label').classes()).toContain('text-m-muted') + }) + + it('readonly rempli : label en text-black', () => { + const wrapper = mountComponent({label: 'Tel', readonly: true, modelValue: '+33612345678'}) + expect(wrapper.get('label').classes()).toContain('text-black') + }) + it('renders the default add icon (mdi:plus)', () => { const wrapper = mountComponent({addable: true}) diff --git a/app/components/malio/input/InputUpload.test.ts b/app/components/malio/input/InputUpload.test.ts index 4b9cdc3..91ccd32 100644 --- a/app/components/malio/input/InputUpload.test.ts +++ b/app/components/malio/input/InputUpload.test.ts @@ -222,6 +222,11 @@ describe('MalioInputUpload', () => { expect(label.classes()).toContain('text-m-muted') }) + it('readonly vide : icône en text-m-muted', () => { + const wrapper = mountComponent({label: 'Champ', readonly: true}) + expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted') + }) + it('readonly rempli : label noir + icône noire', () => { const wrapper = mountComponent({label: 'Champ', readonly: true, modelValue: 'fichier.pdf'}) expect(wrapper.get('label').classes()).toContain('text-black') diff --git a/app/components/malio/time/TimePicker.test.ts b/app/components/malio/time/TimePicker.test.ts index 76bb390..3ce2926 100644 --- a/app/components/malio/time/TimePicker.test.ts +++ b/app/components/malio/time/TimePicker.test.ts @@ -105,6 +105,11 @@ describe('MalioTimePicker', () => { expect(label.classes()).not.toContain('text-m-primary') }) + it('readonly vide : icône horloge en text-m-muted', () => { + const wrapper = mountPicker({readonly: true, label: 'Heure'}) + expect(wrapper.get('[data-test="clock-icon"]').classes()).toContain('text-m-muted') + }) + it('readonly rempli : label et icône en noir, bordure noire', () => { const wrapper = mountPicker({readonly: true, label: 'Heure', modelValue: '14:30'}) const input = wrapper.get('[data-test="time-field"]')